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