Responsive design has been a hot trend in the past couple of years, with plenty of brands adapting their websites for smartphone and tablet users. But here’s the thing: responsive design should work for bigger screens too.
I have a 27 inch iMac with a 2560 x 1440 screen resolution, and not many sites make full use of my screen. It seems like a waste. The best responsive websites will be optimised for wider displays, as well as narrower ones.
It goes without saying that a growing proportion of your website’s visitors will be using handheld devices with little screens, but you may be surprised by how many people use bigger screens. Certainly I was.
I thought I’d unearth a few examples of brands that are thinking big, as well as small. I shall kick things off by looking at our own stats, to prove the business case.
Our mobile and tablet traffic is around 18% of total visits. Handheld traffic will continue to grow, but as a B2B business most people will access our site via desktop and laptop devices.
How many of these visitors have big screens? Let’s take a look…
So, based on those Google Analytics numbers…
- 65%+ of our visitors use screens at least 1,280 px wide.
- 33%+ of our visitors use screens at least 1,680 px wide.
- 20%+ of our visitors use screens at least 1,920 px wide.
These numbers are rather revealing. To put things into perspective, we have more visitors who use 1,920 x 1,080 monitors than we have smartphone visitors.
Here’s another thing I noticed: bigger screens seems to correlate with higher spend. The 1,920 x 1,080 set account for 14% of visits, but contribute more than 20% of revenue.
We are currently working on a responsive site and have four sizes in mind: ‘wide’, ‘normal’ (tablet portrait or laptop typically), ‘landscape tablet’ and ‘mobile’. Based on these findings I think we’ll need a fifth: ‘wider’.
Ok, let’s move onto some examples of websites that work well on wide screens. Click on the screenshots to check them out for yourself. A round of applause to all who are going down this route.
This is one of the cleanest examples that I’ve seen. The homepage and category pages make full use of a wide screen, though the content displayed in the product pages seems to adhere to a fixed width.
This site makes full use of wide screens by increasing both the number and size of product images, regardless of which page you’re looking at. Bravo.
Burberry continues to do a lot of things right, and impresses with its upwardly responsive website, which seemingly works across all of its pages.
It makes a lot of sense, given its investment into such gorgeous product imagery.
I really like the look and feel of this website, which responds in both directions. Big screens get animated backgrounds, small screens don’t. Smart.
Makes great use of horizontal space on many of its pages. Blog pages extend to five columns (from one), with story units expanding rather than taking you to a new page. An excellent approach.
Pull & Bear
Beautiful full-width imagery on the homepage, category pages and the lookbooks. Responsive typography would be a bonus.
The homepage expands, and on category pages two columns double up to four, though there remains space to play with for the biggest screens.
Graham & Brown
Two columns will become six on category and search results pages if your screen is big enough.
No surprise that Amazon is all over this, but note that single columns on widened pages do not work that well for product descriptions. Super-wide columns and readability do not mix.
Product pages remain fairly narrow, but other pages reposition content for users with wide screens.
The homepage expands, and little else, but it’s a start!
Works well, and uses the full width on various pages, with expandable animated backgrounds on some channels.
Have you other examples to share? Are you working on a responsive site that will work well on wide screens? Do leave a comment below!