Designing for larger screens

Roughly a 5 minute read by Tom Horner

The discussion around the design and building of websites for mobile devices has quite rightly taken centre stage in recent years. But what about life at the other end of the spectrum?

Responsive design means making sure you provide the best possible user experience to both mobile and desktop users. So while it’s advantageous to make sure your sites look slick when viewed on the latest smartphone, don’t neglect those who happen to browse your site on their 27” monster-monitors!


Device width vs Browser width

Before we jump into the pros & cons of the different approaches you can take when designing for larger screens, it’s important to first make the distinction between a user’s device resolution, and the width of their browser.


If you perform a quick Google search you are likely to find links to various sites which can provide detailed breakdowns of user’s browsing habits. Details such as; which web browsers are being used, on what operating system, and also a breakdown of which are the current and most common screen resolutions.

However, you are less likely to find the same detailed statistics on the width that users prefer to have their actual browser window. Which unfortunately for us is not the same as the resolution of the device/screen the are viewing your website on.

What this means is we are unable to draw truly accurate conclusions on the browsing habits of our users when it comes to the viewport size. But instead make a ‘best guess’ that on average those on larger screens will naturally have wider browser windows.


What are the options?

There are no right and wrongs when it comes to choosing a direction to take. Just as it is with other breakpoints (imposed widths declared in the stylesheet whereby a webpage’s layout can be specifically targeted to behave differently), it’s advisable to address any layout issues that may arise each time your content ‘breaks’, and by that I mean each time the interface becomes overly stretched/squashed and would benefit from a revised design. Here I will look at some of the options available to us when it come to catering for wide layouts.

Full width

Designing at full-width is pretty much self explanatory in terms of how this will be viewed by the end user. Regardless of the browser size your design will be edge-to-edge, and will fill the entirety of the browser window. However if you happen to neglect the larger breakpoints, you can run into some serious usability issues. More below…

Pros

  • Full width can provide a fully immersive web browsing experience.
  • The boundaries between the more traditional ‘website’ and ‘visual experience’ are blurred.
  • It’s a particularly useful layout for more photographic/video led websites.

Cons

  • With no imposed maximum width, content can appear at the extremities of the screen, sometimes making hard work for the user to scan for all relevant information quickly.
  • Site speed optimisation means that images can appear visibly compressed on larger screens.
  • Image ratios dictate that the wider image gets, the taller an image gets. Any images displayed at full width will push your content further down the page due to the increased image height.

Some examples

The examples above illustrate how despite being full immersive, when viewed on large screens at full width, the lack of a maximum width can sometimes make the website hard to digest.


Fixed width

Fixed width (or perhaps a more accurate description when dealing with responsive websites would be ‘Max width’) is the alternative to having your designs span 100% width of the screen. Instead content will be restricted to the maximum specified width. In most cases this will be applied to a wrapper which encompasses several pieces of content.

Pros

  • The width of the overall site is no longer an unknown quantity. You can have greater certainty that your content will never exceed an imposed maximum width.
  • There is more control when it comes to the compression of images, for the same reason detailed above.

Cons

  • A fixed width layout can sometimes feel a little forced, and less organic.
  • The page background will need to be a consideration, as areas where a max-width is applied will start to reveal background past a certain breakpoint.

Some examples


A happy medium

So which is the best approach to take? As with most decisions such as this, it is best to review each on a case by case basis. In fact, most of the more visually appealing websites out there today will actually make use of both techniques to create something which is that little bit more seamless, from mobile right through to desktop (whilst still adhering to usability best practices).

This example from Adidas does a great job of balancing the two techniques, and goes to show how a implementing a maximum width, for the content at least, doesn't neccessarily have to compromise the aesthetic.


Some final thoughts

Whichever direction you decide to take with your designs there are a couple of key points to keep in mind…

You should always looks to apply maximum widths for blocks of copy, as this will prohibit line lengths from becoming too long and therefore difficult to read on large screens.

And if you are going to have large, full width images then its best to make sure you have compressed and optimised them sufficiently as to avoid long load times and increased page weight.


Further reading

If you would like to know more about designing and building websites for large screens, here is some further reading on the subject - and don't forget to carry on the conversation on Twitter and Facebook.