Is that a Rich Web in Your Pocket?


Published on

A fast moving trend is building for mobile with HTML5. In this talk, Josh Holmes will show what can be accomplished with a mobile browser app and talk about the design considerations for that form factor.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Is that a Rich Web in Your Pocket?

  1. 1. Josh Holmes<br />@joshholmes<br /> <br />Architect Evangelist, Microsoft Ireland<br />Is that a Rich Web in your Pocket?<br />
  2. 2. We've Come a Long Way<br /><?xml version = '1.0' encoding = 'UTF-8'?> <br /><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" ""> <br /><wml><br /> <head> <br /> <meta http-equiv="Cache Control" content="max-age=0"/> <br /></head><br /> <card><br /><p align="center"><br />User: <input name="id" format="*m" /><br />Password: <input type="password" name="pw" /><br /><anchor>Login<go href="/wireless/mobMailPost" method="post"><br /><postfield name="arg1" value="$(id)" /><br /> <postfield name="arg2" value="$(pw)" /><br /></go></anchor><br /></p><br /></card><br /></wml><br />Remember this?<br />
  3. 3. We've Come a Long Way<br /><!DOCTYPE html><br /><html id="demohtml" xmlns="" class="testdrive"><br /><head><br /> <!-- Copyright © Microsoft Corporation. All Rights Reserved. --><br /> <meta http-equiv="X-UA-Compatible" content="IE=9" /><br /> <meta name="viewport" content="width=device-width, initial-scale=5.0, maximum-scale=10.0, minimum-scale=1.0, user-scalable=false" /><br /> <title>Hampster Dance Revolution</title><br /> <link rel="shortcut icon" href="/image/favicon.ico" /><br /> <meta name="description" content="This demo uses CANVAS and AUDIO to create a fun game based off the classic web sensation Hampster Dance!" /><br />. . .<br /><body id="demobody"><br /> <div id="fullbodywrap"><br /> <!--<br /> <a style="z-index: 100;" href="../../Default.html" title="Return to Test Drive Demos" id="returnbutton">Return to Test Drive Demos</a> --><br /> <!--<table id="headertable" border="0" cellpadding="0" cellspacing="0" width="100%"><br /> <tr><br /> <td class="heading"><br /> <h1 id="demobodyh1">Hampster Dance Revolution</h1><br /> </td><br /> <td id="demodescription"><br /> This demo uses &lt;CANVAS&gt; and &lt;AUDIO&gt; to create a fun game based off the classic web sensation Hampster Dance!<br /> </td><br /> </tr><br /> </table><br />. . . <br /> <audio id="bgMusic" controls="controls" src="assets/sounds/song_hamster_techno56.mp3" onended="ReloopMusic()" style="visibility:hidden"><br /> </audio><br /> </div><br /> <script type="text/javascript" src="testdrive.js"></script><br /> <script type="text/javascript" src="/script/FeatureDetectCanvas.js"></script><br /> <script type="text/javascript" src="libs/Xhr.js"></script><br /> <script type="text/javascript" src="libs/json.js"></script><br /> <script type="text/javascript" src="libs/Events.js"></script><br /> <script type="text/javascript" src="libs/Callback.js"></script><br /> <script type="text/javascript" src="libs/Math.js"></script><br /> <script type="text/javascript" src="libs/ApplicationLog.js"></script><br /> <script type="text/javascript" src="libs/Dictionary.js"></script><br /> <script type="text/javascript" src="libs/Collections.js"></script><br /> <script type="text/javascript" src="libs/Keyboard.js"></script><br />. . ..<br /></body><br /></html><br />
  4. 4. Today's Phones Are Full of Sensors<br />It knows what time it is (clock)<br />It knows where it is (geolocation)<br />It knows the ambient lighting (light sensor)<br />It knows if it's moving (accelerometer)<br />It knows its direction (compass)<br />It can hear things (microphone)<br />It can see things (camera)<br />
  5. 5. Understanding The Mobile Context<br />The Mobile Web isDifferent From the Desktop<br />Limited / Virtual Keyboard<br />Finger Pointing Device<br />Small Screen, which can rotate<br />Less Capable CPU / GPU, Small Storage<br />Full Keyboard<br />Accurate Pointing Device<br />Large Screen, multiple monitors<br />Powerful CPU / GPU, Big Disk<br />Physical<br />Typically used on-the-go in an unpredictable environment<br />Good for quick, glanceable information<br />Focused on discrete individual tasks<br />User is often distracted or busy<br />Typically used from fixed, predictable locations<br />Good for open-ended browsing<br />Easy to switch among many tasks<br />User is focused and comfortable<br />Experience<br />
  6. 6. Understanding The Mobile Context<br />Mobile Web Users Have Different Expectations Than Desktop Users<br />Mobile Web users expect immediate access to important information and applications<br />Mobile Web users expect information to be augmented by the real world – time, place, etc.<br />Environmental conditions can vary widely – lighting, background noise, network speed, etc.<br />A user’s surroundings influence how they use a Web application – relative privacy, for example<br />
  7. 7. Design for the Finger, not the Stylus<br /><ul><li>Good finger-friendly design is also stylus-friendly
  8. 8. Don't make the stylus the only way to access features
  9. 9. Fingers are naturally more dexterous than a device like a stylus
  10. 10. It is relatively easy to perform multiple actions with a finger, like flicking, panning, scrolling, tapping, pinching, etc.
  11. 11. The typical size of a fingertip is 40 to 80 pixels. Navigation elements must be sized appropriately to ensure they respond well to the user (7mm).</li></li></ul><li>Be Crisp, Clean, & Succinct<br />Design pages that use fewer fonts & colors<br />Dramatically increases readability<br />Avoid gratuitous graphics and unnecessary interactivity<br />Background images can make the page hard to read<br />Optimize content for the small screen space<br />Scale down images, use short titles<br />Use whitespace to separate elements, but be sparing and judicious<br />
  12. 12. Minimize Required Input<br />Entering data on a phone can be tiresome and error-prone<br />Requires the user to focus on the task<br />Entering a lot of text increases the likelihood of errors and frustration<br />Only require the minimum amount of information to get the job done <br />Provide sensible default values<br />Use cookies/storage to remember previous user input<br />
  13. 13. Adapting Content to Mobile<br />Same page is sent to mobile and desktop, styled differently for each<br />No special content adaptation, result is the desktop site being delivered to the device<br />Parts of site are designed for mobile specifically, kept in separate domain or subfolder, redirected to when necessary<br />Content laid out so it will at least be consumable on a device, special META tags indicate that page is ready for mobile<br />
  14. 14. Josh Holmes<br />@joshholmes<br /> <br />Architect Evangelist, Microsoft Ireland<br />
  15. 15. Key takeaways…<br />Mobile Web has come a long and is only accelerating<br />Think about your mobile strategy<br />Remember your user’s context<br />
  16. 16. Josh Holmes<br />@joshholmes<br /> <br />Architect Evangelist, Microsoft Ireland<br />Is that a Rich Web in your Pocket?<br />