Responsive Web Design: Fluid Layouts

Share this article

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

What is the main difference between fluid and fixed web design?

Fluid web design, also known as liquid layout, uses percentages for widths, allowing the layout to adjust to the screen size. On the other hand, fixed web design uses pixel-based measurements, meaning the layout remains the same regardless of the screen size. This can lead to issues with usability on smaller or larger screens. Fluid design is generally considered more user-friendly, especially in the era of mobile browsing.

How does fluid web design enhance user experience?

Fluid web design enhances user experience by providing a consistent and optimized view across different devices. It automatically adjusts to the screen size, ensuring that content is always displayed in the most readable and usable way. This eliminates the need for users to zoom in or out or scroll horizontally to view content, making navigation easier and more intuitive.

What are the challenges in implementing fluid web design?

While fluid design offers many benefits, it also presents some challenges. Designers must ensure that the layout and elements scale properly at different resolutions, which can be complex and time-consuming. Additionally, images and other media may not scale as expected, potentially impacting the visual appeal and functionality of the site. Despite these challenges, the benefits of fluid design in terms of usability and accessibility make it a worthwhile investment.

How does fluid design relate to responsive design?

Fluid design is a component of responsive design. While fluid design refers to the scaling of layout widths, responsive design encompasses a broader range of adjustments that a website makes to ensure optimal display on different devices. This includes not only scaling of layout, but also changes in navigation, image sizes, font sizes, and other elements to provide the best user experience.

Can fluid design affect website loading speed?

Fluid design itself does not directly affect website loading speed. However, if not implemented properly, it can lead to issues such as oversized images that take longer to load. It’s important to optimize all elements of a fluid design to ensure they load quickly and correctly at all resolutions.

Is fluid design suitable for all types of websites?

Fluid design is versatile and can be beneficial for many types of websites. However, its suitability may depend on the specific needs and goals of the site. For instance, sites with complex layouts or those that rely heavily on large, high-quality images may face challenges in implementing fluid design effectively.

How can I test the effectiveness of my fluid design?

You can test the effectiveness of your fluid design by viewing your website on different devices and screen sizes. This will allow you to see how the layout and elements adjust and identify any issues. Additionally, you can use online tools that simulate different screen sizes and resolutions.

What are some best practices for implementing fluid design?

Some best practices for implementing fluid design include using a flexible grid system, setting maximum and minimum widths to prevent extreme scaling, using CSS media queries to adjust design elements at different resolutions, and testing the design on various devices and screen sizes.

How does fluid design impact SEO?

Fluid design can positively impact SEO as it improves user experience, a key factor in search engine rankings. Websites that are easy to navigate and view on different devices are likely to have lower bounce rates and higher engagement, which can boost SEO.

Can I convert my existing fixed design website to a fluid design?

Yes, it’s possible to convert a fixed design website to a fluid design. However, this can be a complex process that involves adjusting the layout and all design elements to use relative rather than fixed measurements. It’s recommended to work with a professional web designer or developer to ensure the conversion is done correctly and effectively.

Annarita TranficiAnnarita Tranfici
View Author

I have a Bachelor's degree in European languages, cultures, and literature from the University of Naples. I'm passionate about graphics and web design, and for several years I've been working on projects and designs for many companies. I'm a writer for the Audero User Group; my specialties are HTML, CSS, Web Design, and Adobe Photoshop.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week