Web page Layout---Fixed layout, flow layout, flexible layout (RPM)

Original address

One problem has plagued web designers for a long time: Should you use fixed , mobile, elastic, or hybrid layouts ? They each have their advantages and disadvantages. The final decision depends on the usability of the site, and it may not be easy to use a single layout to achieve the goal. So, is it confusing to have the knack of making the right decisions ? With a few questions in mind, you can also create a successful layout design that combines the benefits of each side by setting the goal results locally.

Why argue about this? Web design is guided by the stick of usability, and because of the diversity of website users, it is difficult to make a website that is available to different users.

When designing a Web site that targets many users, designers must consider the following potential differences between visitors :

1. Screen resolution
2. which browser to use
3. Whether the Browse window is maximized
4. Whether to enable additional components (such as history, bookmarks, Google toolbars, and so on) for the location-occupied browser
5. Even operating system and hardware conditions

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

1. Differences in fixed layout and flow layout

While most designers and developers have a basic understanding of fixed and mobile web layouts, we are simply defining the concept.

Fixed Page Layout

Fixed page layout refers to the site content is wrapped in a fixed-width container, the block in the container has a fixed percentage or pixel width value. The most important point--the container cannot be moved. Regardless of how the screen resolution changes, visitors see fixed-width content.

Shows how a fixed-width page layout is largely implemented. The internal components are set to a fixed 520, 200, and 200 pixel widths respectively. The 960 pixel width has become a standard for modern web design, as most users have a screen resolution of 1024x768 and above.

Mobile Web Layout

A mobile Web page layout, also known as a fluid page layout , is implemented by setting the percentage width of most components, including the main container, and adapting to the user's screen resolution.

Shows a mobile Web page layout. Although most designers give a fixed width to certain elements within the flow layout, such as margins and inner white, the overall layout uses a percentage width in general and automatically adjusts the actual width based on the user's differences.

2. Fixed layout of web design

Many designers prefer a fixed layout because they feel a fixed comparison insurance: What the designer sees and what the user sees . However, when it comes to its pros and cons, it is as disturbing as the flow of the layout.

Lee

1. Fixed-width layouts are designed to be simpler and easier to customize.
2. The display width is the same in any browser, and there is less potential conflict for content with fixed widths such as images, forms, and videos.
3. Without setting the Min-width (minimum width) and max-width (maximum width), these two properties are not supported by all browsers.
4. Even if a webpage is designed to be compatible with a minimum screen resolution of 800x600, the content is still readable enough under a large-resolution display.

Disadvantages

1. Fixed-width layouts can create huge page gaps for high-resolution screen users, destroying "sacred proportions," "Three-division rules," overall balance, and even other design principles.
2. A horizontal scroll bar may appear on a small screen, affecting the user experience.
3. Seamless material puzzles, patterns and other continuous images need to be optimized for large resolutions.
4. In general, the availability of fixed widths is lower.

design Examples of fixed layouts

The designers of the following five pages take advantage of the features of fixed layout pages. These sites combine a number of design elements to create the perfect scene with a fixed layout . With the help of fixed widths, designers have better control over the additional design elements around the site content, thus allowing more precise adjustments to the width of the content and navigation.

3. Avoid the disadvantages of fixed layout

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

look at the stats first .

Most designers now assume a 1024x768 or higher resolution that most Internet users use. A poll published by W3Schools shows that this is not the case (please note that W3Schools's data is 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 seems to have been completely discarded by the user. In fact, there are users who are using this resolution, but the number of users is too small, the designers completely ignored them, to do some more suitable, higher resolution and better usability of the design.

Even for users who use this resolution, they may be using only small, portable computers that are easy to carry, not the primary screen resolution they normally use.

However, the statistics here may not be as accurate as you expect. Because W3Schools visitors are basically a specific group (designers and Web developers), the results will be somewhat biased with the general public. However, other surveys are similar. According to a survey conducted by independent companies in 2009, 800x600 's resolution user ratio is below 10%. (according to Woole's website statistics, this value is below 2%)

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

All of the sites involved in the survey eventually completed a gorgeous big change. Even the largest Internet companies have determined that their primary audience is users with larger screen resolutions.

960px or 760px?

In summary, most designers are either choosing 960 or choosing 760 as the total pixel width. The former is more suitable for 1024x768 and higher resolution screens, and can be a little white. The latter is the best display width at 800x600 resolution, which is set to take care of the 10%, while the larger screen looks good.

always align the overall layout to the center

If you want to use a fixed-width design, be sure to align the main container centrally to maintain balance (generally using margin:0 auto; Will do). Otherwise, in the face of widescreen users, your content will be squeezed into a corner, very unattractive.

4. Mobile Page Layout

Designers have many reasons not to use the mobile layout, but we often do not see the flow layout is good. Here are the pros and cons to consider when using the flow layout:

Lee

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

Disadvantages

1. Designers are more difficult to control the display of clients, and because they use a specific size screen, they are less likely to find potential problems.
2. Images, videos, and other content with fixed widths have to be set to different widths to match different screen resolutions.
3. For a particularly large display, not enough content will cause excessive white space, damage the aesthetic.

examples of flow layouts

The following two cases all use percent widths to accommodate different screen resolutions. The first example adjusts the width of the content block, and the second example resizes the blank area.

5. Design the applicable mobile Web page layout

Although the flow layout poses some problems, these problems can actually be solved by a little trick.

with simple design

