Analysis of the pros and cons of fixed, fluid, and flexible web page layouts

There is a question that has troubled web designers for a long time: should we use fixed , fluid, flexible, or hybrid layout ? They each have their own advantages and disadvantages. The final decision depends on the usability of the website, and it may not be easy to achieve the goal with just one layout. So, if it’s so confusing, is there a trick to making the right decision ? By considering several issues and setting target outcomes appropriately, you too can create a successful layout design that combines the best of all worlds.

This article discusses the pros and cons of each layout option. In fact, each solution can achieve a successful website layout as long as you keep usability in mind.

Why argue about this? Web design is guided by the stick of usability, and due to the diversity of website users, it is already difficult to make a website that is sufficiently usable for different users.

When designing a website for a wide range of users, designers must consider the following potential differences among visitors :

• Screen resolution
• Which browser are you using?
• Is the browsing window maximized?
• Whether to enable additional browser components that take up space (such as history, bookmarks, Google toolbar, etc.)
• Even the operating system and hardware conditions

Since there is no standard web page size, web designers need to solve countless problems when working.

1. Differences between fixed layout and fluid layout

Although most designers and developers have a basic understanding of fixed and fluid web layouts , let’s briefly clarify the concepts.

Fixed page layout

Fixed web page layout means that the website content is wrapped in a container with a fixed width, and the blocks in the container have fixed percentage or pixel width values. The most important point is that the container cannot be moved. Visitors see content of a fixed width regardless of screen resolution.

The diagram above shows how a fixed- width web page layout is generally implemented. The inner components are set to fixed widths of 520, 200, and 200 pixels respectively. 960 pixels width has become a standard for modern web design because most users have screen resolutions of 1024×768 and above.

Fluid web layout

A fluid web layout , also known as a liquid web layout , is achieved by setting most components (including the main container) to percentage widths and adapting to the user's screen resolution.

The image above shows a fluid web layout . Although most designers will give fixed widths to certain elements within a fluid layout (such as margins and padding), the entire layout generally uses percentage widths and automatically adjusts the actual width based on the user.

2. Fixed layout web design

Many designers prefer fixed layouts because they think fixed layouts are safer: what the designer sees is what the user sees . However, when it comes to its pros and cons, it is as worrying as the flow layout.

profit

• Fixed width layouts are simpler to design and easier to customize.
• The display width is the same in any browser, and there are fewer potential conflicts for fixed- width content such as images, forms, and videos.
• There is no need to set min-width (minimum width) and max-width (maximum width), these two properties are not supported by all browsers.
• Even if a web page is designed to be compatible with a minimum screen resolution of 800×600, the content is still readable enough on larger resolution monitors.

Disadvantages

• Fixed -width layouts can create large whitespace on the page for users with high-resolution screens, thus destroying “sacred proportion,” “ rule of thirds ,” overall balance, and other design principles.
• Horizontal scroll bars may appear on small screens, affecting the user experience.
• Seamless texture tiles, patterns, and other continuous images need to be optimized for large resolutions.
• Fixed widths are generally less usable.

Fixed layout design example

The designers of the following five web pages all make full use of the characteristics of fixed layout web pages. These websites all combine a lot of design elements and use fixed layouts to create a perfect scene . With the help of fixed width, designers can better control additional design elements around the site content, thereby more accurately adjusting the width of content and navigation.

Pay special attention to how designers design continuous images for wide screens (try increasing your screen resolution).

3. Avoid the disadvantages of fixed layout

If you have decided to use a fixed layout , you must know the following tips. They help you mitigate the negative effects of fixed layouts and help you create successful designs.

Translation note: The following paragraph seems to be written to pad the word count and earn royalties. Click here to skip this paragraph .

Let’s look at the statistics first

Most designers today assume that most Internet users will use a resolution of 1024×768 or higher. A poll published by W3Schools shows that this is not the case (please note that the data from W3Schools cannot be fully trusted, as will be explained in detail later):

As you can see, 640×480 doesn’t even qualify on this chart. Data from W3Schools shows that this resolution seems to have been completely abandoned by users. In fact, there are indeed users who use this resolution, but the number of users is too small, so designers completely ignore them and make some more suitable designs with better usability for higher resolutions.

Even for users who use this resolution, they may only use it on some small computers that are easy to carry, and it is not the main screen resolution they usually use.

However, the statistics here may not be as accurate as everyone expects. Because W3Schools' visitors are mostly from a specific group (designers and web developers), the results may be a bit skewed from the general public. However, other surveys have shown similar results. According to a survey conducted by some independent companies in 2009, the proportion of users of 800×600 resolution is less than 10%. (Annotation: According to the statistics of Benhuoer's website, this number is below 2%)

