Interactive design of mobile web App

HTML5 provides many possibilities for improving the experience of mobile Web pages, the interactive effect is getting closer to the native app, so it becomes the Web app, which is expected to lead the app function to the browser, so that the competition of the mobile platform is shifted from the system platform to the browser.

Web app has its own advantages and disadvantages compared to the native app and WAP, so it is easy to understand its characteristics, master the design trend, and apply it later in the design.

Offline storage

Offline storage means that the first visit is to download the Web page, which can be used in the future without the network. An offline application is a URL list –html,css,javascript, picture, or other type of resource. When a cached list of server lists is detected at the time of Access, a download event is triggered and the specified file is stored locally according to the list download.

While downloading, the browser will periodically trigger a progress event that contains information such as how many files have been downloaded and how many files are still in the download queue. When all the resources listed in the cache list are successfully downloaded, the browser triggers the download completion event.

When you visit again, the browser checks the cache list of the Web site again, by comparing the list and local resources to see if the new resource needs to be loaded. The new version will not be used immediately after the load completes. The background can download new pages, and will not force users to interrupt the current operation process, refresh the page again.

If there is a terrible error at any point in this process, your browser will trigger an error event and terminate immediately. Similar to installing an application, there can be no error halfway.

Web apps can use the characteristics of storage to store important and repetitive data locally, avoid duplication of pages, reduce critical information being compromised during transmission, and incrementally transfer modified content.

While offline storage is not a unique problem for Web apps, browsing and reading apps also have offline usage requirements to deal with potential network problems at any time. Offline mode is the use of network leisure time to download content, when users open the app immediately start reading. Or if the network is poor, save the user's action record and load the relatively important text content, and then upload the updated data, such as the microblogging send queue mechanism.

Interactive operation

The operation of the mobile Web page only clicks, clicks the link and the control, the interaction way is very single, but the Web app's operation will be getting closer to the application.

1.Web app can not be built without the speed of network upgrade, loading more content, graphic elements more rich. At the same time more JS interaction, user-friendly operation and the formation of a flat information structure.

The icon replaces the text link, the interface is more beautiful, easy to identify. The click area is not limited to the visual area of the element to facilitate user clicks. At the same time typesetting is unrestricted, can achieve the original app's visual effect.

Increase the tab bar, the first page to render more content, reduce the level of interface, the relationship between the pages more clearly.

The interface can be partially updated and then rendered as needed, reducing the refresh of the interface and preserving the visual stability.

Bubble box can reduce the page jump, suitable for message reminders, such as micro-task processing. The information architecture is getting closer to the native app, and the design elements such as flattening hierarchy relationship and reducing interface jump will be more applied.

2. Identify more gesture operations, such as pull-refresh and right-slip file translation gestures. The operation does not need to be all present in the interface, and the platform operation guarantees consistent.

3. Call the system hardware, such as sensors such as gravity sensors, but there are few applications on the phone side, there is a certain distance from large-scale applications.

In short, the interaction can be based on the original app design, the effect will be more and more close, the main difference is:

1. The design should take into account the browser address bar and the space of the toolbar, and its operation on the app has a certain impact.

2. Temporarily not suitable to call the system's underlying interface, more suitable for the Web site suitable for mobile phone to do the branch version.

3. Due to the limitations of HTML, there are some differences in the details of the interaction.

4. No large-scale applications, but the Web App interface operation will be more fluent, interface jump when the smooth movement can be achieved, and later there are more dynamic effect to be applied.

5. The current information architecture is also mixed with native app and WAP two architectural approaches.

Resources:

The HTML5 of the Consortium

Mobile WEB Application Best Practices

HTML5 Offline storage

Making It a Mobile Web App

Css IPhone

Developing mobile Web applications and mobile Widgets

Getting Started with IOS Web Apps

Youtube Mobile Web App

[IBM developerworks]html5 Web App

Author: Xiao Sheng

Article source: Xiao Sheng Quotations