Here’s a graph showing interest in the phrase ‘Responsive Design’ over the last couple of years:
Responsive design is (as you probably know) where you design a website/pages in such a way that the content displays differently on different devices. Usually that means navigation/content is organised differently on phone vs desktop/laptop (and sometimes differently on tablets, and at other screen sizes).
One of the largest problems for this tactic over the last 6 months has been that – whereas screen resolution (the number of pixels displayed) on smartphones used to be roughly the same across all phones – this now varies wildly. For example:
- Old iPhone screens were 320 pixels wide by 480 pixels high (320×480).
- The Samsung Galaxy S3 has a screen resolution of 720×1280 pixels.
In other words, only taking into account those 2 phones, if you’re designing a ‘mobile site’, you’re actually designing for 2 very, very different displays: One that displays 153,600 pixels, and one that displays 921,600 pixels (ie. 6 times as many pixels).
As a result, there are many sites that were designed when 320×480 resolution phones were the norm, which now look very odd when viewed on newer phones.
The New Problem: Laptop screen resolutions are about to become radically different
The new problem is very similar to the phone pixel problem, but across laptops. For the last few years, the majority of laptop sales have been among laptops with roughly similar screen resolutions., give or take 10-20%.
Over the next 6 months however, laptop manufacturers are focussing on much, much higher screen resolutions. Here’s one example to illustrate this:
- A current 11″ Macbook Air has a resolution of 1366×768 pixels. (ie roughly the same as a Galaxy S3)
- The Google Chromebook Pixel has a resolution of 2560×1700 pixels. (ie. roughly twice as wide as the macbook air screens, and a massive eight times the width of an old iPhone)
Here are 2 mockups showing what a website will look like on a Macbook Air, and how it will look on the Google Chromebook Pixel.
Keep in mind the 2 devices have roughly similar physical dimensions. In other words, the screen you are looking at will be the same size, but the content displayed on it will look radically different:
What You’ll See on a Google Chromebook Pixel:
What You See on a Macbook Air:
The Compound Problem
If you add this new problem to the existing ‘phone resolution’ problem, it means that to simply design your site to look ok on ‘all phones’ and ‘all laptops’, you have to consider a massive range of resolutions, including:
- Old iPhone: 320×480 pixels.
- Samsung Galaxy S3: 720×1280 pixels.
- Current 11″ Macbook Air: 1366×768 pixels.
- Google Chromebook Pixel: 2560×1700 pixels.
Add in tablets to this, and more forthcoming Apple Retina products, and it becomes very messy firstly to design across all of this, and perhaps more importantly to optimise for conversions/user experience.