Article introduction of Wulin.com (www.vevb.com): NetEase Weibo, the actual development of HTML5.
HTML5 is increasingly favored by Internet development teams at home and abroad. Foreign, Google is enthusiastically developing the Chrome Web Store, Microsoft has released an Irish Spring theme website that supports the development of HTML5 technology, and Nokia has invested heavily in purchasing and building NOKIA MAP business. Domestic Internet giants are also interested in the new web development standards blown from across the ocean and have begun to test the HTML5 products.
NetEase Weibo’s iPhone platform Web App product was successfully launched in the first quarter of 2012. Now I will share the experiences and lessons learned from this project development with you, and I hope to grow together with you in the HTML5 development environment.
Staffing
1. Developer configuration
Product Manager: 1 person;
Interaction designer: 1;
Visual designer: 1;
Front-end engineer: 1;
Backstage engineers: 2;
Tester: 1 person.
2. Development time
Interaction designer: 22 working days;
Visual Designer: 14 working days;
Front-end engineer: 50 working days;
Backend Engineer: Because of using the original backend data, you only need to cooperate with the front-end engineer to call the data
Among them, interaction and front-end use the longest time in the entire development cycle.
NetEase Weibo Web App Development Process
1. Functional requirements planning: different from the web and local clients
Person in charge: Product manager; Participant: Interaction designer
NetEase Weibo Web App (all refer to mobile phones in this article) is different from Web products and is also different from local clients.
1. Compared with the web, NetEase Weibo Web App has strong advantages such as mobility and media-rich, and has disadvantages such as small information presentation space and deep information architecture. The usage situations of the two are different. Weibo Web is mostly used immersively under abundant time and superior network conditions; Weibo Web Apps are mostly used under trivial time and network conditions of uneven quality.
Therefore, NetEase Weibo Web App should avoid the large and complete functions, and need to extract and select the functions most commonly used by users in the mobile environment from the web, and add unique needs functions on the mobile side (such as the localized service function will be considered in the iteration stage).
2. Compared with local clients, NetEase Weibo Web App has the advantages of no installation, simple upgrade, low development cost, and adaptable layout. It also has the advantages of slow response speed, low permissions for retrieving mobile phone native controls, and slightly weak stability.
Based on the advantages and disadvantages of the two, NetEase Weibo Web App needs to catch up with the high-quality experience of local clients and try to ensure 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 environments.
NetEase Weibo Web App function planning, as shown below:
2. Information architecture design: as shallow and narrow as possible
Person in charge: Interaction designer; Participant: Product Manager
People who have made mobile Internet products must know why the information architecture needs to be as shallow and narrow as possible. The biggest reason is the small and expensive display space of the mobile phone. The information architecture of the local client of the mobile phone needs to be shallow and narrow, and Web Apps need this even more, because there is always a bottom toolbar of the browser in the browser's page, causing a small piece of the already cramped display space to be eaten away. As shown in the figure below:
The browser toolbar at the bottom of the mobile phone screen is very useless for Web App products: Web App itself is a closed-loop application and does not require the browser toolbar. Even if it does not affect the large information architecture, it will erode the precious display space and have an important impact on the design of the navigation system (this part was briefly analyzed in the previous article "Discussion on Navigation Design of iPhone Web App".).