“What is a website?”

Imagine that a space alien lands and asks the average Earthling this question. How would the Earthling respond? Perhaps the nutshell answer would be something like this:

“A website is a place online where Earthlings go to get information, be entertained, shop, find phone numbers, get recipes, read the news and so on.”

“What does a website look like?” the space alien might ask.

“Well,” says the Earthling, “a website looks a little like a page out of a book. There’s usually text and pictures, but instead of turning the page, you use scrollbars that scroll down in order to read more, or sometimes you can use buttons that say ‘next.’ Some websites also have videos on them. You press a button and the video plays.”

If the Earthling answered the space alien’s questions in this manner in 2012 or 2013, the Earthling would be giving essentially accurate information. However, the advent of HTML5 means that everything we’re used to seeing and doing online might soon change. Even our basic paradigm of how a website should look and what we do on a website will soon seem as naively innocent of the power of technology as a website from 1995 seems to us today.

Some websites are likely look roughly the same in 2014, ’15, ’20 and ’25 as they do today. News sites, for example, will probably still contain text articles that people scroll through to read. However, as web designers and developers begin to explore the power of HTML5, how we view, read, play with and interact with many websites will change completely. Smash the old paradigm of what a website is and does; HTML5 is about to redefine it all.

Animation, Video and Other Capabilities of HTML5

There are good reasons to say that Steve Jobs changed personal computing as we know it. Besides the most obvious changes he unleashed through Apple championing the first smartphone and the first viable tablet, he also dramatically changed the Web by refusing to let iPhones and iPads have Flash plugins. At first, his decision might have seemed to be madness; by the time the iPhone came out, Flash was nearly ubiquitous. Everyone was using it. Jobs, though, might have told Apple execs who argued with him over Flash something like, “If all your friends were jumping off a bridge, does that mean you would you do it, too?”

Jobs had a lot of choice words for Flash. He called it buggy, the culprit of most Mac crashes, filled with security holes and just plain lazy programming. However, at the time that he went on his Flash rants, 75 percent of online video still relied upon Flash. Abandoning it seemed crazy. It seemed like suicide. Abandon it he did, however. Although he wasn’t the only proponent of developing HTML5 as a replacement for Flash, he was probably the most important and loudest voice in the discussion. In 2011, most major browsers updated to support HTML5; in 2012, Adobe announced it would abandon development of a Flash plugin for mobile.

HTML5 integrates JavaScript, HTML and CSS for much smoother, faster animation and video. Instead of requiring a plugin, videos and animations can be embedded naturally within the website. That means that with HTML5, embedding video is becoming as easy as embedding a photograph.

Furthermore, HTML5 doesn’t rely upon cookies in the same way that most websites currently do. The “LocalStorage” and “SessionStorage” programming objects that store data strings are both faster and more secure than cookies. “SessionStorage,” in particular, only lasts as long as the user session lasts; opening a new tab or a new window starts a new session. Additionally, and without getting too technical, HTML5 also makes working with databases.

When it comes to data storage, though, one of the features of HTML5 that developers are most excited about is the way it interacts with APIs. With HTML5, an entire application can be cached offline.

Is Flash Completely Dead?

Although Steve Jobs is probably smiling down upon us all thanks to the progress HTML5 has made, it wouldn’t be accurate to say that Flash is dead quite yet. Even after Germany was finally defeated on the beaches of Normandy and it became clear that it was just a matter of time before the Third Reich fell, nevertheless the war still dragged on for more than a year.

In the same way, Flash has seen its Normandy invasion. Nevertheless, it hangs on. Remember, Flash nearly completely dominated Web video and animation for many years; it will take a while for HTML5 to make enough gains to say that Flash is dead forever. In fact, even though Adobe has been shifting its emphasis to the development of HTML5 tools, at the same time, the company has also been rolling out next-generation Flash tools to try to hang on to at least some of the market.

