What is a responsive web design? How should it be done?

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?