screen resolution

They have: 117 posts

Joined: Feb 2000

Hello,

My screen resolution is 800x600. I developed a site which looks very nice using this resolution (my personal opinion Smiling). But when viewed at 1024x768 it does not look nearly as good. Is there any "development tricks" for developing pages that will look basically the same regardless of the screen resolution of the viewer? My site is http://www.jproscenium.org
Thanks for any insight.

Bob

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

Remove the frames as they can be unpredictable and make sites look old & tired IMO. Your best bet is to use a fixed tabel layout so you can be sure that the layout will look the same whatever resolution, except that at larger res there'll be more whitespace.

Julia - if life was meant to be easy Michael Angelo would have painted the floor....

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Your main problem here seems to be the centre column which isn't lining up as well at higher reslutions.

Quick Fix The main problem here seems to be the alignment of your images down the centre of the page. The "2002-2003 shows" graphic is in a table cell that's aligned right - it would proabably look better if that was aligned to the center. That might solve a lot of your problems. Also put the top header graphic in the same table column as those other centre graphics. That way all three of them will align down the center of the page

A Better Way If you want things to look the same regardless of resolution you should use a fixed-width table to contain your layout as the Webmistress said. Another option would be to use a flexible width layout, with the table width set to 100%. In your case this main table would contain three columns - the right and left columns would have set widths while the centre one would have no widdth attribute which would allow it to scale depending on the user's resolution.

(you've got some really odd things going on in this code here. You might want to re-do some of this. Seems like you've got a lot of redundant table cells and javascripts... but you'd know better than I would why those things are there. Also make sure to put height, width, and alt attributes in your image tags).

They have: 21 posts

Joined: Oct 2000

Always use relative units. %'s for widths, heights, etc and em for fonts.

If you must use fixed units, then I like to center the main body so that in higher resolutions, there is a nice uniform amount of whitespace on both sides.

Supermod @ CodingForums.com

They have: 117 posts

Joined: Feb 2000

Webmistress, Megan, jkd,

Thanks for your quick replies! I've implemented some of your suggestions, which I think have helped already. I'll keep working to improve it more.

Webmistress: question about your comment about the frames. I've heard that before, that frames are "old" and shouldn't really be used. I agree that they can be overdone, but I actually like it used here because I think it makes for very easy site navigation. Anywhere the user goes on the site, they can easily navigate back, or anywhere else using the links in the left frame. Without using frames, I'd have to code some sort of navigation bar on each page throughout the site to allow for the same ease of navigation, unless I'm missing something. Any thoughts on providing this navigation if I were to get rid of the frames, would be appreciated!

Thanks again to everyone for their help!

Bob
[email protected]

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

What you could do is create a tabled layout as we discussed above and put the top area with the logo and left side navigation into a server-side include (SSI). That way you could have the same navbar on every page but wouldn't have to change every page every time you wanted to change the navbar. It would all be in one file. The same could be done for things you wanted on the right & bottom of every page. This is how I do my sites.

They have: 117 posts

Joined: Feb 2000

Megan,

That was simple enough - shoulda thought of that myself! Thanks for all your help!

Bob

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.