{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

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.

Econsultancy's stats

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.

Firebox

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. 

All Saints

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

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.

Lush

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.

Nitty Gritty

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.

Smythson

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.

Amazon

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.  

Aloha Rag

Product pages remain fairly narrow, but other pages reposition content for users with wide screens.

Monsoon

The homepage expands, and little else, but it's a start!

NikeID

Works well, and uses the full width on various pages, with expandable animated backgrounds on some channels. 

My thanks to Dan Barker, Mike Upton, and James Doman-Pipe, who pointed me in the direction of the above websites.

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!

Chris Lake

Published 21 April, 2014 by Chris Lake

Chris Lake is CEO at EmpiricalProof, and former Director of Content at Econsultancy. Follow him on Twitter, Google+ or connect via Linkedin.

582 more posts from this author

Comments (11)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Frank Staiger,

Chris,

Interesting statistics and insights.

But I feel something is missing from your post. A couple of points.

Screen sizes versus actual growing behaviour? I would argue that not a lot of users are browsing the internet on their 27" iMacs in Chrome presentation mode etc. It would be nice to see actual statistics on that.

The other point worth making is around typography / usability on larger screens. How would your website actually benefit by going for a larger re-design which considers bigger displays? Surely your column width for your test content is not going to go any wider, because it would make it much harder for the user.

Just some thoughts...

Frank

about 2 years ago

Chris Lake

Chris Lake, CEO at Empirical Proof

Hey Frank. I didn't realise that there was a presentation mode in Chrome! I don't use this, but my window is normally set at about 75% of the maximum width, and there's often plenty of extra room to play with for websites that want to spread out.

As for column width, that's a good point, and something I mentioned on the Amazon example above. A single column won't work for text, as you'll either end up with 40+ words a line, unless you increase the type size (but that too would probably suck).

The best approach is surely to go down the modular route, repositioning multiple columns / content boxes on the fly. Some of the above examples do this well. Two or four columns become six, others expand. Images can also increase in size to fill in the extra space. It's there to be used.

about 2 years ago

Luke Brason

Luke Brason, Head of User Experience at Grass Roots

Height's important too. (Your most used) 1366 x 768 tends to be a laptop. 768 is not a lot of space to play with (especially once you take into account browser toolbars etc)!

about 2 years ago

Avatar-blank-50x50

Michelle Robins, Progenit

Hi Chris,
Supporting your analysis around higher spend, you'll love the Land Rover used car pages:
http://www.usedvehicles.landrover.co.uk/search

about 2 years ago

Daryl Irvine

Daryl Irvine, Digital Creative Director at The Walker Agency

Two things struck me thinking 'holistically' about the numbers - numbers that are useful but that I'm always wary of 'chasing':

The Econsultancy audience are professionals. Marketers, designers, account directors, creatives and in my case, directors. I have a 27" Mac screen like so many of my colleagues and counterparts but it is basically a business requirement to have that much real estate these days to cover every from writing proposals with multiple 'research' screens open to photoshop & motion graphics pieces.

I also purchase on behalf of my company (information/resources) which makes the higher spend far less indicative of consumer behaviour in general; I need these services to perform my role and I don't pay for them myself.

I've had similar discussions over the years regarding the citing of browser stats from the W3C site as it is frequented by web design professionals and not consumers, the stats are self referential.

Having said all of that i'd love to devise more digital experiences that work beautifully on 27" Macs but I still need to make the business case to clients in order to cover development and testing costs.

Unless THEIR data supports that: it probably won't happen.

about 2 years ago

Chris Lake

Chris Lake, CEO at Empirical Proof

@Luke - Definitely!

@Michelle - I'm on a laptop right now but will check that out when I next use my iMac. Thanks!

@Daniel - All valid points. Your second and third paragraphs both support the idea that our business should cater for wider screens. Maybe other types of business cannot merit an investment in responsive, but if they do - and if a good proportion of their visitors use big screens - then why not do it in both directions?

If a website is transactional then I think it makes sense to do this... it is really just an extension of the 'above / below the fold' argument, regarding the positioning of your most important content. I think there is too much bad noise about scrolling, but visibility certainly matters.

about 2 years ago

Avatar-blank-50x50

Steve Lee

One point hidden by you metrcs is that screen resolution is not the same as size. Unfortunately you don't get the pixel denisity in the metrics. For example my Dell XPS 15 is running at 1,920 x 1,080. This is pretty dense and not same as large screen or lean-back viewing. OK that is largr than mobile devices - well for now :)

This is not relevent to your article but my large external monitor runs at the same resolution. Windows really doesn't have options for making the most of the larger size on one monitor.

about 2 years ago

Avatar-blank-50x50

Matt Lovell, Group Head of Customer Insight & Analytics at Thomas Cook Airlines

@ Luke's point, I think this is quite a key one as at the moment, most responsive and adaptive design is purely determined based on the computer's width. One of the issues with this is it doesn't take into account the fact that there are now such an array of strange sized and shaped screens that it doesn't necessarily means they have a) a large screen, b) a laptop, c) a tablet or d) a smartphone.

One of the good things about most responsive sites is that they do re-size with the browser but it is important to understand exactly what size browser the user is using for design purposes.

We've set up our GA accounts to capture this as while some information shows in the in-page analysis, it's more helpful to actually be able to see volumes and how these correlate to the actual screen sizes.

Here's a few examples of how to do it:-

http://www.labnol.org/internet/browser-windows-size/26872/
https://gist.github.com/WolfieZero/3910572
http://stackoverflow.com/questions/19497744/browser-window-size-in-google-analytics

about 2 years ago

Chris Lake

Chris Lake, CEO at Empirical Proof

@Matt - Brilliant tips! Have you unearthed anything interesting from your implementation of this?

about 2 years ago

Avatar-blank-50x50

Daniel Murphy, Director at Abacus e-Media

Take a look at www.ozy.com site which we developed last year which scales up nicely for large screens and HD TV's.

about 2 years ago

Avatar-blank-50x50

Rebecca Taylor, Account Director at Tide

Hi Chris! Interesting article... I'm curious why Econsultancy haven't gone responsive yet? I was (trying) to read this article yesterday after seeing a link on Twitter and it's incredibly frustrating to have to do the squeeze/pinch. I actually gave up trying to post a comment on mobile. Isn't 18% significant enough to want to provide a positive experience, irrespective of device?

Don't get me wrong, I'm a big fan of Econsultancy but very surprised the site content hasn't been optimised across devices yet....

almost 2 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.