The present situation and trend of response type design

Source: Internet
Author: User
Tags new features

From 2012 to 2014, all of the trend predictions for web design refer to responsive design. In the 2015 Web page Design trend forecast, the response pattern continues. The response, which has been a hot one for several years, has rapidly consolidated its position in the past few years and has sparked a wave of new standards for web design.

  Source from

In May 2010, Ethan Westmacott (Marcotte) wrote a groundbreaking article in "A List Apart" (titled "Responsive Web Design"), using three existing tools: mobile layouts (Fluid grids), media inquiries (Media queries) and flexible pictures (scalable images) Create a Web site that is beautifully displayed under different resolution screens. Ethan Marcotte urged designers to use the unique features of the web to design: "We can treat the many experiences on different networking devices as a different side of the same site experience, rather than cutting each device individually and disconnecting the design from each other, which is where we go. Although we have been able to design the best visual experience, we have to embed standards-based technology into our design to make our design flexible and adaptable to the various mediums that render them. "Ethan Marcotte proves the existence of a way to provide an excellent experience on a variety of devices, and this approach does not ignore the differences in equipment or the control of designers, but chooses the flexibility to embrace the web with nature."

Here is a brief introduction to the three concepts mentioned above: mobile layouts (Fluid grids), media queries (medium queries) and elastic images (scalable images) originally refer to some existing technical means, but in the process of doing responsive design research, These concepts still have a broader meaning, and designers should be aware of:

  Flow layout

The method of layout technology that is specified in percent as the unit of measure. There is no such thing as flow layout, elastic layout, fluid grid and other concepts to do one by one description. The author of this system is a large concept: in the design of the response layout, no longer in pixels (px) as the only unit, but using percentages or mixed percentages, pixel units, to design a more flexible layout.

  Media enquiries

Media queries allow you to determine what style to apply based on the various attribute values you have queried in a particular environment-such as device type, resolution, screen physical size, and color. Through the use of media inquiries, you can obtain the characteristics of equipment and equipment, and give a plan to seek common ground, so as to solve the problem before the simple layout design.

  Elastic picture

Along with the elasticity of the layout, the picture as one of the important forms of information must have a more flexible way to adapt to the change of layout. Personally think that the elastic picture is Ethan Marcotte put forward the concept of design products, we in the follow-up study can be a typical picture, expand the scope of research: In addition to the picture, but also should include icons, graphs, videos and other information content of the response to research.


The concept of responsive design from the present, has been spreading continuously, and has been recognized by all parties for the main reasons:

  1. External environment

The rapid growth and increasing diversification of networked devices makes the standard screen size no longer available today;

  2, its own characteristics

A rigorously defined response typically refers to responsive web design, and the Web, with its unique flexibility and plasticity, can accommodate a variety of sizes and configuration devices that can be ubiquitous.

  3. Internal requirements

The concept of responsive design, the major sites and platforms are hoping to adopt this reprehensible model, you can more flexible to adapt to more equipment, especially now the mobile devices in the era of great bursting.

Of course, not all of the cases should be used in response-style design, then what is more suitable for the use of response?

  1, you want to save cost to adapt to more scenes

Resources are limited, but always want to use limited resources to achieve greater value. Although compared to the development and design of a common site, to create a responsive site, the need for human and time resources will be increased, but compared to different devices to build multiple versions of the cost is still much lower, from the maintenance point of view, it will be much easier.

  2, you do not know what to design and development of the new product more suitable for which scene

Instead of using the prediction to select the core equipment to design separately, it is better to spend some time making the site more flexible, so that it has the best possible experience in all kinds of equipment. Because in all aspects of the unknown situation, the prediction will aggravate the process risk, making the results of a huge challenge.

  3, you hope that the site can be compatible with the future of new equipment

New equipment in an endless stream, rather than passively update maintenance, not as active should change, become responsive. Of course, this is only more appropriate, in fact, personally think that as long as the project resources and time allowed, basically most of the site can try to implement the response, and for the first attempt to design the response, you can start from the "Simple browsing page."


At present, most of the Web site to choose to become responsive design patterns are mainly two kinds:

  1, based on equipment

The type and size of the mainstream equipment are used to determine the layout breakpoint (break point), to design multiple sets of styles, and then to project the response device separately.

  2, the content first

Depending on the readability and legibility of the content as a criterion for determining the breakpoint (break point), when the content is laid out, it is possible to disregard the device and decide when a different presentation should be used.

The individual or the preferred approach to content is a model that truly conforms to the core strategy of responsive design and is also a way of being friendly to the future. From the past is basically based on several dimensions of the PC, choose the best standard size to design the page; Now that mobile devices are everywhere, and TV and wearable equipment are slowly starting up, there is no longer a fixed size; the future will be a more unpredictable device environment; then what is the King?—— is the content itself! Change always come fast and ruthless, we have to do is to seize the root can penetrate the global line!

In the content-first strategy, there are three points of thought patterns that can be used throughout the response design process:

  1, forget the equipment

Because we don't know what kind of device the user will use to access the site, we have to include everything in as much as possible, and everything (layout, components, etc.) can be compatible with different types of devices and platforms.

  2. Graceful Demotion

While this concept was initially a compromise of the technical implementation of new features that could not be well implemented on old browsers, the only way to express this in the flexible design of the layout is to show that the content is so narrow that it must be screened to preserve the core content block. This model is very suitable for the existing PC page products to respond to design transformation.

  3. Progressive enhancement

The concept was presented at Steven's SXSW event in 2003. In essence, it is to downgrade elegance: First create a basic experience, focus on the content in a brief way to show, and then, on the premise of ensuring the basic experience, begin to do the layout and interaction about the display. In this case, it is also used to illustrate the content of the content strategy in response design, the content from the narrow to wide changes in the presentation, you can also increase the richness of the contents accordingly. This pattern is compatible with the move priority policy.

Of course, there are all sorts of arguments about the current response, and maybe you have a good reason for not responding to web design? But I don't think anyone would say, "Let's get rid of the response design," and in fact, more and more Web sites have become responsive. 2014 so, 2015 will continue, because this is not a trend, and contend is a normal.

  The way to the future

Although the advantages and trends of responsive design have been universally recognized, there are still many challenges to be overcome in the popularity of response-style design patterns:

  1, response-type picture

The current approach to the elastic picture is: Scaling, tailoring, sub-conditional loading and so on are essentially a skill, but the solution is not a local cover-up problem, not really perfect to achieve the elasticity of the picture.

  2, cross-end interaction

In response design, we need to consider not only the use of desktop users, but also the different sizes of handheld devices. For example, in the desktop end of the endless elegant hover, in the mobile end is extremely bad experience, how to "seek common ground", so that each end experience can best, or need to continue in-depth exploration.

  3, Performance

Performance estimation is the biggest pain in response development, load, hide, or show what content, will be more cumbersome than a single condition to judge the code structure, and affect the experience and maintenance. In particular, mobile performance, more diverse equipment with more complex use of the environment, how to identify equipment, and make equipment in different environments can be a good experience, but also a hard nut.

  4. Cooperation Process

Responsive design is much more than a simple design strategy that brings a whole new, complete approach to Web projects, and it should include a new workflow that can better leverage this pattern.

Finally, I would like to say that the response form is a highly adaptable design thinking mode. On the road of response design inquiry, the response is not the sole purpose, and the design strategy and workflow based on any device to perfect the content of the page should be our bigger topic.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.