Google IO Q: Would one build a different HTML 5 app for keyboard devices and mobile (touch) devices? Why or why not?

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan

<a href="http://goo.gl/mod/871w">Another question</a> that we didn't get to answer in our talk - <a href="http://io2011-zerotohero.appspot.com/index.html#1">Mobile web development: Zero to Hero</a> - is basically the premis of the entire talk.  We believe that in a large number of cases that it is entirely possible to build applications using one semantic document structure, a large swathe of common core logic whilst specializing for a given formfactor.  <p /><div>From our talk, you can see that the User Interface is optimised for smartphone, tablet, desktop and TV - we believe that there are qualitatively different user interaction patterns in each form that it is important that you optimise for the different experiences, but for the developer experience it is not easy (or possible in some cases) to keep having to build one new app for each category of device that you want to target.</div> <p /><div><a href="http://io2011-zerotohero.appspot.com/index.html#30">Slides 30 to 41</a> describe how we came to solve this problem for our app.  The important code in our application is the <a href="https://github.com/PaulKinlan/ioreader/blob/master/server/client/scripts/controller.js">base controller</a> that describes all the common logic across all instances of our app, and then the form-factor specific <a href="https://github.com/PaulKinlan/ioreader/blob/master/server/client/scripts/desktop/controller.js">desktop</a> code or the <a href="https://github.com/PaulKinlan/ioreader/blob/master/server/client/scripts/phone/controller.js">smartphone</a> code that is injected in using the <a href="https://github.com/PaulKinlan/formfactor">FormfactorJS</a> library via our <a href="https://github.com/PaulKinlan/ioreader/blob/master/server/client/scripts/uis.js">UI detection code</a>.</div> <p /><div>It must be noted, that a lot of tablet based apps work quite well on desktop devices, there are some unique differences that I can see from usage between the two.  For example, lots of touch based tablet apps are built with horizontal scrolling as the primary mechanism for finding new content (think the NPR app, where you scroll left and right to find new stories), whilst on the desktop, many users appear to prefer the vertical scrolling of columns of data.  This I believe is because it is more natural to swipe left and right with your finger, whilst it is easier to use your mouse scroll wheel on your desktop; this pattern for design was one that I explicitly made in the Desktop version of <a href="https://github.com/PaulKinlan/ioreader">IO Reader</a>.</div> <p /><div>What are your experiences of developing for multiple formfactors?  I would love to hear them, and your thoughts on runtime form-factor detection.</div>

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan