Web Safe Area (optimal resolution) for web app design

Posted by M.A.X on Stack Overflow See other posts from Stack Overflow or by M.A.X
Published on 2011-02-23T01:25:34Z Indexed on 2011/02/23 23:25 UTC
Read the original article Hit count: 458

I'm in the process of designing a new web app and I'm wondering for what 'web safe area' should I optimize the app layout and design. I did some investigation and thinking on my own but wanted to share this to see what the general opinion is. Here is what I found:

Optimal Display Resolution:

  • w3schools web stats seems to be the most referenced source (however they state that these are results from their site and is biased towards tech savvy users)
  • http://www.w3counter.com/globalstats.php (aggregate data from something like 15,000 different sites that use their tracking services)
  • StatCounter Global Stats > Display Resolution (Stats are based on aggregate data collected by StatCounter on a sample exceeding 15 billion pageviews per month collected from across the StatCounter network of more than 3 million websites)
  • NetMarketShare Screen Resolutions (marketshare.hitslink.com) (a web analytics consulting firm, they get data from browsers of site visitors to their on-demand network of live stats customers. The data is compiled from approximately 160 million visitors per month)

Display Resolution Summary: There is a bit of variation between the above sources but in general as of Jan 2011 looks like 1024x768 is about 20%, while ~85% have a higher resolution of at least 1280x768 (1280x800 is the most common of these with 15-20% of total web, depending on the source; 1280x1024 and 1366x768 follow behind with 9-14% of the share). My guess would be that the higher resolution values will be even more common if we filter on North America, and even higher if we filter on N.American corporate users (unfortunately I couldn't find any free geographically filtered statistics). Another point to note is that the 1024x768 desktop user population is likely lower than the aforementioned 20%, seeing as the iPad (1024x768 native display) is likely propping up those number.

My recommendation would be to optimize around the 1280x768 constraint (*note: 1280x768 is actually a relatively rare resolution, but I think it's a valid constraint range considering that 1366x768 is relatively common and 1280 is the most common horizontal resolution).

Browser + OS Constraints: To further add to the constraints we have to subtract the space taken up by the browser (assuming IE, which is the most space consuming) and the OS (assuming WinXP-Win7):

  • Win7 has the biggest taskbar footprint at a height of 40px (XP's and Vista's is 30px)
  • The default IE8 view uses up 25px at the bottom of the screen with the status bar and a further 120px at the top of the screen with the windows title bar and the browser UI (assuming the default 'favorites' toolbar is present, it would instead be 91px without the favorites toolbar).
  • Assuming no scrollbar, we also loose a total of 4px horizontally for the window outline.

This means that we are left with 583px of vertical space and 1276px of horizontal. In other words, a Web Safe Area of 1276 x 583

Is this a correct line of thinking?

I tried to Google some design best practices but most still talk about designing around 1024x768 which seems to be quickly disappearing.

Any help on this would be greatly appreciated! Thanks.

© Stack Overflow or respective owner

Related posts about internet-explorer

Related posts about web-applications