Screen Size for Web Site Design?

[Kal]

Calling all designers out there - I am redesigning my web site and would like to know: what screen size do you generally design for? Is 800 x 600 still the standard or is it better to design for 1024 x 768 pixels? The latter is my default screen size, but wasn't sure if I should stick with that or accommodate users with smaller screen settings.

If I design for the larger size, persons with smaller settings will just have to scroll, right? Or will it have more ugly consequences? (I'll test this when I'm done, just wanted to get some initial feedback). Thanks

[Advisor]

I don't design any more, but personally I like sites that look good at all resolutions. Those "liquid" kinda designs.

Jill

[ihelpyou]

The majority of my visitors still use 800x600 resolution so I would think you make sure it looks good at that. I hate when I have to scroll to the right. Many sites you have to do that, including Yahoo's own front page! sheesh.

[MazY]

As much as it pains me - it's still 800x600!

[Kal]

Thanks all. Have done the 800 x 600 thang.

[kneelsit]

Hi Kal,

If you use tables on all your pages and set them at percentages it should be o.k. for either the medium, large or small screen
resolutions. But still best to check first before you go to far.

Good luck :)

[Sharon & Roy]

Hi Kal,

Our advice is to always keep all content within 750 pixels wide (to accomodate the 800x600 resolution) and to use percentages in your width settings (i.e. width=100% and NOT width=750)

[pageoneresults]

Review these stats from Chuck Upsdell. You might find it rather interesting and informative!

Browser Display Issues (http://www.upsdell.com/BrowserNews/res_design.htm#d05)

Excerpt...
VGA: a 640x480 VGA monitor offers, at best, about 628x374 pixels. Many people have such monitors.

XGA: an 800x600 XGA monitor offers, at best, about 788x494 pixels. A bit more than half of typical users have such monitors.

SVGA: a growing minority of users have higher resolution monitors.
w3schools (http://www.w3schools.com/browsers/browsers_stats.asp) reports these numbers:

As of 01.02.2002

39% - 1024x768 or more
52% - 800x600
04% - 640x480
03% - Other or Unknown

[Blue]

Yup!

800x600 minimum is the standard up to this point in time. However, IMHO Jill has it right, in that sites that stretch to fit the screen are the most convenient for everybody.

And pageone is certainly correct in that you always design for slightly fewer pixels than your target to allow for scrollbars and such.

[crifer]

There is a little problem with stretch pages, yes it have some advantages, but if you don't think about it the text rows can get very long and you can have trouble go to next line or you get tired reading. One line should not exceed 65 letters according to Jakob Nielsen (http://www.useit.com). Another problem is if the user have high resolution and you design the page with stretch in 640x400, the page can "split" and you lose the overall impression.

I design my pages for 800x600 with fixed width, you can go as far as 780 pix but can have problem with the scrollbar. I use 760 pix. I really recommend reading Designing web usability by jakob nielsen. I have learn alot from that book that is really usefull and true. Alot of what he write and show example of you notice when you surf the web and searching for info. It is as much important as designing the page for search engines.

[pageoneresults]

There is really only one or two layouts that I've seen that work well with the table setting of percentage whether it be 100%, 90%, 80%, etc. That layout incorporates top, left and right navigation elements. The content is usually inbetween the left and right navigation.

The other method I've seen has to do with tiling backgrounds but a fixed table width for the content. Tables are usually centered or left justified and the tiling background extends to the right or the right and left depending on table position.

Crifer is correct in the text readability issue. When I'm browsing on the Mac at extremely high resolution, those sites that have the 100% table setting become very difficult to read because the paragraphs seem to be a mile long.

I think fixed widths are the predominant design choice amongst web site developers. If you can design one with table percentages and have it work on all platforms at all resolutions than you've planned well.

There are just too many damn user settings out there that can destroy a well planned web site!

Here is an example of the left justified table concept with a tiling background. This one has a fixed table width of 736 pixels and is positioned at left.

Fleming Metal Fabricators (http://www.flemingmetal.com/)

Here is an example of the centered table concept with a tiling background. This one has a fixed table width of 730 pixels and is positioned in the center.

Persona Activewear and Bodywear by Katie Healy (http://www.personaactivewear.com/)

[highman]

Just one more note, try to avoid mixing fixed widths with percentages or the lovely NScape will get all confused... bless.

With backgrounds to avoid the horrible tiled effect at high res use a background image of say 2000 x 2000, that should stop the tiling ;)

[lemony]

kal,

I checked your site and it is just great! It meets the needs the majority of surfers as far as I can tell. You text enlarges nicely, which makes it excessible for people with the need to have large text.

I notice that most of the big sites stick to 750-770 wide, MSN as a script that modifies the size. So it depends on your coding knowledge, etc.

I would guess since your "product" is information and good service that the way you have it designed is just great!

Have you used www.anybrowser.com? You can check size and resolution there. I use it to keep me on track!

:)

[Kal]

Thanks Jean for your kind comments and welcome :hi:

I'd like to thank everyone for their terrific feedback on this issue. I have gone for fixed width rather than % because of the split image issue, but also to avoid long sentences.

I've only used the 100% thing on pages that have large tables and the need to scroll (such as my pricing page). :cheers: all!

[MazY]

Lemony...

I just went to your site, armed with the question of "Oh, come on, how interesting can a bloody lemon be?"

Excellent site, excellent content, one of the best that I have looked at in a loooong time.

[sanity]

Kal, just checked out your new site - looks good.

One thing I always do when designing sites is switch my desktop between all diff resolutions to get an idea how it will look in diff browsers. Also switch between number of colours used as well.

sanity

[Kal]

Yep, checked in various resolutions and it's fine. But never thought about number of colours. Also not sure how it looks in Netscape, but perhaps Jill can tell me?

[Blue]

Hi Kal,

Looks good in Netsacpe 6.1. There is a 10px margin at the top and left, but it looks OK (Netscape doesn't recognize the topmargin="0" leftmargin="0" code in the body tag).

Netscape 4.08 wouldn't render the graphics in the header at all.

You can get older versions of Netscape browsers here: http://home.netscape.com/download/archive.html?cp=dowarc, and you should probably have their newest version as well (for testing purposes): http://browsers.netscape.com/browsers/main.tmpl

[sanity]

Also fine with Netscape 6. There is the margin that Blue mentioned but it looks fine. There is some code to fix this but I can't remember it off hand. I'm happy to check if you'd like.

With the colours if you are using the web clut pallette (216 colours) you should be fine.

sanity

[pageoneresults]

Actually Netscape 6+ supports the margin style. Netscape 4 does not. I always keep these elements in my <body> tag to deal with the margin issue...

marginheight="0" marginwidth="0"

The normal margin-top, margin-left, margin-bottom and margin-right all work in NS6+.

[highman]

If your ever stuck for an older version of a browser, this place has the lot! http://browsers.evolt.org/

[sanity]

Thanks highman :thumb:

Great resource!

sanity