The status quo and trend of responsive design

From 2012 to 2014, all of us are referring to the trend prediction of web design, and the response style is continued in the 2015 web design trend prediction. The response, which has been hot for several years, has quickly consolidated its position in the past few years and set off a wave of new standards for web design. Here I am based on some of the literature and their own burrow to talk about the response design of some of the current situation and trends.

　　From source

In May 2010, Marcot (Ethan Marcotte) wrote a groundbreaking article in "A List Apart" (titled "Responsive Web Design"), using three existing tools: mobile layout (fluid grids), Media queries (media queries) and elastic images (scalable images) Create a Web site that is beautifully displayed under different resolution screens. Ethan Marcotte urged designers to take advantage of the unique features of the web to design: "We can treat the numerous experiences on different networked devices as different sides of the same site experience, instead of individually tailoring each device to disconnect the design from each other, which is where we go." While we have been able to design the best visual experience, we also embed standards-based technology into our design so that our designs are not only flexible but also adaptable to the various mediums that render them. "Ethan Marcotte proves the existence of a method that provides a superior experience on multiple devices, and this approach does not overlook the differences between different devices, nor does it emphasize the control of the designer, but instead chooses the flexibility to be natural and embrace the web.

Here is a brief introduction to the above mentioned three concepts: mobile layout (fluid grids), media query (media queries) and elastic images (scalable images) originally refers to some of the 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 it: the flow layout : The method of layout technology that refers to the unit of measure in percent. There is no such thing as flow layout, flexible layout, fluid grid, etc. one by one instructions. The author of this system is a big concept: in the layout of the responsive design, the pixel (px) is no longer the only unit, but the percentage or mix percentage, pixels, to design a more flexible layout. Media Queries: Media queries allow you to determine what style to apply based on the various attribute values that you query in a given environment-such as device type, resolution, screen physical size, color, and so on. By using the media query, we can obtain the characteristics of equipment and equipment, and give solutions to the differences, so as to solve the problems left in the simple layout design. elastic picture : With the elasticity of the layout, the image as one of the important forms of information must also have a more flexible way to adapt to the change of layout. Individual think that the elastic picture is Ethan Marcotte put forward the concept of design products, we in the follow-up study can take pictures as a typical, expand the scope of research: In addition to the picture, but also should include the icon, chart, video and other information content of the response mode study.

　　Prevailing

The concept of responsive design from the present, has been spreading spread, and has been recognized by the main reasons:

1, the external environment : the rapid growth and increasing the diversification of networked devices, so that today no longer have standard screen size; 2, its own characteristics : The strictly defined response is generally referred to as responsive web design, and the web with its unique flexibility and plasticity, Devices that can accommodate a variety of sizes and configurations can be used everywhere.　　 3, internal demand : The concept of responsive design, the major sites and platforms are hoping to adopt this one should mode, you can more flexible to adapt to more equipment, especially the mobile device is now a big bursting of the era. Of course, not all the circumstances should be adopted in response to the design, then in what circumstances more appropriate to adopt the response style? 1, you want to save costs to adapt to more scenarios: resources are limited, but always want to use the limited resources to achieve greater value. Although compared to the development of a common web site, to create a responsive site, the need for human and time resources will increase, but compared to different devices to build multiple versions of the cost is much lower, from a maintenance point of view, it will be much easier. 2, You do not know the new product to design and development is more suitable for which scenario: instead of choosing the core equipment through the prediction of the separate design, it is better to spend some effort to make the site more flexible, so that it has the best possible experience in a variety of devices. Because in all aspects of the unknown, making predictions can exacerbate the process risk, making the results a huge challenge. 3, you hope that the site can be compatible with the future of new equipment: new equipment in the endless, with its passive maintenance of the update, rather than actively change, become reactive. Of course, this is only said to be more suitable, in fact, personally think that as long as the project resources and time permitting, basically most of the site can try to implement the response, and for the first time to try a responsive design, you can start from the "simple Browse page".

　　Mode

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

1, based on equipment : The type and size of the mainstream equipment to determine the layout breakpoint (break point), design multiple sets of styles, and then project to the response of the device.

2, content first: According to the content of readability, legibility as the standard to determine the breakpoint (break point), that is, when the content of the layout design, you can ignore the device, there is content to decide when the need to use a different presentation mode.

Individuals are also inclined to prioritize content, which is a model that truly conforms to the core strategy of responsive design and is also a friendly way forward. From the past is basically based on several sizes of PC, choose the best standard size to design the page; Now that the mobile device has been all over the place, and the TV and wearable devices have slowly begun, there is no longer a fixed size, the future will be more unpredictable equipment environment; then what is the kingly way? --it's the content itself! Change always come fast and ruthless, we have to do is to seize the root of the global line!

