Web page Design Tips How to determine the height of the first screen?

Source: Internet
Author: User

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

Web Design Tutorials 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.

First collation, reprint please mark the Source: http://www.371518.cn/article/show/55.aspx

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.