Apps

The Case for HTML5: Five examples

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

Next up is the Pitchfork cover story "Glitter in the Dark", which features the obscure British singer/songwriter Bat for Lashes, otherwise known as Natasha Khan. The web page embraces plenty of HTML5, including parallax scrolling effects using data-scale, data-width, data-frames, data-factor, and data-vector, as well as an audio player. CSS3 includes ease-in, ease-out, transitions, opacity, alpha filters, and several interstitial interval and region classes. Also in use are some jQuery and JavaScript, and several calls to js and CSS files at Amazon Web Services. Other highlights include multiple images, a featured playlist of songs from the album, a full screen option, and an option for standard vs. dynamic page view. The cover story highlights Bat for Lashes' and her latest work/album "The Haunted Man".

Example 3: Form Follows Function website

From a pure development perspective the interactive designer and developer Jongmin 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.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments

Editor's Picks