When a customer asked to move product features of the demand, although responsive site and can not be regarded as a purely mobile solution, however, in some cases, this approach is very worthy of consideration. We need to spend some thought was the original site to create more flexible, so that in all major mobile devices have excellent user experience as much as possible. Responsive web design needs to consider the following process.
Step 1: Determine requires a compatible device type, screen size.
Through user research, understand the distribution of equipment used by the user to determine the need for a compatible device type, screen size. Device types include mobile devices (phones, tablets), and PC. For mobile devices, the design and implementation of time to pay attention to increase the gesture function. Screen size include various mobile phone screen size (including horizontal and vertical), various tablet sizes (including horizontal and vertical), and wide general computer screen. Question to consider is: when a page design that responds to the applicable size range What? For example, a search site's search results page, you can span from mobile phones to widescreen, but the home because the structure is too complex, want to migrate directly to the phone is not realistic, as a direct design of a mobile version of the home page. Combined with user needs and achieve cost, the size of the applicable trade-offs. Some functions such as page operation, a user typically needs no operating in a mobile terminal, there is no need for responsive design.
Step two: Make a wireframe prototype.
For finalized several different sizes were produced wireframe prototype, need to consider carefully in different sizes, how to change the layout of the page, how the contents of the size scale, function, deletion of content, even for specialized for a particular environment design. This process requires designers and front-end developers to maintain close communication.
The third step: Test wireframe prototypes.
The picture import the appropriate equipment to do some simple tests can help us discover the existence of aspects of accessibility, readability and other issues as soon as possible.
Step four: visual design.
Note that the screen pixel density of the mobile device with the traditional computer screen is not the same, in the design of the need to ensure that text readability, controls clickable area of the region and so on.
Step five: front-end implementation.
Compared with traditional Web development, responsive design page due to the page layout, content size has changed, so the final output access to a larger and more likely to draft design, front-end developers and designers need to communicate more.