Is that a Rich Web in Your Pocket?

  • 3,167 views
Uploaded 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 …

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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
3,167
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
13
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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