Web Design tips: Home page design width and height

Article Description: according to the user visible area Height statistics chart and overall 28 Proportion division principle, if the first screen height determines in 710 pixel can take care of approximately 80% user group, the small K proposes: the front-end development in makes the page may consider 710 pixel as the first screen area height, Using technical means to give priority to the performance of the first screen can obtain a good user experience degree.

An experienced web designer in the design of the Web page prototype or visual effects, the first thing you have to do is to mark the site's first screen height line, so as to visually see the site's first screen height, the first screen can be displayed elements. So how do we label the first screen of a Web page? The author combines some of the online discussions with special collation as follows:

The height of the first screen is directly related to the various objective conditions of the client, because we want to determine the height of the first screen (marking the first screen line) need to combine some relatively accurate internal statistics to analyze, according to each client's operating system, browser distribution and screen resolution, and combined with the common browser status bar, The taskbar and other heights are analyzed as follows:

The first step: analysis of common resolution and browser height data

Common Browser Resolution tables

Combined with the above table in each resolution and browser statistics, we can easily draw two first screen lines, respectively, 580PX and 710PX, corresponding to different resolution.

Step Two: Analyze client actual resolution and browser visible area

Actual resolution scale Chart

Through the collection of user data we can draw the following data:

1 1024x768, 1440x900, 1366x768, 1280x800 resolution is the majority of client settings;

2 The total number of client resolution is very large, uncommon resolution proportion of which accounted for a considerable number of categories;

3 with the upgrading of hardware 800x600,1024x600 600PX height resolution is gradually disappearing.

User visible Area Height statistics chart

By testing more than 30W client users, the resulting test data is as follows:

1 viewport height is less than 580 of the 116,786 people, accounting for 44.64%

2 viewport height is less than 720 of the 216,227 people, accounting for 82.64%

3 viewport height is less than 800 of the 241,420 people, accounting for 92.27%

4 viewport height is less than 900 of the 259,174 people, accounting for 99.06%

Step three: The analysis of Hot zone map in the visible area of browsers

Browser common Hot Zone distribution chart

Combining the above three steps, we can finally determine:

1, through the analysis of the above browser common thermal distribution map we can see: In the Web page design, if the first screen height set in greater than 600 pixel resolution, it may lead to a lot of users see incomplete, considering a good user experience, Recommendations: Web Designers in the design of Web pages with 600 pixels as the first screen height to design;

2, according to the user's visible area height statistics and overall 28 division of the principle, if the first screen height of 710 pixels can be taken care of about 80% of the user community, small K recommended: Front-End development in doing the page can consider 710 pixels as the first screen area height, Using technical means to give priority to the performance of the first screen can obtain a good user experience degree.