viewport-sizes-infographic

Download the template: AI or PDF.

A JPEG version of the template on the left is optimised for the retina display so if you are testing on a traditional screen you need to set magnification down to 50%.


I based my research on the results generated by a WordPress plugin ‘Browser Window Stats‘ that I have installed on one of website I am developing – Hampton Court House, a private school for ages 5-16.
A bit surprising was a very little use of mobile devices, I guess people still prefer to use their desktops and laptops in finding the proper institution to put their young ones.

Browser width trends:

Typical browser window width July 2013

Most common width is around 1300–1400 pixels (over 40%), I think this is for 15” and 17 ” screens, second most popular width is around 1000 pixels (30%).

Typical heights:

Typical browser window height July 2013

From the graph I calculated that 700 pixel height page will see only around 51% of people, 600 pixels height – 86%, and if you go down to 500 pixels your audience grows up to 95.1%. Obviously this is for the content that the visitor can see right away, without any scrolling (above the fold).

Happy designing!

Note: The template and the graphs may vary slightly in percent values as I created the graph a few days earlier. The ai template attached to this post contains a responsive design indicator of 949px which was specific for the skeleton I was working with, It might vary with different themes/frameworks.

Update

A more recent article on this topic.

Join the Conversation

2 Comments

Leave a comment