WAP page design and implementation tips

Most mobile phones currently support WAP 2.0. The WAP 2.0 page design has a better http://www.aliyun.com/zixun/aggregation/8936.html "> Visual effect, closer to the page." However, because the mobile phone is very different, the ability of the mobile browser is not the same, directly copy the design and implementation of the Web page, it is likely to let your WAP page problems. The following tips come from our page design and development practice.

1, when you try to use the background image, please also match the approximate background color

On the phone, some browsers do not support the use of background images. For example, on the S60v3 operating system's mobile phone (such as N76):

Like to use dark background pictures and light text of the students, please note that in the browser does not support background images, it is likely because of "rely on color", so that users can not distinguish these words.

If you still feel unwilling to use a background image, use a background image to match an approximate background color. Background colors are widely supported and can be set at the same time. This way, even if the user's browser does not support a background image, it will not cause your text content to be indistinguishable.

2, avoid relying on text style (bold, italic, text size) design, more text color

Although the use of bold, italic and different sizes of text can play a prominent role in the focus of content, but on the phone to do so may be a waste of your painstaking. Bold, italic, and text sizes are supported on different mobile browsers, as shown below:

If you use these styles, some phones may not even display correctly, such as a cottage in the following image:

If you're trying to focus on text styles, use a lot of color, which is the most widely supported.

3, the content as little as possible using the left-aligned way

Have you used the right alignment settings?

In fact, many browsers, such as some versions of UCWeb and go browsers, do not support a similar right alignment. On these browsers, they will run to the left.

4, reduce the complex layout floating, absolute positioning, two column layout god horse, for many mobile browsers are clouds. Look at the following use of the effect of absolute positioning:

Therefore, try to avoid using these CSS properties: float, clear, position, top, left, right, NRC. If used, try to ensure that this does not affect the normal presentation of your page content.

5, avoid link colors and text colors the same Web page development sometimes makes text and link colors the same, depending on whether there is an underscore to determine whether a link. However, some mobile browsers do not support custom links for underscores. In this case, if the link color is the same as the text color, it may cause the user to be completely unable to differentiate between the link and the normal text. 6, for touch screen phone to do a separate version

Most of the browsers on the computer have a mouse and can easily be positioned in a small location.

Touch-screen mobile phones are different, narrow screen, small text or shorter links, may be the fingers can easily produce false clicks. Please make a separate version of the touchscreen phone.

Touch screen version, you can improve the user experience by enlarging the font size, enlarging the click Area, setting the obvious click Mark ...

7, avoid using too many pictures

Pictures can bring better visual effects, but in the current use of flowmeter fee environment, will also waste more traffic for users, but also greatly extend the use of Gprs/edge Internet users to open the page speed.

So try to avoid using a lot of pictures.

8, reduce the use of PNG format images and GIF animations

Some mobile phones, such as some shanzhai machines, are not supported in PNG format pictures. There are also some browsers, such as the UCWeb on some platforms or opera Mini, can not see the dynamic effect of GIF animation.

If the picture is important to you, try not to use the PNG format picture and reduce the use of GIF animations.

9, small page

Mobile phones are a very limited device. Too long page, on the one hand is not convenient (many keyboard mobile phone users need to keep pressing down button to turn down), on the other hand, it is likely to not open your page-for example, Moto V3 mobile phone, page size over 10K, can not open. To make it easier for more users to browse the page, reduce the page size.

Reprint please specify from "Baidu Mux"