HTML5 is the latest version of the language of the web first invented by Tim Berners-Lee.

Use HTML5 for Killer Cross-Platform Graphics

PrezzieFrames screenshot

We’re pleased to announce the launch of a graphically intensive site developed in HTML5 using the Canvas technologies.

PrezzieFrames is a site offering customers the ability to customize a photo which is delivered anywhere in the world in a top-quality silver presentation frame.

On the surfac

change the background image;e the idea is simple – a user can upload a photo from their phone or computer, and this is placed in a virtual frame. The user can then manipulate the photo in a number of ways:

  • move the photo;
  • rotate;
  • zoom;

Users can also add text to the photo image and choose fonts and colours for the photo. The aim of the user interface is to ensure the user is guided intuitively through the process at every stage, using skills they already have (point, zoom, rotate).

Under the hood, some complex JavaScript and HTML5 Canvas coding has been developed, to allow the manipulation and saving of the image from the screen to a JPEG file of high enough quality to be printed and delivered within the presentation frame.

We used the fantastic Kinetic JS engine to deal with complex image manipulation routines.

HTML5 Development

HTML5 is the new web standard for delivering web content to browsers, mobiles, tablets, smartphones. It’s adoption is now mushrooming rapidly, so all web developers should have a clear idea of its capabilities and new features. At UKcentric, we have been building new sites using HTML5 for some time. One site we recently released is PrezzieFrames. Let’s look at how this site uses the functionality provided by HTML5.

HTML5The site is very simple: the user is allowed to upload a photo into a virtual photo frame, position, resize and rotate it, choose a background and add text in a number of colours and fonts. They can then buy their finished design through standard e-commerce payment providers (we used PayPal and SagePay for this project).

We had to make a number of design decisions when embarking on the project. Our client wanted compatibility across a range of devices – including Macbooks, tablets and smartphones as well as desktop PCs. This was challenging as the obvious technology platform for the frame-designer would be Flash but with limited or no support of Flash on the iPhone this was something of a no-no.

We also looked into pre-existing graphic design platforms built using JavaScript that could perhaps be ported or modified to create our PrezzieFrame builder. But all of the ones we looked at were too far removed, either too bulky or slow, or not customisable enough. No, it was time to roll up our sleeves and look for a custom-built solution.

We opted for HTML5 mainly because of the Canvas element which it introduces. This is a rectangular element which can be used for rendering graphics, images etc. JavaScript can be fired at the Canvas to capture mouse events and move images around. It’s good practice in any development project to look around and see what others have done, and we found the brilliant Kinetic JS library of pre-built functions, which gave us a fully layered, object-oriented image manipulation package, right there in the web browser.

The user can move their photo around the frame, add text, choose a nice font, scale and resize. On clicking the “Checkout” button, the finished image is saved off to file system as a JPEG, ready to be sent to the printers once the order is complete.

The finished product looks great in almost all browsers, works on Android phones going back several years, and lots of other devices.

We’ll now be building all new sites using HTML5, even if they don’t necessarily involve graphics. HTML5 introduces many other nifty new features:

  • enhanced form elements such as sliders and spinboxes
  • specialised form elements such as email address textboxes and calendar pickers
  • offline editing and local storage for web applications
  • geolocation functionality
  • and much more