In the content-first strategy, there are three thinking patterns that can run through the entire responsive design process: 1. Forget the device: because we don't know what kind of device the user will use to access the site, we have to include everything as much as possible; everything (layout, components, etc.) can be compatible with different types of devices and platforms. 2, graceful downgrade: Although the concept of the first technology implementation on the new features in the old browser can not be very good implementation of the compromise approach, but only to express in the layout of flexible design, the content of wide to narrow changes presented, must undergo a lot of screening, retained the core content block. This model is ideal for responsive design modifications to existing PC page products. 3. Progressive Enhancement: This concept was presented at Steven's SXSW event in 2003. In essence, it is the downgrade of elegance: Create a basic experience that focuses on the presentation of content in a single profile, and then, with the assurance of a basic experience, begin to work on the layout and interaction of the display. In this context, it is also used to illustrate the content strategy for responsive design, where content varies from narrow to wide, allowing the richness of content to increase accordingly. This pattern is matched to the mobile priority policy.

Of course, there are various debates about the current response, perhaps you have a good reason not to use responsive web design? But I don't think anyone would say, "Let's get out of responsive design," and in fact, more and more Web sites are becoming responsive. 2014 so, 2015 will continue, because it is not a trend, and it is a normal situation.

　　The way of the future

Although the advantages and trends of responsive design have been widely recognized, but the current pattern of responsive design is still a lot of challenges to break through: 1, responsive image : The current approach to elastic pictures is: Scaling, tailoring, sub-conditional loading and other implementation methods are essentially a skill, It's just a temporary cure. Local cover up the problem, not really perfect to achieve the elasticity of the picture. 2, cross-end interaction : In the responsive design, we need not only to consider the usage habits of desktop users, but also to take into account the different sizes of handheld devices. For example, in the desktop end of the endless elegant hover, on the mobile side is a very bad experience, how to "disagree", so that the end of the experience is the best, or need to continue in-depth exploration. 3, performance : Performance estimation is the biggest pain in the response development, load, hide or display what content conditionally, will be more than a single condition to judge the code structure to the cumbersome, and affect the experience and maintenance. In particular, mobile performance, more diverse devices have more complex use of the environment, how to identify equipment, and let the equipment in different environments can experience good, is also a nut. 4. Cooperation Process : responsive design is much more than a simple design strategy, it brings a whole new and complete approach to Web projects, and it should include a new workflow that makes better use of this model.

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

Reprinted from: http://kb.cnblogs.com/page/512391/

From 2012 to 2014, all of us are referring to the trend prediction of web design, and the response style is continued in the 2015 web design trend prediction. The response, which has been hot for several years, has quickly consolidated its position in the past few years and set off a wave of new standards for web design. Here I am based on some of the literature and their own burrow to talk about the response design of some of the current situation and trends.

　　From source

In May 2010, Marcot Ethan Marcotte wrote a groundbreaking article in "A List Apart" (titled "Responsive Web Design"), using three existing tools: mobile layout (fluid grids), Media queries (media queries) and elastic images (scalable images) Create a Web site that is beautifully displayed under different resolution screens. Ethan Marcotte urged designers to take advantage of the unique features of the web to design: "We can treat the numerous experiences on different networked devices as different sides of the same site experience, instead of individually tailoring each device to disconnect the design from each other, which is where we go." While we have been able to design the best visual experience, we also embed standards-based technology into our design so that our designs are not only flexible but also adaptable to the various mediums that render them. "Ethan Marcotte proves the existence of a method that provides a superior experience on multiple devices, and this approach does not overlook the differences between different devices, nor does it emphasize the control of the designer, but instead chooses the flexibility to be natural and embrace the web.

Here is a brief introduction to the above mentioned three concepts: mobile layout (fluid grids), media query (media queries) and elastic images (scalable images) originally refers to some of the 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 it: the flow layout : The method of layout technology that refers to the unit of measure in percent. There is no such thing as flow layout, flexible layout, fluid grid, etc. one by one instructions. The author of this system is a big concept: in the layout of the responsive design, the pixel (px) is no longer the only unit, but the percentage or mix percentage, pixels, to design a more flexible layout. Media Queries: Media queries allow you to determine what style to apply based on the various attribute values that you query in a given environment-such as device type, resolution, screen physical size, color, and so on. By using the media query, we can obtain the characteristics of equipment and equipment, and give solutions to the differences, so as to solve the problems left in the simple layout design. elastic picture : With the elasticity of the layout, the image as one of the important forms of information must also have a more flexible way to adapt to the change of layout. Individual think that the elastic picture is Ethan Marcotte put forward the concept of design products, we in the follow-up study can take pictures as a typical, expand the scope of research: In addition to the picture, but also should include the icon, chart, video and other information content of the response mode study.

　　Prevailing

The concept of responsive design from the present, has been spreading spread, and has been recognized by the main reasons:

