Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Flexible Web Design: Types of Web-page Layouts

  • Print
  • + Share This
Web-page layouts can be grouped into three categories based on how their width is set: fixed-width, liquid (or fluid), and elastic. Zoe Mickley Gillenwater discusses the characteristics of each type of layout.
Like this article? We recommend

The term “flexible layouts” can mean different things to different people, so let’s make sure we’re all on the same page before we dive into designing and building them. In this chapter, you’ll learn the defining characteristics of each of the main layout types—fixed-width, liquid, elastic, and hybrid—described in the Introduction. We’ll focus on the benefits and pitfalls of each so that you can decide which type might be right for your particular site.

Types of Layouts

We can group web-page layouts into three categories based on how their width is set: fixed-width, liquid (or fluid), and elastic. It’s also possible to combine these layouts into hybrid layouts by mixing units of measurements; each column of the design can use a different unit. In any of these four types of layouts, any number of columns or aesthetic themes is possible; the type simply establishes how the browsing device determines how wide to make the layout appear to the user.

Fixed-width: Rigid Pixels

Fixed-width layouts are the designs you’re most used to seeing—and probably making, since you’re reading this book to learn the alternatives. The width of the overall layout of a fixed-width design is set to a value in pixels that’s decided by the designer. Usually, the designer chooses a width based on one of the common screen resolutions, such as 800 by 600 or 1024 by 768.

Fixed-width designs are rigid: they don’t change size based on any variations in the user’s setup (Figure 1.1). This can allow you to design a graphically rich site that holds together well and looks consistent across a variety of user setups. If you have done your homework on the target audience of your site, you can design a layout that fits nicely in the majority of users’ browser windows, and you can make sure the lines of text are set at an optimal width for ease of reading—at least, if you assume a couple things.

Figure 1.1 The same fixed-width layout in two differently sized browser windows.

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!

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 (Figure 1.2).

Figure 1.2 The same liquid layout changes width based on the browser window size.

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.

Figure 1.3 A liquid layout always adapts to the browser window size, even if you assign a smaller percentage width so that it never takes up the full width of the browser window.

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.

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.

Figure 1.4 If the browser window is wide, screen magnifying software may not be able to show the entire line length of text within the magnified overlay, so the user has to push the overlay right and left to read the text (left). If the browser window is narrow, and the text width adjusts accordingly, the entire line of text can fit in the magnified overlay (right), making reading faster and easier.

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.

Elastic: Adapts to the Text Size

Elastic layouts change in width based on the text size set in the user’s browsing device. A user who has set a larger default text size will see a page where not only is the text bigger, but the entire layout is bigger proportionally than that seen by people with the default text size (Figure 1.5). If a user changes his text size while viewing the site, the entire layout width will also change proportionally, either wider or narrower, depending on whether he increased or decreased the text size.

Figure 1.5 The same elastic layout in two browser windows of the same size, but using different text sizes.

Like fixed-width layouts, elastic layouts always have a width assigned to them, but that width is set in a unit of measurement called an em. If you’ve used CSS for formatting text, you’re probably familiar with ems (but we’ll go over this in more depth when we start actually building elastic layouts). One em is equal to the font height, which in turn equals roughly two characters in width, since most characters aren’t nearly as wide as they are tall. By setting the width of your layout in ems, you’re essentially telling the design to be as wide as a certain number of text characters. That means when the text gets bigger, the whole layout has to widen as well to stay equal to the same number of now-larger text characters. It works in reverse, too, of course: smaller text sizes make the layout narrower.

Table 1.1 How to Resize Text or Zoom

Browser

How to Resize Text

How to Zoom

Internet Explorer 7

View > Text Size or View > Text Zoom, and then choose a size keyword (e.g., Larger)

Ctrl + + (plus sign) to zoom in
Ctrl + - (minus sign) to zoom out

Internet Explorer 6
and earlier

View > Text Size, and then choose a text size keyword (e.g., Larger)

Not available

Firefox 3

Ctrl/Command + + (plus sign) to increase
Ctrl/Command + - (minus sign) to decrease

Deselect Zoom Text Only
(View > Zoom > Zoom Text Only)
Ctrl/Command + + (plus sign) to zoom in
Ctrl/Command + - (minus sign) to zoom out

Firefox 2 and earlier

Ctrl/Command + + (plus sign) to increase
Ctrl/Command + - (minus sign) to decrease

Not available

Opera

Not available on a per-page basis

Ctrl/Command + + (plus sign) to zoom in
Ctrl/Command + - (minus sign) to zoom out

Safari

Ctrl/Command + + (plus sign) to increase
Ctrl/Command + - (minus sign) to decrease

Ctrl/Command + + (plus sign) to zoom in
Ctrl/Command + - (minus sign) to zoom out Available only as part of Mac OS system-wide zoom feature; not built into Safari on Windows.