New HTML5 sites, though, seem to prove Steve Jobs right. If the 10 websites below are any indication, most developers will soon be jumping ship from Flash and moving over to the incredible and plugin-free capabilites of HTML5.

1. Form Follows Function

URL: http://fff.cmiscm.com/#!/main

Jongmin Kim is a Korean-born designer who lives in New York City and is the senior designer and developer for Firstborn Multimedia. His company works for A-list companies like Sony, Cadillac and Pepsi. However, Kim might be better-known for his personal work than for his commercial work; his Form Follows Function site is a collection of entrancing and engrossing “interactive experiences” that highlight just how far HTML5 can go. The award-winning site includes a spinning navigation wheel on the homepage, with each interactive experience represented by a card. By clicking on a card, an interactive experience opens up. Each one is as much a piece of art as it is a chance to push HTML5 to its limits.

Some of Kim’s artistic interactive pieces are inspired by well-known artists. “Raining Men,” for example, is essentially an interactive version of Rene Magritte’s famous painting of the same name. “Hue Blending” takes a cue from Andy Warhol’s grids of soup cans, and “Color Pixelated” uses Van Gogh’s “Starry Night” as its basis.

Each piece allows the user to interact with Kim’s work. In “Raining Men,” the user can change the direction of the silhouettes of the men as they rain down from the top of the screen; “Wiper Typography” permits the user to control the direction and speed of an imagined windshield wiper blade as it pushes letters on and off of the screen.

2. Parallax.js

URL: http://wagerfield.github.io/parallax/

Parallax scrolling, for the uninitiated, is an animation technique that’s been used since the 1940s to enhance the sensation of depth within a two-dimensional environment. In essence, the background images scroll through the screen at a rate slower than the foreground images. Since the days of Atari, video game designers have been using parallax scrolling to make video games more immersive.

Parallax engines have been used by website designers to create intriguing, often one-page websites that take a storytelling approach in their navigation to keep the visitor scrolling down almost indefinitely on a single page. Much like the original animation technique of parallax scrolling, the background images often move at a different rate than the foreground images on these sites or are covered up by a foreground layer as the user scrolls down. On other parallax websites, the long scroll down the page smoothly moves the user from one interactive experience on the site to another.

Parallax.js is a JavaScript API that enables web developers to create these parallax effects. Unlike many parallax engines around today, however, Parallax.js, which was designed by Matt Wagerfield and Claudio Guglieri, creates parallax scrolling sites that automatically respond to mobile device orientation and screen size. Furthermore, Wagerfield and Guglieri have made their parallax engine open source, allowing any designer to download and utilize the engine.

The demo site for the Parallax.js engine is the URL listed above. It relies upon HTML5 and CSS3 along with JavaScript for its artistic, beautiful animations and effects.

3. Idis

URL: http://ididthis.idispharma.com

Not everyone in the world has easy access to the medicines that they need. Some medicines are so specialized or unusual that they have to be flown in from other parts of the globe to treat patients. By the time the permits and paperwork are completed for the government agencies that monitor such medicines, it’s often too late for the patients. In places like the United States, this isn’t typically a problem. In places like China, India, Pakistan and other developing nations, however, it’s a big problem. Furthermore, even within the United States and other developed nations, the hard-to-get nature of rare medicines can create critical drug shortages. In 2011 alone, 251 drugs were in short supply around the U.S.

Stepping into this pharmaceutical vacuum has been Idis, a British-based pharmaceutical access company. Idis is not a drugmaker itself; Idis works as a bridge between doctors, hospitals, their patients, governments and pharmaceutical companies. Through relying upon Idis, some doctors, patients and hospitals have been able to fill their pharmaceutical needs in mere days, compared to the weeks or even months it might have taken to gain access to those drugs without the company’s help.

Today, Idis has a new HTML5-based website that tells the very human stories behind the facts and figures of drug shortages. The “I Did This with Idis” site is not the company’s main website; rather, it provides the “human side” of the Idis company story. Indeed, the website’s tagline is “Human stories of hope and survival across the globe.”

