Responsive WEB design, responding to web

Responsive WEB design, responding to web

I recently learned about responsive design and made some preparations for it. Some images are from the network.

1. Why responsive web design?

Because of the large usage of mobile devices and the large differences in PC Display sizes, traditional web pages cannot meet the browsing performance of multiple devices, for example, a traditional page has a large blank area in a large browser, but a small browser cannot display the page completely on a mobile device, or narrow down the page to fit the size of a mobile device, the page cannot be browsed normally, which also affects click contacts. Many users may choose to zoom in on the page and browse the page. In this way, the whole page needs to be dragged continuously, which is not good for the user experience.

In short, there are the following points:

• Various screen sizes
• Various Operating Systems
• Various access devices
• Various requirements

2. What is responsive web design?

A website is compatible with multiple terminals.

• Same code
• Device adaptation
• Meet different access device requirements
• Different effects can be displayed
• Always content first
• Mobile device priority: unobtrusive js and gradual enhancement
• Browser-based: more and more active device detection features

3. alternative solutions for responsive design

Develop a completely independent mobile version for the website and develop a mobile APP. However, there are also some shortcomings:

• Develop independent version web pages, which can be redirected through device adaptation. Multiple pages need to be maintained. Applicable to homepage-level pages and not applicable to content pages
• Development of mobile applications is costly, making it difficult for search engines to collect

4. Advantages and Disadvantages of responsive web Design

Advantages:

• Consistent visual and operational experience of multiple terminals
• Low development, maintenance, and operation costs
• Strong compatibility between different devices
• Flexible operation: the responsive design is for pages. You can modify only the necessary pages.
• User-friendly: users can keep in touch with the website, for example, the URL remains unchanged.
• Accumulated sharing: Collects all social sharing links through a single URL
• Optimal search engine: allows you to connect a mobile website to a desktop website.
• No redirection: includes non-user proxy Orientation

Disadvantages:

• Compatibility: Earlier browsers may be incompatible.
• Mobile bandwidth traffic: traffic is slightly higher than custom websites of the mobile version
• Loading takes some time: In responsive design, you need to download HTML and CSS that do not seem necessary. In addition, the image size is not adjusted according to the device, which officially leads to a doubling of loading time.
• Optimize search engines: For responsive web designs, it is not easy to determine keywords for search engines. Therefore, compared with average desktop users, mobile users use different keywords, making it difficult to modify titles and other items.
• Google ranking: If a responsive website is only based on mobile content, its difficulty will affect the Google ranking of the website. Because Google does not support such a website, 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 website, it may take more time. If you want a responsive website, you 'd better design it from a sketch.
• Layout: the layout of responsive web design is mainly liquid, which is precisely why designers do not control the design style. And now it is the time for designers to demonstrate various "replicas" in advance. The designer tried to display the box and design the prototype respectively for the mobile and desktop la S. The responsive web design strategy can be implemented only when both la s are improved.

5. Differences between responsiveness and adaptability

　　Responsive layout: fluid network

• Webpage Layout Change
• Re-arrange
• Better User Experience
• Difficult to test

　　Adaptive Layout: Fixed breakpoints

• Full scaling of web pages
• Low implementation cost
• Easy to test
• More controllable Design

6. Mobile terminal screen display elements

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

Size of mobile devices: iPhone (980), iPad (1024), Android (480x800 resolution, 980), WinPhone (1024), etc.

Resolution of mobile devices:

　　

7. Responsive web Design Process

User Research and device specification Estimation

　　

Framework prototype Planning & Testing

　　

Visual Design

　　

Frontend Construction

　　

　　

How to design responsive web pages

Responsive Web Design Method
After introducing the background and concepts of responsive Web, it is time to introduce the specific implementation methods. In fact, the method of responsive Web design is very simple, media Queries and Viewport Queries in CSS3 are used to solve the problem.
First, let's take a look at Media Queries. Here I will just give a simple list of them.
Through media query settings, we can load different CSS files in different scenarios to render the visual style of the page based on the screen width, screen direction, and other attributes. You can use either of the following methods:
1. link label:
<Link rel = "stylesheet" type = "text/css" media = "screen and (max-width: 479px)" href = "testcssbywidth1.css"/>

The example code indicates that when the front screen width is less than 479px, the testcssbywidth1.css file is used to render the page.
2. Set directly in CSS:
@ Media screen and (max-width: 479px ){
/* Specific CSS attribute settings */
}
For some common attributes of Media Queries, just give a simple list of common attributes. For other attributes, please refer to the relevant materials:
Width: the width of the display area of the terminal device. It must be prefixed with max/min;
Height: the height of the display area of the terminal device. It must be prefixed with max/min;
Device-width: the width of the screen of the terminal device, which is prefixed with max/min;
Device-height: the height of the screen of the terminal device, which is prefixed with max/min;
Orientation: it indicates whether the terminal device is in the landscape or landscape. The values are landscape/portrait.
When we adjust the browser size, the above operations through the media query attribute can complete the responsive Web design, but this does not meet the needs of mobile terminal browsers, because the default page of a mobile browser is designed for a wide screen, it will be scaled down to adapt to a small screen, but the terminal device cannot recognize the correct width, therefore, media queries alone cannot solve the responsive Web design of mobile terminal devices.

How to design responsive web pages

Responsive Web Design Method
After introducing the background and concepts of responsive Web, it is time to introduce the specific implementation methods. In fact, the method of responsive Web design is very simple, media Queries and Viewport Queries in CSS3 are used to solve the problem.
First, let's take a look at Media Queries. Here I will just give a simple list of them.
Through media query settings, we can load different CSS files in different scenarios to render the visual style of the page based on the screen width, screen direction, and other attributes. You can use either of the following methods:
1. link label:
<Link rel = "stylesheet" type = "text/css" media = "screen and (max-width: 479px)" href = "testcssbywidth1.css"/>

The example code indicates that when the front screen width is less than 479px, the testcssbywidth1.css file is used to render the page.
2. Set directly in CSS:
@ Media screen and (max-width: 479px ){
/* Specific CSS attribute settings */
}
For some common attributes of Media Queries, just give a simple list of common attributes. For other attributes, please refer to the relevant materials:
Width: the width of the display area of the terminal device. It must be prefixed with max/min;
Height: the height of the display area of the terminal device. It must be prefixed with max/min;
Device-width: the width of the screen of the terminal device, which is prefixed with max/min;
Device-height: the height of the screen of the terminal device, which is prefixed with max/min;
Orientation: it indicates whether the terminal device is in the landscape or landscape. The values are landscape/portrait.
When we adjust the browser size, the above operations through the media query attribute can complete the responsive Web design, but this does not meet the needs of mobile terminal browsers, because the default page of a mobile browser is designed for a wide screen, it will be scaled down to adapt to a small screen, but the terminal device cannot recognize the correct width, therefore, media queries alone cannot solve the responsive Web design of mobile terminal devices.