Innovative HTML5 for One Page Websites

Why scroll down a web page when you can rotate, slide, fade and animate you way through the info?
 

HTML5 has brought a raft of innovative controls to help designers and developers manipulate objects on a web page. Now that modern browsers are finally getting a better grip on the fundamentals of web pages, it’s letting us creative types run free in designing a richer user experience.

One page websites are still exploring the limits of the effects they can use and often the user will be left to explore in a playful manner. Often the effects come as a surprise easing the user into a unique way of browsing a particular site so you’re never quite sure if you’ll end up navigating sideways down-ways, up-ways or slant-ways.

Sometimes the effects can be a little overpowering – almost to the point that the subject content becomes secondary but time will tell how well the better effects fair. It’s safe to say, the lions share of creativity in HTML5 is so far reserved for the promotional and information genre of website but we look forward to seeing these promising effects making the leap to powering eCommerce in a fresh new way.
 

La Moulade (Commercial)

HTML5 Effects, One Page Websites - La Moulade

http://lamoulade.com

 

Cadillac ATS Vs The World (Promotional)

HTML5 Effects, One Page Websites - Cadillac ATS Vs The World

http://ats-vs-world.cadillac.com

 

Auxiliary Design (Agency)

HTML5 Effects, One Page Websites - Auxiliary

http://www.yourauxiliary.com

 

Lead Motion (Commercial)

HTML5 Effects, One Page Websites - Lead Motion

http://www.leadmotion.mobi

 

Ballantyne (Promotional)

HTML5 Effects, One Page Websites - Ballantyne

http://www.ballantyne.it

 

How does it work?

A new framework of controls became available with the introduction of HTML5 – and modern browsers are now natively compatible with these changes. Whilst older browsers can be made to comply, to a degree, with javascript workarounds, the modern browsers, which are also designed with mobile devices in mind, really let it sing.

Designers and developers can now control elements of a web page in a much more dynamic way so that specific objects can be animated, faded, rotated, scaled, moved, zoomed and so on.

These sort of effects were previously only typically achieved with the likes of the Flash plug-in but now a lot of this capability is hard-baked into the modern HTML language. Great news for all those mobile devices that restrict the use of Flash.

Pros

Creative:  Innovative and inspiring new ways to catch user’s attention in an ever competitive and expanding Internet

Commerce:  Strong potential across the board in the way we navigate generally and even to enhance how we shop online with more intuitive shopping controls/filters as well as more slick basket & checkout processes.

Education: Fast, engaging and interactive walk-throughs for otherwise lengthy and dull information.

Standardisation: A new set of tools to help allow all developers to ensure the fancier elements of an online experience become standard – and not the exception.

Cons

Graceful Degradation:  Yep, the usual. Waiting for everybody to catch up and get themselves a browser update! Until then, developers will be tearing their hair out for workarounds and fixes for those older browsers.

Too much bling?:  Some sites, heavy in effects and creativity, can sometimes outwit their own audience by designing something that is so unexpected, that it is missed completely. Hidden navigation has always been a gamble for a designer but with so much going on in some one page websites, there’s a good chance some elements of your audience will become disorientated and even distracted by the effects themselves. Hmm, lets not blame the tools though.

 

More examples:

http://www.we-new.com

http://bobadilium.com

http://www.kiinnostus.fi/autokuume

http://timotheecottier.fr

http://glassware.krugpark.com

http://onepagelove.com

About the author:

Blog Categories: 

Free Updates

Stay informed on our latest news!

Subscribe to Free Updates feed

Tags

Archive

Latest tweets