In the last few years there has been a paradigm shift with more and more users adopting mobile devices to access the Internet so that businesses have had to change the way they provide service and content online. Mobile traffic has already overtaken desktop traffics and the trend seems to be increasing with time. With Google rolling out mobile friendly algorithm update,boosting ranks of websites optimized for mobile devices in its search results, designing mobile friendly websites is no longer a choice but a necessity to keep traffic flowing and remain in business. To face this challenge web site designers now employ a number of techniques to make accessing web sites using mobile devices easier. HTML5 came around the same time as the exponential growth in mobile devices being used to access the Internet and as such included many features that were compatible with low-powered devices such as mobile phones and tablets. For mobile web sites designers may chose different design approaches such as responsive ( the web pages dynamically alter to fit the screen size of the device), dynamic (different sets of HTML and CSS are served from same URL depending on the device requesting) or separate (site that is specially designed for mobile devices) but HTML5 can be used to deliver best user experience.

Here are some of the advantages of HTML5 when designing mobile-friendly websites.

Rich, Interactive User Interface
Mobile apps are popular because they offer functionality that is more suited to the mobile interface as opposed to traditional websites. With HTML5 along with CSS and JavaScript it is much easier to design websites which offer app-like interface including user-friendly website navigation and interactive content delivery such as text and image re-sizing to fit the screen. The new set of API included in HTML5 specification such as those for canvas element for immediate 2D drawing, cross-document messaging, and drag and drop feature add advanced functionalities to websites. HTML5 websites can also also efficiently handle touch screen functionalities such as swiping and pinch-to-zoom.

Local Storage
HTML5 allows storage of data in browser memory which is a major improvement from previous versions of HTML standard that allowed data to be stored in cookies only. As a result the number of interactions between the client and server is reduced leading to faster browsing and even offline browsing experience apart from reducing load on server.

Location Awareness
Though not strictly a part of HTML5 Geolocation API was introduced by W3C around the same time to provide location-awareness feature to websites and apps. Currently, location has become immensely important part of website development whether it is local businesses, online retail websites, service providers looking for clients or even blogs and news sites, location of the user is considered extremely necessary to deliver customized and relevant content. Geolocation API uses several approaches to such as in-built GPS devices, accelerometers, cellphone tower triangulation and ISP records to determine location.

Advanced Forms
Generating web forms as well as users filling up forms from mobile devices it has mostly been tedious tasks until now but with advanced form features of HTML5 complex scripting and styling is no longer necessary. Semantically closer markup of HTML5 form elements and attributes also provide better user experience across different platforms. For instance, the < input > element has new types such as search, tel (for telephone numbers), email, url automatically strip line feed and whitespaces and pattern attribute can be used to further restrict input values entered. This reduces the scripting required for form validation as well as work on devices which have scripting support turned off. From user perspective too HTML5 forms provide much better experience. For instance, when filling up the field for email address the on-screen keyboard automatically transforms to include keys “@” and “.com” to make completion friendlier and faster. Similarly, when focused on date field, a calendar is popped open to chose a date from. On mobile devices with smaller screens and on-screen keyboards, such simple features can be greatly advantageous for tasks like filling forms which also is one of the most important ways of getting feedback and collecting information from visitors.

Multimedia Support
Support for streaming video and audio content has always been an irritant on mobile devices since most video and audio content providing sites required plugins or add-on software to work with popular video sharing sites such as Youtube which used Adobe Flash Player as its default player. HTML5 multimedia support capability as an alternative to Flash was first famously stated and popularized in 2010 by the then Apple Inc CEO Steve Jobs in his open letter “Thoughts on Flash” which snow-balled into a controversy. Apple products iPhone,iPod and iPad did not support Flash and relied on HTML for rich media content but since then HTML5 has been used for video and audio content increasingly different platforms. In January 2015, Youtube dropped Flash and adopted HTML5 as its default web player to provide better support to mobile and other devices such as Xbox , PS4 and Smart TVs. Youtube has also deprecated Flash < object > embedding and introduced < iframe > API to allow website owners to embed video on their site using native HTML5 tag or Flash but mostly for the former so as to serve HTML5 player to mobile devices that do not support Flash.

Error Handling
With HTML5, for the first time HTML specifications include rules for lexing and parsing of HTML code in such a manner that even in case of incorrect syntax, the result remains the same. HTML5 specification makes it flexible to handle “tag soup” or malformed code without requiring additional measures. HTML5 is thus backwards (old code including badly formed code remain compatible) as well as forward compatible (new HTML5 constructs can be ignored by older browsers) which makes it more suited for website development for desktop as well as mobile.

Recently i have written Mobile web performance optimization in HTML5, it’s very helpful for HTML5 developers. and now these days more and more websites today are adopting HTML5 for providing mobile-friendly interface without requiring app download, faster access because of local storage, better video and audio content support, geolocation, touch support and various other mobile specific functionalities.