Analysis on the advantages and disadvantages of fixed, mobile and elastic Web page layout

There is a problem that has plagued web designers for a long time: Should the use of fixed , mobile, elastic, or mixed layout ? They each have advantages and disadvantages. The final decision depends on the usability of the site, and it may not be as easy to achieve the goal in a single layout. So, so confusing, is there a knack for making the right decision ? By considering several issues and setting the target results appropriately, you can also make a successful layout design that incorporates the benefits of each.

This article discusses the pros and cons of each layout scenario. In fact, as long as you always pay attention to usability, each scenario can achieve a successful site layout.

Why are you arguing about this? Web design is guided by the availability of a stick, and because of the diversity of users of the site, it is difficult to make a website that has sufficient availability for different users.

When designing a site that is intended for many users, the designer must consider the following potential differences between visitors :

• Screen resolution
• which browser to use
• Whether the Browse window is maximized
• Enable additional components of a placeholder browser (such as history, bookmarks, Google Toolbar, and so on)
• Even operating system and hardware conditions

As there is no standard page size, web designers need to solve countless problems when they work.

1. The difference between fixed layout and Flow layout

Although most designers and developers have a basic understanding of fixed and mobile web layouts , we have a simple concept.

fixed page layout

fixed page layout refers to the content of the Web site is wrapped in a fixed-width container, the block within the container has a fixed percentage or pixel width values. The most important point--the container cannot be moved. Regardless of how the screen resolution changes, the visitor sees a fixed-width content.

The figure above shows how a fixed -width Web page Layout is generally implemented. The internal components are set to a fixed 520, 200, 200 pixel width respectively. The 960 pixel width has become a standard for modern web design because most users have screen resolutions that are 1024x768 and above.

Mobile Web Layout

The mobile Web layout , also known as the fluid page layout , is implemented by using a percentage width of most components (including the primary container) and adapting to the user's screen resolution.

The diagram above shows a mobile page layout . Although most designers give a fixed width to certain elements within a flow layout, such as the outer and inner margins, the overall layout generally uses a percentage width and automatically adjusts the actual width depending on the user.

2. fixed layout of the Web page design

Many designers prefer fixed layouts because they feel fixed compared to insurance: What the designer sees, what the user sees . However, when it comes to its pros and cons, it is as gripping as a mobile layout.

Unmil

• The design of a fixed -width layout is simpler and easier to customize.
• The display width under any browser is the same, and there are fewer potential conflicts with fixed -width content such as images, forms, videos, and so on.
• Without setting the Min-width (minimum width) and max-width (maximum width), these two properties are not supported by all browsers.
• Even if the Web page is designed to be compatible with the minimum screen resolution 800x600 size, the content is still readable enough for large-resolution displays.

Disadvantages

• A fixed -width layout can create huge page gaps for high-resolution screen users, destroying the "divine proportions", "three- division rules ," overall balance, and even other design principles.
• A horizontal scroll bar may appear on the small screen, affecting the user experience.
• Seamless texture puzzles, patterns and other continuous images need to be optimized for large resolution.
• Overall, fixed -width availability is lower.

fixed Design examples of layouts

The designers of the following five Web pages make full use of the features of the fixed layout page. These sites incorporate a large number of design elements, using a fixed layout to create a perfect scene . With the help of fixed widths, designers can better control the additional design elements surrounding the site's content, thus more accurately adjusting the content and navigation width.

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

3. Avoid the disadvantages of fixed layout

If you've decided to use a fixed layout , here are some tips you might have to know. They help you weaken the bad effects of a fixed layout and help you make a successful design.

The following paragraph has a number of words to earn money, point This skip this paragraph .

Let's take a look at the statistical data

