HTML5 from the designer's perspective-

TML5 is the killer of Flash. It is a network technology that is used for web application development and has a revolutionary significance. HTML5 provides some new elements and attributes, some of which are technically similar and labels, but have some meanings, for example, and such tags will help search engine index sorting, small screen devices ...,. HTML5 is the killer of Flash. It is a revolutionary network technology used for web application development. HTML 5 provides some new elements and attributes, some of which are technically similar and label, but have some meanings, for example, tags like these will be used by search engines for indexing, small screen devices, and visually impaired users. It also provides new features for other browsing elements through a standard interface, such as and tag.

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

• Real-Time 2D drawing-Canvas API: APIs for dynamically generating and rendering graphics, charts, images, and animations.
• Regular media playback-HTML5 audio and video: new elements in HTML5 provide developers with a set of universal, integrated, and script-based APIs for processing 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: build two foundations for real-time and cross-origin Communication: Cross Document Messaging and XMLHttpRequest Level 2.
• Browsing History Management
• Header registration for MIME and protocol handlers
• Micro data

The above Technical Instructions are included in the whatwg html instructions, but not all of them are included in the W3C HTML5 instructions. W3C also provides separate instructions on some technologies, which will not be described here.

It sounds a little too technical, so what will HTML5 affect the design? This is a question that web designers and developers have to consider after discussing the programming code.

Advantages of HTML5 and web apps

Taking the mobile Internet field as an example, in the face of a large number of terminal devices and platforms, designers and developers have to make compromise measures in terms of product presentation and experience consistency, we wasted so much effort in the process of exhausting the platform. Products can already reach a higher level, but the reality of mobile terminal fragmentation (including hardware and software) will block the good wishes.

Currently, mainstream Mobile development platforms include iOS, Symbian, Linux, Palm, BlackBerry, Windows Mobile, and Android. The iOS platform must be designed for resolutions of 480*320, 960*640, and 1024*768 respectively. The QVGA resolution in Android is 240*320, And the WQVGA resolution is 240*400, the HVGA resolution is 320*480, the WVGA resolution is 480*800, and the FWVGA resolution is 480*854. The Symbian system has a long history and is mainly developed for S60 V3 and V5 versions, resolution is still 176*208, 208*208, 240*320/320*240, 352*416/416*352, and 800*352. Even on the same platform, different resolutions may vary accordingly. In addition, client products need to be updated and iterated constantly, from version 1.0 and Version 2.0 to version N.0. Each time a native app is developed, a platform needs to be deployed. In addition, the reality is that not all users will actively update the new version, so designers and developers should worry about the support of the old version when developing new features. Different platforms are multiplied by different versions, and human and material resources are invested in the laying of the platform. The effort to improve the user experience of the product is limited.

As a result, people began to look forward to the emergence of something different from the native app due to the fragmentation of terminal devices. The emergence of web apps developed by HTML5 technology gives designers and developers a vision to seek attention. The rendering process of HTML5 technology is mainly implemented by browsers, embedded HTML5 parser applications, applications that support bookmarked opening methods, or mobile phone products. In this way, the launch and version update of the product do not take that long to lay the platform. The internal logic of Appcelerator will convert the product UI to the Native Interface of iOS or Android platforms. In addition, users can access the latest version of products in the form of web apps without downloading and updating. This allows designers and developers to debug and correct errors, there is no longer a problem that both the new and old versions are taken into account.

Benefits of HTML5

HTML5 is so powerful that it has the potential to improve the quality of Internet products and the real environment of developers. Therefore, designers and developers need to understand it as necessary. However, this does not mean that the designer has to put down his work and start learning programming technology. Instead, he should consider what significant changes will be made to the specific design of HTML5, what design effects can HTML5 achieve?

Under the active advocacy of giants such as Apple, Google, and Microsoft, HTML5 technology is improving rapidly, and web apps are becoming more and more effective. Many web apps are indeed comparable to native apps. The best supported HTML5 browsers are Safari and Chrome, Firefox and Opera, and IE have the lowest support. As shown in:

Currently, we often see articles on the Internet, such as 19 websites developed using HTML5 and 25 awesome HTML5 Canvas games. Designers can often experience the game. Due to space limitations, this article provides only a few examples of typical website products that use HTML5 technology.

Mobile Terminal

1. Gmail

2. Youtube

3. Vesseltracker

4. GeoCongress

5.BusinessesForSale.com

6. TriOut Mobile

7. ING Direct

8. AOI

9. Naver

10. Baidu wireless Novels

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

10. Google Body Browser

By personally experiencing these HTML5 mobile apps or websites, designers will have a rough and perceptual knowledge of the effects and details supported by HTML5. The Design Perception capability obtained here is far more profound and easy to use than looking at several lines of code that make people dizzy.

Why can't HTML5 become mainstream recently?

