Screen Resolution Does Not Equal Browser Window Size

The biggest problem with fixed-width layouts is that they essentially depend on you making a guess as to what width will work well for the largest number of your users. Even if your web statistics software can tell you the screen resolution of each of your users—heck, even if you’re making an intranet and are certain that only a single resolution will be used—it’s simply not the case that screen resolution matches the browser window width all the time. Some people don’t browse with their browser window maximized (admittedly a small number, but growing as monitors and resolutions increase in size). Also, some people use browser sidebars that can take away hundreds of pixels from the available width.
Fixed-width designs are always going to result in some segment of your audience seeing a design that is either too wide for their windows (necessitating the dreaded horizontal scrolling) or too narrow (leaving oceans of space on one or both sides of the layout). And based on my experience with user testing, many people get almost as distressed about “wasted space” in their browser as they do about horizontal scrolling!

Research on Browser Window Sizes

In October 2006, Thomas Baekdal published a very interesting report, “Actual Browser Sizes,” on his web site, www.baekdal.com. He gathered three months’ and five sites’ worth of data on both screen resolutions and browser window sizes. The report states that while the majority of the tested users maximized their browsers—or at least came close—a significant number did not. For instance, users with 1024-by-768 resolutions—the most common by far—maximized about 80 percent of the time. His conclusion was that “in order to support 95% of your visitors, you need to design for a maximum size of 776x424px”—even though he found that only five percent of his users had 800-by-600 screens. Check out the full report at http://baekdal.com/reports/actual-browser-sizes.

Not Everyone Uses 16-Pixel Text

If you know the size of the text you’re working with, you can choose a fixed width to optimize the number of characters that appear on a line, or the line length, to aid readability. Print designers do this all the time; Robert Bringhurst’s famous book The Elements of Typographic Style recommends line lengths of 45 to 75 characters, based on years of research on readability of printed text. More recent research into the readability of onscreen text has shown that longer line lengths, from 75 to 100 characters, result in faster reading speeds (though many of the tested users say they prefer shorter lines).

However, on the web, we can’t know our users’ text sizes. The default size for browsers nowadays is 16 pixels, and the vast majority of your users will leave their text set at this default. However, some users do change the default, or set up user style sheets to format text in a way that makes it easier for them to read. Even users who leave the text at the default have the option of bumping up the size on a per-page basis if a particular page of text is difficult to read (even text you set in pixels is resizable, except in Internet Explorer 6 and earlier). So, if you optimize line lengths for 16-pixel text, you may be optimizing readability for the majority of your visitors, but not for all. Don’t get me wrong; designing for the majority is a good thing. Just don’t fool yourself into thinking that “majority” is the same as “all.”

Another problem is that these line-length studies don’t take into account different disabilities that may lead certain groups to prefer much shorter or longer line lengths. Although I agree that it’s often our job as designers to set things up for our users in the best way for them because they don’t know what’s best themselves, there are times when we need to trust them to be better informed than we are about what will best meet their needs. At the very least, we can optimize the design for what we think will help the majority of our users, but leave open the possibility for individual users to adapt our design to better meet their needs—an advantage that print and more rigid media do not enjoy.

Liquid or Fluid: Adapts to the Viewport

Liquid layouts, also known as fluid layouts, change in width based on the size of the user’s viewport. Liquid layouts built with CSS may or may not have any width assigned to them. If they don’t have a width assigned, they will fill up the user’s viewport no matter how big or small it is.

If a designer does assign a width to a liquid layout, it will be measured in percentages, not in pixels. The percentage refers to the portion of the viewport it takes up.

Taking Advantage of Screen Real Estate

When a liquid layout changes in size, all of the content within it—and often the background images as well—has to shift around on the page to fill up the space. As long as the content can wrap, this flexibility prevents horizontal scrollbars from appearing and makes full use of the screen real estate available on each user’s device.

Once the content can no longer wrap, due to the fixed widths of images and other content, a horizontal scrollbar will finally appear, but this will happen only on the very narrowest of screens or on sites with very large fixed-width content. Using a liquid layout instead of a fixed-width one, it’s much less likely that a user will miss important content hidden by a horizontal scrollbar. Also, for users with very large viewports, more content will be visible on the page at once, decreasing the amount of vertical scrolling they have to do.
Respecting User Preferences

A liquid layout allows you to stop guessing at what works for your users and instead let them choose what page widths best meet their needs. There’s no longer a need for a “best viewed at 1024 by 768” type of disclaimer on your home page. Even if a user can change his resolution to meet this requirement, the chances are slim to none that he’s going to do so to accommodate your site. He’s set that resolution for a reason: either he has no other choice given the constraints of his device, or it’s the resolution that he enjoys or finds the most useful (for instance, some users stick with 800 by 600 because it makes everything bigger, which is easier to read). With liquid layouts, you don’t need to worry about this anymore. Liquid layouts just work in a larger range of viewing scenarios, respecting users’ preferences for how they like to view the web.

Improving Readability

