Flow Analysis of responsive web page design

650) this.width=650; "src=" Http://183.61.143.148/group1/M00/02/30/tz2PlFQmXIWD5tSgAABFdX6n8EU888.png "/>

Step One: Determine the type of device that needs to be compatible, screen size

through user research, understand the distribution of devices used by users, determine the type of device to be compatible, screen size.
device type: Includes mobile devices (phones, tablets), and PCs. For mobile devices, the design and implementation of the time to pay attention to increase the function of gestures.
questions to consider:
What size range does a page respond to when it is designed for? For example, e-Mentor Web results page, the span can be from mobile phones to widescreen, and e Mentor network home, because the structure is too complex, want to move directly to the mobile phone, not too realistic, rather than directly design a mobile phone version of the homepage. related Guo Buntao Web page Authoring .
Combine user requirements and implementation costs to choose the right size for your application. For example, some functional operation of the page, users generally do not operate on the mobile side of the demand, there is no need for responsive design.
Step two: Make Wireframe prototypes

In order to determine the size of a number of different types of wireframe prototype, you need to consider the different sizes, how the layout of the page changes, how the size of the content is scaled, the function, the content of the deletion, and even for the special environment for specialized design. This process requires the designer and front-end developers to maintain close communication.

650) this.width=650; "src=" Http://183.61.143.148/group1/M00/02/30/tz2PlFQmXU-QdqiSAAGsUd-Fx2U038.png "/>

Step three: Test wireframe prototypes
Importing pictures into the appropriate device for a few simple tests can help us discover accessibility, readability, and other issues as early as possible.
Fourth step: visual design
Note that the screen pixel density of mobile devices is not the same as that of traditional computer screens, so the readability of content text, the area of control clickable area, etc. should be ensured when designing.
Fifth step: front-end implementation

compared with the traditional web development, the responsive design of the page because of the page layout, content size has changed, so the final output is more likely to be larger than the design manuscript, requires the front-end developers and designers to communicate.

by Learning Website Production Tutorials knowledge, understand the design of responsive page, more courses can visit E Mentor Network.

This article is from the "Add Language" blog, please make sure to keep this source http://yuguotianqing.blog.51cto.com/9292883/1559126

Flow Analysis of responsive web page design