Responsive web Design

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

650) this.width=650; "src=" Http://images.cnitblog.com/blog/663787/201410/201059571834653.png "width=" 342 "height=" 223 "style=" border:0px; "/>

2. What is responsive web design

　　A Web site is compatible with multiple endpoints. The same code, through the device adaptation, to meet different access devices, can show different effects, always content first, mobile device first (not noticeable JS and gradually enhanced), based on the browser (feature live device detection of the gradual enhancement 650) this.width=650; " Src= "Http://images.cnitblog.com/blog/663787/201410/201104162465276.jpg" width= "401" height= "274" style= "border:0 px; "/>).

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:

650) this.width=650; "src=" Http://images.cnitblog.com/blog/663787/201410/201140322628156.png "width=" 393 "height=" 208 "style=" border:0px; "/>

7. Responsive Web Design process

User research and equipment specification estimates

650) this.width=650; "src=" Http://images.cnitblog.com/blog/663787/201410/201142263876257.png "width=" 428 "height=" 241 "style=" border:0px; "/>

Framework prototype Planning & Testing

650) this.width=650; "src=" Http://images.cnitblog.com/blog/663787/201410/201143338715108.png "width=" 404 "height=" 179 "style=" border:0px;line-height:1.5; "/>

Visual design

650) this.width=650; "src=" Http://images.cnitblog.com/blog/663787/201410/201144099495652.png "width=" 398 "height=" 119 "style=" border:0px; "/>

Front-End Build

650) this.width=650; "src=" Http://images.cnitblog.com/blog/663787/201410/201144196838244.png "width=" 393 "height=" 117 "style=" border:0px; "/>

　　

Responsive web Design