The fewer patterns and complex tricks applied to a mobile Web page layout, the easier it is to build and maintain. It also makes it easier to adapt to different screen resolutions. With more refined code and design, compatibility issues can be avoided, discovered, and resolved better.

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, the width of each content area will be changed according to the situation. CSS is compatible with all possible scenarios, eliminating the dislocation of sidebar and internal content.

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 who are too large or too small to display. When the screen is too small, the content block is fixed to a specified width, a horizontal scroll bar appears at the bottom of the screen, and when the screen is too large, the content is fixed to the maximum width, so as not to stretch too open, affecting the readability of the text.

Unfortunately, most versions of Internet Explorer do not support these two property values. This problem can be solved by IE's unique expression.

6. Flexible design

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

the ' pixel ' on the computer screen is a non-scalable point, and EM is the unit width relative to the font size. It changes with the size of the font, which reflects the user's setting of the font size. "
- Patrick Griffiths, A List Apart

Although the elastic design seems to bring many benefits, it is still as good as the first two layouts.

Lee

1. This layout is designed to provide a very user-friendly interface, if used wisely. The goal effect is that everything can be scaled up or down according to the user's preference.
2. Flexible layouts are better suited to designers who face the difficult choice of flow and fixed layouts because of the advantages of both flexible layouts.

Disadvantages

1. Even though the first "Lee" is right, the flexible layout still buries a lot of mines for usability. Need to be very intelligent and constantly tested to make the layout suitable for all users.
2. This layout is much harder to implement than the previous two, and perhaps that little bit of usability is not worth the effort.
3. Due to the particularity of this layout, some flexible layout designs may require additional stylesheets and make special adjustments for IE6

examples of resilient layouts

The flow layout of the flex layout looks very similar on the surface, because most of the time people confuse them. The fundamental difference is that the long-width unit of the flex layout is EM, and the flow layout uses a percentage, and the size of the elastic layout is mainly based on the font size. This type of design is adaptive based on the font size in the user's browser.

7. Which layout is better for you?

Which layout to choose should be determined by the nature of the site . Weigh the pros and cons to find the right solution for your site needs

In the case of folio sites, such sites may be most suitable for fixed-width layouts. So you can make something more design. Not only do you have better control over the individual elements of the design, but the image display of the artwork becomes easier to handle. For many designers (including those who are not part of the portfolio site), a fixed layout is a good friend who is easy to get along with and can give a sense of security.

Designers who want to pursue 100% compatibility are better off thinking about spending a bit of time on a mobile layout. The biggest challenge is not the possibility of too much white space on a wide screen, but the display on a small handful of screens. For sites with a large number of users, a small percentage of the user base, the absolute number is also considerable. Even if this is not considered, the big Web site should also have a clean and capable design, which can be achieved efficiently with the flow layout.

Still can't make a decision? Don't worry, there are flexible or partially flexible layouts to choose from. If used properly, the elastic layout can fully integrate the advantages of the two major layouts. Smart designers know how to use the principles of elastic design, using EM units in font and container sizes, and then mixing percentages and pixel widths to set other layout elements.

What do other designers say?"I've been thinking about that. On the case.edu, we finally adoptedfixedLayout, because:

1. The flow layout is more complex, and we provide a templated design 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 web maintainers make too wide a page-a page that is very long and difficult to read.
3. We want to limit the amount of white space that people who always want to fill up with all the blanks are facing. If they're using a large-screen display, it's easy to fill up the page, ignoring how bad it looks on a small screen.

As you can see, the main problem is 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 website, write code when I may be more in accordance with the goals, content and so on to make decisions. ”

" Barner and advertising are usually implemented using images and Flash ., which makes flexible or flexible layouts more difficult to create. I've worked in newspaper world for 1.5, and ad blocks are really very difficult to serve. The article is 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: It's coming ...] ), Firefox 2 and below, IE6 and below (will be eliminated soon ...) All browsers support zooming by page, rather than just scaling the font . This makes the flexible layout of the design more impractical, and most users don't even notice your kindness. ”

"FlowLayoutthe website can accommodate many resolutions. So you don't have to investigate the size of the user's screen. Moreover, the statistics on screen resolution are always a mystery; almost no one runs the browser in full-screen mode, and then there are a lot of toolbars, sidebar, gadgets and things like that, causing no count of screen conditions.

Mobile phones (say iphone), game consoles, etc. are also becoming a big part of the Web browser family. All in all, the screen resolution of such devices is small and can benefit from flexible Web layout designs.

"I think ' elasticity 'Layoutis the best choice. in a way that's flowing., but there is 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 for maximizing this is that I can better focus on the applications I'm using. You know, there's always a lot of stuff on my desk. In addition, maximizing my browser (FIREFOX) provides the most space for the interface elements, especially the Bookmarks Toolbar and tab area.

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

" I prefer the main area to the flow, the sidebar is fixed , and (you 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 widths between 600 and 1200 pixels, and center-aligned.

Test thoroughly on screens ranging from 600 to 2400 width, and other widths will be solved by the user. The text line will never be too wide (600 is the maximum width), and the page will not be displaced prematurely under extrusion.

Most of the feedback I get is that the user barely notices what's confusing them . Web pages are easy to read. To illustrate my approach is a useful compromise .

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

The author finally said, personal reading is more inclined to flexible layout, to tell the truth IE has now been the market gave up, why not to tangle with a born disabled children.

Web page Layout---Fixed layout, flow layout, flexible layout (RPM)