Visitors to the website are immediately greeted with an accordion-style line of images; clicking on any image expands the photo across the screen. On the expanded photograph appears a map and a person’s name, such as “Sarah’s Story.” Clicking again takes the visitor to more information about that particular individual’s medical story. In the case of Sarah, a video takes up most of the above-the-fold space at the top, showing Sarah, interviews with people in her life and the happy ending in which Idis saves the day. Below the video is a simpler text-and-photo based version of the story.

Other than the accordion-style frontpage of photographs, the small Idis logo in the upper left-hand portion of the screen, another button at the top that says simply “Info” and two social media links, the “I Did This with Idis” website has no other navigation. There are no footers, menus, company contact information or the like. Instead, the visitors are intuitively led towards the “Info” button if they want to find out more. A short, above-the-fold only page appears with basic company information, a link to its brochure and an email address. The site, therefore, is a perfect example of how less can often be more when it comes to website design.

4. HotelStyle

URL: http://www.hotelstyle.biz/

If Mel Gibson’s character Mad Max had, at some point after the apocalypse, decided to go into business as a fashion designer, his clothing collections and his male models might look something like those at HotelStyle. It might not look like high fashion to the rest of us, but fashion trends have started in Italy for generations, which is where HotelStyle is located. The company, which has stores in Verona, Bologna, Andria, Bisceglie and other cities throughout Italy, offers the type of fashion items one might expect to find on a modern-day Jack Kerouac or Allen Ginsberg. Tight blue jeans, unusual combinations of sport jackets and t-shirts, denim and biker-style leather are the types of men’s clothing offered by HotelStyle.

Like its fashion items, HotelStyle’s website is simple and almost rebellious. As with many sites these days, and not unlike the Idis site outlined above, HotelStyle has opted to err on the side of giving visitors too little information rather than too much. There are no press releases on this site, no blog, no endearing “about us” page. The site is sparse, filled mostly with pictures, videos and long, vertically scrolling pages that tell HotelStyle’s tale along with one, Duck Dynasty-style bearded male model wearing different outfits. None of the traditional SEO tactics are found on the HotelStyle website. Instead of using the website for that, HotelStyle uses its Facebook account to keep a running dialogue with its customers.

From a design point of view, the HotelStyle website is light and fast-loading thanks to its minimalism. However, its hard to imagine a similar site designed with Flash having such a quick load-time. Again, HTML5 shows off on the HotelStyle site; whether viewers dress like Mad Max or not, the clean, quirky site will be a welcome relief from traditional fashion websites.

5. Kennedy + Castro

URL: http://www.kennedyandcastro.com/en/

It should never come as a surprise when design firms and ad agencies make the most of the latest technologies and design trends. As such, it is no surprise that Kennedy + Castro, an ad agency founded in London with offices in that city, Rome and New York, has a spectacular, unusual, light-hearted but awe-inspiring website.

Upon arriving at the site, the company’s buzzword-worthy tagline, “The missing link between brands and people,” appears, followed by a poetic-but-vague one-sentence description of what the company does. As the user scrolls down, a cartoonish skeleton of a pig begins to draw itself on the screen. (Get the symbolism? “Kennedy + Castro = Bay of Pigs.”) The more the user scrolls down, the more the pig starts to flesh itself out. Inner organs begin to reveal themselves, labeled with different parts of the site’s navigation buttons. As the heart appears, for example, a label notifies the user that it represents the company’s “People.” The pig’s intestines, strangely enough, represent “Works.” The lungs represent “Clients.”

As the user continues to scroll down, the pig fleshes out completely, politely covering itself and all its organs with a purplish outer skin. Clicking on one of the navigation links below, such as “People,” quickly skins the pig, reveals the heart and allows the user to click “View,” which then takes the user to the “People” page.