Most designers now assume that most Internet users are using 1024x768 or higher resolutions. A poll published by W3Schools shows that this is not the case (please note that W3Schools's data are not fully believed and will be explained in detail later):

As you can see, 640x480 is not even qualified to appear on this chart. W3Schools's data suggest that the resolution appears to have been completely discarded by users. In fact, there are users who are using this resolution, but the number of users is too small, designers completely ignore them, to do some more appropriate, higher resolution has a better usability of the design.

Even for users who use this resolution, they may be using only small, portable computer vendors, not the primary screen resolution they normally use.

However, the statistics here may not be as accurate as everyone expects. Because W3Schools's visitors are basically a specific group (designers and Web developers), the result will be somewhat biased against the general public. Other surveys, however, are similar. According to a survey by independent companies in 2009, the percentage of users with 800x600 resolution is below 10%. According to Woole's website statistics, this number is below 2%.

Here's an interesting table from sohtanaka.com, who studied the compatibility of some large Web sites with screen resolution:

All of the sites involved in the survey were eventually completed in a gorgeous big change. Even the largest Internet companies have identified their primary audiences as 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 1024x768 and higher resolution screen, but also a little white. The latter is the best display width of 800x600 resolution, set to this width can take care of the 10%, and the larger screen looks good.

Always center the layout as a whole

If you want to use a fixed -width design, make sure that the primary container is centered so that it remains balanced (generally, margin: 0 auto; it is available). Otherwise, when you meet the widescreen users, your content will be squeezed to a corner, it is not good-looking.

4. Mobile page layout

Designers have many reasons not to use the mobile layout , but many times they do not see the flow of the layout of the good. Here are the pros and cons to consider when you plan to use a mobile layout:

Unmil

• The mobile Web layout has a stronger affinity because it adapts to the client's situation.
• The amount of extra space in different browsers and screen resolutions is similar and more in line with the visual appeal requirements.
• If properly designed, the flow layout avoids the horizontal scroll bar on the small screen.

Disadvantages

• Designers are more difficult to control the display of clients, because they use a specific size of the screen, it is also less easy to identify potential problems.
• Pictures, videos, and other content with fixed widths have to be set in different widths to match different screen resolutions.
• For a particularly large display, not enough content will cause excessive blank, damaging beauty.

Examples of flow layouts

The following two examples use a percentage width to accommodate different screen resolutions. The first example adjusts the width of the content block to fit, and the second example resizes the blank area.

5. Design the applicable mobile Web page layout

Although mobile layouts can pose some problems, these problems can be solved by a little bit of a trick.

Adopt Simple design

The fewer patterns and complex techniques applied to the layout of a mobile web, the easier it is to build and maintain it. It also makes it easier to adapt to different screen resolutions. With more refined code and design, it is better to avoid, discover, and resolve compatibility issues.

Taking smashing Magazine as an example, they used a flow layout. The design is very simple, only the top of the Black + Orange navigation bar is extended open, the width of each content area will be changed according to the situation. The use of CSS compatible with all possible situations, to eliminate the sidebar and internal content dislocation.

Min 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 who are too large or too small. When the screen is too small, the content block is fixed to the specified width, a horizontal scroll bar appears below the screen, and when the screen is too large, the content is fixed to the maximum width, so as not to extend too much, which affects the readability of the text. For more details, please refer to:

• W3school on the CSS Maximum width properties page ,
• W3school The page about the minimum width of the CSS property .

Unfortunately, the two property values are not supported by most versions of IE browsers. This problem can be solved by IE-specific expression:Maximum and Minimum Height and Width in Internet Explorer(another: Chinese reference ).

6. Flexible design

In fact, there is a third choice when designing a Web page layout . Some designers prefer to use the so-called "elastic layout (Elastic layout)", which combines the characteristics of two main types of layouts . The point is to use unit EM to define the width of the element. The following introduction describes what EM is and how it works:

The ' pixel ' on the computer screen is a point that is not scalable, and EM is the unit width relative to the font size. It changes as the font size changes, responding to user settings for font size. ”
- Patrick Griffiths, A List Apart

Although flexible design seems to bring a lot of benefits, it still has the same pros and cons as the first two layouts .

Unmil

• If properly used, this layout design can bring a very user-friendly user interface. The goal effect is that everything can increase or decrease the size according to the user's preference.
• Flexible layouts are more suitable for designers who are difficult to choose between mobile and fixed layouts, because the advantages of both are flexible layouts.

Disadvantages

• Although the first "Lee" is right, the elastic layout still lays a lot of mines for usability. It takes a great talent and constant testing to make the layout fit for all users.
• This layout is more difficult to implement than the previous two, and maybe that little usability isn't worth the effort.
• Because of the specificity of this layout , some flexible layout designs may require additional stylesheets and make special adjustments for IE6.

Examples of flexible layouts

The flow layout of the elastic layout looks very similar on the surface, because most of the time people confuse them. The fundamental difference is that the length of the elastic layout is em, while the flow layout uses percentages, and the size of the elastic layout is mainly based on the size of the font. This type of design adapts to the size of the font in the user's browser.

7. Which layout is better for you?

Choose which layout should be determined by the nature of the site . Weigh the pros and cons and find the right solution based on your site's needs

Take the work set website for example, this kind of website may be fixed width layout most suitable. So that you can make something more design-sense. Not only can you control the individual elements of the design better, but the image display of the artwork becomes easier to handle. For many designers (including those who do not work on the site of the designer), fixed layout is an easy to get along with, but also to give people a good friend of security.

Designers who want to pursue 100% compatibility are best to consider spending some time on a mobile layout. The biggest challenge is not the amount of white that may appear on the widescreen, but the display on the small handful of screens. For sites with a large number of users, the absolute number of users with a small percentage is also considerable. Even if you do not consider this, the big Web site should have a concise and capable design, which can be achieved efficiently with the flow layout.

Or can't you make a decision? Don't worry, there are flexible or partially flexible layout designs to choose from. If properly applied, elastic layouts can fully integrate the advantages of the two major layouts. Smart designers know how to use the principles of elastic design, use EM units on font and container size, and then mix percentages and pixel widths to set other layout elements.

What did the other designers say?

Heidi Cool in posts Fixed vs. liquid vs. elastic Layout Reply

The designer's speech is about working with others in the layout , and these people may not know much about web design:

"I've been thinking about this a few times. On the case.edu we end up with a fixed layout , because:

1. The flow layout is more complex, and we provide templates for users with different skills, and their work can easily disrupt the flow layout (templates are just plain HTML files, not dreamweaver templates).
2. We don't want to see site maintainers making too wide a page--a page that is very long and very difficult to read.
3. We want to limit the amount of space that people are faced with who are always trying to fill all the blanks. If they are using a large-screen display, it's easy to fill the page and ignore how bad the display is on the small screen.

As we all can see, the main problem is to focus on the fact that our website is maintained, constructed, added and deleted by people with different skill levels. If I am a person to do the site, write code when I may be more based on goals, content and so on to make decisions. ”

Madr in where Have all the flexible Designs Gone

He proposes two other advantages of a fixed -width layout :

"Barner and advertising are usually implemented using images and Flash , which makes it harder to make flexible or flexible layouts." I've worked in newspaper world for 1.5 and advertising blocks are really hard to serve. Also, if you use the elastic layout, the reading area may become too large, relative to the top of the picture.

In addition to Safari 3 and below (Safari 4 is coming soon [Woole: Has come ...] ), Firefox 2 and below, IE6 and below (soon to be eliminated ...). All browsers support the overall scaling of the page, not just the font . This makes the design flexible elastic layout seem more impractical, and most users don't even notice your kindness. ”

Jphilapy where Have all the flexible Designs Gone? On the reply

Two of the mobile layouts worth supporting:

"The mobile layout of the site can accommodate a lot of resolution. So you don't have to investigate the user's screen size. Moreover, screen resolution statistics are always a mystery; almost no one runs the browser in Full-screen mode, and then there are many toolbars, sidebars, gadgets, and the like, which create a screen that doesn't count.

Mobile phones (say the iphone), gaming consoles and so on have gradually become a member of the Web browser family. In short, these devices have a small screen resolution that can benefit from flexible Web layout design.

Calrion's reply on fluid-and fixed-width Layouts

The use of flexible layouts is clearly stated:

"I think the ' Flex ' layout is the best choice. To some extent , it flows, but has a fixed width to ensure that the text line does not change too long.

I am a Windows user and generally maximize the window.

The reason I want to maximize is because I'm better at focusing on the application I'm using. You know, there's always a lot of stuff on my desk. In addition, maximizing my browser (FIREFOX) can provide the most space for the interface elements, especially the Bookmarks toolbar and the label card area.

When it comes to usability, a mobile layout might be best for experienced users . Because they will actively control the browsing window size. For less experienced users, flexible layouts may be best used because they can spontaneously prevent themselves from becoming overly lenient.

Georg in about fluid-and fixed-width Layouts reply

Why mix three layouts to get the best results:

" I prefer the main area to the flow, the side bar is fixed , (also can) add a little more elastic part." I also always set the maximum width of 600 pixels for the text area.

Use Min/max to set the entire page, with a width of between 600 and 1200 pixels, and center-aligned.

In the 600 to 2400 width of the screen full test, the other width of the user to solve their own. The line of text will never be too wide (600 is the maximum width), and the page will not be prematurely mangled under extrusion.

Most of the feedback I get is that the user hardly notices anything that puzzles them . Web pages are easy to read. It is a useful compromise to illustrate my approach.

Your standing here looks good on me, so I think it's a useful compromise. My old eyes think the text is really too small, then I will be on the 1280 widescreen opera to enlarge the page to 120%. There will always be no problem. ”