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.
The 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