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

How to develop WebApp with HTML5, I believe many inexperienced people are helpless about this, for this reason this article summarizes the causes and solutions of the problem, through this article I hope you can solve this problem.

HTML5 is increasingly favored by Internet development teams at home and abroad. Abroad, Google enthusiastically developed Chrome Web Store, Microsoft released "Irish Spring" theme website supporting HTML5 technology development, Nokia invested heavily to buy and build NOKIA MAP business. Domestic Internet giants are also interested in this new web development standard blown from the other side of the ocean and begin to test HTML5 products.

Web App Development Process

1. Functional requirements planning: different from Web and local clients

Owner: Product Manager; Participant: Interaction Designer

Netease Weibo Web App (all referred to as mobile phone in this article) is different from Web products, and also different from local clients.

1. Compared with the Web end, Netease Weibo Web App has the advantages of strong mobility and rich media, as well as the disadvantages of narrow information presentation space and deep information architecture. The use situations of the two are different. Weibo Web end mostly uses immersive use under abundant time and superior network conditions; Weibo Web App mostly passes time under trivial time and mixed network conditions.

Therefore, Netease Weibo Web App should avoid large and complete functions, need to extract and select the functions most commonly used by users in mobile environment from the Web side, and add the unique requirements of mobile phone (such as adding localized service functions in the iteration stage).

2. Compared with the local client, Web App has the advantages of free installation, simple upgrade, low development cost, adaptive layout, etc. At the same time, it has the disadvantages of slow response speed, low permission to access native controls of mobile phone, weak stability, etc.

Based on the analysis of the advantages and disadvantages of the two, Netease Weibo Web App needs to catch up with the high-quality experience of the local client, and try to ensure that it is lightweight and fast.

In a word, the functions of Web App can be more refined than those of Web and local clients, meeting the most core needs of users in mobile environment.

Web App function planning, as shown below:

Information architecture design: as shallow and narrow as possible

Owner: Interaction Designer; Participant: Product Manager

Those who have done mobile Internet products must know why the information architecture needs to be as shallow and narrow as possible. The biggest reason is that the mobile phone has a small and expensive display space. The information architecture of the mobile phone local client needs to be shallow and narrow, especially for Web apps, because there is always a toolbar at the bottom of the browser in the browser page, so that the already cramped display space is eaten away. As shown below:

The browser toolbar at the bottom of the phone screen is very useful for Web App products: the Web App itself is a closed-loop application that does not require the browser toolbar. Even if it does not affect the large information architecture, it also eats up valuable display space and has an important impact on the design of the navigation system (this part was briefly analyzed in the previous article "iPhone Web App Navigation Design Discussion").

undefined

Webjx article introduction: HTML5 development actual combat of Netease microblogging.

III. Interaction design: concise and efficient

Lead: Interaction Designer; Participants: Product Manager, Visual Designer, Front-end Engineer, Back-office Technician

Interactive Design Concept:

The specific interactive design concept of this product comes from: user use scenario survey, competitor analysis, Web App development status, and Weibo Web App's own requirements. The main interaction design concepts summarized in the end are:

1. Improved accessibility:

Global navigation enhancement, quick return to home page, common operation resident, timely animation demonstration, simple and clear web page layout, etc.

2. improve the efficiency of use

Lowering the information architecture level, giving appropriate shortcut key entry, ensuring safe touch area, considering user browsing habits, prioritizing core functions, eliminating unnecessary visual noise, etc.

3. More intelligent and considerate

Support offline use, automatic filling of information in editing after accidental interruption, careful use of warning boxes, help in the implementation of search suggestions, arrangement of toolbars for current task requirements, positive and effective feedback, etc.

4. Improve task focus

Single task operation path, tab navigation hidden in time, elimination of interference factors, gray display of unavailable buttons, maximization of task page, non-minimization of functions, etc.

5. Platform consistency:

See instant point, list view of iOS platform, push screen animation when moving forward and returning to operation, modal view featured by iOS platform, warning box, calling native controls, simple and clear jump logic, etc.

The interactive design concept at this stage is not just an idea, but more specific design guidance for the Web App product. The design realization mode bearing the beautiful design concept is an important landing in the design research stage.

There are many design contents and details. Here is only one detail to share with you:

Enhanced Findability--Enhanced Global Navigation

Compared with the original wap micro blog, the fixed existence of the global navigation bar is a big change. Here's a brief analysis of why:

- What is the user environment like? -- Outdoor mobile situations (such as subway, queuing), or indoor idle state (such as brushing Weibo before bed);

- What is the purpose of the user coming to this page? -- Browse Weibo;

- What are the common actions users use on this page? -- Pull down to read, top and load new information, click on other tabs to execute jump;

- What are the benefits if the global navigation bar is fixed at the top? -- Convenient for users to return to the top, convenient for users to load new information, convenient for users to switch tabs, with a strong sense of global control;

- What's the downside if the global navigation bar is fixed at the top? -- gobbling up valuable information display space.

…………

In the process of user use, the behaviors of setting top, refreshing and switching tabs are also frequent behaviors, and the convenience of operation needs to be guaranteed. The fixed global navigation bar can meet this requirement: click the HOME button to set the top and refresh, which makes it easy for users to switch tabs. At the same time, the fixed global navigation bar allows users to always know exactly where they are and where they can go, giving users a strong sense of global control.

IV. Visual Design: Experiment of Fresh Style

Owner: Visual Designer; Participants: Product Manager, Interaction Designer, Front End Engineer

The visual style of Netease Weibo Web app is determined through multi-angle discussion:

1. Do you want to keep consistent with the color tone of Netease Weibo's local client?

