Responsive WEB design_html/css_WEB-ITnose

I have recently been learning about responsive design and have sorted it out. Some of the pictures are from the Internet.

1. Why responsive web design is needed

Due to the current large-scale use of mobile devices and the gradual large differences in the size of PC monitors, traditional web pages have It cannot meet the browsing effect of multiple devices. For example, traditional pages will have a large blank area in large browsers, but in small browsers and mobile devices, the page cannot be fully displayed, or the page can be reduced to fit the size of mobile devices. The size cannot be browsed normally, and it also affects click points. Many people will choose to enlarge the page while browsing, so the entire page needs to be dragged continuously, giving the user a bad experience.

In short, there are the following points:

Various screen sizes

Various operating systems

Various access devices

Various needs

2. What is responsive web design

A website is compatible with multiple terminals.

The same code

Through device adaptation

Satisfies different access devices

Can show different effects

Always content Prioritized

Mobile-first: unobtrusive js and incremental enhancement

Browser-based: incremental enhancement of features and device detection

3. Alternatives to responsive design

Develop a completely independent mobile version of the website and develop a mobile application APP. However, there are certain shortcomings in doing so:

Developing an independent version of the web page can be jumped through device adaptation. Multiple pages need to be maintained. It is suitable for homepage-level pages but not suitable for content pages

Developing mobile applications has high development costs and is not conducive to search engine inclusion

4. Advantages & disadvantages of responsive web design

Advantages:

Multi-terminal visual and operating experience styles are unified

Low development, maintenance and operation costs

Strong compatibility between different devices

Flexible operation: Responsive design is for Page, you can only change the necessary page parts

User-friendly: users can always keep in touch with the website, for example, the URL remains unchanged

Accumulation and sharing: collect all data through a single URL address Social sharing links

Search engine optimization: can complete the connection between mobile website and desktop website

No redirection: Contains no user agent redirection

Disadvantages:

Compatibility: Lower version browsers may have incompatibility issues

Mobile bandwidth traffic: Compared with the mobile version of the customized website, the traffic is slightly larger

Loading takes a certain amount of time: in response In style design, you need to download some HTML and CSS that seem unnecessary. In addition to this, the images are not resized appropriately for the device, which officially doubles the loading time

Search engine optimization: With responsive web design, determining keywords for search engines is not an easy task thing. Therefore, compared with ordinary desktop users, mobile users use different keywords, and it is more difficult to modify titles and other matters

Google ranking: If a responsive website is only based on mobile content, it will be difficult to affect the website's ranking. Google ranking. Because Google does not support such websites, it will not index your website

Time spent: Developing a responsive website is a time-consuming task. If you plan to convert an existing website into a responsive one, it may take even more time. If you want a responsive website, it’s best to redesign it from a sketch

Layout: The layout of responsive web design is mainly liquid, which is why designers have poor control over design styles. And now is the time for designers to show off various "replicas" in advance. The designer attempted to display wireframes and design prototypes separately for mobile and desktop layouts. Only when both layouts are improved can a responsive web design strategy be truly realized.

5. The difference between responsive and adaptive

　Responsive layout: fluid network

Changes in the layout of the web page

Rearrangement

Better user experience

Difficult to test

Adaptive layout: fixed breakpoints

Complete scaling of web pages

Low implementation cost

Easy to test

Design more controllable

6. Mobile terminal screen elements

Mobile device browser core: Trident (IE), Gecko (FF), Presto (opera, obsolete), Webkit (Safari, chrome), Blink (google)

Mobile device size: iPhone (980), iPad (1024), Android (resolution 480*800, 980), WinPhone (1024), etc.

Resolution of mobile device:

　

7. Responsive web design process

User research and device specification estimation

Framework prototype planning and testing

Visual design

Front-end construction