Recently in the study of the content of responsive design, to do some finishing, some of the pictures from the network.
1. Why responsive web design is required
Due to the large number of mobile devices currently used, as well as the size of the PC display gradually large differences, the traditional Web page has been unable to meet the browsing effect of a variety of devices, such as traditional pages in large browsers will have large white space, and in the small browser has mobile devices, can not fully display the page, or the page to fit the size of the mobile device, not normal browsing, for the Click Contact also has an impact, many people will choose to enlarge the page, in the browsing, so that the entire page needs to constantly drag, to the user's experience is not good.
In short, here are a few points:
- Various screen sizes
- Various operating systems
- Various access devices
- Various needs
2. What is responsive web design
A Web site is compatible with multiple endpoints.
- The same Code
- With device adaptation
- To meet different access devices
- Can show a different effect.
- Always content first
- Mobile device first: unobtrusive JS and progressive enhancement
- Browser-based: feature live device detection is gradually enhanced
3. Alternative solutions for Responsive design
Develop mobile apps for web-based, completely standalone mobile versions. But there are some deficiencies in this:
- The development of a standalone version of the Web page, can be used to jump through device adaptation, need to maintain multiple pages, for the first page-level pages applicable, not for the content page
- Development of mobile applications, high cost of development, not conducive to search engine inclusion
4. The advantages & disadvantages of responsive web design
Advantage:
- Unified Multi-terminal vision and Operation experience Style
- Low cost of development, maintenance and operation
- Strong compatibility between different devices
- Flexible operation: Responsive design is for the page, you can only make changes to the necessary parts of the page
- User-friendly: Users can keep in touch with the site, such as the URL unchanged
- Accumulate share: Collect all social sharing links through a single URL address
- Optimization Search Engine: Can complete the mobile website and the desktop website connection
- No redirect: Contains no user agent orientation
Insufficient:
- Compatibility: There may be an incompatibility problem with a low-version browser
- Mobile bandwidth traffic: slightly larger traffic compared to mobile custom sites
- Loading takes a certain amount of time: in a responsive design, you need to download some HTML, CSS that doesn't seem necessary. In addition, the picture does not fit the device to the appropriate size, which formally causes the loading time to double.
- Optimizing Search Engines: For responsive web design, identifying keywords for search engines is not an easy task. Therefore, compared to the average desktop users, mobile users use different keywords, change the title and other things are more difficult
- Google rankings: If the responsive site is based only on mobile content, it's difficult to affect Google rankings on the site. Because Google does not support such a site, it does not index your site
- Time spent: Developing responsive web sites is a time-consuming task. If you plan to convert an existing website into a responsive site, it may take more time. If you want a responsive site, it's best to start with a sketch redesign
- Layout: The layout of the responsive web design is mostly liquid, which is why designers do not control the design style well. And now it's time for designers to show all kinds of "replicas" in advance. Designers try to display wireframe and design prototypes for mobile and desktop layouts, respectively. The responsive web design strategy can only be implemented when both layouts are improved.
5. The difference between response and self-adaptation
Responsive layout: Fluid network
- The layout of the page changes
- Re-arrangement
- A better user experience
- The test is very difficult
Adaptive layouts: Fixed breakpoints
- Full scale of web pages
- Low implementation costs
- Easy to test
- More controllable design
6. Mobile Terminal Screen display element
Mobile device Browser kernel: Trident (IE), Gecko (FF), Presto (opera, deprecated), Webkit (Safari, Chrome), Blink (Google)
Mobile device Size: IPhone (980), IPad (1024x768), Android (resolution 480*800 case, 980), Winphone (1024) etc.
Resolution of mobile devices:
7. Responsive Web Design process
User research and equipment specification estimates
Framework prototype Planning & Testing
Visual design
Front-End Build
Responsive web Design
