HTML5 has presented an opportunity for website developers to push the envelope in terms of design and functionality. Browsers like Google Chrome and Mozilla Firefox displays the video, audio and animation by itself when one uses HTML5 unlike Flash where plug-ins are required. With the advent of HTML5, many websites are now more stunning and interactive than they used to be. Although HTML5 seems to be the future, it is still in nascent stages and is less browser friendly as compared to Flash. Moreover, Flash seems to provide superior animations, interactivity and advances multimedia features than HTML5.
Below is a list of the top 10 HTML5 and Flash Websites of 2012 that I have come across yet:
Bobadillium (HTML5)
The great mix of Banksyesque graffiti, witty copy along with the interesting visuals makes this website worth-a-look. The pages are also laid out end to end for easier scrolling. The website uses basic colours in the backgrounds so the graffiti designs don’t get overpowered. Unlike other corporate sites where the heading of various tabs are to-the-point, this website takes a different approach to naming their tabs.
Visit the Bobadillium website.
Angry Birds Space (HTML5)
Angry Birds is one of the most popular games currently. It spans across various platforms like Android, IOS, etc. and has a following that includes all the age groups. To promote Angry Birds’ newest version, Angry Birds Space, Rovio made an HTML5 website that gave the visitor the effect of actually playing the game while he’s scrolling through the website. It is also loaded with information and videos on those fiery featured creatures that everyone loves. The pages of the website have various environments from the game itself so one gets a chance to preview the game.
Visit Angry Birds Space website.
Nike Air Jordan 2012 (HTML5)
As a person scrolls through the website, individual components of the Nike Air Jordan 2012 break-out. An individual piece then moves ahead and twists and turns while more information about the respective piece is given to the online visitor. These shoe pieces later form objects like a fighter jet, an F1 car and a tank. The website uses these animated objects to make people’s jaw-drop instantly. They hook the visitor and deliver information about the shoe, one piece at a time.
Visit Nike Air Jordan 2012 website.
Sony Walkman Z Series (Flash)
This site uses videos to highlight various features of the new Sony Walkman Z series phones. The premise of the videos revolves around two kids performing quirky experiments on their grandfather, using the Sony Walkman phone, that often end hilariously. Each video showcases a feature of the phone. By using the videos, a person learns about the various features of the phone and also gets to laugh at the crazy antics of the little children and their grandfather. Using HTML5, the video content can be directly shown in the browser and no plug-ins are needed.
Visit Sony Walkman Z Series website.
Lend Your Leg (HTML5)
Every year, thousands of innocent people across the world lose their lives or are severely affected by stray minefields. These remnants of wars cause grave damage to people who unknowingly step on them. To bring awareness about the loss of lives because of mines, a campaign called ‘Lend Your Leg’ was launched on International Day for Mine Awareness (April 4). The campaign asked individuals to roll up their pants and reveal their leg in order to fight against minefields. Many photos of people rolling their pants and revealing their legs was uploaded; these were arranged in the form of a leg that was covered; hence the website mimics the act in its design.
Visit Lend Your Leg website.
WWF Europe (HTML5)
WWF strives to protect the environment and increase the levels of awareness of common people on the damage done to our planet. This particular site tries to make people aware of the shortage of food and the amount of food that is wasted on a daily basis. The site is clean, clutter-free and uses a simple fonts. Each fact is accompanied by a slider that elaborates the information with images, hence a touch of data visualization is added to the website as hard facts are delivered using graphics and visuals.
Visit the WWF Europe website.
The Doer Project (HTML5)
The purpose of this microsite is simple: deliver inspirational quotes to visitors. The website delivers a quote without giving any other unnecessary information. The site is very simple in its design. One can effortlessly navigate from one page to another by using the space bar. The background colour of the microsite changes with each visit.
Visit the website.
My First Car Story (Flash)
Most people have sentimental tales around the purchase of their first car. It’s either a gift from their parents or the first purchase they make with their own money. The website for Subaru Impreza takes this endearing story of getting your first car in their campaign. A person needs to type in his first car story; various generic words are highlighted and stock animation is used to compile a final video. This video can be posted and shared further on social media websites like Facebook. During the making of the video, the website also gives information of the Subaru so the online visitor is aware of the car and its features. This website uses HTML5‘s affinity towards multimedia.
Visit the Subaru Impreza website.
Natural Valley Trail View (HTML5)
America is full of beautiful locations and tourist spots which include the Grand Canyon, Yellowstone national park, etc. This website gives people the experience of actually visiting the great American outdoors by seeing a 3D view of these places. A great way to get all the workaholics a piece of nature, this website uses scenic images with from these locations to entice the viewer into visiting the locations in reality. The website offers maps to the visitor to get more information on these tourist hot spots.
Visit Natural Valley Trail View website.
Volkswagen Beetle (Flash)
The Beetle is an iconic car. The car is revered as a symbol of the 70′s hippie era, but the car has moved forward in terms of its engineering and design. This website tries to highlight the car’s new features and modern amenities while keeping the fun factor the goes with owning a VW Beetle. Apart from the awesome feature of drawing your own Beetle and moving it around various obstacles, the navigation also incorporates the drawing functionality in it, one can navigate from one page to another with a click and drag of the mouse that forms an arrow and takes the online visitor to the next page.
Visit the VW Beetle website.