Responsive Web Design: Fluid Layouts

After focusing on general concepts and how to use fonts responsively in the first two articles of the responsive web design series, let’s delve into fluid layouts. In this third part of the series, I’ll demonstrate when fluid layouts are really needed, as well as when you could opt for a different solution that isn’t necessarily responsive. Let’s look at a few specific techniques and applications. To understand whether or not a flexible layout is the right choice for your project, you have know, understand, and consider the other solutions available. In fact, only by evaluating the strengths and weaknesses of each method will you have the opportunity to validate your layout choice. There are four different layout types: fixed-width layouts, liquid (or fluid) layouts, elastic layouts, and hybrid layouts. Let’s analyze them one by one.

Fixed-Width Layouts

In fixed-width layouts, the width of the site is bound to a certain number of pixels. Generally, the measure chosen is 960 pixels. This is because with the passing of time, developers have found 960 pixels to be the best size for grid layouts, because the number is easily divisible by 3, 4, 5, 6, 8, 10, 12 and 15. Even today, fixed-width layouts are among the most commonly used in the web, most likely because the rigidity of the layout provides a sense of stability and control. If you know the width of your site across all browsers and devices, you can create graphics with precise, complete control over the result. However, the fixed-width layouts have some disadvantages. As I have said in the previous articles, designers who want to create a fixed-width website have to keep in mind that every aspect of their work has to be usable and clearly visible to a large number of screens, browsers, and devices. The wide variety of devices on the market at this time, as well as the consequently great variability of screen sizes makes creating one-size-fits-all content quite a challenging task, and arguably a challenge that outweighs the precision and control of fixed-width design. A common example of fixed-width websites gone wrong involves screens smaller than 960 pixels, which are surprisingly common. The site will not be fully displayed, and you’ll see a very awkward (and unattractive) horizontal scrollbar. The fact that these small screens are usually operated with fingertips instead of cursors only compounds the width woes. Problems occur also in the opposite situation, when the screen size is greater than 960 pixels. In these cases, the website layout is surrounded by a large amount of white space and, obviously, this would certainly not be the solution that a good web designer aspires to see. Designers and users would rather make the most of the generous width of larger screens.

Liquid Layouts

The first basic difference between the fixed-width type of layout we’ve just analyzed and liquid layouts is the measurements of their size. The fixed-width layouts are measured in pixels, but for liquid or fluid layouts, dimensions are defined in percentages, and as you might expect, this affords greater malleability and fluidity. In other words, by setting a percentage, you won’t have to think about device size or screen width, and consequently, you can find a reasonable solution for each case because your design’s size will adapt to the size of the device used. Liquid layouts are closely linked to media queries and special styles for optimization. Percentage-based widths alone will likely not be enough to accommodate your design for a large variety of display sizes. We will see later how to get a perfect result from liquid layouts.

Elastic Layouts

Elastic layouts are somewhat similar to liquid layouts. The main difference is once again the unit of measurement for size. The size indicator for elastic layouts is neither in pixels nor percentages; it’s measured in ems. An em is the equivalent of the size (in pixels) defined in the font-size CSS rule. For example, if we style our text with a font-size of 20 pixels, 1 em would be equal to 20 pixels, 2 ems would correspond to 40, and so on. This type of layout gives the developer strong typographic control. Since the vast majority of layouts are predominantly populated with text, the precision of type treatments makes elastic layouts a strong contender for many projects. However, even with this type of solution, there is a risk of an unpleasant and unaesthetic horizontal scroll bar in some rare cases.

Hybrid Layouts

Finally, as the term suggests, there are hybrid layouts, which combine the characteristics of two or more of the layouts discussed above. For example, the designer might decide to assign a fixed size (in pixels) to certain elements of the page (a sidebar or a footer) while for the remaining (for example the that contains the main content) choosing a variable width (in percentages or ems). Obviously, this approach has its own set of limitations and disadvantages—if you assign a sidebar a fixed width of 200 pixels and set a value of 80% for the rest of the content, you might find a horizontal scrollbar on screens smaller than 1000 pixels, since the main column does not have the space necessary to expand itself. In lesser cases, you’ll just have an elements that are unusually large or unusually small for their intended purposes. But you can easily address all of these issues, as we’ll see later.

Conclusion

At this point, you may be wondering what the best solution is for your specific projects, and which of the four types of layouts listed above is best suited for the responsive approach. As you might guess, each layout type has its advantages and disadvantages. It all depends on the needs you want to fulfill and the characteristics of your personal project. It would be easy to make a knee-jerk, reactionary declaration that one of these layout options is universally superior to the others, but they shouldn’t be considered mutually-exclusive options or competitors. Rather, they should be considered techniques that can be used in conjunction. Many of these techniques aren’t possible without the others. For example, ems are meaningless without a fixed declaration of font-size. Similarly, media queries will be ineffective without inferring precise widths and making accommodations for popular screen sizes. We’ll get into some real-world applications of all of these techniques in the next article in the series. Want to learn more about Responsive Web Design? Check out SitePoint’s new book, Jump Start Responsive Web Design!

Frequently Asked Questions on Fluid Web Design