Why you shouldn’t ignore the bigger breakpoints in Responsive Web Design
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
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.
Some nice examples of centrally divided web design layouts
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.
By Rob Lafratta
