In the past, small screen mobile device web pages were also known as WAP pages, or WAP stations.
The reason is that such web pages originated from a wireless protocol called WAP.
WAP can run on various wireless networks, such as GSM, GPRS, CDMA, etc. WML is the abbreviation of Wireless Markup Language. Mobile phones supporting WAP technology can browse Internet content described by WML.
Today's small screen mobile devices, such as mobile phones, have the ability to access WWW. Its built-in browser , or third-party browsers are mostly WebKit engines.
Therefore, no one uses WML to organize WAP sites. Generally, HTML+CSS is used.
When designing small screen mobile device web pages, you may first need to understand some prerequisites:
The resolution of the mobile phone screen is in a mess. There are all resolutions!
Our mobile internet access costs are expensive!
UC Browser has a big market share!
About the UC Browser:
Yes, I have to mention it. Who calls its high market share.
For UC browser, it is obviously very suitable for the national conditions of our country. It gives users the maximum saving of mobile Internet traffic. (It seems that the slogan of UC Browser is to save traffic.).
Based on mobile applications and readability of text, UC browser also reflects the typeface , large line spacing, etc.
Compared with other mobile browsers, UC browser has special and customized processing methods for HTML tags and CSS attributes.
At present, these special treatments should be kept for a long time, until the cost of mobile Internet access is greatly reduced, making consumers more daring to use mobile Internet.
In actual development, we found that UC browser has some "special care" for CSS:
The font family attribute is not supported, that is, you can only see one font in UC browser;
The font szie attribute is not supported, that is, you can only see fonts of the same size in UC browser;
The width, height, padding, margin, and line height attributes are not supported. That is to say, in UC browser, only HTML tags such as p and br can be used to wrap lines to achieve character spacing;
It does not support fixed pixel width, and 100% of the page is displayed, that is, the UC browser will always see "full screen";
Floating and cascading layouts are not supported. The float and position attributes are invalid. That is to say, you can only see "left aligned" in UC browser.
Background color is supported, but background image is not. That is to say, CSS background image display is not supported. In UC browser, you can only see the background color.
However, I still believe that the construction of small screen mobile device web pages today can be completely based on the browser of WebKit engine as the standard for interface development.
In other words, we design web pages that support the UC browser, rather than designing web pages that take the UC browser as the standard.
This also has the advantage of ensuring a relatively consistent style on most mobile browsers.
For UC, a browser that doesn't even support standard CSS attributes such as float, don't get too tangled with it!
However, in order to ensure that the elements in the interface still have a good reading order in UC browser, it is seriously recommended that HTML coders pay attention to the order of each HTML tag.
Because only in browsers that support the float and position attributes can each container of the page float or stack at will. Otherwise, the browser will display in the order of HTML tags.
Other small screen mobile devices Web Design Relevant supplement of:
Website header
Considering some features of small screen mobile devices, some websites can be designed without website headers (including LOGO and global navigation).
For example, the site header is removed from the large view page of flick.
Here I have created a fashionable design principle: "For the interface design of small screen mobile devices, in the interface of some specified tasks, the priority should be to let users focus on the current task, rather than the application itself." This principle is feasible, and also applies to the design of mobile device applications~
For example, if you are designing an email address accessed by a small screen mobile device, you can remove the website header from the letter writing and email reading pages~
Link focus (hover)
Each browser has customized the hover style of the link. For example, some browsers add a border when the link is focused, and some browsers add a background color when the link is focused. Therefore, there is no need to write hover style in CSS for small screen mobile device web pages.
Mouse Events (mou SEO ver）
Considering the touch screen operation, users cannot use their fingers to perform the over operation, so it should be prohibited to use mouseover on the web pages used for mobile device access.
