Key points of mobile website design optimization

Although the mobile terminal is limited by mobile phone performance, network and other constraints and cannot achieve the same excellent results as PC, the mobile terminal also has its own unique advantages, such as parallax scrolling and "acceleration" sensor through the unique gravity sensing function of the mobile phone. Realize elegant and interesting human-computer interaction such as "shake".

Visual elements that affect the mobile website homepage

• Web page loading time

• Website format [Design and response]

• Visible search function

• Click to call

• Visible login

• Social media function

• App display

Web page loading time
The main influencing factor is static Resource files, pictures, etc.

---

Website format [Design and response]

---

##Visible search function

---

Click to call

---

Visible login

---

##Social media features

---

App display

---

Mobile terminal home page design specifications

Mobile terminal special page design specifications

---

Set the safe area

Regardless of the mobile terminal or the PC terminal, a safe area should be determined as the user's visual and contact area, and important information should be placed in the safe area. Mobile safe area settings: Leave appropriate white space on both sides of the mobile screen width, and adjust the height of the first screen accordingly.

Control image size

---

The header image of a topic often gives users a strong visual impact, but due to mobile network limitations, the waiting cost for loading an image is often much greater than on a PC. Therefore, the extended area of ​​the header image is suitable for using solid color, gradient and tileable materials to reduce network traffic and improve loading speed.

Font

---

In the topic page, the main font size should be controlled within 3. The font should be rendered using the default font of the mobile system as much as possible, avoid using font sizes at will, and ensure that the font size is an integer.

Generally, the font size on mobile terminals is twice that of PC terminals.

Control interaction area

---

Mobile terminals are often control panels. The minimum sensitivity of fingers in the screen hot zone is 44px. This issue should be paid attention to when designing the mobile terminal interaction area.

Reduce jumps

---

Limited to the mobile network environment, page jumps will cause greater psychological uneasiness to users, so key information should be displayed reasonably on one page as much as possible. If the jump is necessary, you can use expansion, pop-up, drop-down and other methods to reduce the psychological impact of the user.

The above is the detailed content of Key points of mobile website design optimization. For more information, please follow other related articles on the PHP Chinese website!