After reading the effects of the above websites, does HTML5 sound cool? Since it is so excellent that it can solve the problem of terminal fragmentation and facilitate the implementation by developers, why don't we promote HTML5 quickly? What are we waiting? However, the cruel reality tells us that the HTML5 era has not yet come, and it is still unable to replace native apps into the mainstream in the near future. Based on my understanding, the author points out the reasons as follows:

HTML5 itself

W3C said that HTML5 standards will not be published before 2014. At present, major companies are actively developing their intent at the forefront of web app product R & D, but they are still in the exploration stage. HTML5 has no clear and clear unified standards, making it difficult to promote it in a wide range. It will take time for the technology to become mainstream.

Browser

Yes, web apps only need network access. However, the effects of the product must be rendered by HTML5 browsers. The components of the product must be built by the browser control library. Existing browsers have vulnerabilities in the control library, making web apps unable to be fully used and loading slow. HTML5 is widely used, and a powerful browser plays an unusual role. However, no one knows when this powerful browser will appear.

Network Signal

Native apps can still use some functions offline, providing better stability. In contrast, Web apps are more dependent on the network. This is similar to "Cloud", and its services cannot be used without network connection (although HTML5 supports offline storage ). Today's domestic wifi penetration rate is still very low, 3G network coverage needs to be improved, the cost is high, stability is not strong. Regardless of stability or traffic charges, users are not able to discard the native app.

Mobile Terminal

The market distribution of mobile terminals (mainly mobile phones) is also one of the influencing factors of HTML5. The market share of smartphones is still relatively small, and functional mobile phones still have an absolute advantage. In terms of web app support, smartphones are undoubtedly the best, followed by social phones, and functional mobile phones have the worst support. The market share distribution of mobile terminals has become the bottleneck of HTML5's recent promotion. :

How Should designers deal with HTML5?

After learning about the advantages, effects, and implementation progress of HTML5 technology, designers should consider what they need to do next. HTML5 is one of the inevitable trends in Internet R & D and has great potential to improve product quality. Designers can take the lead in the tide of the times only by following the development of this trend and actively participating in HTML5 experimental research and development. So what should we do or do? I have several simple suggestions to share with you:

Build a consistent Enterprise style and enhance recognition

Now all native apps need to be rigorously reviewed before they can be put on the "app Store". Even so, the number of applications has started to surge, so it is easy to find a satisfactory application. With the advent of the web app era, users can easily use an application through a browser. Without the "app Store" restriction, it is difficult to estimate the number of application products. At this time, we need to worry about whether our products will be drowned in it. To avoid such a tragedy, an effective way is to make the products of the same company have a consistent style and distinctive characteristics, so that users can pay more attention to it, enhance product identification.

Focus on adaptation of specific browsers

Designed for a specific user, it also needs to be designed for the specific browser used by the user. Only when we control the use environment can we control and ensure that the product performance from the user perspective is better. Perhaps the HTML5 era does not require frequent platform deployment, but designing specific effects for specific browsers is an important measure to further improve user experience.

Google Wave is a good example. Google Wave tries to combine blogs, mailboxes, instant messaging, and wikis to become a powerful network communication service. It is written in HTML5 and cannot be used in all browsers. Although Google has stopped its services because of its low level of attention, Google Wave, as an attempt, has already taken a long way to develop HTML5.

Break the mindset and focus on skills

This suggestion comes from the actual work and is also intended for actual work. In the design of Web apps, HTML5 technology is often less effective. Even if there are, RD in the team may not be all done. In fact, the user does not care what programming language is used for this effect, and the user is concerned about whether the interaction is smooth and whether there is taste in the visual sense. Therefore, designers need to focus on improving the quality of web apps in terms of details, such as the design of borders, such as the design of flip pages, such as the design of sub-product lists. You can even try some "pseudo app effects ". In this regard, m.naver.com is very good. Layout Design and functional button design all look like native apps. The list of sub-products are all made into high-quality icon styles; in fact, it is as simple as adding a link to an icon.

Pay attention to mobile Internet

HTML5 has the greatest demand and potential in the mobile Internet. Adapting to mobile terminals with severe fragmentation is not an ideal solution in the long run. However, at this stage, this reality cannot be eliminated. Now the best mobile lab platform we have is the iphone, and its adaptation ratio is high enough. If you want to test the API support of the Html5 new product, we recommend that you use the iPhone.

Summary

HTML5 technology is leading the development of the Internet towards web apps, which is one of the inevitable trends of Internet development. More and more Web apps are coming to users. When faced with HTML5 technology, designers need to understand the effects of the current technology, and constantly explore and summarize the design skills and strategies in their actual work. Keep up with the development of web apps and keep trying. It is both an adventure and a rare opportunity for designers!

This article is organized and published by the HTML5 Chinese website. For more information, see the source.