As if this unusual homepage was not already strange enough, most individual pages on the site have another unique feature: Instead of scrolling down to read additional content, users scroll across the screen. On the “Organization” page, for example, the user can scroll across the screen for some time, reading the different tidbits that Kennedy + Castro found to be important. If the user gets bored with all that scrolling, however, he or she can always jump to certain sub-sections using the navigation buttons at the top. Once again, HTML5 proves itself to be more versatile than Flash on this site; while Flash probably could have been used to achieve similar effects, HTML5 can do it all without a plugin, making the Kennedy + Castro site as easy to navigate on a mobile device as on a traditional computer.

6. tegut…

URL: http://www.tegut-flips.de/

For those who don’t read German, the tegut… Universe website is more than a little confusing at first. What is it promoting? Is it a site to sell children’s coloring books? Is it the German version of Veggie Tales? A little bit of Google Translate and Wikipedia later, the answer becomes clear: tegut… is a German grocery store, a slightly upscale one along the lines of Whole Foods or Harris Teeter. Unlike Whole Foods, however, the organic food that accounts for 20 percent of tegut…’s revenue is grown at organic farms owned by the grocery store chain itself. Also unlike Whole Foods, or really any other American or even European supermarket chain, tegut… goes the extra mile to ensure that its cold cuts are of the highest quality. The cold cuts at tegut… aren’t just organic; they’ve listened to classical music. Believe it or not, tegut… actually plays classical music in the form of string quartets to its meats.

As for the tegut… Universe site, the lingua franca of playful website design, bright colors, interactive characters and photos of kids suggests that this site is the kid-friendly version of the main tegut… website.

The site opens with an Earth-like globe. Scattered around the globe are different scenes, such as cityscapes, a haunted mansion and a soccer stadium. As users click each scene, they are whisked towards the Earth and into the scene itself. Card-like representations of meats, fruits and vegetables, each with their own unique name according to the scene, such as Chicky Goal in the soccer stadium and Freddy Ice in the cityscape, appear scattered throughout the scene. Clicking on them brings up a more detailed description of the character; clicking on the character’s card produces a noise, voice or sound that represents it.

Although one doubtless needs to be a German kid to fully appreciate the design and humor of the site, even non-German speakers can have fun clicking through the different characters and sticking their descriptions into Google Translate. Thanks to HTML5, all these animation effects occur without the annoying Flash “loading” bar.

7. KOJO

URL: http://kojo.com.au/

What is it with creative firms and cartoonish pigs? Like Kennedy + Castro, KOJO doesn’t precisely explain what it does, but explains itself in buzzword-rich phrases about branding, communication, connection, platforms and channels. However, the fact that the company is heavier on aristry than clear communication of its services doesn’t seem to bother clients; its client list includes well-recognized corporations such as Yamaha, Mitsubishi, Warner Bros. and L’Oreal, internationally renowned musicians, plus many other clients with lower levels of international fame.

The site itself is a good deal simpler than many of the other websites on this list and certainly simpler than Kennedy + Castro’s. Most pages are formatted in a parallax style; however, the homepage consists of nothing but navigation buttons. Although most of the site is clean and easy to navigate, the buttons themselves are not labeled. Each button on the homepage is an icon with no clear explanation about what clicking it will do or where it will take the user. The rocket ship icon, for example, represents the “Events” page, while the pound sign represents digital projects that KOJO has worked on.

8. La Grange

URL: http://la-grange.ca/

It is probably reassuring to know that web design firm La Grange, based in Quebec, does not test its code on animals. That message is the first thing that confronts the user when he or she clicks through to La Grange’s website. Although there are no cartoon pigs on La Grange’s site, there are plenty of other animals: Deer display themselves nearly everywhere the user goes on the site; other animals found in the woodlands of Quebec, such as hawks, wolves and elk, are constantly appearing on various pages.

