With over three years of responsive web design in our collective portfolios, we now have a solid set of design patterns for making websites work on small devices. But what about larger screens?
It’s become common for sites to employ a liquid design for smaller breakpoints, which allows the content to expand and contract as necessary to make the most of the available screen width. At the opposite end of the spectrum, however, many of those same sites have a maximum width of 960 pixels or so, which can leave a lot of unused pixels on a contemporary desktop display.
Designing for the big screen can be complicated—negative space, scale, density, and layout devices such as grids, modules, and columns can be factors in managing hierarchy and emphasis.
Large screens are also generally shaped in a wide landscape orientation, a poor fit for the traditional vertically scrolled webpage. As with smaller screens, there are a wide variety of screen sizes and resolutions—but in the case of larger screens, the differences are often magnified, ranging from ultra-light 11-inch laptops to 30-inch desktop monitors.
Given these conditions, it’s not surprising that many desktop layouts (like this one) are designed to suit a 1024×768 resolution. It’s a leftover from an earlier era, when designs were constrained to the screen resolution that was most prevalent amongst users. Today, with the majority of desktop users on screens that are wider than 1024 pixels, a maximized browser window can turn that carefully considered 960-pixel layout into a monolith in a field of whitespace.
More people are accessing the internet with a mobile device every year, and so it makes sense to concentrate budgets and timelines on creating good user experiences for smaller screens. Mobile layouts can be perfectly usable on larger devices, but the same cannot always be said for desktop layouts viewed on small screens.
But by embracing large screens, designers have the opportunity to work within a larger fold, presenting the user with more content simultaneously, lessen scrolling on longer pages, and create a richer, more expansive user experience. And by using the same practices we developed to adapt layouts to smaller screens and identifying some common patterns for large screens, we need not necessarily introduce extra cost or time to our projects.
As with any design, the first consideration when approaching larger breakpoints is content. Long- and short-form writing, photography, ecommerce, video, or web applications may benefit from different approaches in different ways.
Photography, search results, and other content presented in grid format are easy candidates for wide screens. Showing as much content as the screen can accommodate allows a user to quickly scan and compare results.
On the other hand, long-form reading is a challenge for wider breakpoints. Long line lengths can make it difficult to follow the text from line to line, while short line lengths can introduce a sense of jumpiness or acceleration, breaking a reader’s rhythm and pacing.
To make reading more comfortable, a designer needs to balance the width of the text column (the measure) against the size and line-height (leading) of each line of text. Classically, an appropriate count for a single column of text is seven to 10 words (Josef Muller-Brockmann) or 45 to 75 characters (Robert Bringhurst). Taken another way, Bringhurst also notes that the measure of a conventional book column is about 30 times that of the type size used, but that this number may also range from 20 to 40 times the size of the type.
Wider columns can use more line-height to make it easier to follow the text from line to line, but too much line-height can cause lines to drift apart, resembling a college research paper. Similarly, as the text size in a column grows larger, the number of lines that can be presented vertically on the screen grows smaller, increasing the need for scrolling and breaking the reader’s immersion. Simply scaling the text for larger breakpoints is a limited solution.
Working with long reads#section3
The Great Discontent demonstrates how a site can use art direction to adapt to larger screens without necessarily filling every single pixel in the browser window. Each article expands its feature art at the top to fill the viewport, resulting in a striking full-bleed effect upon first viewing. The main content of each article is set in a relatively narrow main column, but sidebars, pull quotes, and inline art expand beyond the central column. Breaking the content out of the main column creates an asymmetrical shape which complements the full-width artwork at the top—creating the illusion of a full-window experience without compromising legibility. Large images like these can come at a cost, though, as a balance between image quality and the overall page weight needs to be considered.
The recently relaunched Roger Ebert site deals with large breakpoints by simply scaling up the maximum width of the page and the page elements proportionately. In theory this might work, but the execution is not entirely successful. Elements such as headers scale up vertically as well as horizontally, meaning the amount of content displayed within the fold is drastically reduced. Inexplicably, main body copy on the more text-heavy pages does not scale up in proportion to the other page elements, so it seems dwarfed in comparison, in addition to being set in a size that is too small for the main column measure.
Using the extended margins of larger screens for related or tangential content, such as Medium’s comments layout, is another idea that seems well suited for long-form publishing. When the main content column is maximized on smaller screens, it moves aside to reveal the comments area; on larger screens, the comments are revealed in the available margin space.
I’ve also always liked Grantland’s use of the lower right column for footnotes, which takes advantage of wider screens while maintaining focus on a readable central column. Photographs, figures, asides, quotes, and other related content can be extended out into the margins of wider viewports. This allows a designer to extend the vertical grid outward to create variety while preserving the flow of the main text.
Newer CSS features like columns and regions could be useful tools to enhance long-form reading on wider screens. CSS-based columns are now supported across most new browsers, and could be deployed within sections of an article to maximize screen usage while maintaining a good measure for text readability. If you have a large screen, for example, see my column-based demo of this article.
As a progressive enhancement measure, older browsers that do not support these features could be restricted to a single column of appropriate measure.
Chunking content on large screens#section4
Breaking content into chunks allows users to quickly and efficiently process information on content-heavy pages, and it’s a natural fit for responsive designs, because it allows content to be easily stacked hierarchically or arranged in columns for different breakpoints.
The advantage of this technique for large screens is that each chunk or band of content can use a different layout to optimize for legibility or impact. A good example of this approach is the Manchester City Council site, which uses different groups of modules in restricted widths together with a full-width photography chunk to create impact and emotion. The layout adapts fluidly to different viewports while retaining an appropriate width and layout for the content of each chunk.
Juliana Bicycles uses a more visual approach to content chunking, combining horizontal bands with flexible tiles to create a rich and compelling responsive site that also scales to large screen widths. Navigation is recast as a full-window carousel with rich background photographs. Content is presented in modular blocks, and gutters that appear between tiles are removed in tablet and mobile screen sizes. A paper texture background fills in empty tile spaces and also helps fill out the screen at the largest breakpoint. Using image-based modules in this way can be expensive from a bandwidth perspective, but is a great way to get the user to navigate quickly by showing rather than telling.
Tiling modular content#section5
The obvious advantage of a big screen is the ability to see a lot of content at one time.
With collection-based content such as photos, tiling can be an effective way to to fill large screens. We see this every day when searching Google Images—the results spread out to fill the viewport, presenting a large variety to choose from in a single scan.
Pinterest also uses a tiling layout for images, with the addition of text and whitespace to mitigate what could be an overly busy layout. On larger screens the image preview modules seem to tile indefinitely. For a collection site, where the user experience is about quickly collecting and marking favorites, filling the viewport with thumbnails makes it easier to scan and creates a satisfying sense of fullness.
Uniqlo uses a wide, tiled-image layout that also looks well-designed and spacious. Items are chunked together with large headers acting as bumpers between sets to add breathing room. Tiling the products across a wide area allows shoppers to quickly compare items visually. At the same time, the whitespace, model photos, and variety in scale add refinement to the overall look and feel and help reinforce the point that design is an important differentiator in Uniqlo’s product line.
Neither Pinterest nor Google Images are responsive or adaptive sites—they both employ a separate site for mobile users. Uniqlo is also only adaptive to larger screens; small screens get the narrowest desktop layout. While these sites may not be complete models for responsive design, we can look at them as examples for expanding this type of content.
Another interesting technique for larger screens is based more on classic print design, rather than restructuring or manipulating content to fill the browser.
Institut Choiseul confines the content of each page to a structured grid in the center of the window, but effectively stakes out a large screen presence by extending a field of color from the logo and main page content outward toward the left edge of the viewport. The Back to Top link appears in the lower left corner of the viewport when the page is scrolled, a small touch that stakes out the entire window for the page. The strong grid and large fields of color give the site a sober, logical tone that evokes the International Design style of the 1950s and 1960s.
Kanselarij der Nederlandse Orden has a similar style, with asymmetrical bands of color that provide the background to a centered flexible grid. Because the grid expands as a percentage of the total window width, the content also plays a part in filling the screen, but the boxy color fields add a level of sophistication to what is otherwise a fairly ordinary layout.
Small effects such as a color tone or texture in the background, or removing boxy lines from the edges of a layout, can go a long way toward creating a sense of completeness in the maximized window. Creative use of asymmetry instead of skinny, tower-like layouts can also keep readers from drowning in white margins.
By simply extending common techniques for adapting content to smaller breakpoints, we can see plenty of opportunities for larger breakpoints as well. Sites that use a strong grid will have an easier time of it, as a well-structured grid should have no problem expanding into a wider space.
Obviously the most important consideration in any design is the content, and so that must be the basis for any effort to expand a design to fill a wide screen. For long reads, it’s more important to create a good rhythm and flow so that the text can be read without distraction. For photographs or graphics, space and scale contribute directly to impact. Government and service-oriented sites must provide easy access to tasks and information. Ecommerce sites need to make it easy for consumers to evaluate and purchase products. A layout’s density should reflect the site’s tone—more density for a more active experience, less for a slower, more thoughtful tone. Much like framing a photograph, filling out the viewport can make a design seem bigger and bolder, just as framing a design in generous whitespace can make it seem more elegant or precious.
It may be true that desktop users have the luxury of resizing the browser window if all that whitespace makes them uncomfortable, unlike users of smaller devices. It may be also be true that not all desktop users browse with large or full-screen windows. But as with mobile, we shouldn’t make assumptions about which devices are used to view our content now, and especially in the future. Large screens, in some cases, can provide both enhanced usability for users and a richer palette for designers. It’s up to us to take advantage of these expanded borders.
23 Reader Comments
Glad to see some love for the big screen. I always wondered why so many people optimize for mobile to the nth degree, and then ignore screens over 960px. So much real estate available to display great content, and less of a concern over bandwidth means you can serve up great imagery and typography.
I work on a web app that can run on a 1080p TV and be controlled by the TV remote, and it introduces entirely different large screen design considerations. In this case, the bigger screen needs a simpler design than even the mobile layout.
Sometimes, simply expanding the design isn’t enough. You have design for the medium, not just the screen size.
Reading this article makes me glad to have discovered web design when I did, as interestingly enough one of the main catalysts in discovering my love for web design was tinkering with almost every website I would regularly view using the browser add-on Stylish to expand the container, add a few media queries and tweak a few more things so that it would make much more efficient use of space.
This was during the period when 1080p hadn’t become standardised yet so almost every website utilised the same now outdated patterns of using narrow columns, dense text and small low resolution images. You could probably find a tweet I sent out on my frustrations about this if you go far enough back, glad things have changed for the better. 🙂
I’ll read the article as soon as I have the time but for now I wanted to commend Kevin Cornell for unfailingly finding a witty metaphor for each topic of the day.
“A layout’s density should reflect the site’s tone” — I love this. Nice piece Mike, and the demo page is great too.
In case anyone’s interested, here’s a Branch thread that’s kinda related: Layouts with room to spare. See Mike’s comments near the bottom.
Also, Karen McGrane fields a related question on Shop Talk Show. Her answer includes, as Mike says in this article, that mobile traffic necessitates small screen attention. But very worth listening to.
It would help if there was a standard way of getting the device’s display resolution, physical screen size AND typical viewing distance (which could be a configuration setting on the device).
This would allow to do calculations and adapt layout and text size for any display and context. The same responsive layout could then be used on a small screen phone or even a ridiculously large advertisement display (which might usually be viewed from quite far away) so the text size would need to be quite big even though it’s a large screen which could potentially have either a low or high resolution.
It bothers me that more and more CSS stand out from the technology available. Media queries are getting outdated. Phone / tablet manufacturers are expanding resolutions. 2560 x 1440 on 5 inch screen? Not a problem anymore. How does it compare to 1920 x 1080 on 24″ monitor or 60″ TV display? You could also clone, with just one touch, Your current phone viewport to large TV screen. What should now happen with displayed web page? Present mobile content on such a large screen? We need to start thinking what to do next.
@Kari Söderholm when you say “typical viewing distance”, I believe that you have especially tv in mind ?
I heard that idea of querying this several time, and altough it is intuitive, I think it is wrong. We have habits with tv, but it may change in the future. We can’t guess usage that way.
My idea is that we should not change font-size for tv, but build stuff that react well to browser/user font-size setting. This already exist, but until now we were discarding it in responsive design.
By wisely using “rem” for interface stuff, and “em” for fonts, it is possible to build interfaces that react to both zoom (everthing changes size) and change of font-size (only the font increase, text extends container towards the bottom).
If the web is built that way, then it only necessary to increase the browser default font size to have a correct experience on a web tv.
rem / em is the solution.
I agree with Karl and Zachary. All this article talks about is filling more space, but in reality more space may also imply further viewing distance. I use my TV often to browse the web but I always have to zoom in. As far as reading on a TV is concerned, responsive should mean the font size grows again at a certain threshold. Responsive means I should not need to zoom in to read a website
I spend a lot of time thinking and making sure websites work well on small screens. It was refreshing to be reminded of the other extreme and to have some ideas for using the extra space well presented. Thanks for the article.
One question that often comes to mind when I think about this is, how large to individuals actually have their browsers? More and more people have large monitors, but do they maximize their browser window. Anybody aware of statistics on the viewport (not monitor resolution) of website visitors? While the topic and tackling of large viewports is important I would be very interested in data on viewports to get a better idea of common size ranges.
Great article, helpful examples — I almost missed the demo! It looks great. I’ve been conscious of these concerns while designing and publishing on my own website, especially the idea of ‘filling in’ the margins when it makes sense. Medium’s margin comments are one of the best examples of filling in the margins that I’ve seen. Hulu.com is a good example of tiling.
Good article. I think at some point the developers will turn their attention back to big screens. From my point of view ‘developing for mobile’ has gone mad.
I’m very happy with the attention for big screens. It has always annoyed me that responsive design in practice means mobile design.
That said, budget-wise and attention-wise, big screens are a challenge. My take on it is that if you don’t have the budget to seriously also design for big screens, at the very least make your site zoomable. Personally I use em-based breakpoints for this. It certainly isn’t perfect, but it beats all the whitespace. An example:
Zoom that in Firefox or Chrome on a big screen. If all goes well and you zoom in far enough, you can even see it switching to tablet view or mobile view. It does have the “fold” issue, but its better than nothing.
Well, it should be time to get back our attention to big screens. After getting blinded on microscopic lighted boxes I think we all need to wash our eyes on big, great, spacious, well conceived contents. Great article, loved it!
Truly said by Nathan Dana
Glad to hear about big screens as they give us every thing clear to visualize, engage. We don’t have to put stress on our mind to see and read.
While designing for the big screens it feels like the screen is your canvas and you are totally free to use your creativity to draw on the canvas as you like and make it completely awesome. It feels like everything is yours and you live with it, have fun with it.
In smartphones we have to see the details and every single piece of chunk very precisely to get the output. It’s not that easy as we see on the big screen.
I love to design for the big screens instead of mobile.
It gave me the confidence for designing more and more for the big screens
Thanks Mick Pick for really good article
Thanks for the comments! The article really stems from the fact that I work in front of a desktop-sized monitor all day, like all the other people in our location, and I wanted to try to fond some way of working that larger palette into our responsive workflows.
I think web design for the TV is quite a different pursuit from what is being discussed here, since the content, viewing distance, interactivity, and context are so different from the usual desktop, laptop, or mobile experience.
Mike, the examples are great! Don’t you think most people generally use big screens either as TV Internet or at work (when they have a chance to sit at their desk and browse whatever they want)?
As a graphical designer I was very interested in Responsive Web Design and I agree totally with you because for us it is very important to see clearly in detail our work and that the client can see it too. I hope developers will pay more attention to large secreen devices in the future. Great point of view!
It’s not necessary to fill the extra space for the sake of filling the space.
Good design is to remove anything unnecessary until you can’t remove anymore, and good visual design lays in the quality of the details.
White space is great, we love white spaces, it’s better than over crowded view point. As the screen size increases, the movement of our eyes increases horizontally, too.
Instead of stretching/rearranging the content to fill the space, it’s better to concentrate on making the content fit appropriately to suite the human eyes with higher quality and sharper imagery. Just saying.
I am guilty of not designing for super large screens because of main two reasons: 1. I don’t have a huge screen to test with 2. My target audience do not use large screens.
Mobile is not a problem. Is there a tool or simulator to test for large screen sizes?
Interesting read. I liked your two-column demo. Very nice. The issue I have with multiple columns is when you have to scroll. When your all the down at the bottom at the first column you have to scroll all the way up to the top of the second column. On paper, this is quite easily done because you have the whole paper in front of you. One solution might be to include internal links from one column’s end to the next column’s beginning.
I have a 30″ monitor at home and a 27″ at work and always run 2 Firefox windows side by side, each 50% of the 2560 px width, and each with multiple tabs. This allows me to compare text on 2 websites without any clicking of window/tab manipulation.
Websites wider than 1280 px are so rare, that most of the time you are looking at extra-wide background when surfing full screen. Having 2 browser windows side by side is as productive as having 2 monitors.
Got something to say?
We have turned off comments, but you can see what folks had to say before we did so.
More from ALA
Personalization Pyramid: A Framework for Designing with User Data
Mobile-First CSS: Is It Time for a Rethink?
Designers, (Re)define Success First
Breaking Out of the Box
How to Sell UX Research with Two Simple Questions