Responsive Web Design is taking over—resizing, adapting and shifting content so that each visitor gets an ideal viewing experience, regardless of what device they are using. Responsive web design is great for so many devices, from phones to tablets to laptops, but I’ve been noticing that the majority of responsive websites don’t adapt much beyond a 960 pixel width. W3Schools shows that 85% of visitors have a screen resolution higher than 1024, which gives us good reason to start paying more attention to the use and aesthetics beyond 960. Plus, if the whole point of responsive design is to be able to view content on any size of device, shouldn’t we also accommodate wide-width screens? The big question then is, how do we effectively design websites for those higher screen resolutions?
The Problem with 960
The 960 Grid System is based on a 960 pixel width using 12 or 16 columns and 20px gutters. The 960 has become a standard. I’m not going to deny that this system works great, it gives a perfect underlying structure to work with and divides nicely into a variety of column widths for easy use. But, I use a monitor that is 2560×1440 and when I open a standard 960 grid website, it floats in the middle of the browser with wide columns on either side, usually with some type of repeating color or photo that fills the background. On one hand, you’ve got to love the white space. It focuses your attention to the important content and gives a site A LOT of breathing room. But on the other hand, you have so much dead space, why not put it to use?
Breaking away from the standard 960 is tough, and requires a great amount of consideration to keep the site from looking overly cluttered and busy. If we go big, we’ve got to do it right. We shouldn’t just fill the page because we have the space, it needs to have purpose, still look visually appealing, and content should make sense as to not overwhelm the user.
Break it up
On first thought, the obvious answer is to let the text columns expand to fill the extra space. Wrong! If there are really wide columns of text it greatly reduces the readability. In The Elements of Typographic Style, Robert Bringhurst says that a good measure or line length is somewhere between 45 and 75 characters. Any longer than this and your viewer can have a hard time scanning back to find the start of your next line of text and cause misread lines of content. Breaking items into more columns of text may be the answer to utilizing the extra width.
Make it Larger
Next, you’ve got to get the size right. In most cases the larger your device, the further you sit away from it. Example: An average person sits about 18 inches from their laptop, but about 7 feet from their big screen. If you’re further away, the site will need larger text so a viewer can actually read it from a comfortable distance. Also consider a taller line height (more space between lines of text). A sufficient line height will allow the text to be more scannable.
Reorganize and Prioritize
Lastly, content will need to be reorganized for the larger layout. With so much width to play with, why not explore the placement of the content, displaying hidden content, or bringing in additional elements. Maybe the footer becomes a sidebar column or the horizontal navigation becomes another vertical column, allowing the rest of the content to be closer to the top. With all this additional content shown on the page, look out for information overload. The larger content area can make the page look cluttered. You should only be adding content that adds value to the page and still keeps it’s visual appeal. The page should still have strong hierarchy, including a good amount of white-space with elements scaled appropriately.
With the number of large screens growing, there is good reason to start pushing the boundaries and exploring ways to make use of wide-screen environments. To do this right, consideration has to be given to the added space. Elements need to be broken up so that they make most sense. Text and images should accommodate increased viewing distances. And content should be reorganized and prioritized so it remains visually appealing, but still lets users easily find the information they are looking for. With all these considerations in mind, we should be well on our way to creating successful wide-width responsive designs.
In any diet you need to cut the fat in order to see results. After recently starting a new diet, I’ve realized that I’m no longer eating for taste, but eating for fuel. This means giving up the “fluff” that might taste great, but that also does nothing for my figure.
With new developments in screen sizes and devices, the fold has become practically outdated. In web design, the “fold” is known as the imaginary line on a screen that designates what content is visible to a viewer without scrolling. If you’re curious, the term, “fold” originated from the traditional newspaper, where the most important content and images were printed above the paper fold. This rule helped gain maximum attention from the reader and made sure essential information was always visible. The same goes for web design, you want to make sure a viewer has visual access to the key info on your site within the first five seconds of reaching the page.
