The Duck Pad

Our brief is to make an iPad app within 6 weeks that will hopefully get as much out of the new medium as possible whilst helping us learn some new skills in HTML5, CSS3, SVG and jQuery.

[theduckpad-blog]

DuckPad and QuackHack

Its been almost 2 years since we produced DuckPad, an innovative iOS tablet adaptive web design app. It was essentially a very 'adapted' version of our website optimised for iPads and 'touch'. 

Today we have some exciting news. Not only have we updated a new and improved version of DuckPad but as the most ambitious and innovative independent digital agency in the UK, we spent all weekend producing 3 new apps:

Kinect web app - Allows the user to scroll through artwork and artists using their hands (via a PC with a Kinect device attached). This application was developed using the Kinesis framework.

BI Dashboard - Business Intelligence Dashboard that aggregates server uptime, Google Analytics data, time spent on projects (with a breakdown of time spent on dev, UX, marketing etc').

Error Eogging Console -  This application collates all errors from all websites and SaaS applications that Cyber-Duck created. It displays everything in a responsive web design (RWD) dashboard that works perfectly regardless of the medium (It will work on a 55" Samsung HD LED TV or on a Android 4.3" phone).

We will be posting links to the videos about the projects later today!

[theduckpad-blog]

Hello,I have been very following you guys in this blog and I have to admit it was very helpful.I would love if you can put a post evaluating the technologies (specifically JQuery) in developing web apps for mobile devices. How did you find the experience working in it?Thanks.My background: I am a ASP.NET developer for like 4-5 years . But recently I have been interested in working in the newer web technologies like HTML5, CSS3 and the just released JQuery Mobile framework - especially along with ASP.NET's MVC Framework.

Sorry about the delay replying. Do you still need help?

[quackhack-blog]

Kinect app "Project Wave" - EOD summary

1 hour and 19 minutes into the Quackathon and Team 3 have proven why they are indeed the smartest Duck’s in the Pond. They have solved the issue of getting the Kinnect to interact with the PC. We will upload a ‘poor’ quality video of it working soon.

[theduckpad-blog]

At 12:30 today we cracked how to develop an HTML/CSS gesture app via the Xbox Kinect. This was all possible due the SDK (software development kit) and sample codes from Kinesis.io. Basically to get started and create your own HTML/CSS/JS apps for the Kinect you need the following:

Microsoft Kinect for Windows (you can buy one at Ebuyer for £165)

Download Kinsesis SDK for Windows (Free, you need to register on Kinesis.io)

Download Kinesis HTML/CSS/JS demos (Free, as above)

Let's summarise day 01 (Saturday) where we aimed to "develop an 'artist gallery' browsing app" and list our key acheivments:

We came up with a name for the Project - "Project Wave"

All the teams came up with names, we are Team3 "AirWolf"

We planned and created wireframes for the UX (user experience) of the app and we even listed the key specifications

Conduct techncial analysis to understand how Kinesis works

Installed the Kinesis SDK for Windows

Got the Kinect interface working

Downloaded demos and started reviewing the code

Prepared all the assets (images of artists from Castle Gallery)

Finished the designs

Tomorrow we will 'code' the designs and get it to work with the Kinesis libraries. Team3 and the others are going to have a BRBQ. What a great way to end such a productive day, we really did learn alot today.

[quackhack-blog]

Team 3 Cracks the Kinnect!

1 hour and 19 minutes into the Quackathon and Team 3 have proven why they are indeed the smartest Duck’s in the Pond. They have solved the issue of getting the Kinnect to interact with the PC. We will upload a ‘poor’ quality video of it working soon.

[theduckpad-blog]

Yes Siji, you are right. Just about as we were giving up I found a brilliant Kinect Hack article by Vangos Pterneas, a student of the Athens University of Economics and Business, Department of Informatics

[theduckpad-blog]

Its a wrap!

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.

[theduckpad-blog]

a quick video showing DuckPad in action - with bonus eye tracking footage!

[theduckpad-blog]

Going Native

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!

[theduckpad-blog]

Gilbert trying out Tobii's eye tracking glasses on the iPad

[theduckpad-blog]

CSS3, HTML5's sidekick

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!

[theduckpad-blog]

[theduckpad-blog]

Gilbert gets serious during Crunch Time

[theduckpad-blog]

Fonts on the iPad

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.

[theduckpad-blog]

Redirecting non-iPad users

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>

[theduckpad-blog]

Coding Begins!

The wireframes are complete and the designs are almost ready, so its time to get going with some HTML5/ CSS3!

We have been doing a lot of research into the latest techniques and tips, here are some of the resources we've found particularly useful.

HTML5

Designing for touchscreens isn’t new, but HTML5 is! These articles give a run on what issues to prime yourself for. http://informationarchitects.jp/designing-for-ipad-reality-check/ http://www.inspiredm.com/2010/02/09/ipad-design/

http://www.html5rocks.com/

http://www.nczonline.net/blog/2010/04/06/ipad-web-development-tips/

JavaScript lovelies

Whilst HTML5 and CSS3 has opened up many new possibilities for creating sophisticated web experiences without JavaScript trickery, it is still but a tool in the arsenal. Frameworks such as Apple’s own leaked Adlib, PastryKit and Boilerplate serve as good starting points for cross-device support and functionality in the HTML5-era, whilst JQuery plugins such as Touchwipe, jqTouch and jScrollTouch aid in recreating the sort of interaction experienced in native iPad applications. http://www.netcu.de/jquery-touchwipe-iphone-ipad-library http://www.jqtouch.com/ http://www.dealinium.com/common/jScrollTouch Apple References References are typically well documented and concise on the Apple site, prepping us on the nitty gritty of iPad design. http://developer.apple.com/safari/library/technotes/tn2010/tn2262/index.html http://developer.apple.com/safari/library/documentation/appleapplications/reference/safariwebcontent/usingtheviewport/usingtheviewport.html

Proof of concepts done, we are getting stuck into development and will have more to show in due course.

[theduckpad-blog]

Raj’s artwork for the navigation

[theduckpad-blog]

Raj staying focused

[theduckpad-blog]

The Challenges of Developing for iPad

The iPad is, in many ways, a web developer's dream. 

You are designing for one screen resolution (a relatively high 1024x768) and browser in mind, compared to the countless combinations possible in traditional Web design.

The iPad's Safari browser is standards compliant with support for most of the latest web technologies including HTML5 and CSS3. The much documented lack of support for Flash frees you from this platform and encourages the creation of innovative alternatives.    

As great as all of this sounds, we have come across some obstacles with the device during the project.

Fingers lack the precision of a mouse cursor, so buttons must be increased in size and it's best to avoid text links. In addition, mouse driven events are not possible, meaning no tooltips and hover effects.

As the iPad is a portable device and users are free to rotate it, you need to design for both landscape and portrait views. This is an interesting challenge, do you design a layout that will adapt to either viewport or provide an alternative layout for each? 

The pixel density of an iPad is greater than your monitor as all those pixels are packed into a 9.7" screen. All visuals and fonts will appear smaller on the iPad than they do in your design and wireframing software.

In traditional web design, scrolling (to an extent) is not an issue and you are free to let content flow past the fold. To maintain an App-like feel, we are containing our content within a single screen. In order to achieve this innovative design choices have to be made. 

Overall, we've enjoyed designing for the iPad and are really pleased with the wireframes and designs we've developed so far.