The concept of responsive web design, how to do responsive web design

Article Description: What is a responsive web design? How to proceed?

Start the first article. The old rules, the first boring talk about the weather category. 11 long vacation, the weather finally began some autumn flavor, sitting in the room even feel the need for hot coffee. Said two years ago is also in the National Day holiday began to do Joomla document translation; Good time for a long holiday, always can spare a day or two, quiet nest in the home Do blog, learn to do something new, simply no more comfortable things.

Say the right thing. Be prepared to focus on a few recent studies on the topic of "responsive web design", including concepts, practices, cases, and discussion of viewpoints. These articles are much longer than previous translations of documents (even pages!). Today, this article almost spent two days of "leisure time", the endurance is a test, efforts to improve it. Nonsense is over, here we go.

For now, almost every new customer wants their site to have a dedicated mobile device version. The perfect situation is for the iphone, the IPad, the BlackBerry, the Kindle ... Create one--page resolution must also be compatible with any device. Who knows how many new devices we need to design for the next 5 years to develop different versions of the page? When does this madness count?

In the field of web design and development, soon we will not be able to keep up with the pace of innovation in equipment and resolution. For most sites, it is impractical to create a separate version of each new device and resolution, and the result is that we will win the user base with some devices and lose those who use other devices. However, there may be another way to help us avoid this happening.

The idea of responsive web design is that page design and development should respond and adjust according to user behavior and device environment (System platform, screen size, screen orientation, etc.). Responsive Concrete practices are made up of many aspects, including flexible grids and layouts, pictures, and the use of CSS media query. Whether the user is using a notebook or an ipad, our pages should be able to automatically switch resolutions, picture sizes and related scripting features to suit different devices; in other words, the page should have the ability to automatically respond to the user's device environment. In this way, we don't have to do a special version design and development for the coming new devices.

The concept of responsive web design

Ethan Marcotte once published an article "Responsive Web Design" in a List apart, citing the concept of responsive architecture:

A newly emerging discipline-"responsive Architecture (responsive architecture)"-suggests that physical space should be able to respond to the situation of the person in which it exists. Combined with embedded robotics and the application of stretching materials, architects are trying to build a wall structure that bends, scales and expands according to the surrounding population, and can also use motion sensors to coordinate climate control systems to adjust indoor temperature and ambient light. There are already companies producing "smart glass": When the number of indoor people reaches a certain threshold, the glass can automatically become opaque and ensure privacy.

Extending this idea to the realm of web design, we get a whole new concept. Why do we have to build a design and development plan for each user group? Similar to responsive architecture, web design should also be automated to respond and adjust to different device environments.

Obviously, we cannot and need not use motion sensors or robotics, and responsive web design needs more abstract thinking. Fortunately, some of the relevant concepts have been practiced, such as liquid layout, media queries and scripting that help pages reformat. But responsive web design is not just about screen resolution adaptation and automatic scaling pictures, etc., it is more like a new thinking mode for design.

Adjust resolution

Different devices have their own screen resolution, sharpness, and screen orientation, and new devices that are constantly being developed will also bring new screen size specifications. Some devices are based on the horizontal screen (portrait), some are vertical screens (landscape), and even squares; for the increasingly popular iphone, ipad and other smartphones, tablets, users can also rotate the device to arbitrarily switch the screen orientation. How do you make a design that satisfies all situations?

To be compatible with both horizontal and vertical screens (users may also be able to switch directions during page loading), we must consider the size of n screen sizes. It is true that we can divide these specifications into several broad categories and then make a scheme for each category to ensure that the programme is at least as flexible as possible in this group. But even so, the results will be extremely anxious, who knows what kind of equipment in 5 years after the share of the number? And many users don't even maximize the browser's window; How much do we have to think about such variables?

Morten Hjerde and his colleagues made a statistical survey of more than 400 mobile devices in the 2005-2008 market (see report), and the following figure shows the approximate results:

More than 08 years later, more and more representative new equipment has come out and become popular. Obviously, we cannot go on with the idea of "multiple programmes", so what can we do?

Part of the solution: all elasticity

A few years ago, elastic layout (flexible layout) is almost a luxury, so-called elasticity, but also reflected in the vertical layout and font size and so on; pictures can always easily destroy the structure of the page, and even the elastic elements of the structure, in extreme cases, will still destroy the layout. So, the so-called elastic layout is not so flexible, it sometimes even can not adapt to desktop and notebook screen resolution differences, let alone mobile phones and other mobile devices.

Now we can make the page more "resilient" by responding to design and development ideas. The size of the picture can be automatically adjusted and the page layout will not be broken. Although there is never a perfect solution, it gives us more choices. The page will be truly resilient, regardless of how the user switches the device's on-screen orientation or from the desktop screen to the ipad.

In the article of Ethan Marcotte, which is mentioned earlier, he shows an example of the characteristics of responsive web design in terms of page elasticity:

The implementation of this example is a perfect combination of liquid mesh and liquid image technology, and is smart enough to use the right HTML tags in the right place. "Liquid Grid" is a very common practice; for "liquid picture" technology, the following article does a good job:

Hiding and revealing portions of Images

Creating sliding composite Images

Foreground Images that Scale with the Layout

When it comes to creating a liquid page, it's a good idea to look at the flexible Web design:creating liquid and elastic Layouts with CSS from Zoe Mickley gillenwater, or download a sample Zhangxian: "How to create Elastic picture. " In addition, Zoe's this "essential resources for creating liquid and elastic Layouts." Provides a number of tutorials, resources, creative guidance, and best practices for creating resilient grids and layouts.

Technically speaking, while this sounds simple and feasible, it is more complicated than "combining these features". For example, take a closer look at the logo images in the example provided by Ethan Marcotte:

If we keep our browser window small, we will find that the text part of the logo image will always be reduced to the same year, to ensure its full readable, and not as the surrounding illustrations are both cut off. So the whole logo actually consists of two parts: the illustration as the background picture of the page title, will keep the size, but will be trimmed with the layout adjustment; The text part is a separate picture.

<a href="#"></a>

Where the,

This example shows a little bit about the idea of a responsive web design. However, this small effort is not enough to avoid the entire layout in the small size of the window to become too narrow or too short, and the logo text will eventually become too small to identify, the background picture will be too much cutting.

[1] [2] [3] [4] Next page