Ultimate Examples of HTML 5

Just look these ultimate examples that what can be do with HTML 5 . These are best example from all around the internet.

HTML5 is the latest version of HTML – the markup language used to display web pages. Although it’s technically still in development, it’s very much ready to use today, to build websites and web apps. Of course, we’re a very long way from every web designer using HTML5 to build their sites. So here, thanks to our friends at .net magazine, we’ve collected together 50 examples of HTML5 in action that show what it can be used to achieve. Check out these brilliant websites and hear from the people who made them just how they achieved their goals. Meanwhile, if you want to learn more about HTML5 then check out our list of great HTML5 resources.

01. Brandon Generator

When Microsoft asked LBi to create an interactive animated story to promote IE9, they jumped at the chance. That’s not surprising considering who was on board for the project: director Edgar Wright and Marvel and Lucasfilm illustrator Tommy Lee Edwards. “Edgar had the opinion that any technology we used should fit the story rather than being shoehorned into the narrative,” explains LBI’s Simon Gill. “This led to a hectic two weeks at the outset, sorting out the main story points, with ideas for elements to build and how they’d fit together. We wanted to try and redefine what an online film is – learning how a Hollywood scriptwriter, an illustrator/animator and a software company could combine on something interesting.”

The decision to use HTML5 and not Flash was a straightforward one, says LBI’s Riaz Ahmed. “While you can do some really cool stuff with Flash, you can now almost do the same with HTML5, CSS3 and jQuery. The mix of these technologies, coupled with SVG and canvas, allows you to put together a visually rich, immersive and interactive experience by enabling developers to create stunning 2D/3D animations and transitions, with the ability to play back high definition audio and video. These technologies are very appealing to developers and ultimately to the web audience, who have no need of downloading or maintaining any plug-ins.”

02. Roger Dubuis

Roger Dubuis is a master craftsman: a highly skilled, talented watchmaker for those with an eye for beautiful design and a deadly accurate timepiece. The website for his stunning range of watches needed to reflect those qualities; built by French agency Ultranoir and using a host of HTML5 features, the site offers memorable experiences for the user.

Mathilde Vandier, strategic planner at Ultranoir, reveals that along with HTML5 audio and video, the History API is used “to offer a fluid navigation through pages without total reload – it helps to create an immersive experience”. In addition, the closely related Geolocation API is used on the store locator to localise users on the map. Vandier goes on to tell us that if there is an occasion where a browser doesn’t support the site “we provide fallbacks (which are invisible for the user) to keep the consistency of the experience”.

03. Bjork.com

When Icelandic pop icon Björk needed a new website, Jam3 built her an animated 3D interface that screams “wow factor”. The commission came about because of a blog post, explains the agency’s Mark McQuillan. “It was an innocent post about an HTML5 experiment. We were doing some testing of some 3D techniques in the canvas tag. Our developers’ regimen includes regular R&D time so we try to document a lot of our research in our labs blog. At the time, the “whole world was moving to HTML5” so we were just playing around. Björk’s people were searching for some pretty specific HTML5 capabilities and our post looked like a good lead to them, I suppose. The phone rang at Jam3 one afternoon, we were able to tell them more about our team and deep technical capabilities, and the rest is history.”
Jam3 collobarated with art and design partnership m/m to create the site, and getting the 3D data exported and rendering it in a way that it would perform was the main technical challenge. “The first task was to figure out how to use a Google SketchUp file that m/m created the galaxy in. Getting the data out proved to be one of the most interesting challenges our team has ever faced. It wasn’ exactly like we could do a ‘File > Export Canvas’. There was no documented way to do what we were trying to do.
“In the end, it took about five steps and some custom parsing to format the data into something we could begin using. There were no guarantees that we were even going to be able to draw everything either: developing our own JavaScript 3D engine was fairly easy, but making all the data perform was the last difficult undertaking.”

04. Andy Wilson Financial Services

Andy Wilson Financial Services’ website is made by Laser Red and uses HTML5 structural elements, microdata and native video.
“We did initially look at using a library for video fallbacks, but we didn’t think this was necessary,” developer Elliott Stocks tells us. “We used a common method to play Flash if HTML5 is not supported, simply combining a Flash object within the <video> tag. We haven’t had any problems with this, and we prefer keeping the libraries to a minimum.”
The site still uses Cufon for fonts. Why? “We weren’t too happy with the rendering of the (free) web fonts in some browsers (mainly Firefox). Support for web fonts is improving but the smoothness of rendering could be better. The website still renders fine without JavaScript, but we display a message informing users they may have a better experience with JavaScript enabled.”
Microdata is a contentious part of the HTML5 spec, because many believe HTML should instead incorporate a W3C standard called RDFa. “One of the main reasons we decided to use microdata was because it is backed by some of the biggest search engines,” Stocks explains.

About the author

Being the CEO and Founder of ClecoTech International, Mr. Ashish Prajapati is dedicated towards his aim of mentoring young startups into a full-fledged businesses. He is helping startups from America, Europe, India, and various other countries through proper guidance and the use of latest technologies to develop their innovation and ideas into definite realities.

Leave a Reply

Your email address will not be published. Required fields are marked *