Elastic layouts are the rarest type of layout because before CSS became usable for page layout, they were simply impossible to create with tables (the page-layout mechanism used before CSS and still in heavy use today). Since many browsers now allow you to “zoom” pages, I don’t think that designers will increase their use of elastic layouts, which behave similarly to zooming. Nevertheless, there are definite benefits to elastic layouts.

Increased Typographic Control

Elastic layouts give you more control over where text falls in relation to other design components on the page. In other words, your design proportions stay intact. In a fixed-width layout, if a user increases his text size, the text has to wrap onto more lines and make its container taller (or overflow, which is even worse). Your meticulously crafted headline that fit so perfectly on one line might now be awkwardly broken between two lines, or a piece of text that needed to be near a certain image may have moved. The same thing can happen with liquid layouts when a user narrows her browser window. Elastic layouts can keep the same number of words and characters that appear on each line consistent no matter the size of the user’s text or window.

Figure 1.6 Dan Cederholm’s SimpleBits web site features an elastic design, so as you increase your text size, the text doesn’t wrap any differently. Notice that the blurb text at the top of the page keeps the same number of characters on each line when the text is small (left) or large (right).

Improving Readability through Standard Line Lengths

With widths set in number of characters per line, you can choose line lengths that optimize readability. As mentioned earlier, line lengths of 75 to 100 characters usually result in increased reading speed (though not necessarily increased comprehension or comfort) over shorter line lengths.

As we saw with liquid layouts, however, not all users prefer the same line lengths. Certain types of disabilities, as well as device limitations and age, may make the line lengths you choose less ideal or downright problematic for some people. In fact, the most recently published study found that users preferred either the shortest length tested (30 percent preferred 35 characters per line) or the longest length tested (another 30 percent preferred 95 characters per line). Also, many studies have shown that users say they prefer shorter lines even though the testers found they read faster with longer lines.

It’s a delicate balancing act: do you trust users to set up the ideal browsing environment for their needs, or, knowing that most users have no idea what line length would be most comfortable or result in the best performance for them, do you optimize it in the way you think will work best for the majority? And if you do choose to use an elastic layout to optimize line length, do you optimize it to the users’ preference or to their performance, since it appears they often don’t match? There’s no right answer, which is why there is no one type of layout that is right for all sites. We’ll cover how to choose which one may be best for your site later in the chapter.

Increasing Accessibility

While the readability improvements that we’ve discussed can affect everyone, they can have an even greater impact on people with disabilities, such as visual impairments that don’t warrant the use of a screen reader but do require larger than normal text. People with motor impairments might also use larger text in order to have larger than normal link text, to make it easier for them to “target.” And some people, such as those with tunnel vision, might actually prefer smaller than normal text so that more content can fit within their range of vision. Designing layouts that stay proportional at all these different sizes can really help a wide variety of people.

Hybrid Layouts

You don’t have to stick with one of the “big three” types of layouts. You can create countless hybrid versions simply by mixing units of measurement or limiting the flexibility range of a liquid or elastic layout.

Mixing Units of Measurement

Most web layouts are built using the idea of columns, whether or not the columns are explicitly visible in the design. Each column can have its own unit of measurement and be thought of individually as fixed-width, liquid, or elastic. Mix them together, and you’ve got a hybrid layout. For example, a common type of hybrid layout has a fixed-width sidebar with a liquid main content area (Figure 1.7).

Figure 1.7 The same hybrid layout (fixed sidebar, liquid main column) in two differently sized browser windows. Note that the sidebar is the same width in both windows, while the main content column adapts to fill the remaining viewport space.

Hybrid layouts offer many of the advantages of liquid and elastic layouts without some of the disadvantages. But they’re sometimes tricky to build due to the math involved—quick, what’s 200 pixels plus 80 percent? It’s impossible to know, of course—and if you don’t know, how can you set the width on the container that’s supposed to hold these two elements? Luckily, there are usually ways to avoid or work around these challenges, as we’ll go over in Chapter 6 when we build some hybrid layouts.

Limiting Flexibility with Minimum and Maximum Widths

Another way to create a functionally hybrid layout is to limit the amount of a liquid or elastic layout’s flexibility by setting minimum and maximum widths. The CSS properties min-width and max-width allow you to set limits on how far a flexible layout will expand or contract. When a flexible design hits its minimum or maximum width, it essentially becomes a different type of layout—whatever type corresponds with the unit of measurement you used for the min-width or max-width value.

For example, you might give a liquid layout a minimum width in pixels to keep the images inside the layout from overflowing when the viewport is too narrow. The page would act like a liquid layout as the window was narrowed, until it reached the min-width value, at which point it would snap to that value and no longer budge, now acting like a fixed-width layout.

Even though using min-width and max-width essentially creates hybrid layouts, they’re usually still called by whatever type they would fall into if the minimum and maximum widths weren’t there. It’s pretty rare that you’ll make a liquid or elastic layout without using either min-width or max-width, or both, so we’ll still call these layouts liquid and elastic in order to keep from calling practically everything hybrid.

  • + Share This
  • 🔖 Save To Your Account

Peachpit Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Peachpit products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask@peachpit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.peachpit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020