Beautiful HTML5

HTML5 is the new emerging web standard, the technology that brings internet content to the screen.  This is the code that acts as a toolset for developers to design and create web content and applications.  The new standard will address the way the internet has evolved in recent years, giving developers greater control of media and graphics content and a suite of tools to facilitate building services and applications.  HTML5 also makes it easier for developers to work cross-platform, creating content that will work on mobile platforms such as tablets and smartphones as well as on PCs.

It will be some years before HTML5 is completed and fully deployed, but many developers are already starting to use the technology in exciting ways.  We at Scribble are excited about the possibilities offered by HTML5 and potential applications in the future.  So we’ll be keeping an eye on developments and making regular posts to talk about things that get us excited about the future of HTML5.

One of the main views of HTML5 is as a replacement for Flash.  While Flash is a popular choice for interactive and media content on the web, it’s closed nature and search engine unfriendliness has had developers yearning for an alternative for some years.  Apple’s refusal to incorporate Flash compatibility into iOS devices has also added significant pressure for developers to move away from Flash. HTML5 offers media playback, animation, 3d graphics and many more tools for rich-media content.

In fact, HTML5 offers many more tools outside of rich media content and is much much more than an alternative to Flash, but we thought this would be a good place to start.  We’ve picked out a number of beautiful examples of what developers can do using HTML5, and they paint a pretty picture of what we can expect from HTML5 in our web browsers and on our mobile devices in the future.

Click the images to view these beautiful examples of HTML5 in action.  A recently updated version of Chrome is recommended to view these.  Many of these are found on a site set up by google to showcase the exciting possibilities of HTML5.

WebGL Terrain

HTML 5 Terrain

Beautiful landscape procedurally drawn in real time.

Endless Forest

HTML5 forest

An endless generated 3D spooky forest.

3 Dreams of Black

HTML5 3 Dreams of Black

This is what you get when you put HTML5 tools in the hands of amazing artists and animators.  A jaw-dropping journey through a 3D world exploding with life!

8-Bit Colour Cycling

HTML5 8bit Canvas Colour Cycling

This demo replicates an old-school effect used in the days of 8-bit colour palettes.  This involves ‘colour-cycling’ – automatically shifting specific sets of colours in the palette - to create animation effects.  At the time, this was used as an efficient way to bring movement to images without actually animating multiple frames.  Enjoy this stunningly beautiful set of images steeped in gaming nostalgia!

Arcade Fire – The Wilderness Downtown, Interactive film by Chris Milk

HTML5 arcadefire

A superb example of innovative and out-of-the-box thinking. Difficult to sum up in words…  as you go through the experience, the browser opens and closes windows, showing you pictures of your home town fed in from Google Maps and depicting flocks of birds that interact with the narrative.  In addition to the beautiful and impressive motion graphics, the experience is thoughtfully designed to instill nostalgia and make you engage with the music.