Here’s an interesting chart from SohTanaka.com , where they looked at the compatibility of some large websites with different screen resolutions:

All the websites involved in the survey eventually underwent a gorgeous transformation. Even the largest Internet companies have determined that their primary audience is users with larger screen resolutions.

For additional research on screen resolution, you can also refer to the following resources:

• W3Counter
• TheCounter.com Global Stats
• OneStat.com

960px or 760px?

To sum up, most designers choose either 960 or 760 as the total pixel width. The former is more suitable for screens with a resolution of 1024×768 or higher, and can leave a little white space. The latter is the optimal display width at 800×600 resolution. Setting it to this width can take care of that 10% and it also looks good on larger screens.

Always center the layout as a whole

If you want to use a fixed width design, be sure to center the main container to maintain balance (usually using margin: 0 auto; is sufficient). Otherwise, when you encounter a wide-screen user, your content will be squeezed into a corner, which looks ugly.

4. Fluid Page Layout

Designers have many reasons not to use fluid layouts , but people often fail to see the benefits of fluid layouts. Here are the pros and cons to consider when planning to use a fluid layout:

profit

• The fluid web page layout has a stronger affinity because it can adapt to the client's situation.
• The amount of additional whitespace is similar across browsers and screen resolutions, making it more visually appealing.
• If designed properly, fluid layouts can avoid horizontal scroll bars on small screens.

Disadvantages

• Designers have less control over how their designs appear on the client side, and because they work with screens of specific sizes, it’s also harder for them to spot potential problems.
• Images, videos, and other content with a fixed width have to be set to different widths to accommodate different screen resolutions.
• For particularly large display screens, insufficient content will result in excessive white space, destroying the aesthetics.

Examples of fluid layouts

The following two examples both use percentage widths to adapt to different screen resolutions. The first example adjusts the width of the content block to fit, while the second example adjusts the whitespace size.

5. Design a suitable mobile web layout

Although fluid layouts can present certain problems, they can be solved with a little trickery.

Simple design

The fewer patterns and complex techniques applied to a fluid web layout , the easier it is to create and maintain. At the same time, it can more easily adapt to different screen resolutions. With more refined code and design, compatibility issues can be better avoided, discovered, and resolved.

Take Smashing Magazine for example, they use a fluid layout. The design is very simple, with only the black + orange navigation bar at the top extended, and the width of each content area will change depending on the situation. CSS is used to be compatible with all possible situations and prevent the sidebar and internal content from being misaligned.

Minimum width (min-width) and maximum width (max-width)

These two CSS properties, min-width and max-width, can be used to specify a fixed width for users with large or small screens. When the screen is too small, the content block is fixed to a specified width, and a horizontal scroll bar appears at the bottom of the screen; when the screen is too large, the content is also fixed to the maximum width to avoid extending too much and affecting the readability of the text. For more details, please refer to:

• W3School's page on the CSS max-width property ,
• W3Schools page on the CSS min-width property .

Unfortunately, most versions of Internet Explorer do not support these two properties. This problem can be solved by using an IE-specific expression: Maximum and Minimum Height and Width in Internet Explorer (also: Chinese reference ).

6. Flexible design

There is actually a third option when designing a web page layout . Some designers prefer to use a so-called "elastic layout" that combines the characteristics of the two main layout types . The key point is to use the unit em to define the element width. The following quote explains what em is and how it works:

"A 'pixel' on a computer screen is a non-scalable point, whereas an em is a unit of width relative to the font size. It changes with the font size, reflecting the user's setting for the font size."
-Patrick Griffiths, A List Apart

Although flexible design seems to bring many benefits, it still has advantages and disadvantages like the previous two layouts .

profit

• If used properly, this layout design can create a very user-friendly interface. The intended effect is that everything can grow or shrink in size based on the user's preference.
• Flexible layout is more suitable for designers who have difficulty choosing between fluid and fixed layouts, because flexible layout has the advantages of both.

Disadvantages

• Although the first "benefit" is correct, flexible layout still lays many landmines for usability. It takes a lot of ingenuity and constant testing to make the layout work for all users.
• This layout is much more difficult to implement than the previous two, and the small amount of usability you gain may not be worth the effort.
• Due to the special nature of this layout , some flexible layout designs may require additional style sheets and special adjustments for IE6.

Flexible layout example

Elastic layout and fluid layout look very similar on the surface, which is why people confuse them most of the time. The fundamental difference is that the length and width units of the elastic layout are em, while the fluid layout uses percentages, and the size of the elastic layout mainly changes according to the font size. This type of design adapts based on the font size in the user's browser.

7. Which layout is more suitable for you?

