Screen Resolutions, Form Factors, 2011

We’ve recently taken a look at two sets of data for website traffic with a combined 230,000 visits, 48,000 of that was from 12-24 months ago. In sum, the message is that a diversity of browsers and screen resolutions is the current and future reality. As well, we can thankfully forget about supporting IE6.

Browser Wars

The Browser Wars are proliferating with multiple platforms. There are actually four companies (one a nonprofit foundation) involved, and the browsers themselves are fragmenting:

• Internet Explorer (Microsoft), v.7, 8, 9
• Chrome (Google),
• Safari (Apple), including versions for Iphone, Ipad, MacOS as well as Windows
• Firefox (Mozilla Foundation),
• Opera (Opera)

Because there are multiple platforms which each have unique built-in browsers and the inability to add others,

Of Internet Explorer, v.6 went from 22% to 9% of Internet Explorer share. v.7 went from 32% to 19%. V.8 went from 46% to 64%, and v.9 went from 0 to 7%.

Note that the overall share of Internet Explorer went from 59% to 44%.

Firefox Holds Share

Firefox has an enormous number of version numbers. V.3.6.13 is the largest single version at 16%, and the 3.8 series is around 50% in total. Overall Firefox stayed at around 21% of visits.

Google Chrome

Chrome is even more version-segmented than Firefox. Chrome went from 5% to 12% of visits.

New Mobile Browsers Emerge

Android is now 1% of visits. Opera mini makes up a small number of visits, but still ranks as the 9th most popular approach with Mozilla-compatible agents (some of which are mobile) coming in at the 7th.

Apple Safari

Safari’s 53x (5.0.3) series makes up a majority of versions, though there are many sub-series accounted for. The 653x (v.5.0.2) is the second most popular.

Overall Safari went from 7% to 20% of total. This includes ipad and iphone access as well as MacOS and Windows.

Opera

Poor old Opera comes in at 1% as well, but down over the previous year. A really excellent browser descending into irrelevance.

India Traffic

In another dataset with a large amount of traffic from India, the following differences are found:

• IE predominates at 42%
  • IE 8 at 62%
  • IE 6 at 18%
  • IE 7 at 13%
  • IE 9 at 7%
• Firefox comes in at 28%
• Chrome comes in at 22%
• Safari is 6%

Operating Systems

This data is not necessarily accurate but does give some idea as to the order of magnitude:

• Windows from 84% to 73%
• MacOS from 11% to 18%
• Iphone from 2.4% to 3.7%
• Ipad from .1% to 2.2%
• Androd from .9% to 1.3%
• Linux declining from 0.9% to 0.6%

Screen Resolutions

The real story here is the proliferation of different resolutions and the flattening out of screen resolution popularity.

• 1280 x 800 is the most popular resolution but declined from 23% to 20%
• 1024 x 768 is the second most popular, but also declined, from 27% to 17% (ipad in portrait mode)
• 1366 x 768 increased from 5% to 12% (popular 13″ laptop resolution)
• 1440 x 900 had a slight increase from 7.7% to 8.2%
• 1280 x 1024 declined from 10% to 7% (non-widescreen aspect for 20-21″ monitors)
• 1920 x 1080 increased from 2% to 4% (popular 23-24″ monitor resolution)
• 1680 x 1050 decreased slightly from 4.1% to 3.9% (another common monitor resolution)
• 320 x 480 is clearly a mobile screen (portrait mode) increased from .7% to 3.5%
• 768 x 1024 is a portrait-mode (e.g., ipad) that went from .1% to 2.1%

There are hundreds of combinations but a few others of interest:

Width Issues

• 2560 is the largest width (27-30″ cinema displays), and increased to .5% with a width of 1920 at 5.5% of visitors
• Interestingly the 800 x 600 ebook common display and the 768 x 1024 ipad portrait mode offer an interesting opportunity. While resolutions will change with lowering of costs at higher resolutions, the 6-7″ and 9-10″ form factors will not (nor will the human eye). Pinch-and-zoom interactions help navigate an interface designed not for a different resolution, but for a different form factor.

Height Issues

• 396 is the smallest height but this declined from 2.9% to .6% so that 480 is the successor minimum with 600 as a more common minimum with over 3% of visitors. over 30% have a height of 768 or smaller and more than 50% have a height of 800 or less.

Current Recommendations

Design for Five Experiences

• 3.5″ mobile (480 x 800 to 640 x 960)
• 6-7″ tablet (600 x 800 to 800 x 1024)
• 9-10″ tablet (1024 x 768) as well as the classic netbook size (1024 x 600)
• 11-13″ Laptop (between 1280 x 800 and 1440 x 900 with 1366 x 768 as the middle point)
• Desktop monitor (2560 x 1440 maximum, but targeting 1920 x 1080 is ok, and few people would use this large of a screen without resizing the browser window or changing from native resolution on a 24″+ monitor). The point is to have a graceful degradation of any background images or monitor-wide graphic display and wrapping.

Of course this is a bit overwhelming, and should be done in stages:

• Target a consistent look and feel for resolutions 1024 x 768 (ipad) and 1440 x 900 (macbook air)
• Make sure it looks ok at 1920 width (24″ monitor)
• Check on navigation (pinch-and-zoom) on an Android and Iphone/Ipad Touch
• Take a look at how this works on a 7″ tablet (Samsung Galaxy or similar)

On to Apps

Once the basic website experience is configured and tested, it is time to think of designing apps that provide enhanced experiences to smartphones and tablets, as well as the desktop. More on this later.

Print PDF

No related posts.