CN107291477A - A kind of progressive enhanced response type webpage design method - Google Patents

Abstract

The invention discloses a progressively enhanced responsive webpage design method, which mainly includes the following steps: firstly, a non-responsive layout is designed, that is, the page width is fixed, and then the page is set to be 1:1 as it is on clients of different sizes Display; use media query to make the webpage automatically adapt to terminals with different resolutions; divide the service scope of webpage source code according to the screen size and characteristics of the terminal; draw the breakpoint diagram according to the above, first determine the breakpoint, and then click on the corresponding breakpoint Click below to draw a thumbnail of the webpage layout; determine responsive CSS rules and Javascript programs for different breakpoints. The present invention starts with low-resolution devices, gradually optimizes web page layout and content display according to the increase in device resolution, establishes flowing grids, flowing labels, and flexible breakpoints, and selectively increases content through external scripts to realize the layout And the content adapts to the device size, reduces unnecessary page loading, and optimizes the webpage display effect.

Description

A Progressive Enhancement Approach to Responsive Web Design

technical field

The invention belongs to the technical field of webpage design, and more specifically relates to a progressively enhanced responsive webpage design method.

Background technique

Nowadays, more and more people use mobile phones to browse the web, chat on WeChat, QQ, mobile shopping, or use various mobile applications related to life and entertainment. As a variety of mobile devices begin to appear on the market, the way users access them begins to change, and the corresponding web design and development technologies also undergo some changes. Maybe the designer wants to give some users who use mobile devices a better experience. Therefore, a webpage specially designed for all visitors using mobile terminals is automatically redirected. On the other hand, if the website is made responsive, no matter what kind of mobile terminal device the customer uses to visit, the website will automatically adjust the display effect, so that each user can get a better visiting experience. Responsive web design can not only meet the needs of various mobile terminal devices, but also allow every user to get the best access experience. Then, some people think that a dedicated website is designed for each type of mobile device terminal, such as computers, iPads, and mobile phones. However, according to the existing relevant data, the most frequently used mobile terminal devices are There are more than 300 kinds, and it is impossible for our designers and developers to design more than 300 kinds of websites with different screen sizes. In this case, responsiveness shows its advantages and value. You only need to design a responsive website to bring different end users the best access experience.

Responsive webpage is a new development direction of webpage design in the future. In recent years, a variety of mobile Internet technologies have been widely used and continuously upgraded. Among the media for accessing different websites, various mobile devices with smartphones and tablet computers as the main access interface have been born, but different The different sizes of the devices make the webpages that can be accessed normally on the computer appear disorderly when accessed on these mobile interfaces, which may cause inconvenient operation or poor visual experience for users. Based on this embarrassment, responsive web design, which was born in recent years, is defined as a series of tailoring and customization of the display and interaction behavior of the system according to the individual needs of users and the application environment. Compared with traditional websites, responsive websites have better flexibility and adaptability, can simplify the design process, and represent a new direction of website design in the future. At present, more and more websites that focus on user interaction experience are actively seeking to adapt to responsive websites. The web page does the transformation.

Contents of the invention

The object of the present invention is to propose a progressively enhanced responsive webpage design method in order to solve the shortcomings in the prior art.

To achieve the above object, the present invention provides the following technical solutions:

A progressively enhanced responsive webpage design method includes the following steps:

S1. First design a non-responsive layout, that is, the page width is fixed, and then set the page to be displayed in 1:1 on clients of different sizes, that is, provide full-view browsing of the web page, and prohibit users from zooming the page;

S2. Use media query to automatically adapt the webpage to terminals with different resolutions; divide the webpage source code service scope according to the screen size and characteristics of the terminal;

S3. To draw a breakpoint diagram according to the above, first determine the breakpoint, and then draw a thumbnail of the webpage layout under the corresponding breakpoint, indicating that when the viewport size reaches this value, the effect of the layout will be displayed;

S4. Determine responsive CSS rules and Javascript programs for different breakpoints.

Preferably, the breakpoint diagram is further divided into three types, namely a breakpoint diagram with layout thumbnails, a breakpoint diagram with secondary breakpoints, and a breakpoint diagram showing the scope of the CSS file.

Preferably, the terminal is a mobile phone or a tablet computer or a computer.

Preferably, the horizontal specification of the tablet computer is 1060px, and the screen specification of the mobile phone is 768px.

Preferably, when the media query detects the horizontal specification of a tablet computer, the left and right display ratios of the page are 65% and 30% respectively, and 5% is reserved as a margin; when it is a mobile phone screen, the ratio of the left and right columns of the page is 100% to display the left and right columns up and down in full screen.

The technical effects and advantages of the present invention: a progressively enhanced responsive webpage design method provided by the present invention is adaptive to different devices, realizes matching of website layout and content with device characteristics, improves website performance and enhances user experience. The present invention starts with low-resolution devices, gradually optimizes web page layout and content display according to the increase in device resolution, establishes flowing grids, flowing labels, and flexible breakpoints, and selectively increases content through external scripts to realize the layout And the content adapts to the size of the device, reducing unnecessary page loading, and optimizing the display effect of the web page; through CSS rules and auxiliary script control, a flexible layout is realized, and for small-sized devices, less data is loaded to display the most important website information. As the size of the device increases, the layout of the web page can adapt to the screen of the device, and by selectively loading more content into the source code of the web page, it can make full use of the communication traffic and optimize the display effect of the web page, which can optimize the performance of the website and improve the user experience. .