1, the external environment : the rapid growth and increasing the diversification of networked devices, so that today no longer have standard screen size; 2, its own characteristics : The strictly defined response is generally referred to as responsive web design, and the web with its unique flexibility and plasticity, Devices that can accommodate a variety of sizes and configurations can be used everywhere.　　 3, internal demand : The concept of responsive design, the major sites and platforms are hoping to adopt this one should mode, you can more flexible to adapt to more equipment, especially the mobile device is now a big bursting of the era. Of course, not all the circumstances should be adopted in response to the design, then in what circumstances more appropriate to adopt the response style? 1, you want to save costs to adapt to more scenarios: resources are limited, but always want to use the limited resources to achieve greater value. Although compared to the development of a common web site, to create a responsive site, the need for human and time resources will increase, but compared to different devices to build multiple versions of the cost is much lower, from a maintenance point of view, it will be much easier. 2, You do not know the new product to design and development is more suitable for which scenario: instead of choosing the core equipment through the prediction of the separate design, it is better to spend some effort to make the site more flexible, so that it has the best possible experience in a variety of devices. Because in all aspects of the unknown, making predictions can exacerbate the process risk, making the results a huge challenge. 3, you hope that the site can be compatible with the future of new equipment: new equipment in the endless, with its passive maintenance of the update, rather than actively change, become reactive. Of course, this is only said to be more suitable, in fact, personally think that as long as the project resources and time permitting, basically most of the site can try to implement the response, and for the first time to try a responsive design, you can start from the "simple Browse page".

　　Mode

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

1, based on equipment : The type and size of the mainstream equipment to determine the layout breakpoint (break point), design multiple sets of styles, and then project to the response of the device.

2, content first: According to the content of readability, legibility as the standard to determine the breakpoint (break point), that is, when the content of the layout design, you can ignore the device, there is content to decide when the need to use a different presentation mode.

Individuals are also inclined to prioritize content, which is a model that truly conforms to the core strategy of responsive design and is also a friendly way forward. From the past is basically based on several sizes of PC, choose the best standard size to design the page; Now that the mobile device has been all over the place, and the TV and wearable devices have slowly begun, there is no longer a fixed size, the future will be more unpredictable equipment environment; then what is the kingly way? --it's the content itself! Change always come fast and ruthless, we have to do is to seize the root of the global line!

In the content-first strategy, there are three thinking patterns that can run through the entire responsive design process: 1. Forget the device: because we don't know what kind of device the user will use to access the site, we have to include everything as much as possible; everything (layout, components, etc.) can be compatible with different types of devices and platforms. 2, graceful downgrade: Although the concept of the first technology implementation on the new features in the old browser can not be very good implementation of the compromise approach, but only to express in the layout of flexible design, the content of wide to narrow changes presented, must undergo a lot of screening, retained the core content block. This model is ideal for responsive design modifications to existing PC page products. 3. Progressive Enhancement: This concept was presented at Steven's SXSW event in 2003. In essence, it is the downgrade of elegance: Create a basic experience that focuses on the presentation of content in a single profile, and then, with the assurance of a basic experience, begin to work on the layout and interaction of the display. In this context, it is also used to illustrate the content strategy for responsive design, where content varies from narrow to wide, allowing the richness of content to increase accordingly. This pattern is matched to the mobile priority policy.

Of course, there are various debates about the current response, perhaps you have a good reason not to use responsive web design? But I don't think anyone would say, "Let's get out of responsive design," and in fact, more and more Web sites are becoming responsive. 2014 so, 2015 will continue, because it is not a trend, and it is a normal situation.

　　The way of the future

Although the advantages and trends of responsive design have been widely recognized, but the current pattern of responsive design is still a lot of challenges to break through: 1, responsive image : The current approach to elastic pictures is: Scaling, tailoring, sub-conditional loading and other implementation methods are essentially a skill, It's just a temporary cure. Local cover up the problem, not really perfect to achieve the elasticity of the picture. 2, cross-end interaction : In the responsive design, we need not only to consider the usage habits of desktop users, but also to take into account the different sizes of handheld devices. For example, in the desktop end of the endless elegant hover, on the mobile side is a very bad experience, how to "disagree", so that the end of the experience is the best, or need to continue in-depth exploration. 3, performance : Performance estimation is the biggest pain in the response development, load, hide or display what content conditionally, will be more than a single condition to judge the code structure to the cumbersome, and affect the experience and maintenance. In particular, mobile performance, more diverse devices have more complex use of the environment, how to identify equipment, and let the equipment in different environments can experience good, is also a nut. 4. Cooperation Process : responsive design is much more than a simple design strategy, it brings a whole new and complete approach to Web projects, and it should include a new workflow that makes better use of this model.

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

Reprinted from: http://kb.cnblogs.com/page/512391/

The status quo and trend of responsive design