Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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. By web safe area I mean the actual area available to display the website in the browser (which is influenced by monitor resolution as well as the space taken up by the browser and OS).

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 (the app I'm designing is flash based, Apple mobile devices don't support flash so iPad support isn't a concern).

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 lose 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'm really surprised that I couldn't find this type of investigation anywhere on the web. Lots of websites talk about designing for 1024x768, but that's only half the equation! There is no mention of browser/OS influences on the actual area you have to display the site/app.

Any help on this would be greatly appreciated! Thanks.

EDIT

Another caveat to my line of thinking above is that different browsers actually take up different amounts of pixels based on the OS they're running on. For example, under WinXP IE8 takes up 142px on top of the screen (instead the aforementioned 120px for Win7) because the file menu shows up by default on XP while in Win7 the file menu is hidden by default. So it looks like on WinXP + IE8 the Web Safe Area would be a mere 572px (768px-142-30-24=572)

share|improve this question
add comment

4 Answers 4

As of Feb 24, 2011, I go with the following page widths:

960px, fixed centered - for non-mobile web visitors if the site isn't for affiliate marketing. I may use either a 10px or 20px margin inside that, but the "white" part of the page is 960px width.

750px, fixed centered - for sales pages (landing pages) for affiliate marketers. This is because we usually have one single column of text, and it's hard to read at 960px. I may use a 10px to 20px margin inside this 750px.

600px, fixed centered - if the page is for affiliate marketers who want the page to appear in a PPV popup.

480px, fixed centered, single column of stuff - for Android and iOS users. However, please read up on webkit viewports, because that comes into play here, as well as portrait and landscape mode (such as if I make a report with tabular data, meant to be viewed in landscape mode).

260px, fixed centered, single column of stuff - for all other mobiles.

As for height, I add in a couple toolbars where as to be expected and then design my pages so that the juicy content (as much as I can) can fit within that space before scrolling on a 15" laptop. For instance, if I need to make an affiliate marketing squeeze page for a client, then I will try to get the signup form somewhere in the 600px downwards and less, range.

Some other factors to think about here are readability and how people may use extra-large, widescreen monitors. On readability, if you have a single column of sales text and are going wider than, say, 720px, it really makes it hard to follow where the next line begins. And on extra-large, widescreen monitors, there comes a point where if you widen the content too much to fit such a resolution, the page becomes too busy. So, for me at least, unless I'm doing specialized reports for a task, I can't justify going higher than a 960px width on a page -- not even in the next century.

share|improve this answer
add comment

Boy, it's going to be tough to give you any sort of "real" answer (this is only an answer due to character limits on comments), and even harder to back it up. First of all, I would say ignore w3schools. Anyone who tells you all flavors of IE combined make up 26% of users is clearly skewed towards savvy users.

Another thing to keep in mind is that while I might be running at 1680x1050, during casual surfing I am almost always on a windowed browser and I dislike being forced to maximize.

Honestly, if you're dealing with a true web app (say threadsy or the like), I think a rock solid liquid layout (or semi liquid) is the way to go, though it does require a lot more thought and work.

Certainly, 20% of users still on 1024x768 is significant. Think about 1 in every 5 users having a horizontal scroll bar if you don't design for 1024x768. Yahoo! has determined that 972px is the optimal width, while many web designers have settled on a 960px grid, however, it might be safe to go as further than that if your audience skews younger. I can tell you that many people run at 1024x768 simply because their eyes are getting bad as they pass the mid 40s and can no longer run at their monitor's native resolution. I definitely recommend using some web safe area PSDs in your wire-framing.

I know I didn't give you any cold-hard facts, but I hope this was helpful.

share|improve this answer
    
Not to counter Chris here in the least, but my experience has shown me that liquid layouts are super hard, and require a lot more testing than fixed-width, centered layouts. Seems almost not worth the effort to me, versus creating different fixed-width layout stylesheets for the different interfaces, or redirecting mobile and tablet users to the mobile version of the site. And Chris is also right about eyesight -- it's an important factor. –  Volomike Feb 24 '11 at 19:17
add comment

My advice is to not obsess over "optimal" resolution too much. There's always a huge variation in screen resolutions, which is ever changing. Even if iPads won't ever support Flash, you still have android tablets, netbooks, and notebooks to deal with. And if you try to cater to those with the lowest screen resolutions, you'll be de-optimizing the user experience for the average user who has much higher resolution.

Besides, not everyone surfs the web with their browser maximized. And even different users on the same browser/OS could have different browser setups that change their viewport size. So there's no point trying to calculate the exact right pixel resolution (especially vertical resolution), since there is none.

Browsers have scrollbars for a reason. If someone's surfing the web on a 1024x768 monitor, they know they'll need to scroll up and down. As long as you design the interface so that they're still able to access everything, they'll be fine.

Instead of trying to calculate the perfect web resolution from unverified monitor resolution statistics and questionable assumptions about user behavior, just look at what's being used on the most popular sites on the web. Companies like Google, Amazon, eBay, etc. have the resources to conduct proper usability studies and user research to find out what real-life web resolutions are. So why not just take advantage of their research?

I also don't believe in using "web safe area" templates. Just like your calculations subtracting UI element dimensions from the screen resolution, it gives a false sense of precision that's very misleading. There are just too many variables to say 572px is the exact perfect height for a web layout. A more useful template would have fuzzy borders or gradients similar to the hypsometric tints in elevation maps.

share|improve this answer
add comment

Checkout this website: www.websitedimensions.com.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.