When the designer encounters HTML5

HTML5, a killer of Flash, is a network technology that is used for Web application development and has a transformative significance. HTML5 provides some new elements and attributes, some of which are technically similar to < div> and < span> tags, but have certain implications, such as < nav> and < footer>. The tags will help search engine indexing, small-screen devices and visually impaired people to use. It also provides new features for other browsing elements, through a standard interface, such as < audio> and < video> tags.

In addition to the original DOM interface, HTML5 adds a more diverse API:

Real-time two-dimensional drawing

Canvas API: API for dynamic output and rendering graphics, charts, images, and animations.

Timed media playback

HTML5 Audio and Video: A new element in HTML5 that provides developers with a common, integrated, scripted API to process audio and video without installing any plug-ins.

Offline storage database (Offline Network application)

Edit

Drag and drop

Cross-document communication

Communication/Network

Communication APIs: Two foundations for building real-time and cross-source (Cross-origin) Communications: Cross-Document communications (cross documents messaging) and XMLHttpRequest level 2.

Browsing History Management

Table header registrations when MIME and protocol handlers are in process

Micro-Data

The above technical instructions exist in the WHATWG HTML documentation, but are not included in the documentation for the HTML5 of the consortium; The consortium also made separate explanations for some of the techniques, which are no longer one by one.

It sounds a little bit too technical, so what impact will HTML5 have on the design? This is a problem that web designers and developers have to consider after they have been talking about programming code.

The advantages of HTML5 and web apps

In the case of mobile Internet, designers and developers have to compromise on the consistency of product presentation and experience in the face of numerous terminals and platforms, and waste so much of our energy in the process of filling the platform. The product could have reached a higher level, but the reality of mobile terminal fragmentation (including hardware and software) would have been a good hope.

The current mainstream mobile phone development platform is: IOS, Symbian, Linux, Palm, BlackBerry, Windows Mobile, Android and so on. Among them, the iOS platform needs to be designed for 480*320, 960*640 and 1024*768 resolution respectively; The QVGA resolution of the Android platform is 240*320,WQVGA resolution for the 240*400,HVGA resolution 320*480,WVGA resolution for 480*800,FWVGA and so on; Symbian System is a long history, now developed mainly for the S60 V3 and V5 two versions, resolution still has 176*208, 208*208, 240*320/320*240, 352*416/416*352 and many other kinds of 800*352. Even the same platform, the resolution of different design will have a corresponding difference. In addition, the client products need to constantly update the iteration, from 1.0 version, 2.0 version to the n.0 version; every time you develop a native app, you need to lay out a platform. And the reality is not all users will be actively updating the new version, so designers and developers in the development of new features will have to worry about the previous version will not support and so on. Different platforms multiplied by different versions, the manpower and material resources were put into the work of laying the platform, the energy that enhances product user experience is more limited.

So people are fed up with the fragmentation of terminal equipment and begin to look forward to something different from the native app. The advent of Web apps, developed by HTML5 Technology, gives designers and developers a good vision. The rendering process for HTML5 technology is primarily done by browsers, embedded HTML5 parser applications, apps that support bookmarks, or mobile phone products. In this way, the product's online and version update no longer takes a long time to pave the platform, and Appcelerator's internal logic converts the UI of the product to the native interface of platforms such as iOS or Android. At the same time, web App-style products do not require users to download updates, access to the latest version over the network, and designers and developers to debug and correct errors, there is no longer a balance between the old and the new version of the problem.

The effect that HTML5 can achieve

HTML5 is so powerful that it does have the potential to improve the quality of Internet products and improve the real environment of developers. So designers and developers need to know about it. But this does not mean that the designer is going to put down their own work began to learn programming technology, but should consider HTML5 to specific design will have obvious changes, HTML5 technology can achieve what kind of design effect?

In the company of Apple, Google and Microsoft and other giant companies, under the active advocacy, HTML5 technology progress rapidly, web app can achieve increasingly rich effect. Many web apps are actually comparable to the native app. The best browsers for HTML5 support are Safari and Chrome,firefox and opera are passable, ie browsers support the lowest degree. As shown in the following illustration:

Now on the network often met with similar "use HTML5 development of 19 websites", "25 great HTML5 Canvas game" and other related articles, designers can often play experience some. This article is limited by the space limit, here only a few application HTML5 technology more typical Web site products for example description.

Mobile Terminals

1.Gmail

2.Youtube

3.Vesseltracker

4.GeoCongress

5.businessesforsale.com

6.TriOut Mobile

7.ING Direct

8.AOI

9.Naver

10. Baidu Wireless novel

PC End

1. Flickr Browser

2. X-worlds

3. Csswarp

4. CSS3.0 Maker

5.Tiny Fluid Grid

6. HootSuite

7. Aviary ' s Image Editor

8. Twimbow

9. Scribd

Google Body Browser

