Small screen mobile device web design Considerations

In the past, small screen mobile device Web pages are often called WAP pages, or WAP stations.
The reason is that this kind of web page originates from a wireless protocol called WAP.
WAP can run on a variety of wireless networks, such as GSM, GPRS, CDMA and so on. WML is the English abbreviation for the Wireless label language (http://www.aliyun.com/zixun/aggregation/6155.html ">wireless-makeup-language"). Mobile phones that support WAP technology can browse the Internet content described by WML.

today's small-screen mobile devices, such as mobile phones, have the ability to access www. Its built-in browsers, or third-party browsers, are mostly WebKit engines.


also so no one to use WML to organize WAP site, is generally used html+css way.


in the design of a small screen mobile device Web page, you may have to understand the premise: the screen resolution of the mobile phone mess, what resolution has! Our mobile internet cost thieves expensive thief! UC Browser has a thief big market share!

About UC Browsers:

Yes, I have to mention it. Who called it the market share is high.
For UC browsers, it is obviously very suitable for our national conditions, it gives users the maximum savings in mobile phone internet traffic. (UC Browser hit the slogan seems to be the province of traffic this trick).
Based on mobile applications, as well as the readability of the text, UC Browser also embodies a large font, large spacing and other features.
The UC Browser has a special, customized approach to HTML tags and CSS properties in relation to other mobile browsers.
These special treatments, at present, should continue to be maintained for a long time until the cost of mobile Internet is substantially reduced, making consumers more daring to move online.

In actual development, we found that the UC browser has some "special care" for CSS:

Font-family properties are not supported, that is, you can only see one font in UC browsers; Font-szie properties are not supported, that is, you can only see fonts of the same size in UC browsers; width, height, padding, margin, Line-height property, that is, in the UC browser can only through the HTML tags such as p, BR to achieve the upper and lower spacing, not support the width of fixed pixels, 100% display page, that is, in the UC browser will always see the "full screen," does not support floating, cascading layout, The float and position properties are not valid, that is to say, you can only see "left alignment" in UC browsers. Support for Background-color, but does not support background-image, that is, do not support the CSS background image display, in the UC browser you can only see the background color.

However, the individual still believes that the construction of small screen mobile devices today Web page, can be based on the WebKit engine browser as the standard interface development.
In other words, we design a Web page that supports UC browsers, rather than designing a Web page with UC browsers as the standard.
This also has the advantage of ensuring a relatively consistent style on most mobile browsers.
And for UC such as the standard CSS properties such as float is not supported browsers, do not too tangled it!
However, in order to ensure that the elements in the interface still have a good reading order in UC browsers, it is highly recommended that HTML coders should pay attention to the order of each HTML tag.
Because only in browsers that support float and position properties, the individual containers of a page can be arbitrarily floating or stacked. Otherwise, the browser will appear in the order of HTML tags.
Other small screen mobile device web design supplements:

Web Header (header)


take into account some features of small screen mobile devices, design Web pages, some can remove the head of the site (including logos, global navigation and so on).


such as Flick's view of the big picture page removed the site header.

Here I've created a fashionable design principle: "For the interface design of a small screen mobile device, the interface for certain tasks should take precedence over the current task rather than the application itself." "This principle works, and also applies to the design of mobile device applications ~
For example, if you are designing a small-screen mobile device access to the mailbox, you can completely in the letter, mail reading page to remove the site ~

link focus (hover)


Each browser has customized the link of the hover style, such as some browsers to focus on the link with a border, and some browsers to focus on the link to add a background color and so on. Therefore, small screen mobile device Web pages do not need to write hover styles in CSS. Mouse event (mouseover)


in view of touch screen operation, users can not use their fingers over the operation, it should be prohibited in the application of mobile devices to access the Web page to use MouseOver. Source: http://uedc.163.com/2946.html