A Web Designer's Nightmare ---

They have: 54 posts

Joined: Mar 2000

Resolution! 640 x 480, 800 x 600, and now 1024 x 768 and 1152 x 864!

How the heck am I supposed to design pages to look good in all of those!

What have been your solutions?

disaster-master's picture

She has: 2,154 posts

Joined: May 2001

Go for the 800 X 600 and don't let it worry you too much. That is what I do. Or you could stick to %'s. I think someone here once said keep your pages under 770 width. Anyone disagree?

DM

They have: 54 posts

Joined: Mar 2000

...and then there's the different sized screens! lol! 770 would be too big for the 15 inchers, but just right for the 800 x 600. Ugh! I have a 17, 19, and 21", but also test in 15". ...and, of course, the Macs and PCs. I'm going nutso here. There's always someone complaining and it's usually someone with an outdated "Saturday Night Special" computer.

disaster-master's picture

She has: 2,154 posts

Joined: May 2001

ever heard of iny-minney-miny-mo?
:roll:

They have: 453 posts

Joined: Jan 1999

"There's always someone complaining and it's usually someone with an outdated "Saturday Night Special" computer."

Almost all sites look bad on my outdated 4800x1200 desktop, 1600x1200 makes it better, but not much.

The real problem is:
HTML was designed as a layout description language.
And that would have worked for all resolutions and screen sizes, but someone decided to use it for design.

Agreed, I can make sites look fancier by placing all elements on the "perfect position", but they'd be far more usable if they'd stick to the "old"-system.

If you really want your site good looking an (most) systems,
create your templates (you have them don't you ?) in the common size (640x480,800x600, 1024x768,1600x1200 and don't forget most "real" X-terminals are "square", e.g. 1200x1200) and generate your content into each of them.

McPhilly's picture

They have: 62 posts

Joined: Aug 2001

Who will your viewer be ?

Most people know will run on 800x600 or higher. Screen sizes, hmm.. just aim for the general. I try to make my site look good in 1024 and 800. If someone complains, tuff, they should update there monitor or PC ?

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Well, not everyone has the resources to update their monitor. What you really should do is check your site stats and see what resolutions most of your visitors are using. Then design something that will work for as many of them as possible - it is very difficult to create something that will work at the smallest resolutions as well as the biggest ones.

I usually do flex width tables, which will work from 640 x 480 to 1024. They tend to stretch too much at resolutions higher than that, I usually have very few visitors running at such a high res, and I think that most people who use really high resolutions don't maximize their browsers.

Now, another option, which I haven't tried yet, is to use a flex width table with the css maxwidth property, which would allow the table to expand up until a certain width after which it would become fixed width. I'll have to give that a try tonight if I remember.

mjames's picture

They have: 2,064 posts

Joined: Dec 1999

My site's width is 650 pixels... and it still has the dreaded horizontal scroll bar on 640x480 resolutions (that is sickening!). As it has been said, make sure your site looks perfect in 800x600 generally. 1024x768 is the second most popular resolution right now, so it should look good in that, too. Don't worry about high ones like 1600x1200 - just try to meet the needs your primary audience, never will every single visitors be pleased!

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Quote: Originally posted by Megan
Now, another option, which I haven't tried yet, is to use a flex width table with the css maxwidth property, which would allow the table to expand up until a certain width after which it would become fixed width. I'll have to give that a try tonight if I remember.

I just tried this out - it's max-width actually, and it works in NS6/mozilla but not IE 5.5 - does it work in IE 6? Anyone know? Definitely a good technique to use - I'm finding that resolution stats are really starting to spread out.

Mark Hensler's picture

He has: 4,048 posts

Joined: Aug 2000

Quote: Originally posted by Megan
I usually do flex width tables, which will work from 640 x 480 to 1024. They tend to stretch too much at resolutions higher than that, I usually have very few visitors running at such a high res, and I think that most people who use really high resolutions don't maximize their browsers

My res is 1600x1280. I use a javascript to set my browsers to 1024x768. My cousin also has a res of 1600x768, and I don't beleive he maximizes.

Just a little FYI.

