Why you shouldn’t ignore the bigger breakpoints in Responsive Web Design

Rob Lafratta
Sep 29, 2015 · 4 min read

When Responsive Web Design (RWD) gets mentioned, we generally think ‘mobile friendly’. There is a lot of focus on designing for smaller screens — but minimal consideration for larger screens.

With the introduction of media queries, designers are able to specify breakpoints in which a website will adapt to and target specific devices and viewport sizes. Basic media queries are usually for a Phone, Tablet and Desktop. But there is generally no consideration for Very Big Desktop.

Don’t neglect the bigger resolutions

I regularly browse websites for inspiration, and my billion pixel retina iMac usually highlights issues that developers / designers tend to ignore, purely because they don’t have a big enough monitor to notice. Some main issues are:

  • The background image has a fixed width, and leaves gaps either side on larger resolutions
  • The font size is too small to read
  • The columns of body text are too wide, and make it difficult to read
Image for post
Image for post

I’m surprised that this is still a problem, considering we are in 2015, where fluid and responsive websites are pretty much the norm.

Desktop websites all look the same nowadays

The trend of using a gigantic full screen image (that is probably pixelated or has no focal point), a fancy font overlay with bad leading, and two generic call to action buttons, is an ok solution. It’s a popular trend, because everyone is doing it — and because everyone is doing it, it’s accepted as the only solution for larger screens.

Let’s start a new trend.

1024 x 768 isn’t the only desktop resolution. A desktop screen can vary in resolution, from 800 x 600 to 2560 x 1440, and they continue to get bigger.

It may look good up to a certain screen size, but when the background image starts to become pixelated and lose its focus point, maybe it’s time to adopt a new solution.

It may look good up to a certain screen size, but when the background image starts to become pixelated and lose its focus point, maybe it’s time to adopt a new solution.

As screens are getting wider, why not make the most out of the extra space, and create more usable experiences on desktop.

The optimal line length and readability

For optimum readability, the ideal number of characters per line should be about 65–75. Generally any body text that is wider than about 600px is probably too wide, and difficult to read — loosely based on a font size of 16px. Using the centrally divided web design layouts, or column layouts, we are able to create designs that users will be engaged by, and be intrigued to read more.

What are centrally divided web design layouts?

A centrally divided layout is where the web page is split vertically into two halves to display separate areas of content.

The content in the left will be different to the right, usually using contrasting colours to help the user identity which area they are interested in. Often the two areas will scroll independently of one another, but sometimes one side will be fixed, whilst the other is the scrollable content.

It is ultimately a large two column website, which makes the most out of the available space, and improves the user experience on larger resolutions.

It is ultimately a large two column website, which makes the most out of the available space, and improves the user experience on larger resolutions.

Image for post
Image for post
dropbox.com/guide
Image for post
Image for post
new-letters.de/
Image for post
Image for post
recap.bigcartel.com/2014/
Image for post
Image for post
klassegrafik.de/en/klasse
Image for post
Image for post
formlets.com/
Image for post
Image for post
desktimeapp.com/
Image for post
Image for post
parktavernsp.com/
Image for post
Image for post
laurenwickware.com

I really like the idea of split screen designs, as it reminds me of a magazine layout. It’s a trend that I hope to see more of in the future, as it serves a purpose and is visually interesting.

Conclusion

With the introduction of Mobile First, designing for Desktop has almost become an afterthought, and there is little focus on the usability of websites on extra wide screens. Whether you are viewing a website on your phone or on a desktop, the same amount of care should be taken to ensure you create an incredible experience for the user.

As a designer, I think it’s important to create usable experiences across all devices and resolutions — and to do this successfully, a fundamental step is to not ignore the bigger breakpoints in RWD.

Image for post
Image for post
roblafratta.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store