Taking advantage of HTML5 features

HTML5 is often misunderstood. It tends to be thought of as an entirely new—and perhaps overwhelming—markup language for the web. Really, though, HTML5 consists of discrete features aimed at helping developers code faster, deliver content from servers to browsers in fewer bytes, and provide a better cross-device experience. Think of HTML5 as a bundle of tools to help improve existing sites. In this article, I focus not specifically on HTML5, but on a number of trends that harness HTML5 to deliver better user experiences.

Mobile first
Designing sites for mobile devices, until recently, was typically an afterthought. Web developers and their clients would put most of their efforts—from design to execution to testing—into the desktop experience. Only after the desktop site was completed would they turn their focus to the mobile experience.
Priorities are changing. Consumer adoption of mobile devices is continuing to increase. Depending on the industry category, roughly 30% of web traffic comes from users on mobile devices. HTML5 provides a number of ways to help developers achieve world-class mobile experiences. Key improvements include better handling of video, image resolution, web forms, responsive layout, and touch sensitivity.

Catering to the masses
Designers and developers need to keep in mind that not everyone has a fancy Retina display and a zippy LTE connection. Generally speaking, optimizing sites for as many platforms as possible will decrease bounce rates and increase conversion rates. The next few sections outline how this can be done.

Image optimization
Images are used on the vast majority of websites. They are inherent to the web experience. They do, though, often account for most of the downloaded bytes. This presents a challenge, especially when catering to users with slow connections. With responsive web design, not only can layouts change based on device characteristics, but images as well. HTML5 and CSS3 offer some techniques on how to serve images. To learn more, visit Google Developers’ resource for images at http://goo.gl/rKK08t.

Design for performance
In addition to image optimization, there are a number of ways developers can optimize their code for faster site loads. Code compression is one of the best places to start. Code is generally written in a way that’s easy for developers to interpret and modify; special characters like tabs, and descriptive comments are used to make code readable. Although they’re helpful during the development stage, they can bloat the amount of data that needs to be pulled down from the server to a user’s machine. Server-side compression techniques can help strip out the non-required bits automatically, since browsers don’t need them, and deliver a zippy and delightful experience.

A useful tool to help you measure your site’s performance is Google’s PageSpeed Insights (http://goo.gl/jexvDJ). It measures against a number of speed and user experience rules, gives you separate ratings for both mobile and desktop, and gives solutions for fixing the problems it reports.

Failing gracefully
Supporting older browsers can be a developer’s nightmare. Unfortunately, it’s just a reality of the industry. Developers need to be cognizant of who their users are and design accordingly. If designing with the latest and greatest techniques, make sure to use fallbacks like replica scripts and custom stylesheets so users on legacy platforms can still do what they need to do on your site.

Templates for the pros
Rarely anymore do websites start from scratch. Predefined JavaScript libraries, stylesheets, page layouts, and file structures are used to form the basis of a new site. Increasingly, front-end developers are opting to start with complete template packages comprised of everything needed to get started.
HTML5 Boilerplate (http://html5boilerplate.com) is a perfect example of one. It’s an open source template package that uses smart HMTL5 features. It’s aimed at helping developers build fast, robust, and adaptable sites, and is backed by hundreds of active developers and has extensive support communities.

Storytelling with scroll
Another trend that uses HTML5 is telling a story through scroll. Why does it work? There’s only one action required: scroll down (or swipe up) and see rich content come to life on screen. It’s easy for users to interact with, and can therefore make sites more engaging.
An award-winning example is a site used to market GMC trucks. It guides users through every detail of their latest Sierra model using rich media to help tell the story. Here’s the link: http://www.gmc.com/incrediblethinking/.

Learn more…

For an excellent overview of HTML5 and what it means to the future of the web, read Mark Pilgrim’s article “Dive Into HTML5” at http://diveintohtml5.info. Are you interested in more web trends and analysis? Google’s Think Insights project is one of the best hubs out there. Check it out at http://www.google.ca/think/.