Shulou(Shulou.com)06/03 Report--

This article focuses on "how to design a responsive WEB". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to design a responsive WEB.

1. Why do you need responsive web design

Due to the extensive use of mobile devices and the gradual difference in the size of PC displays, traditional web pages can no longer meet the browsing effects of many devices, for example, traditional pages have a large blank area in large browsers, while in small browsers, the page cannot be fully displayed, or the page can be scaled down to fit the size of the mobile device. For the click of the contact also has an impact, many people will choose to enlarge the page, browsing, so that the whole page needs to keep dragging, giving the user a bad experience.

In short, there are the following points:

Various screen sizes, various operating systems, all kinds of access devices, all kinds of requirements.

2. What is responsive web design

A website is compatible with multiple terminals.

The same code can show different effects by adapting devices to different access devices, always content first mobile devices first: unobtrusive js and gradual enhancement of browser-based: feature live device detection is gradually enhanced

3. Alternatives to responsive design.

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

The development of an independent version of the web page can be redirected through device adaptation, and multiple pages need to be maintained, which is suitable for the home page level page, but not for the content page development of mobile applications. The development cost is high, which is not conducive to search engines.

4. Advantages and disadvantages of responsive web design.

Advantages:

Multi-terminal vision and operation experience style unified development, maintenance, low operating cost, compatibility between different devices strong operation flexibility: responsive design is for the page, can only change the necessary part of the page is user-friendly: users can always keep in touch with the site For example, URL invariant accumulation sharing: collect all social sharing links through a single URL address to optimize the search engine: can complete the connection between mobile and desktop sites without redirection: including no user agent orientation

Deficiency:

Compatibility: low-version browsers may have incompatibility problems with mobile bandwidth traffic: compared with mobile customized websites, it takes a certain amount of time to load with slightly larger traffic: in responsive design, you need to download some HTML and CSS that do not seem necessary. In addition, images are not resized according to the device, which is officially the reason for doubling load time to optimize search engines: for responsive web designs, it is not easy to determine keywords for search engines. Therefore, compared with the average desktop user, mobile users often use different keywords, and it is more difficult to modify the title and other things. Google ranking: if the responsive site is only based on mobile content, its difficulty will affect the site's Google ranking. Because Google doesn't support such sites, it doesn't spend time indexing your site: developing responsive sites is a time-consuming task. If you plan to turn an existing site into a responsive site, it may take more time. If you want a responsive website, it's best to redesign the layout from the sketch: the layout of responsive web design is mainly liquid, which is why designers have little control over the design style. And now is the time for designers to show all kinds of "replicas" in advance. Designers try to display wireframes and design prototypes for mobile and desktop layouts, respectively. Only when these two layouts are improved can the responsive web design strategy be truly realized.

5. The difference between responsive and adaptive.

Responsive layout: fluid network

The change in the layout of the web page is difficult to test for a better user experience.

Adaptive layout: fixed breakpoint

The full scaling of the web page is less expensive to test and easier to design and more controllable.

6. Mobile terminal screen elements

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

Dimensions of mobile devices: iPhone (980), iPad (1024), Android (resolution 480mm 800, 980), WinPhone (1024), etc.

Resolution of the mobile device:

7. Responsive web design process

User research and equipment specification estimation

Framework prototype Planning & testing

Visual design

Front-end construction

At this point, I believe you have a deeper understanding of "how to design responsive WEB". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.