DuckPad has been released into the wild and we were very proud to be speaking at C21 Media’s iPad Entertainment Summit last Friday. Cyber-Duck presented a talk on developing a web app for the iPad amongst major industry names like BBC, Channel 4, Sky, NBC and the fantastic Stephen Fry.
We discussed the benefits of creating an app in HTML5 vs building a native app, and the challenges we faced and concluded by unveiling DuckPad to the audience.
If you have an iPad, point it at http://www.cyber-duck.co.uk/ipad (you’ll have the best experience if you then save the bookmark to your homepage and launch it from there).
We are still learning and experimenting (DuckPad was born of an R&D project after all), currently we are in the process of streamlining and optimising the JavaScript and looking into potentially using Google’s new WebP image format to further tweak the performance.
There is additional functionality we’d like to add, making further use of the new awesomeness HTML5 allows - of course we’ll be detailing new developments here.
a quick video showing DuckPad in action - with bonus eye tracking footage!
As accredited Apple Developers, we have the option to build and make our application available as a native app. Apple currently recommends you create iOS games and apps using their Objective C language, however frameworks such as Phonegap allow us to essentially ‘package’ an app built in web technologies such as HTML5 into a native app.
But why?
Innate benefits include ridding yourself of the web browser’s UI elements (such as the taskbar), and being able to run the app offline, without 3G or Wifi connection. Then there is access to the iPad’s accelerometers, amongst other goodies, not to mention the kudos of having your project in the App Store! Yet given the notoriously long vetting time for applications, along with our own strict deadline, is it worth it, let alone possible?
Luckily for us and our users, a combination of inbuilt iPad functionality and nifty HTML5/CSS3 allow DuckPad to appropriate the trappings of a native app while running in Safari.
But how?
Whilst new CSS3 properties allow us to do things such as disable the copy/paste dialogue, fix the viewport and re-colour the unsightly grey box that appears when page elements are activated, the foremost problem with Safari is the browser chrome. As well as taking up valuable screen estate with UI elements we don’t need to navigate through the Duckpad, this is distracting for the user.
By using the ‘apple-mobile-web-app-capable’ meta tag, we can launch the webapp fullscreen taking full use of the iPad’s screen. To further the app-like experience, we can create and set a bespoke icon that can be saved to the iPad’s home screen in order to launch DuckPad.
Finally, with the wonders of HTML5 caching, we can use the app offline, without requiring WiFi or 3G connection. There are however, limitations - all new content must be loaded dynamically in the one bookmarked page, whilst a 5mb cache limit means offline viewing of our videos out of the question. Furthermore, we have been experiencing a problem affecting the custom SVG fonts we’ve used when cached which has implications for both design and branding. (see our earlier post on SVG fonts)
With HTML5 the line between web app and native app are becoming blurred, especially on the iPad. We feel that for simple, applications that are quick to develop and work across platforms - HTML5 is the future!
Gilbert trying out Tobii’s eye tracking glasses on the iPad
Often when people talk about HTML5 (ourselves included), what we really mean is CSS3. HTML5 and CSS3 are bedfellows through and through, and what CSS3 gives us is greater visual sophistication without resorting to graphics, and the opportunity to create front-end animation and effects usually the reserve of JavaScript.
Common visual elements in Web/UI design such as rounded corners, gradients and drop-shadows can be created with ease with newly introduced CSS properties. Not only does this decrease the amount of images elements we must chop from our designs, but it decreases the server load of files.
Furthermore, with a little creativity, we can create more unusual elements through code. For example, need an arrow : how about give a div two thick borders and rotate 45 degrees?
Best of all, through the application of the -webkit-transition property, CSS3 will smoothly animate between almost all of it’s properties (be it width, height, colour etc), simply when a new value is applied to an element.
The question then is, why use CSS3 animation if JavaScript utilities like jQuery can do it with greater ease?
Aside from “because we can” and “it is the future!” (which yes, it is!), CSS3 animations are substantially quicker than their equivalent JavaScript effects.
So far this has been used extensively to create a variety of growing, sliding, fading UI elements in DuckPad - which had they been done exclusively in jQuery, would have been too heavy for the iPad’s modest processing power.
There is a certain catch however, that to create our CSS3 animations, much of the time we need JavaScript to manipulate all these CSS3 properties. Similarly, there are certain things which would be simply too complex to recreate with CSS3 within our 6 week target, so we resort to trusty old JavaScript!
As such, front-end development has often focussed on how much we can push CSS3 whilst maintaining the degree of reliability and smoothness we, and our users would expect. This takes the ménage à trois of HTML5, CSS3 and jQuery!
Gilbert gets serious during Crunch Time
Unlike conventional computers, the iPad doesn’t have user installed fonts, nor can it make use of TrueType fonts. This includes our own brand font - Century Gothic.
We solved this using the excellent - http://www.fontsquirrel.com, which allows you to create the custom SVG fonts that the iPad supports. Being able to use custom fonts on websites easily is a fantastic boon to web designers - allowing for great freedom in typography previously only possible by relying on images or Flash.
Secondly, we all got excited by the possibility of using characters in place of images and we’ve been hunting down suitable unicode characters in place of UI elements such as arrows. The main advantage in doing so we can reduce the number of images required to build the page, and animations, colour changes and resizing with great ease.
Once the DuckPad project is completed, we’ll be making it publicly accessible online however as it is designed strictly with the iPad in mind it might not work so well on a desktop.
Clement and Khal set about creating a Javascript snippet to redirect non-iPad traffic back to our main website. By using the platform element in the navigator object in the DOM, rather than the UserAgent we can accurately detect devices accessing our website.
<script type="text/javascript">
if(!(navigator.platform.match(/^(iPad)$/))){
document.location.href = "http://www.cyber-duck.co.uk";
}
</script>