Mark Hensler
If there is no answer on Google, then there is no question.

Keegan's picture

They have: 300 posts

Joined: Aug 2001

Most of this thread has been about html, but I have found with enough work on a particular layout you can show the site off at 640x480, and 1280x1024. Graphics can add to the higher res with a large low opacity bg (Large meaning 1600x1280, usually 9kbs but it cover the higher res.
A site I made last year has this going on, edenatlanta.com It works in 800x600 and 1280x1024, I think it even will do 1600....

That is the hardest part though, making your layout work with the html. Usually takes me about 2 hours to get a manual slice out of photoshop but it kicks holy butt on fireworks imho. I like it pixel by pixel (Thats what she said) hehhehee

davidjaymz's picture

He has: 193 posts

Joined: Jul 2001

Okay guys. I logon here probably 2-3 times a day reading all the posts and such, and a couple of days ago keegan2 appeared... I just want to say wow... this guy has given out som uch good advice in so little time... just wants to say thanks... I've gleamed some good advice from what you've said...
DavidJaymz

p.s. if you want the pic in your sig to work you need to add to your link (But use square brackets)

DavidJaymz

Keegan's picture

They have: 300 posts

Joined: Aug 2001

Hey thanks!

I have done a lot of non-profit work, and while most of it has helped me grow over time, speed is what I am about now. Sometimes I will throw hours and hours into something, but more often than not the faster I can do something and not look back, the more right on it is.

Everything I know about computers is self taught, read somewhere, or tried until I wanted to throw the computer through a window.

Learned early on it's about the tools.

A good tip to anyone stuck on anything about computers should follow at least these three tips.

1 If there is something wrong, it is always, I mean always the simplest thing. (Finding it is the problem) read below for number two.

2 Someone somewhere has had the very same problem, went insane over it, nearly killed someone over it, almost barfed over it, dented a car over it, caused a fight over it, damaged a computer over it, but someone no matter what it is has made a web page about it. (Learn to search) tools, number three.

3 If something does not make sense, something has just frustrated you to no end, always, and I mean always remember that there is a web page with either a software tool you need, or a guide that is indispensable.

In closing about my tips section,

KNOW YOUR FAVORITES!, get cozy with them, update them, and best of all give the webmasters feedback, register to their forums, and post. Its the least we can do.

K

p.s. It is a gif and for some reason I cannot get it to display. I believe it is enclosed correctly with brackets but I will check it based on your suggestion again. Thanks!

Keegan's picture

They have: 300 posts

Joined: Aug 2001

The text in the signature field of my current profile is exactly this.

<img src="http://www.kilclinefuneralhome.com/wf_posts/keegan.gif" alt="" class="bb-image" />'

Keegan's picture

They have: 300 posts

Joined: Aug 2001

Interesting, it will display the gif in a message, but not on my profile. Me thinks I see a crop circle forming in my backyard! AAHHH!!!!!!

tmay's picture

They have: 75 posts

Joined: Sep 2001

These boards usually have the option to allow pictures in sigs or not. The admins here may have it disabled.

openmind's picture

He has: 945 posts

Joined: Aug 2001

I'm no expert but well over 80% of my visitors use 800 x 600 monitors.....

They have: 9 posts

Joined: Sep 2001

Alot of times you can explain this to the client and have them pay the extra bit to design two pages one for 800* one for 1024*

then just implement a detect script that sends the user to the site designed for there broswer size.

Ill do my sig later

They have: 5 posts

Joined: Sep 2001

As stated above, 800x600 and 1024x768 are the 2 big resolutions being used...you can almost cut it right down the middle. Ultra high and ultra low res account for a small slice of the pie and people at these resolutions expect to scroll or squint at web pages. Its probably best to design for 800x600 width (760 x 400 browser window OR 770 x 418 with margins removed via body tag additions) and design for expansion to 1024x768. Keep in mind that when expanding using percentages, its a good idea to keep one of the axis constant. (ie...either expand vertically or horizontally but not both). It is possible to build a workable page that expands and contracts all the way down to 640x480 but probably not necessary. I wouldnt be too concerned with resolution that low.

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.