HTML5 new elements and attributes are adventure and opportunity for designers

Article introduction of Wulin.com (www.vevb.com): HTML5, which is rumored to be the killer of Flash, is a transformative network technology used for web application development.

HTML5, which is said to be the killer of Flash, is a transformative network technology used for web application development. HTML 5 provides some new elements and attributes, some of which are technically similar to <div> and <span> tags, but have some meanings, such as <nav> and <footer>. This tag will be conducive to search engine indexing, small screen devices and visually impaired people. At the same time, new features are provided for other browsing elements, through a standard interface such as <audio> and <video> tags.

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

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

HTML5 Audio and Video: New elements in HTML5, they provide developers with a common, integrated, scripted API for processing audio and video without installing any plug-ins.

Communication APIs: Two major foundations for building real-time and cross-origin communication: Cross Document Messaging and XMLHttpRequest Level 2.

The above technical descriptions are present in the WHATWG HTML documentation, but are not all included in the W3C HTML5 documentation; W3C has made separate explanations for some technologies, so this article will not be repeated one by one.

It sounds a bit too technical, so what impact will HTML5 have on design? This is something web designers and developers have to consider after they discuss programming code.

Taking the mobile Internet field as an example, in the face of numerous terminal devices and platforms, designers and developers have to make compromises in terms of product display and consistency in the experience, and wasted so much of our energy in the process of filling in the platform. Products could have reached a higher level, but the reality of fragmentation of mobile terminals (including hardware and software) blocks good wishes.

The current mainstream mobile phone development platforms include: iOS, Symbian, Linux, Palm, BlackBerry, Windows Mobile, Android, etc. Among them, the iOS platform needs to be designed for resolutions of 480*320, 960*640 and 1024*768 respectively; the QVGA resolution is 240*320, WQVGA resolution is 240*400, HVGA resolution is 320*480, WVGA resolution is 480*800, FWVGA resolution is 480*854, etc.; the Symbian system has a long history, and now it mainly focuses on the S60 V3 and V5 versions, and the resolution is still 176*208, 208*208, 240*320/320*240, 352*416/416*352 and 800*352 and many other types. Even with the same platform, different resolutions will have corresponding differences. In addition, client products need to be updated and iterated continuously, from version 1.0, version 2.0 to version N.0; every time a native app is developed, a platform needs to be laid out. And the reality is that not all users will actively update the new version, so designers and developers should also worry about whether the previous old version will be supported when developing new functions. Multiply different platforms by different versions, manpower and material resources are invested in the work of laying the platform, and the energy to improve product user experience is relatively limited.

So people have had enough of the torture of fragmented terminal devices and began to look forward to something different from native apps. The emergence of web apps developed by HTML5 technology has given designers and developers a bright vision. The rendering process of HTML5 technology is mainly carried out by browsers, applications embedded with HTML5 parser, applications that support bookmark opening, or mobile phone products. In this way, the launch and version update of the product no longer takes so long to lay the platform. The internal logic of Applerator will convert the product's UI to a native interface for platforms such as iOS or Android. At the same time, products in the form of web app do not require users to download and update, and can access the latest version through the network; it also facilitates designers and developers to debug and correct errors, and there is no longer a problem of taking into account the new and old versions at the same time.

HTML5 is so powerful that it does have the potential to improve the quality of Internet products and improve the real environment for developers. Therefore, designers and developers need to understand it as necessary. But this does not mean that designers have to put down their work and start learning programming technology. Instead, they should consider what obvious changes will HTML5 have to make to specific designs, and what design effects can HTML5 technology achieve?

Under the active advocacy of giant companies such as Apple, Google and Microsoft, HTML5 technology has made rapid progress and the effects that web apps can achieve are becoming more and more abundant. Many web apps can indeed be compared with native apps. The best browsers for HTML5 support are Safari and Chrome, Firefox and Opera are unsatisfactory, and the IE browser has the lowest support. As shown in the figure below:

Nowadays, we often see related introduction articles such as "19 Websites Developed with HTML5" and "25 Superb HTML5 Canvas Games" on the Internet. Designers can often use it to experience it. Due to space limitations, this article will only give a few typical website products that use HTML5 technology for examples.