At first glance, the La Grange site almost seems to be “just another WordPress site.” It has a WordPress-type feeling to it, with its clean, simple navigation and portfolio-style layout. A few pages, however, reveal the more complex HTML5 coding behind the La Grange site. On the “Services” page, for example, a banner photo that at first appears to be a static image reveals itself, upon closer inspection, to include animated wind turbines. These little touches demonstrate not only La Grange’s use of HTML5, but also prove that the company isn’t just some little no-name design firm churning out WordPress sites.

9. Turn.js

URL: http://www.turnjs.com/

Like Parallax.js, Turn.js is a JavaScript library that enables web designers and developers to make full use of the capabilities of HTML5. The code, which works on standard computers as well as some tablets and smartphones, provides designers with a new way to present the old-fashioned content of the company brochure or similar print publicity pieces. By implementing Turn.js, designers can turn digital content into content that feels like a paper brochure, booklet or magazine. Not only can users turn the virtual pages of the content in exactly the way they would turn pages of a booklet, they can also click on tabs or zoom in and out. When Turn.js is combined with other JavaScript libraries, developers can also place two turnable pages within one page, animate pages and add various other special effects.

The developer of Turn.js is no La Grange or Kennedy + Castro. Instead, the young front-end web designer from Venezuela isn’t ostentatious or elaborate in the presentation of his JavaScript library. The Turn.js site itself is a one-page ordeal, with most navigation only sending users to anchored content further down the page. Six samples of what Turn.js can do are at the top of the page; a second page entitled “Licensing” enables users to buy the code for their commercial projects.

10. El monstruo que no dejaba ir a los ninos de colegio

URL: http://www.elmonstruo.org/

This Spanish-language website might take a minute to load, but the wait is definitely worth it. A website eventually appears with a full-width image reading “El monstruo que no dejaba ir a los ninos de colegio” (“The monster who wouldn’t let the children go to school”) with a “Play” button on top of it. Adding /en to the end of the site’s URL will take viewers to the English-language version of the site. Pressing the button, users are treated to a short film featuring a cardboard monster who interrupts the educational efforts of the cardboard children at every turn. Finally, the monster chases the children and their schoolteacher to the edge of a cardboard cliff, where, just as it seems that all is lost, the teacher, who all along has been desperately trying to protect the children, whips out his smartphone and…

Talk about leaving viewers on a cliff hanger. Rather than continuing, the video zooms in on the cardboard smartphone, highlighting buttons that give different suggestions for how website visitors can help aid children in developing countries to receive an education. For visitors to the site residing in Spain, sending a text message to the number indicated in the short film will send EUR 1.20 to UNICEF and will lead to the conclusion of the film. The site would score a perfect 10 if the navigation buttons below the main film image weren’t so glitchy. These buttons are better pressed from the homepage before the film actually launches.

Broken navigation buttons notwithstanding, the concept is incredibly clever and shows that UNICEF is finding innovative, high-tech ways to reach its donors. After watching the beginning of the short film, many Spanish users will doubtless send the text message just so that they can witness the conclusion.

Conclusion: Thank You, Steve Jobs

Innovators almost always get some “He’s crazy” eye-rolls before subsequent developments prove them right. When Jobs started ranting about Flash, most people did a lot of eye-rolling. What they couldn’t see, however, was what Jobs already knew: HTML5 will be more than capable of picking up where Flash left off. As the sites above show, there’s nothing that Flash can do that HTML5 can’t do. If there is anything that Flash is better at than HTML5, further development will doubtless close those last gaps.

HTML5’s official takeover of the Web will occur at some point in 2014. Already, however, HTML5 is supported by most desktop and mobile browsers. HTML5.1, meanwhile, which will offer fixes for the parts of HTML5 that are currently unstable, will make its debut in 2016.

Here is an example of utilizing some of the HTML5 features mentioned above atwww.magiclogix.com.

Is your website ready for HTML5? More importantly, are you prepared to take advantage of all that HTML5 has to offer?