What screen resolution should my web app have for average non-tech users?
I noticed that StackOverflow is targeting a screen resolution width of 1024 pixels or more. I also checked Amazon, NBC, MSN, and AOL, which target more common users, and they all seem to target the same width.
... Is 1024px the current recommended width for web applications targeting the largest cross-section of users using the default monitor resolution or browser size?
source to share
Use a fluid layout. Then you can easily accommodate everyone from 800 to 1600 widths, and also do a little work and care for lower resolution devices. It also gives @ 1024 users some leeway to enlarge the page if they find the text too small.
Remember, there will be things like netbooks that don't have the big screens we expect today. You can get away with the horizontal scrollbar, but if you have to scroll the page to get the bulk of the text, you're lost.
source to share
Before you make it condescending, you can check out the modern user base. Netbooks. PDA. Smartphones. Smartbooks (you do know what it is, being very complex, right?). Programmers who have their screen in portrait orientation. People who fold their windows side by side. Kiosks.
UPDATE . In connection with my conversation with John, I edited the question to change the tenor a bit to reflect his original intent. However, the original paragraph I wrote is still correct: I haven't seen the latest statistics, but the days of "90% of users have AxB window size / size in their browser" are probably gone forever, which is with widescreen laptops and mobile devices. Makes life more exciting for UI designers :)
Having said that, to design a website , you really need to hook up a fluid layout, ideally the ability to use portlets and the portal infrastructure (think My Yahoo) so that people can choose the page layout that suits them the most.
source to share
use 960.gs well and you will install whatever you need to create a good website :)
(source: balexandre.com )
The Grid System 960 is an attempt to simplify the web development workflow by providing commonly used dimensions based on 960 pixel widths . There are two options, 12 and 16 columns, which can be used alone or in tandem.
The 960 GS is a great start when making web or images, they have a complete template for almost any good design program (Photoshop, Ilustrator, Fireworks, InDesign, etc.), as well as a CSS generator and Grid Overlay to help you with the site. ...
I use this and it's fantastic! check demo
Nettuts has a tutorial and video . WooThemes wrote a post titled "Why We Love 960.gs" and use it as a starting point for their WordPress themes. Spaniards can also learn about the lessons of Jepser Bernardino and Miguel ngel Alvarez .
source to share
The maximum I would consider targeting since my base is 1280x1024, but I would go for 1024x768 much more often.
However, in my current projects, I try to make a fluid layout with a minimum width of 800 to accommodate netbooks, and usually a maximum width of around 1000px (usually 970). Of course, I also have the luxury of designing for myself, so I am honored to inform IE6 users that they need to upgrade, making it easier to design fluids.
source to share
Summary:
Design with the internal dimensions of your browser set to 1250x668 to satisfy 92.7% of users.
I like to manage statistics. To this end, W3Schools has a nice browser browsing page that they update periodically with new statistics about how common each screen resolution is.
As of January 2015, 92.7% of browsers visiting W3Schools pages were pinned to displays larger than 1024x768, although 39.3% of all displays were limited to 768px (or below) height, mainly due to 33 % of them had 1366x768.
Unfortunately, W3Schools measured screen resolution, not internal dimensions used to render web page content. It would be nice to have statistics on window.innerWidth and window.innerHeight users .
Since we don't have them, we have to reserve space for window decorations, which can be larger than our own, and browser widgets, which can further take away from the site where the website is rendered. Also, not all users browse the web in an enhanced web browser, although I think we can ignore this assuming lower resolution displays will have max browsers.
Windows 7 seems to be the biggest offender when eating screen real estate, with what I measure as 30-40px for the taskbar (I had to look for a screenshot since I'm not running Windows). Firefox with the title bar, menu, bookmark toolbar, and status bar consume another 159 pixels, whereas the thinner modern FF only consumes 64 pixels. Let's use the thin version and assume that about 100 pixels of vertical space is lost. Maximized browsers don't seem to consume any additional horizontal space, so you really only need to account for the scrollbar, but I'd reserve a few pixels for the edges of the windows just in case, bringing us up to 30px.
Years ago (when I did more web design than I do today), I would put my own browser on an internal size of 800x550 and make sure there were no scrollbars on most pages. Currently it looks like this can be expanded to an internal dimension of 1250x668.
You can check your inner size by placing it in your location bar:
javascript:alert(window.innerWidth + "x" + window.innerHeight)
These values are read-only; you used to be able to run something like this to resize your internal dimensions, but (thanks to the offending advertisers) it doesn't work anymore :
javascript:window.resizeTo(window.outerWidth-window.innerWidth+1250,window.outerHeight-window.innerHeight+668)
One note on splitting: Just because you're assuming a certain size doesn't mean you can't guarantee that your site still runs at lower resolutions. The page may be ugly, but it needs to be functional!
source to share