Don’t ignore the bigger breakpoints in responsive web design

When responsive web design (RWD) gets mentioned, we generally think “mobile friendly.”

There’s a lot of focus on designing for smaller screens, but there’s only minimal consideration for larger screens.

With the introduction of media queries, designers are able to specify breakpoints 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’s generally no consideration for the 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 and 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 on 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
• Full-screen background

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

“Designers: don’t neglect the bigger resolutions.”

Desktop websites all look the same nowadays

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

Let’s start a new trend.

1024×768 isn’t the only desktop resolution. A desktop screen can vary in resolution, from 800×600 to 2560×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.

As screens get wider, why not make the most out of the extra space and create more usable experiences on the 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 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’re able to create designs that users will be engaged by—and they’ll 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 2 halves to display separate areas of content.

The content in the left will be different to the right, usually using contrasting colors to help the user identify which area they’re interested in. Often the 2 areas will scroll independently of one another, but sometimes one side will be fixed, while the other is the scrollable content.

It’s ultimately a large 2-column website that makes the most out of the available space and improves the user experience on larger resolutions.

Some nice examples of centrally divided web design layouts

Split-screen designs remind 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’s little focus on the usability of websites on extra-wide screens.

“Don’t ignore the bigger breakpoints in RWD.”

Whether you’re 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, there’s a fundamental step: don’t ignore the bigger breakpoints in RWD.

This was originally published on the Design Agency blog.