Shulou(Shulou.com)06/02 Report--

The editor today takes you to understand what matters need to be paid attention to in the web design of small screen mobile devices. The knowledge points in the article are introduced in great detail. Friends who feel helpful can browse the content of the article with the editor, hoping to help more friends who want to solve this problem to find the answer to the problem. Let's follow the editor to learn more about "what do you need to pay attention to in the web design of small screen mobile devices?"

The reason is that such web pages originated 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 abbreviation of Wireless markup language (Wireless Makeup language). Mobile phones that support WAP technology can browse Internet content described by WML.

Today's small-screen mobile devices, such as mobile phones, already have the ability to access WWW. Most of its built-in browsers, or third-party browsers, are WebKit engines.

As a result, no one uses WML to organize WAP sites, and generally uses HTML+CSS to build WAP sites.

When designing web pages for small-screen mobile devices, you may need to know these prerequisites:

The resolution of the mobile phone screen is a mess, there are all kinds of resolution!

The cost of our mobile Internet access is expensive!

UC browser has a large market share!

About UC browsers:

Yes, I have to mention it. Who says it has a high market share?

As far as UC browser is concerned, it is obviously very suitable for the national conditions of our country, and it gives users the maximum saving of mobile Internet traffic. (the slogan used by UC browsers seems to be the trick of saving traffic.)

Based on mobile applications and the readability of text, UC browsers also reflect the characteristics of large fonts, large line spacing and so on.

Compared with other mobile browsers, UC browsers have a special and custom way to deal with HTML tags and CSS attributes.

At present, these special treatments should be retained for a long time until the cost of mobile Internet access is greatly reduced, making consumers more bolder to surf the Internet.

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

The font-family attribute is not supported, that is, you can only see one font in a UC browser

The font-szie attribute is not supported, that is, you can only see fonts of the same size in UC browsers

Width, height, padding, margin and line-height attributes are not supported, that is to say, UC browsers can only wrap lines through HTML tags such as p and br to achieve character spacing.

Does not support fixed pixel width, 100% display of the page, that is, in UC browsers will always see "full screen"

Floating, cascading layouts are not supported, and the float and position properties are invalid, that is, you can only see "left alignment" in UC browsers.

Support background-color, but do not support background-image, that is, does not support CSS background image display, in UC browsers you can only see the background color.

However, I still believe that today's construction of small-screen mobile web sites can be based on the browser of the WebKit engine as a standard for interface development.

In other words, we design web pages that support UC browsers instead of web pages based on UC browsers.

This also has the advantage of ensuring a relatively consistent style on most mobile browsers.

For UC, which is not even supported by standard CSS attributes such as float, don't worry too much about it!

However, in order to ensure that the elements in the interface still have a good reading order in UC browsers, HTML coders are seriously advised to pay attention to the order of each HTML tag.

Because only in browsers that support float and position attributes, the containers of the page can be freely floating or cascading. Otherwise, the browser will be displayed in the order of the HTML tags.

Some other additions to the web design of small screen mobile devices:

Web site head (header)

Considering some of the features of small-screen mobile devices, when designing web pages, some can remove the site header (including LOGO, global navigation, etc.).

For example, flick's view of the large image page removed the head of the site.

Here I invent a stylish design principle: "for interface design for small-screen mobile devices, certain task-specific interfaces should take precedence over the current task rather than the application itself." This principle works, and it also applies to the design of mobile device applications.

For example, if you are designing a mailbox accessed by a small screen mobile device, you can completely remove the website header from the letter and email reading pages.

Link focus (hover)

Each browser customizes the hover style of the link, for example, some browsers add a frame when the link is focused, and some browsers add a background color when the link is focused. Therefore, small-screen mobile web pages do not need to be written in CSS hover style.

Mouse event (mouseover)

Considering the touch screen operation, users cannot use their fingers to perform over operations, so the use of mouseover on web pages applied to mobile devices should be prohibited.

Thank you for your reading. The above is the whole content of "what do you need to pay attention to in the web design of small screen mobile devices?" the friends who learn to learn to do it quickly. I believe that the editor will certainly bring you better quality articles. Thank you for your support to the website!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.