On the Responsive layout

The responsive layout is a concept proposed by Ethan Marcotte in the 5 months of the year, in short, a website that is compatible with multiple terminals -- Instead of making a specific version for each terminal. This concept was created to address mobile internet browsing.

In recent years , more and more smart mobile devices ( mobile, tablet device) to join the Internet, mobile Internet is no longer a separate small network, but become an important part of the Internet. The advent of Responsive network design (RWD/AWD) is designed to provide a better experience for mobile devices and to integrate various screen sizes and resolutions from the desktop to the phone, using technology to adapt the web to different resolutions from small to large (now to oversized) screens.

What is responsive layout design?

Responsive design method is not only based on the size of the visible area to change the layout of the page, but to the overall subversion of the current page design method, is for any device Web content to perfect layout of a display mechanism.

The front-end presentation of the responsive page can be divided into 2 types: the first, purely responsive pages, screen size covers the full size from the pc→ phone screen is our traditional responsive page, regardless of the user is what device, I give him a set of CSS style, this set of CSS style has a PC version, pad version, mobile version. This is the current foreign gray Popular response page, because the foreign browser market situation is, chrome/firefox and other high-version browsing has dominated the mainstream, ie6,7 and so on has become less, basically can no longer provide support. Second, the disabled version of the Responsive page, the PC is a separate set of separate pages, the mobile device is another set of separate pages. is now the domestic this type of disability response page, because our massive users are still using IE6 this high (Keng) End (die) products, resulting in we have to on the PC page on the IE series have good support, which means that CSS3 and HTML5 and other new features can not be displayed on the PC page. At the same time, because of the three major operators to the (NAO) force (CAN) network speed, so that users access to the traditional response page will download more resources, users will be slow to open the page. Therefore, the second type of disabled version of the responsive page has the value of being there.

What is the difference between static, adaptive, streaming, and responsive four page layouts?

Static layout

Using fixed width, traditional web design, for PC design a layout, when the width of the screen is adjusted, the use of horizontal and vertical scroll bar to refer to the masked part; for mobile devices, design a single layout, using a different domain name such as WAP. or M.

Flow layouts (Liquid layout)

The Liquid feature (also called "Fluid") is the width of the page element adapted to the screen, with some settings, how to show when the width is greater than how much, how much less it is displayed, and how to show the way to the current, part of the load, The main problem is that if the screen scale spans are too large, the screens that are too small or too large for their original design will not display properly.

Adaptive layouts (Adaptive layout)

Adaptive layouts (Adaptive) are characterized by defining layouts for different screen resolutions respectively. All the devices look like a set of templates, but the length or the picture is smaller, not according to the device with different display style. The page elements change when the layout switches, but in each layout, the page elements do not change with the size of the window. You can think of adaptive layouts as a series of static layouts.

Responsive layouts (responsive layout)

For different screen resolutions to define the layout, first detect the device, depending on the device to adopt a different CSS, and the CSS is the percentage of the use of the template on different devices appear to be not the same, will change as the device changes the presentation style, while in each layout, the application of the concept of flow layout, That is, the width of the page element is automatically adapted as the window adjusts. Responsive layouts can be thought of as a blend of flow layouts and adaptive layout design concepts.

The pros and cons of responsive layouts:

Advantages:1. Cross-platform. In the mobile phone, pad, computer has a decent performance. 2. Save manpower Development cost. No longer need someone to specifically maintain the PC page, mobile page. 3. Expressive consistency on different platforms the things that you see are basically consistent and make you feel good about yourself.

Cons: 1. The page loads more code, causing the file to increase, affecting the loading speed. In order to adapt to different devices, responsive design requires a lot of CSS and JS code specifically for different devices, which affects page loading speed. In particular, JS code, if the processing is not good, on the low-profile machine to browse will be very card. 2. In the responsive design, the picture, video and other resources are generally unified loading, which led to the low resolution of the machine, the actual loading of more than its display requirements of the picture or video, resulting in unnecessary traffic waste, affecting the loading speed. 3. Responsive design is not really suitable for large portals or e-commerce sites. Because the basic principle of responsive design is not to give users different content due to different devices (such as the deletion of certain content on low-resolution devices), and large-scale portal or e-commerce site of the single page content is very much, when reduced to low-resolution devices, but also to ensure that the content can be browsed, will inevitably lead to page elongation, browsing difficulty 4. For the same user, you may feel uncomfortable when browsing a responsive webpage on a different device. Although excellent responsive design will try to present the same quantity and quality content in different devices, but for the same user, after all, the different devices see the page layout has changed, may cause the adaptation.

For different devices to provide an optimized browsing experience, this is definitely the goal of website development, but also the development of web technology trends. However, responsive design is only one of the means to achieve this goal, only for certain types of web sites, in the future, there will inevitably be a better and more powerful layout to complete the current difficult to achieve goals.

On the Responsive layout