Update: This article was originally written in 2014, and was updated in 2016.
With some of the new features of CSS3 and HTML5 it is now possible to improve upon the "Liquid Design" process. Before we consider what changes we make, it is important to understand the Screen Resolutions people are using. To this end I did some research into the current screen sizes visiting some of our more popular sites.
In the past, screen resolutions have grown. I am old enough to remember PC resolutions of 640x480, and indeed the major advancement to 800x600. In the years following those resolutions, there was a steady rise through 1024x768 to 1280x1024.
This steady rise has now ended, with the proliferation of mobile and tablet devices. Now for the first time, screen sizes are getting smaller as well as larger. Anyone serious about designing websites to fit all devices must consider how their content will look on screen widths from 320 to 2560 pixels.
Whilst we must take the literal sizes into account, we must also understand the way these devices are used. This is most important at the ends of the scale.
People with huge resolutions fall into two categories. First there are the "Apple Mac designer" types. They have a screen which could be as large as 2560 or even 3840 pixels wide, but they rarely use a web-browser at full screen size. The browser is only taking up part of the screen, so the effective window we have will infact be smaller. The second group here are HDTV (or 4K) users (me included), the resolution is often 1920 pixels (HD) or 3840 (4k), full-screen but zoomed, so it can be seen clearly from the other side of the room. The effective screen-width for these users raely exceeds 1600 pixels, but we have to allow for that. Even Reactive Website Designs need to put an upper-limit on the width of the content, if only to retain "line scan readability". Old Liquid designs often over-extend here, as the screen resolutions we are talking about did not exist back then.
Users here understand that they are using a device with a small screen, and know how to move around a page with their limited view-port. Normally this is mobile phones and tablets, which are far easier to scroll and zoom with than normal computers. While it is possible to include these people within a normal website style, it is sometimes appropriate to design specific sites, so that all of the relevant information appears on the screen. Now in 2016, users have become used to the icons which prevail to show menus which are otherwise hidden. If necessary, these can be used as part of a Reactive Design and will be understood by mobile users. It is very important however not to lose navigation or content altogether, merely that it be re-arranged. It is no longer acceptable to design alternate websites for mobile users, the Search engines will penalise websites for offering different HTML based on the Devices User-Agent.
In 2015 Google made it clear that it was going to change the rank of results provided to smaller-screen users to favour websites which it deemed "Mobile Friendly". Taking this into account for your website now is a must, as 2016 see almost 50% of searches being performed from "Mobile" devices.
Google offer the chance to test your website https://www.google.com/webmasters/tools/mobile-friendly/ to see if it is considered Mobile Friendly.
For this project I collected the data into different groups, based on the kind of screen, rather than considering every size as an individual. Whilst the full data is at the bottom of this article, the most important data is here, collated into groups. (This data is from 2014.)
| 1920 pixels + (Full HD and wider) | 7.55% |
| 1281 pixels + (HD, but not Full HD) | 35.91% |
| 1280 pixels (19 inch-ish screens) | 13.28% |
| 1024 to 1279 pixels (17 inch-ish screens, and view-ports on non-maximised windows) | 5.58% |
| 700-ish to 800-ish (Small screens including iPad in portrait mode) | 22.21% |
| 480 and 640 (Small Tablets) | 1.5% |
| 320 to 360 pixels (Mobile Phones) | 10.87% |
To produce a fully reactive design, we need to consider the sizes we will cater for. On a recent project we decided on:
This gave us a wide range of suitable sizes for the design, which covered most devices.
In this particular case it was decided a step-down system was better, as there is a lot of content provided is boxes. In other designs a smooth transition from the maximum to the minimum may be more appropriate. Smooth transistions however do have cost overheads in both code and time-to-write.
For me, the main conclusion is that design needs to consider a range of screen sizes, somewhat different to previous standards. In the past designing for 1024 was almost considered standard, and people with larger screens made to accept white- or blank-space to the sides. Now however with the small-side of the equation growing for the first time, we need to consider the >33% of people who are using small screens.
In 2016, with the changes in search engine behaviour, it is now essential to design with Mobile in mind. This means that all new websites should be fully reactive in their design and coding.
The full data set only includes the top 25 screen sizes. All of the other reposted screen sizes are close to sizes mentioned above (984x814 for example - a non-full screen window on a larger device) or erroneous sizes (not properly detected, example - zero pixels).
768x1024 (20.67%)
1366x768 (14.89%)
1280x800 (7.45%)
1920x1080 (5.82%)
320x480 (4.35%)
1440x900 (4.32%)
1280x1024 (4.29%)
320x568 (4.24%)
1024x768 (3.67%)
1600x900 (2.99%)
1680x1050 (2.41%)
360x640 (1.56%)
720x1280 (1.16%)
1280x720 (1.09%)
1024x600 (1.08%)
1920x1200 (1.08%)
480x800 (0.94%)
1093x614 (0.83%)
360x592 (0.72%)
1536x864 (0.67%)
2560x1440 (0.65%)
1360x768 (0.63%)
600x1024 (0.56%)
854x534 (0.48%)
1280x768 (0.45%)
Dataset collected 2014-05-13
Article by Clive Knowles Goldhosts
Original Version May 2014
Updated August 2016