Screen sizes, how do we determine standards and what are they?

Question

Recommending a screen size

Recently I have been doing some research on screen sizes and realized that I had to rethink many of my previous assumptions. As a UX professional I feel it is of utmost importance to understand and confidently communicate which screen sizes to target. Searching this forum gave nothing recent enough.

And so here is a bit of synthesis of my current thinking on two things and I want your input on them:

1. What the considerations are when deciding on standards?
2. What the most current screen size standards really are?

1 - Considerations when targeting screen resolutions

960, 980 or 900px? Which ones do we chose and why?

• Based on current statistics (see links at bottom)
• Grid systems (dividable by 12)
• Standards based (what is the industry doing?)
• Safe zones (smaller than the screen-res)
• Don't forget mobile (320 or 480)
• Looks at your site analytics

1 - Current screen size standards

When a design grid is considered:

• 320 or 480 ?
• 960 (captures 1024 > 1279) {http://960.gs}
• 1140 (captures 1280 > ?) {http://cssgrid.net}
• ?

Screen statistics

From StatCounter - May-June 2012

Screensizes: (market size in %)

1. 1366x768 - 20.5%
2. 1024x768 - 17.43%
3. 1280x800 - 12.24%
4. 1280x1024 - 7.16%
5. 1440x900 - 6.47%
6. 1920x1080 - 5.57%

Width percentages: (market size in %)

1. 1920+ - 7.06%
2. 1440-1680 - 14.13%
3. 1280-1366 - 46.37%
4. 1024-1152 - 21.71%
5. 768-800 - 3.23%

General Thoughts

• What are the safe sizes in most browsers?

  There are "safe zones" but the reality is that these restrict design A LOT. No source has been found showing a breakdown in terms of the actual inner width of the browser.

Links

Statistics on screensizes

• http://gs.statcounter.com/#resolution-ww-monthly-201201-201205 (trusted StatCounter, data from 3 billion sites)
• http://www.w3counter.com/globalstats.php?year=2012&month=5 (data from 15,000x57,913 sites = 868,695,000 data units)

Don't use:

• http://www.w3schools.com/browsers/browsers_display.asp (not a good source since it only measures those who visit w3schools.org)

Answer 1

First, to my knowledge, there are no standards here (at least no formal ones). The de-facto standards we have (like the 960px one) come about because of manufacturers more-or-less standardising hardware screen resolutions (lately with the help of VESA).

Microsoft recently posted their telemetry data in this area for Windows 7 users:

Image from Building Windows 8 (MSDN Blogs)

As the chart shows, classical 4:3 and 5:4 resolutions form a tiny chunk of users compared to newer 16:9 and 16:10 displays. It shows, too, that the horizontal resolution (which seems to be what you're asking about) is effectively always at or above 1024px.

Depending on your audience that may be enough, but some factors should be considered:

• Designing against a fixed width tends to mean you cater to the smallest displays you target; are you making the experience rubbish for users with very large (27-inches and greater) displays in order to make it OK for netbook users?
• Mac users behave very differently to Windows users—Windows users can (and in my experience, generally do) run their applications maximised full-screen. On the Mac (which doesn't use a taskbar to represent open windows), it's far less common to see a user with their windows occupying their full screen width (e.g. the "zoom" button in Mac OS X only increases the window to "the size and location that your application considers most convenient, considering the function of the document and the screen space available", as explained here)
• Scrollbars are being increasingly hidden (or changed so their width doesn't affect the content area)—in Metro IE in Windows 8 and Windows RT, the scrollbar starts hidden:
  
  …but if you begin to scroll, a scrollbar is shown over the content area (which then fades away). Here's the touch-screen and mouse scrollbars respectively:
  
  The same goes for OS X Lion, which (by default) uses hiding scrollbars:
  
  …and naturally the same applies on iOS devices like iPads.
• Speaking of iOS devices—the proliferation of tablet computers and smartphones means even on a single device, you generally need to design around two possible orientations. So just because an iPad has a 1024×768 resolution doesn't mean you can use a 960px grid as you might on a 1024px-wide desktop display; many (or even most) will experience your site at 768px wide.
• In Windows 8, Microsoft is introducing a new "snapped" view 320px-wide in which your site may be loaded. They're currently advising developers to use responsive design to adapt dynamically to the narrow window (which resolution I presume was chosen because of the proliferation of sites being designed to accommodate the iPhone and other similar smartphones).
• There is a long-standing principle in typesetting of limiting the line length of your content to make it easier to read (ostensibly making it easier to track your eye from the end of one line to the beginning of the next), although there is evidence to suggest that limiting line lengths may be unnecessary (which would make it more a question of beauty than of actual readability). Nonetheless, this may be a factor in your decision to use a fluid layout. Anecdotally, very long line lengths are extremely annoying on a smart phone where the user will need to zoom in to read the text and then perform a lot of small tracking pans to read a single paragraph of text.
• There is a significant cost involved in designing and testing a responsive layout (which increases as the number of distinct layouts increases). That may make it impractical to design around.

Answer 2

Ignore all of that and research 'responsive design'.

The reasons:

• screen sizes are getting more varied by the day...both larger AND smaller
• screen sizes are rarely the actual issue...it's browser viewport sizes that actually matter

Answer 3

As with almost everything in UX "it depends". To directly answer your questions:

What the considerations are when deciding on standards?

You could look at this a couple of ways a) what are your current users using? or b) what are the users you intend to target using?

If you don't have any data to go on specific to your product (which would be the best kind) you can fallback to industry trends. Look at device ownership if targeting mobile, look at aspect ratios and monitor size usage and default resolutions for desktop etc. You (and likely need to) can make a call as to what you want to support, either through specific inclusions and exclusions based on what your product is, what the market for the product is, business drivers, client support requirements etc. This is the same rationale for saying something like you don't support IE6 anymore as the market share is not relevant for many products.

What the most current screen size standards really are?

As above, this totally depends on what you're making and for whom, but as a rough rule you should look at physical maximums and minimums, what's the smallest common mobile device out there (I consider something like the iPhoneSE/5) and what's the largest desktop resolution out there (probably safe to say 4k for now). Now within that, as you've commented, you could make everything fluid, but this will force some awkward design compromises which aren't for everyone.

Another approach is to define breakpoints which match common device sizes, start at the bottom, and work up, utilising progressive enhancement to add more if it is needed(not for the sake of it). It's perfectly reasonable to keep your body widths narrower than the device resolution when you consider aspects such as reading line length, image sizes, or just whatever the content is, stretching to fill all the available space is very often undesirable.

So what am I saying? really I could sum it up by saying:

• Find your breakpoints based on usages stats and common devices you need/want to support. Aim for fewer and only add them if you really need them, more breakpoints is more work.
• Consider your design first across these breakpoints, you don't always need to change things to fit, centre aligning and keeping the same width is perfectly acceptable if it fits the design.