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 themost referenced source (however theystate that these are results fromtheir site and is biased towards techsavvy users)http://www.w3counter.com/globalstats.php(aggregate data from something like15,000 different sites that use theirtracking services)StatCounter global stats > Displayresolution (Stats are based onaggregate data collected byStatCounter on a sample exceeding 15billion pageviews per month collectedfrom across the StatCounter networkof more than 3 million websites)NetMarketShare screen resolutions (marketshare.hitslink.com) (aweb analytics consulting firm, theyget data from browsers of sitevisitors to their on-demand networkof live stats customers. The data iscompiled from approximately 160million 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 583Is 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.EDITAnother 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)
Web safe area (optimal resolution) for web app design?
internet explorer;browser support;resolution
The average user may be on anything from a small cellphone to a 4k television. You should therefore design your website to run on any size screen, intelligently. Usually this is referred to as 'responsive' design, and there are a lot of great frameworks that'll help you do that (Bootstrap, Zhurb Foundation, HTML5 Boilerplate). On small screens, hide extras, focus on core elements of the website, and make UI controls larger to compensate for smaller overall size. Hide menus by default. However, make sure the user can still use the site fully.On medium screens (tablets, low resolution monitors) focus on the core of the website. Maybe make menus a bit smaller, and hide fluff. Make sure your pagination is up to snuff and easy to navigate.On large screens (what most people are probably using for desktop monitors) give people your full website experience.On very large screens (TVs, super high res displays), you have two ways you can go, depending on your website content: Assume they have it on a TV or some sort of dashboard, and give everything plenty of space, but otherwise keep it the same as the large displayOptimize your content to show as much content as possible.There is no magic resolution, nor is it possible to predict future resolutions. Therefore, you should focus on making sure your website responds well and works well at all resolutions.