Web page Width layout design

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

The highest standard of Web page width layout design is the ability to make Web pages available for browsing to the user's computer screen in a variety of resolutions, browsers of different versions, and browser windows of different sizes. The width of the site page layout design to a certain extent affect the user experience, and then on the Web page width layout design of three ways to analyze the graphic, to see the advantages and weaknesses of the three ways.

1, Adaptive Web page

The Web page uses the adaptive width layout, can automatically display the website page to the visitor user in the form full of browser window, changes the page width as the user changes the window size.

As you can see from the above illustration, the Adaptive page layout is designed to be full of browser windows in 1024x768 low-resolution and 1280*800 widescreen high resolution.

This kind of width layout can adapt to the user to change the browser window size, support widescreen high resolution to meet the user's personalized needs, belong to a higher user experience. The difficulty of adaptive width layout design is that webmasters can not accurately control the pixel accuracy, at the beginning of the Web site operation, the need for web testing, spending more time and energy and economic input to compare the effects between the pages, and make technical adjustments to achieve in each version of the browser adaptive pixel accuracy after the normal effect.

2, Width fixed web page

Width fixed Web page width layout design, as the name suggests, with a fixed page width, regardless of browser window size changes, the width of the page to maintain the original width unchanged.

As can be seen from the above illustration, the 1024px-width fixed web page layout is designed to be 1024x768 in a Full-screen browser window, but in the 1280*800 widescreen high resolution mode, the page displays a large width blank.

Although the width of fixed web page layout can not be filled with a high design layout of the width of the window, but for the webmaster, belong to a more easily implemented page width layout design, images can be accurately displayed in a fixed position, the use of the user's resolution screen width as a fixed width of the page Site page layout is a more economical and does not lose most of the user experience of the way.

3, user-defined Web page

The user automatically determines the Web page display width based on the text dimensions in the user-defined browser settings, the larger the user-defined text size, and the wider the width of the web site.

From the above legend can be seen, the user automatically layout design at different resolutions, only according to the user to modify the text size and corresponding changes in the width of the page, so as to achieve the effect of Web page scaling.

User automatic Web page width layout design, although not as an adaptive Web page as the resolution and browser window to change the width, but can allow users to change the browser text size settings and change the width of the page, so that the curve to achieve the user's personalized page width display requirements. User-defined Web page is a personalized user display experience requirement which integrates the Width fixed web page economy, the design is easy to operate, and the adaptive Web page is assembled in a semi adaptive way. However, the user-defined Web page width layout also inherits the disadvantages of both the adaptive Web page and the Width fixed Web page layout, in some uncoordinated size settings and resolution, it will overflow a screen size, the width or height, need to scroll through the scroll bar drag to view the page.

Above three kinds of Web page width layout design, stationmaster's choice needs according to the website own localization unifies each kind of width layout design The advantage and disadvantage to choose, correctly chooses the website width page layout design, in the economical efficiency simultaneously also protects the user experience.

This article by Taobao rebate http://www.0576mm.com/original summary. If you do not agree, you can message exchange, original starting in A5, reproduced in the time please keep the author link, thank you!