The layout you choose should be determined by the nature of your website . Weigh the above pros and cons and find the right solution for your website needs

For example, a portfolio website might be best suited for a fixed width layout . This way you can make something more design-oriented. Not only do you have more control over the individual elements of your design, but the graphical presentation of your work becomes much easier to handle as well. For many designers (including those working on non-portfolio sites), fixed layouts are a good friend that is both easy to work with and gives people a sense of security.

Designers who are looking for 100% compatibility would be wise to consider spending some time on fluid layout. The biggest challenge is not the excessive white space that may appear on the wide screen, but the display effect on the small screen. For a website with a large number of users, a small percentage of the user base can be quite significant in absolute terms. Even without considering this, large websites should have a simple and capable design, which can be achieved efficiently using fluid layouts.

Still can't make a decision? Don't worry, there are also flexible or partially flexible layout designs available. If used properly, flexible layout can fully integrate the advantages of the two main layouts. Smart designers know how to take advantage of the principles of flexible design, using em units for font and container sizes, and then mixing percentages and pixel widths to set other layout elements.

What other designers say

Heidi Cool's reply on Fixed vs. Liquid vs. Elastic Layout

This designer's comment is about working with others on a layout , who may not know much about web design:

“I thought about this a lot. We ended up using a fixed layout on case.edu because:

1. Fluid layouts are more complex, and we provide templated designs for users with different skills whose work could easily break a fluid layout (templates are just regular HTML files, not Dreamweaver templates).
2. We don't want to see site maintainers create pages that are too wide - pages with long lines of text that are extremely difficult to read.
3. We want to limit the amount of blanks faced by those who always want to fill all the blanks. If they're using a large monitor, it's easy to fill the page and ignore how poorly it will display on a small screen.

As you can all see, the main problem still centers on the fact that our website is maintained, built, added and deleted by people with different skill levels. If I were working on a website by myself, I would probably make decisions based more on goals, content, etc. when writing code. ”

madr's reply on Where Have All the Flexible Designs Gone?

He points out two other advantages of fixed- width layouts :

“ Banner and advertisements are usually implemented with images and Flash , which makes elastic or flexible layouts more difficult to create. I worked in the newspaper world for a year and a half, and advertisements are really difficult to deal with. The same is true for article pictures. If you use an elastic layout, the reading area may become too large relative to the top picture.

All browsers except Safari 3 and below (Safari 4 is coming soon [笨工儿:已来了…]), Firefox 2 and below, and IE6 and below (which will be eliminated soon…) support zooming the entire page instead of just the font . This situation makes designing flexible elastic layouts even less practical, and most users won’t even notice your good intentions. ”

jphilapy's reply on Where Have All the Flexible Designs Gone?

There are two reasons why fluid layouts are worth supporting:

"A fluid site can adapt to many resolutions. You don't have to survey and discuss the screen sizes of your users. And screen resolution statistics are a mystery; almost no one runs a browser in full screen mode, and there are a lot of toolbars, sidebars, widgets, etc., which creates countless screen conditions.

Mobile phones (such as the iPhone), game consoles, etc. are also gradually becoming a major member of the web browser family. In general, these devices have small screen resolutions and can benefit from flexible web layout design.

Calrion's reply on About Fluid- and Fixed-Width Layouts

Explicitly explains the use of flexible layout :

“I think a 'flexible' layout is the best option. Somewhat fluid , but with a fixed width to ensure that lines of text don't get too long.

I am a Windows user and usually maximize the window.

The reason I want to maximize it is so I can better focus on the application I am using. You know, I always have a lot of stuff on my desk. Additionally, maximizing my browser (Firefox) provides the most space for interface elements, especially the bookmarks toolbar and tab area.

When it comes to usability, fluid layouts are probably best for experienced users . Because they will actively control the browsing window size. For less experienced users, a flexible layout may work best because it automatically prevents itself from becoming too wide.

Georg's reply on About Fluid- and Fixed-Width Layouts

Why a mix of the three layouts gives the best results:

“ I prefer the main area to be fluid, and the sidebars to be fixed , [and] maybe a little bit of elastic. I also always set a max-width of 600 pixels for the text area.

Use min/max to set the entire page width between 600 and 1200 pixels and center it.

Test thoroughly on screens from 600 to 2400 widths, and leave other widths to the user to figure out. The text lines are never too wide (600 is the maximum width), and the page never gets misaligned prematurely under compression.

Most of the feedback I got was that users barely noticed that something was confusing them . The web page is easy to read. Explain that my approach is a useful compromise .

Your station looks good to me, so I think it's a useful compromise. The text is too small for my aging eyes, so I zoom in to 120% in Opera on a 1280 widescreen. There will never be a problem. ”