Horizontal scrollbars are the sworn enemy of readability. After all, scrolling continually back and forth to read across several lines of text does not make for the most enjoyable reading experience. With a liquid layout, horizontal scrollbars almost never happen, because users can size the window however they like to produce lines of text that they find the most comfortable to read and understand. Preferences for line length can vary by age, disability, and browsing device, so leaving widths adjustable can help a much broader range of people read your content efficiently than setting one fixed width might.

One of the main arguments against liquid layout, actually, is that it decreases readability due to overly long lines of text on very large browser windows. This can certainly be the case when a liquid layout is implemented poorly or in certain user scenarios. We’ll talk more about this challenge later in the chapter.

Dealing with Handheld Devices

While liquid layouts increase the range of sizes at which your web site can look good and work well, you’re still probably going to need to set up a separate style sheet for handheld devices such as mobile phones and PDAs. It’s just not possible to design something that works as well at 200 pixels wide as at 1200 (unless you’re going for the old-school, plain-text look).

Increasing Accessibility for People with Disabilities

Some users have disabilities that make line length even more essential for successfully reading and understanding content. If a user has a visual impairment that requires her to make her text size very large, she may prefer to browse with a very large window to allow more words to fit across each line. In a narrow, fixed-width layout, large text may allow only two or three words to fit on every line, making reading more difficult and resulting in a huge amount of vertical scrolling.

Other types of visual impairments may necessitate the use of screen magnifying software, which shows only a small, highly zoomed portion of the window to the user at one time. People who use screen magnifiers may prefer to make their windows very narrow so that the entire width of each line of text fits within their small, magnified area of the screen and they don’t have to keep pushing the magnified view back and forth horizontally to read.

Line length can also play a role in comprehension. For instance, many people with dyslexia find it easier to read and understand text with short line lengths.

Creating flexible layouts isn’t just a matter of what CSS to use. You need to start out with a design comp or mockup that can be successfully turned into a liquid or elastic layout. Not every design can. Since design comps are static images, not changeable web pages, many designers fall into the trap of designing graphic elements that can work at only one size, or with a particular font size, or only if they appear at a certain point on the screen. When you learn how to stop designing in this way and start thinking in terms of the eventual flexible CSS, you’ll have a much easier time creating flexible layouts that are attractive and robust enough to stand up to several different user scenarios. In this chapter, you’ll learn how to identify design features that are—and are not—flexible-friendly, as well as how to change those that aren’t—sometimes only slightly—to work in a liquid or elastic layout. We’ll also start to work directly on the pages of the example site that we’ll be building throughout the book.

Design Principles for Flexible Layouts

There are a number of guidelines for flexible designs that you can simply memorize and always keep in mind when designing your own layouts. Many of these are not only applicable to creating liquid and elastic layouts, but also to creating fixed-width layouts that you want to make more adaptive to user preferences such as font size. They’re a good primer to designing for the unique strengths of the medium—that is, specifically for the web, rather than for print.

Many of you don’t get to design your own layouts, but instead have graphic designers—most of whom don’t know how to actually build web pages, at least not with CSS—creating the design comps that you then turn into real pages. This isn’t an ideal scenario, because it’s really important that the designer understand how the eventual product will be created to be able to successfully design something that’s compatible. If your designer knows how to make CSS layouts but simply chooses not to because the two of you have a good division of labor going on, you probably won’t run into many problems. But if you’re working with designers who aren’t also (X)HTML and CSS developers, you’ve probably experienced a lot of frustration in trying to translate their work to the web. These graphic designers would be the ones to benefit the most from this chapter (maybe you can leave a copy of this book on their desks, with a nice big bookmark in this chapter), but you can also use it to your own advantage. Many of the problematic design features you’ll see demonstrated here don’t require much change to work with flexible layouts—it’s just a matter of knowing what that change should be.

• Avoid: Horizontal Alignment Across Columns
• Avoid: Fixed-Width, Full-Width Content
  • There are also additional techniques that you can use to avoid unwrappable full-width images.
  • Don’t Design Images to Span the Full Width
  • Create Full-Width Images Out of Multiple Sliding Pieces
  • Generate Scrollbars for Overly Large Content
• Avoid: Text Matched with Images That Can’t Expand
  • Pick images or design imagery that can expand by:
  • Images that are Masked
  • Images that Can Show More or Less of Themselves
  • Images that Blend into Background Colors or Patterns
  • Images that Can Scale without Looking Too Pixelated
  • Images that Simply Don’t Have to Match in Height
  • Achieving Matching Heights with Elastic Design
• Avoid: Irregular Shapes
• Avoid: Fixed Heights for Anything Containing Text

Page Content

• Apart from navigation bars, there are many types of content within the main area of the page itself that need to be designed to wrap if you want a successful flexible layout.
• The problem with liquid layouts is not horizontal scrollbars, but rather really short or really long lines of text. You can avoid both of these problems by using em values for min- and max-width, thereby limiting the width to a certain number of text characters.

Another great use of an em min-width in liquid designs is on sidebars. You may have a sidebar that contains a navigation menu with large words that could overflow out of the column at very small window sizes or if the user has specified very large text. Both problems can be avoided if you set a min-width in ems on the sidebar column that will accommodate the number of characters in the longest word in that column.

You don’t have to use both min- and max-width at the same time: You can choose one or the other.