Ryan Boudreaux uses five examples of cutting-edge web designs to show why HTML5 is the way to go for web pros.
If you've been following this blog for the past several years now you already know how I feel about HTML5 and its associate CSS3, with both being the latest updates to website coding language, styles, and technology. As progress continues with the adoption of HTML5 within desktop browsers and tablets, the gamut of possibilities persist in their ability to deliver cutting-edge experiences and user interactions. If you have not been sold on the idea of making HTML5 a part of your web development standard, then maybe these inspiring examples will give you some pause and change your mind.
Novel patterns of user interaction experience accentuate the robust potential of what HTML5 has to offer, and the examples I am providing in this piece suggest more than inspiration. That's right folks; HTML5 is not your father's HTML.
Expect to spend at least a few minutes visiting both of the first two examples, as each provides a pleasurable experience from the pure aesthetic web designer perspective, in addition to the great stories they tell. You might find yourself spending more than a few minutes if you like a good narrative, as I did.
Example 1: New York Times "Snow Fall"
First up, we have a brilliant example utilizing several instances of the video element in addition to a creative use of the parallax scrolling effect. The HTML5 includes presentational and organizational elements such as article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, and summary. In addition, you'll find multimedia elements such as canvas and video. The "Snow Fall" online experience by The New York Times tells the story within six beautifully created pages which feature an interactive immersion into the events that led up to one of the most tragic and well-known avalanches in America, as well as its aftermath. The avalanche claimed three lives on the fateful day of February 19, 2012; the location is just a twenty minute hike outside the Stevens ski area's boundary known as the Tunnel Creek ski run near Stevens Pass in the Cascade Mountain Range of Washington, United States.
Example 2: Pitchfork magazine
Example 3: Form Follows Function websiteJongmin Kim has put up his Form Follows Function website which is a collection of unique designs and functionality using HTML5, and currently lists thirteen interactive experiences as of this writing with more coming soon. The current experiences include Bokeh utilizing the canvas element, Flip Clock which is shown in Figure C above, and Campbell's Soup 3D, which leverages a cylinder can of soup (Figure D) below; both of these experiences leverage the CSS transform effect.
Example 4: Numéro10
Next we have an example of a corporate business website for the advertising agency numéro10 from Switzerland, which was launched to introduce the agency's new product method known as SyncBig. The website uses parallax scrolling and HTML5 along with illustrations, graphic designs within a single web page, and is currently nominated for an AWWWARD.
Example 5: CoolApps
Another AWWWARD nominee is CoolApps (e), the website for the team dedicated to communication, marketing, graphic design, and software engineering, creating custom interfaces and handmade programming of websites and mobile applications. Utilizing HTML5 elements such as section and header, it also utilizes the normalize CSS3 styles for configuration and resets, responsive media queries, transform, transform-scale, transform-rotate, translate, translateX, animation-duration, animation-fill mode, webkit-transforms, and webkit-keyframes.
If you are not convinced by now that HTML5 has great potential for the future of web development, then there is no hope for you. But that is okay, because there is still time to make the jump; in fact you have a few more years left before responsive web design, which is what HTML5 is all about, becomes the mainstream go-to technology as tablets and mobile devices overtake desktop browsers in terms of page views and user interactions.