1. Technology

Snow Fall: The Avalanche at Tunnel Creek

By

HTML5 Design Gallery—2013
Snow Fall: The Avalanche at Tunnel Creek

Snow Fall: The Avalanche at Tunnel Creek

Image submitted for the HTML5 Design Gallery courtesy New York Times

http://www.nytimes.com/projects/2012/snow-fall/

There are many websites out there. Some tell stories, others encourage you to make a purchase, still others teach you new things. But very few immerse you deep in the site and make you unwilling to leave even for a few seconds. Snow Fall is just such a site.

I won't even try to describe the site in words, you must experience it for yourself to really understand how great this site really is. But I will describe some of the things that I think really make this site an excellent example of what a modern website should strive for:

  • The writing is amazing. It is clear that this story is a written story, and the words are crafted and edited with obvious care. Even browsers that can't handle any of the interactivity will benefit from reading the wonderful words of this story.
  • The typography. Because this is at it's heart a written story, the words are important both in meaning and in look. Notice the drop cap at the beginning, the use of curly quotes, not straight, the change in leading between paragraphs (and the easy-to-read leading between lines). Care was taken with how the words displayed as well as what they said.
  • The inline features. There are things like videos that you trigger as you read, animated backgrounds that give you more information, and even photo galleries to give you more information about the people you are reading about.
  • Even the advertising, which most people find annoying at best, is integrated well into the site. You know it's there, but it doesn't take away from the content of the site.

Everything about this site is built to exacting standards. The designers and developers wanted to create an experience that could be enjoyed by anyone visiting the site—whether they were viewing it in the most modern version of Chrome, on an iPad or smartphone, or even on an old version of Internet Explorer on Windows XP. But before you start protesting that IE8 can't even do some of the fancy transitions and changes that the site displays in Chrome or Safari, you should be aware that their goal was to make it as good as those browsers could handle, not to force them to look identical to more modern browsers. The point wasn't to create a site that looked and actied identically where ever it was viewed, but to take advantage of what it could where it was displayed. This is often called progressive enhancement—where you create the site to work as well as possible in less capable browsers and then add on enhancements to the more modern and capable browsers.

This is a Site that Strived for and Achieved Excellence

If you saw my blog post from a few days ago, you know that there is also a behind-the-scenes website that explains how the team created the site. If you are interested in creating a site like this one, you would do well to read that article.

But what I noted in that blog post was that this is one of the best websites I've ever seen. However, as they noted in the companion article, excellence takes time, effort and money. Snow Fall wasn't thrown together over a weekend. They had a large team, lots of planning, and tons of testing and editing. Even after it went live, they were still fixing things. I was inspired by their dedication as well as the end results.

In the end, Snow Fall is a site I would strive to emulate. Excellence is always a good goal.

Have you built an HTML5 site? Or do you know of one that does a great job with HTML5? Submit HTML5 site designs to be featured on this site.

  1. About.com
  2. Technology
  3. Web Design / HTML
  4. Web Design
  5. Inspiration
  6. Design Gallery - Snow Fall: The Avalanche at Tunnel Creek

©2014 About.com. All rights reserved.