HTML5/CSS3 design flow for responsive pages

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

Through user research, to understand the distribution of devices used by users, to determine the type of equipment to be compatible, screen size.

Device type: Includes mobile device (mobile phone, tablet) and PC. For mobile devices, the design and implementation of the time to pay attention to increase the function of gestures.

Screen size: Includes the size of various phone screens (both horizontal and vertical), the size of various plates (including horizontal and vertical), normal computer screens and widescreen.

Questions to consider:

• What size range is applied to a page when it responds to design? For example, 1688 search results page, the span can be from mobile phones to widescreen, and 1688 of the first page, 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.
• In combination with user requirements and implementation costs, the applicable size of the trade-offs. 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.

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.

@ Go from Network

HTML5/CSS3 design flow for responsive pages