Products need to maintain a certain consistency on different platforms, color style is also an important component of product temperament, then we need to use skin similar to Netease Weibo local client? The main color of Netease Weibo local client is red.

The analysis is as follows:

- The benefits of using this red color are: stronger product consistency; red forms a product temperament that is more "spiritual".

- The disadvantages of using this red color are: the red area is slightly eye-catching compared to Weibo content, and "immersive reading" is more difficult to achieve;

Using Netease Weibo Web App through safari browser, there is another difference between the final visual effect and the local client. The browser toolbar always occupies a row of space at the bottom of the screen. Red is a color that compares "noise," and the browser toolbar is blue-gray relative to "quiet." The huge difference between the two colors makes the glasses extremely uncomfortable.

Based on the above analysis, it is not suitable to follow the red color of the local client.

undefined

Webjx article introduction: HTML5 development actual combat of Netease microblogging.

2. What is the impact of Safari running inside the browser?

Netease Weibo Web App is run and displayed from safari browser, which is one of the environments of the product. The web page gives people the feeling of "light and concise," and the local client gives people the feeling of "heavy and stable."

Therefore, the visual style "lightweight" is a good choice.

3. Current visual style trends

The "small fresh" style led by Metro UI and Google+ has become a big visual style development trend. Delicate and complicated visual experience after a period of time, return to nature, began to popular simple and fresh visual style.

So, the visual designer went through several visual experiments, including red, cool black, fresh light gray. After many comparisons, everyone agreed that the fresh light gray. Fresh light gray is the main color, icon click after the state is Netease accustomed to use red, to a certain extent to maintain the consistency of visual style.

V. Front-end development: see moves and dismantle moves

Responsible: front-end engineers; participants: product managers, interaction designers, visual designers, back-office technicians

When we get to this part, we may be more concerned about what the specific code is like and what the implementation framework is like. I am very sorry that the company's product secrets are involved, and the specific implementation code cannot be displayed to everyone. Pardon me!

Here are two questions from netizens to answer briefly:

Question 1: Can you tell me about the front-end architecture, why didn't you adopt sencha?

A: sencha touch 1.x/2.x, jQuery mobile, etc. Because the customization and performance and resource consumption are not ideal, so Netease front-end developed its own framework, as you said, using seajs to handle script loading, iscroll simulation scrolling, it seems that the effect is still good, Netease front-end will continue to improve this framework.

Question 2: Can I take photos and upload pictures?

iPhone Safari doesn't give access to cameras and galleries, so this need isn't met yet. In other words, Android gives permission, and it will definitely satisfy this "just need" at that time.

VI. FOLLOW-UP

After that, the work is mainly interactive walkthrough, visual walkthrough, QA testing, summary feedback to fix problems after launch, and planning for the next iteration. Everyone understands the project process, so there is no need to say more.

lessons learned

I. Feelings on workflow

1. Take excellent experience design as the guide.

This project is a typical example of design-led, first give the designer sufficient time and space to play, technology will see the move. This working philosophy is the cornerstone of a good user experience for the entire product. HTML5 technology is powerful and has too many possibilities; design is the mold that shapes these technical possibilities.

2, product manager, interaction, vision, front-end timely and frequent communication

Throughout the project, product managers, interaction designers, visual designers, and front-end engineers met weekly. Later, it proved that this frequent communication greatly reduced the rework rate and improved the development efficiency.

3, small steps run fast, pay attention to iteration.

Netease Weibo products are more complex, coupled with the slow development progress of HTML5, limited manpower, it is impossible to complete all functional details online at the same time. Otherwise, it will take one month for later debugging, which will increase the heavy burden for the rapid development of the product. Therefore, the first phase only to do the most core functions become an inevitable choice.

II. Experience with user experience

The navigation system fits better at the top of the screen.

The browser toolbar has always existed, so the tab navigation bar no longer fits at the bottom of the screen, and the top fits better.

2. Convenience is more important, and the most commonly used functions are cleverly set.

Due to product performance and browser performance, the current Web App fluency and jump speed are still not comparable to Native App, and the jump cost is slightly larger. Therefore, it is necessary to bring the most commonly used functions closer to the user to reduce the waiting cost caused by jumping.

Visual drafts are trade-offs between beauty and simplicity, and most visual drafts need to be implemented using code.

Almost all vision is achieved through code, and visual design is best not to be too complicated. It also takes time for front-end engineers to digest visual drafts.

III. Understanding of technology realization

1, Safari browser permissions restrictions, Web App can not call camera tools, does not support the image upload function.

This was a headache and a helpless thing. The permissions given to Web apps by iOS are too low. In contrast, Android's Web App can call camera controls and also support microblogging image uploading (although there is no Android version yet).

2, cut scenes can not achieve the smooth effect of the local client.

The reasons are: good cutscenes eat away at product performance;HTML5 technology is not yet fully developed and mature; and there is still a lack of a powerful browser.

summary

In addition to the permissions of the iOS system, the excellent performance of the Web App is close to that of the Native App. HTML5 technology has given wap web pages new life and brought subversive changes to wap. In HTML5 projects, functional planning should be refined; information architecture needs to be as shallow and narrow as possible; interaction design needs to be concise and efficient; visual design also needs to consider the special operating environment of the browser; the front end not only needs to gradually digest interaction design and visual design, but also boldly try to see and break new tricks in new technologies and new problems. Frequent communication throughout the team is necessary, and development steps are best taken in small steps.

After reading the above content, do you know how to develop web apps with HTML5? If you still want to learn more skills or want to know more related content, welcome to pay attention to the industry information channel, thank you for reading!

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.