detailed description

In order to make the object, technical solution and advantages of the present invention clearer, the present invention will be further described in detail below in conjunction with specific embodiments. It should be understood that the specific embodiments described here are only used to explain the present invention, not to limit the present invention. Based on the embodiments of the present invention, all other embodiments obtained by persons of ordinary skill in the art without making creative efforts belong to the protection scope of the present invention.

A progressively enhanced responsive webpage design method includes the following steps:

S1. First design a non-responsive layout, that is, the page width is fixed, and then set the page to be displayed in 1:1 on clients of different sizes, that is, provide full-view browsing of the web page, and prohibit users from zooming the page;

S2. Use media query to automatically adapt the webpage to terminals with different resolutions; divide the webpage source code service scope according to the screen size of the terminal and the characteristics of the terminal; the terminal is a mobile phone or a tablet computer or a computer; the horizontal specification of the tablet computer is 1060px, and the mobile phone screen size is 768px; when the media query detects the horizontal size of the tablet computer, the left and right display ratios of the page are 65% and 30%, respectively, and 5% is reserved for the margin; when it is a mobile phone screen, the left and right sides of the page The ratio of the right column is 100%, so that the left and right columns can be displayed up and down in full screen;

S3, drawing the breakpoint diagram according to the above, first determine the breakpoint, and then draw a thumbnail of the webpage layout under the corresponding breakpoint, indicating that when the viewport size reaches this value, the effect of the layout will be displayed; the breakpoint diagram There are three types, namely breakpoint diagrams with layout thumbnails, breakpoint diagrams with secondary breakpoints, and breakpoint diagrams showing the scope of CSS files;

S4. Determine responsive CSS rules and Javascript programs for different breakpoints.

To sum up: the present invention provides a progressively enhanced responsive webpage design method, which adapts to different devices, realizes matching of website layout and content with device characteristics, improves website performance and enhances user experience. The present invention starts with low-resolution devices, gradually optimizes web page layout and content display according to the increase in device resolution, establishes flowing grids, flowing labels, and flexible breakpoints, and selectively increases content through external scripts to realize the layout And the content adapts to the size of the device, reducing unnecessary page loading, and optimizing the display effect of the web page; through CSS rules and auxiliary script control, a flexible layout is realized, and for small-sized devices, less data is loaded to display the most important website information. As the size of the device increases, the layout of the web page can adapt to the screen of the device, and by selectively loading more content into the source code of the web page, it can make full use of the communication traffic and optimize the display effect of the web page, which can optimize the performance of the website and improve the user experience. .

Finally, it should be noted that: the above is only a preferred embodiment of the present invention, and is not intended to limit the present invention. Although the present invention has been described in detail with reference to the foregoing embodiments, for those skilled in the art, it still It is possible to modify the technical solutions recorded in the foregoing embodiments, or to perform equivalent replacements on some of the technical features. Any modifications, equivalent replacements, improvements, etc. within the spirit and principles of the present invention shall be included in the within the protection scope of the present invention.

Claims (5)

1. a kind of progressive enhanced response type webpage design method, it is characterised in that comprise the following steps：

S1, the layout for designing a non-response first, i.e. pagewidth are fixed, then set the page in various sizes of visitor Family end is all shown as former state by 1: 1, that is, is provided webpage full view and browsed, forbid user to scale the page；

S2, webpage can be made to adapt to the terminal of different resolution automatically using Media Inquiries；According to the screen size of terminal and end The feature at end divides web page source code service range；

S3, according to above-mentioned drafting breakpoint graph, first have to determine breakpoint, then below corresponding breakpoint draw page layout breviary Figure, is represented when viewport size reaches the value, will show the effect of the layout；

S4, determine for different breakpoints response type CSS rules and Javascript programs.

2. the progressive enhanced response type webpage design method of one kind according to claim 1, it is characterised in that：The breakpoint Figure divides three types again, is that the breakpoint graph with layout thumbnail, the breakpoint graph with secondary breakpoint and displaying CSS files are made respectively With the breakpoint graph of scope.

3. the progressive enhanced response type webpage design method of one kind according to claim 1, it is characterised in that：The terminal For mobile phone or tablet personal computer or computer.

4. the progressive enhanced response type webpage design method of one kind according to claim 2, it is characterised in that：The flat board Computer transverse direction specification is 1060px, and mobile phone screen specification is 768px.

5. the progressive enhanced response type webpage design method of one kind according to claim 1, it is characterised in that：When media are looked into When inquiry detects tablet personal computer transverse direction specification, the page is that left and right displaying ratio is respectively 65% and 30%, and it is side to be reserved with 5% Away from；When for mobile phone screen, the left and right column ratio of the page is all 100%, is shown on left and right column up and down with full frame with realizing.