Primal Skill - Dream. Design. Execute.

Why You Should Design For Smaller Screen Resolutions

As display technology evolves so as screen resolutions are getting bigger and varied, therefore giving a headache to website designers.

According to Wikipedia, standard screen resolutions are the following:

• VGA with 4:3 aspect ratio : 640×480
• SVGA with 4:3 aspect ratio: 800×600
• XGA with 4:3 aspect ratio: 1024×768
• WXGA with 16:9 aspect ratio: 1280×800
• SXGA with 5:4 aspect ratio: 1280×1024
• WSXGA+ with 16:10 aspect ratio: 1680×1050
• UXGA with 4:3 aspect ratio: 1600×1200
• WUXGA with 16:10 aspect ratio: 1920×1200

And according to w3schools.com as of January 2008 the most popular screen resolution on the Internet was 1024×768 with 48% and 38% was a higher resolution.

A designer should take in consideration two variables when designing the web site’s layout:

1. screen resolution
2. browser window size

These two variables only match when the browser is in full screen and that’s the problem with bigger displays (from the designer’s point of view, of course). In the old days, when 800×600 ruled it was always 100% sure that the browser window size would match with the screen resolution, but now, users not always browsing in full screen (or the browser windows fully expanded on the screen), therefore we should indeed take in consideration the browser window size too.

I almost tend to say that screen resolution got obsolete, because a user with the screen resolution of 1680×1050 not always opens the browser on that same size. Instead let’s say it’s browsing with a 1011×933 window size. The layout only knows this size.  So it’s a wise decision if a designer creates his/her layout to support at least 800×600 (generic) resolution. This means that the width of the layout should be at least 770 pixels wide (subtracting the scroll width, in my experience, generally around 30 pixels should do it).

From marketing point of view there’s the folding problem. Every bits of important information should be placed above the fold (that is the visible space,  when the vertical scroll is at the topmost position). This space tends to shrink too.

I haven’t seen an analytics tool that would record browser window size, they all record just the screen resolution. So if anybody knows such statistics please let me know in the comments.

Update: I put together a little poll which gathers browser window size data, please visit the following link if you want to contribute to this statistic: http://playground.primalskill.com/browser-window-size/

The results will be posted when enough data is gathered, check back soon.

If you enjoyed this article then help spread the word and please follow us on Twitter or subscribe to our RSS feed.