By experiencing these HTML5 mobile apps or websites personally, designers will have a general, perceptual understanding of the details of the effects that HTML5 can support. This acquisition of design perception is far more profound and easy to use than to see a few lines of code that makes people dizzy.

Why HTML5 not become mainstream in the near future

Look at the results of the above site, is not feeling HTML5 cool? Since it is so excellent, can solve the problem of terminal fragmentation, but also for developers to achieve, so why do we not hurriedly HTML5 spread? What are we waiting for? But the brutal reality tells us, HTML5 era has not really come, in the near future still cannot replace native app to become mainstream. The author according to own understanding, the reason boils down to the following points:

HTML5 itself

The consortium said it would not release the HTML5 standards until 2014. Now the major companies actively develop the intention to walk in the Web App product development in the forefront, but still in the exploratory stage. HTML5 has not yet clear and clear unified standards, it is difficult to promote a wide range. Waiting for the technology to become mainstream is still a long time off.

Browser

Yes, Web apps do require only network access. But the effect of the product needs to support the HTML5 technology browser to render, the product's component needs the browser's control library to build the completion. Existing browsers have vulnerabilities in the control library, making the Web app less effective and slower to load. HTML5, a powerful browser is a very unusual role. And when this powerful browser can appear, no one knows.

Network signal

Native app can still use some functions offline, and the stability is better. In contrast, web apps are more reliant on networks. This is similar to the cloud, which cannot be used without a network (although HTML5 supports offline storage). The current domestic WiFi penetration rate is still very low, 3G network coverage has yet to be improved and the cost is high, stability is not strong. Whether from the stability or the flow rate of consideration, users do not have the ability to abandon the native app.

Mobile Terminals

The market distribution of mobile terminals (mainly mobile phones) is also one of the influential factors of HTML5. The market share of the smartphone is still relatively small, the function handset still occupies the absolute superiority position. The smartphone is arguably the best in terms of support for Web apps, followed by social handsets, which have the weakest support of functional handsets. The distribution of market share of mobile terminals has become the bottleneck of HTML5 's recent promotion. As shown in the figure:

How should designers deal with HTML5?

After understanding the advantages, effects, and progress of HTML5 technology, designers should consider what they need to do next. HTML5 is one of the inevitable trends of internet research and development, and has great potential to improve product quality. Designers can only adapt to the development of this trend, and actively participate in the HTML5 of experimental research and development, in order to hold the opportunity in the tide of the times. So, what should we do or do? I have a few superficial suggestions to share with you:

To form a consistent style of enterprise, enhance the recognition of

Today's native apps need to undergo a rigorous review to get to the App store, and even so, applications have started to surge and finding a satisfying application is easy. If the era of Web apps comes, users can easily use an application through the browser, without the "app Store" limit, the number of application products will be difficult to estimate. This time we need to worry about whether our products will be submerged in them. In order to avoid such a tragedy, an effective way is to make the same company's products have a consistent style, and distinctive features, so that more effectively grasp the user's attention, enhance product recognition.

Start to focus on specific browser adaptation

Designed for a specific user, it needs to be designed for a specific browser that the user is using. Only when we control the use of the environment, we can control to ensure that the user's angle of the product effect is better. Perhaps the era of HTML5 does not need to be more frequent platform, but for specific browsers to design specific effects is an important step to further improve the user experience.

Google Wave is a good example. Google Wave is trying to combine blogs, mailboxes, instant messaging and wikis into a powerful network exchange service. It is written by HTML5 and is not supported for use on all browsers. Google Wave, as an attempt, has gone a long way in the development of HTML5, though it has stopped service because of its low level of concern.

Break the mindset, pay attention to the use of skills

This proposal is based on actual work and on situations that will be encountered in actual work. Web app design work, the need to apply the HTML5 technology effect is often not so much, even if the team's Rd is not all done. In fact, users do not care about this effect is the use of what programming language to complete, users are concerned about whether the interaction is smooth, the visual sense of taste. So designers need to focus on improving the quality of the Web app, such as the design of the page, such as the design of the sub product list, and so on. Even try to do some "pseudo app effect". This aspect m.naver.com to do very good, the layout design, the function button design all resembles native the app, the child product list all makes the high quality icon style, actually is just an icon to add a link so simple.

Attach importance to mobile internet

HTML5 has the most robust and potential in the mobile internet. Adaptive fragmentation of the mobile terminal is not the ideal way in the long run, but it can not get rid of this reality at this stage. The best mobile experimental platform We have now is the iphone, which is already high enough to fit. If you are doing the API support test for HTML5 new products, it is recommended that you use the iphone.

Summarize

HTML5 technology is leading the internet toward the direction of web app, which is one of the inevitable trends of internet development. Web apps will go more and more to the user. In the face of HTML5 technology, designers need to understand the current technology can be achieved, but also need to continue to explore and summarize the design skills and strategies in the actual work. Follow the development of web app, keep trying, for the designer is not only an adventure, but also a rare opportunity!