Small screen mobile Device Interface design WAP page Design considerations

Web page Production WEBJX article introduction: 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 (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.
So no one to use WML to organize WAP site, is generally used html+css way.
  when designing a small-screen mobile device Web page, you might want to understand some of the prerequisites:

• The screen resolution of the mobile phone is messed up, what resolution is there!
• Our mobile internet cost thieves expensive thief!
• UC Browser has a large market share of thieves!

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 the actual development, we found that the UC browser for CSS There are some "special care":

• font-family attribute is not supported, that is to say, you can only see one font in UC browser;
• Font-szie attribute is not supported, that is to say, you can only see fonts of the same size in UC browsers;
• Does not support the width, height, padding, margin, line-height attributes, that is, the UC browser can only through the P, BR and other HTML tags to the line to reach the upper and lower spacing;
• Does not support fixed pixel width, 100% display page, that is, in the UC browser will always see the "Full screen";
• Floating and cascading layouts are not supported, and float and position properties are not valid, that is to say, you can only see "left-aligned" 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.

Some other small-screen mobile device web design related supplements:

• Site header (header)
  Considering some features of small screen mobile devices, when designing Web pages, some of them can be removed from the site header (including logos, global navigation, and so on).
  For example, flick view of the big picture page will be removed from 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 hover style, for example, 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 events (mouseover)
  Given the touch-screen operation, users cannot use their fingers over the operation, so you should prohibit the use of mouseover on the Web pages that are applied to mobile devices.