Mobile WEB R&D process

It has been nearly a year since I started to develop the front end of Mobile WEB. In this not too short time, I have summarized a set of my own "R&D process" of Mobile WEB by absorbing the experience of predecessors such as the center of the circle and sunken fish, as well as continuous exploration and practice. The reason why it is called "R&D" process rather than "development" process will be explained below. First, let's take a look at the flow chart of "R&D":

1. Why is it called "R&D" process?

We know that for traditional WEB front-end development, the operating systems/browsers we need to focus on are generally as follows:

Operating system: Windows/MacOS

Browser: IE (6, 7, 8)/Firefox/Safari/Opera/Chrome

The basic conditions of these operating systems and browsers are as follows:

The market share and use distribution are relatively stable

It is relatively open, and the manufacturer supports developers well

There is little difference in browser rendering under different operating systems

After long-term research and summary by front-end developers, their rendering features and standard support are basically well-known

In the field of mobile WEB front-end development, the situation is quite chaotic, and the things we need to focus on are much more complex:

Operating system (platform): Symbian (S40/S60/S80/S90)/iPhoneOS/Android/WM (WinCE)/MTK/Linux/BB/PalmOS/Miemo (Meego)

Built in browser: Symbian/Chrome Lite/iPhone Safari/MTK/IE Mobile/BB Browser/Opera (OEM)/

Third party browser: Opera Mini/Opera Mobile/Skyfire/NetFront/UCWEB/QQ browser/Go browser/

The basic conditions of these operating systems and browsers are:

The market share and use segments are unstable, and new models and browsers will easily occupy the market

Most of the built-in browsers are not open enough, and the operating system and browser manufacturers do not provide enough support for developers

Different operating systems, different browsers, different browsers under the same system, the same browser under different operating systems, or even different versions of the same system or browser, may lead to great differences in page effects (very tongue twister, actually, it is arrangement and combination)

Due to the lack of research on compatibility (especially in China), the closeness and rapid changes of operating systems and browsers, our mastery of their features is basically blank

After comparison, we can quickly find that to make our Mobile WEB perform perfectly on more clients, we need a lot of time and energy to understand and master the characteristics of various operating systems, platforms, and mobile browsers. Only when we have a certain degree of understanding and mastery of them can we further control the development of mobile WEB compatibility.

Therefore, "R&D" includes "operating system, browser research" and "Mobile WEB development".

2. Progressive periodic research

As mentioned above, we need to spend a lot of time and energy to study the operating system and browsers of mobile devices. Rome was not built in a day, and fat people didn't eat it at once. We need a gradual process, a long-term research, and a bit of experience to gradually understand these characteristics. In addition, mobile devices are updated frequently, and new models and browsers are changing with each passing day. We also need to follow up the latest development periodically. Therefore, this is why periodic research is needed:

Requires a lot of time and effort

Frequent mobile device updates

When there is only one Mobile WEB front-end development, it is recommended to conduct system research every six months to lay the foundation for compatibility development. In the next six months, the front-end development of Mobile WEB pages will be based on the results of this study, and there is generally no need to conduct compatibility tests on the pages. The compatibility test has been mentioned in many articles before, and will be mentioned again below.

3. About compatibility test

Compatibility testing is an essential step for both Web development and Mobile Web development. However, in terms of process, the latter is quite different from the former.

WEB front-end development is to conduct browser compatibility test after page development

However, mobile WEB front-end development requires browser compatibility testing before page development

The mobile browser is not as easy as the desktop browser to view the effect of the completed page. Imagine that if the process is the same as the web front-end development process, every time a mobile web page is completed, a lot of test machines will be set up to test and compare the effect, find problems and modify them before testing, which would be a very absurd thing!

Therefore, we need to use the compatibility test results to guide the front-end development:

Test every common element of XHTML

Test every common attribute of CSS

Test the basic feature support of JavaScript

Test other points related to mobile devices

After the test results are sorted out, we can use it to know what elements and attributes can be used and what to avoid, and follow these usage conventions during development.