Mobile Web page production should conform to the Web standards

Guide: Domestic mobile Web site is still a new thing, the corresponding front-end development of mobile phone site is not particularly mature, for a web designer to do a mobile phone site will still encounter many problems, this article reprinted from Taobao UED, share how to develop mobile phone site front-end card hair.

From the beginning of 09 to take over Taobao mobile website front-end development work so far, the blink of an eye has been a year. Looking at the mobile phone Taobao from the initial beta version to today's appearance, feeling a lot.

Mobile website Development, has many unknown difficulties:

One is that the information is too small, most mobile sites are in the initial stage, a lot of times are stones, and in view of the particularity of Taobao itself, we also make reference to successful cases, to do more thinking;

Second, the compatibility of the work is very difficult, not much more difficult than the Web site compatibility work to low (on this point, please see my previous article );

Furthermore, as a front-end development of a mobile phone site, often easily overlooked (including ourselves), we may feel good to do a mobile phone site can be how difficult to understand a little XHTML, a little CSS, and even do not need to have any research on JavaScript, the fact is not so, Because the development of mobile Web site is too many restrictions on the device, the front-end often in order to save a few bytes of the tangle, write semantically good code is also more important, and the development of multiple versions of the requirements of JavaScript is also a high demand for the elegant downgrade, This will allow the site to have a version of the requirements of the same set of XHTML code can be common, the greatest degree of reduction in development costs.

For mobile web sites, believe that now is just the beginning, with a variety of new models have been available, this area will become the new heights of the military strategists will contend.

Note: Due to the rapid development of mobile web sites, please refer to the publication time of this article.

Directory

1. Statistical analysis of mobile phone user equipment
2. Mobile browser Compatibility test Results Summary
3. The problems you need to pay attention to in the development of mobile website
4. Recommended reference
5. Summarize

Statistical analysis of mobile phone user equipment

Have a comprehensive user data, no doubt can help us to make more meet the needs of users products. Internal data can help us pinpoint the characteristics of our target user base, while external data can tell us about the situation of mobile users in a large environment and give us some very useful information when the internal data is not sufficient.

From the external data, from October 09 to November

Domestic browser brand market share of the top three is:

• Nokia (78%)
• Opera (OEM) (10%)
• IPhone (Safari) (3%)

The first three mobile operating systems in China are:

• Nokia SymbianOS (80%)
• Iphoneos (6%)
• SonyEricsson (5%)

Of course, as China's mobile web developers, can not ignore the powerful Shanzhai market (or should be called as a boutique mobile phone market?) ）。 By the way, this kind of mobile phone usually uses MTK operating system.

(All of these data are from statcounter.com)

Mobile browser Compatibility test Results Summary

Note: the "majority" below refers to the number of mobile phones that occur in the models we have tested, up to 50% and above, "parts" to 20% to 50%, and "few" to 20% and below. This probability is only limited to the models we have tested, although the samples we collected try to cover a variety of features of the mobile phone, but does not represent the situation of all mobile phones.

XHTML section

Most mobile phones do not support:

• The "Disable" property of a FORM element

Some of the mobile phones do not support:

• "Button" label
• "Input[type=file]" label
• "IFRAME" label.

Although only some mobile phones do not support these tags, but because these tags in the page often have very important functions, so belong to the high-risk label, to use caution.

A few mobile phones do not support:

• Select tab: If the label is given a more complex CSS attribute, it may cause an abnormal display, such as "Vertical-align:middle".

CSS Section

The majority of mobile phones do not support:

• "Font-family" attribute: Because the handset basically installs only the song body This kind of Chinese font;
• "Font-family:bold;" : Invalid for Chinese characters, but generally valid for English characters;
• "Font-style:italic;" Ibid.
• "Font-size" Property: For example, the Chinese in 12px and 14px in Chinese look as large as you might see some differences when the character size is 18px;
• White-space/word-wrap Property: Unable to set the Force wrap, so when you have a lot of Chinese on the page, you need to pay special attention not to allow too much ligatures English characters to open the page;
• "Background-position" property: But the background picture's other attribute settings are supported;
• "Position" property;
• "Overflow" property;
• "Display" property;
• "Min-height" and "Min-weidth" properties;

Some of the mobile phones do not support:

• Height property: "Height" support is not very good, it is strange that in our test, only a small number of mobile phones do not support the "width" attribute;
• "Pading" Property
• "Margin" property: a higher proportion of mobile phones do not support negative values for "margin".

A few mobile phones do not support:

• A few mobile phones are completely unsupported by CSS;

JavaScript section

This part of the test is relatively less maddening, or simply not supported, if supported, the basic DOM operations, events and other support is good. But we haven't tested very complex scripts.

Of all the phones we've tested, the proportion of mobile phones that support (including not fully supported) JavaScript is about half, and of course, the most important thing for us is not the scale, but how to do the graceful demotion of JavaScript.

Other

• Some phones do not support PNG8 and png24, so try to use JPG and GIF pictures
• In addition to smooth gradient and other fine picture details, some of the phone's color support can not meet the requirements, so carefully with a smooth gradient bar design
• Part of the phone for oversized pictures, neither zoom, nor show the horizontal scroll bar
• A handful of mobile phones will show insufficient memory when they open more than 20k of test pages

Issues you need to be aware of in development

• What specifications should be followed for mobile web coding?
  Follow the XHTML Mobile Profile specification (wap-277-xhtmlmp-20011029-a.pdf), referred to as the XHTML MP, which is commonly said to be the WAP2.0 specification. XHTML The MP is designed for clients that do not support all of the features of XHTML and have limited resources. It is based on XHTML Basic and adds elements and attributes from XHTML 1.0. These include additional elements and support for the internal style sheet. As with XHTML Basic, the XHTML MP is a strict subset of XHTML 1.0.
• Does the Web page document recommend using an extension?
  The recommended name is XHTML, according to WAP2.0 specification standard written html/htm, etc. is also possible. But a handful of phones are bad for HTML support.
• Why do most of today's Web sites line up to 14 Chinese characters?
  Because of the specificity of handheld devices, the actual size of the page is not necessarily the size of the text we set in the CSS, especially in the third party browser. For example Nokia5310, its built-in browser page text size and CSS settings match, but the Third-party browser Operamini and UCWeb page text size is larger than CSS settings. After testing, its text is about 16px. If the screen resolution width of 240px, remove the outer margin, then its line display within 14 words, is the comparison of insurance (to avoid text line wrapping) practice.
• Use WCSS or CSS?
  WCSS (WAP cascading style Sheet or wap CSS) is a mobile version of the CSS style sheet. It is a subset of CSS2, removing some attributes that are not suitable for mobile internet features, and adding some extensions with WAP features (such as-wap-input-format/-wap-input-required/display:-wap-marquee, etc.). It is important to note that these special attribute extensions are not very practical, so it is not recommended to use WCSS-specific properties in actual project development.
• Avoid null-value properties
  If the property value is blank, it is completely fine on the Web page, but it will be an error on most mobile Web pages.
• Page size limit
  recommended that the lower version of the page does not exceed 15k, the high version of the page does not exceed 60k.
• Is it reliable to test a page with a phone simulator and a third-party mobile browser's online simulator?
  If there is a condition, we certainly recommend testing on the mobile entity, because the target customer group's mobile devices are always changing, these phone simulators are usually not exactly the right to simulate the display of the page on the phone, such as picture color, page size limit, etc. it is difficult to test the simulator. Of course, some third party mobile browser online simulator can still be tested, third-party browsers are relatively less affected by mobile devices.

Recommended reference

Develop authoritative website

• wapforum:xhtml Mobile Profile Specification-pdf
• WAPFORUM:WCSS Specification-pdf
• w3c:xhtml BASIC 1.1 specification-HTML
• w3c:mobile Web Test Suites Working group.html
• PPK: Testing and research on the compatibility of mobile browsers. HTML
• developershome:xhtml MP Tutorial. html ( Chinese version )

Classic Development Articles

• Unknown: The evolution of mobile WAP related markup language. jpg
• Flora graham:alternative Mobile browsers tested.html
• Lucas Pettinati (Yahoo): Challenges of Interface for Mobile devices.html
• Holly kolman:how to make a Click to call link.html
• Brian suda:introduction to the Mobile web.html

Mobile phone Model Search

• handsetdetection: Mobile phone query. The HTML model is very full, foreign models, more parameters
• mobile9: Mobile phone query. The HTML model is complete, the partial gate model may not have the content
• Test mobile phone network: Mobile phone search + simulation. Less HTML models to simulate mobile phone operation

Summarize

At present, mobile Web development is a typical device-driven development process, the page is designed to what, can do, almost all depends on the target customer's mobile phone equipment.

Therefore, the understanding of mobile phone equipment for the design and development process has an intuitive important role for the front-end, it is necessary to have a long-term mobile browser compatibility test, what kind of design can be implemented, what kind of tags can be used, these need to have data support.

We must have such a recognition, the development of mobile Web pages will always be more or less of the mobile device problems, because we can never know all the users of mobile phone equipment, so we should try to follow the standards for development, so as to meet the proportion of users to do the best.

There is a place in which you can get a thorough understanding of any field, even now it looks like the development of mobile phone sites is a bit out of the mainstream, but I believe that with the replacement of mobile devices, one day it will become our occupation of customers an important battlefield, the iphone such as the Web-standard browser mobile phone release, Also gives us more confidence.

In short, the revolution has not been successful, comrades still need to work hard. Wish you all a happy New Year!