Josh Holmes
@joshholmes
http://www.joshholmes.com
Architect Evangelist, Microsoft Ireland
IS THAT A RICH WEB IN YOUR POCKET?
WE'VE COME A LONG WAY
Remember this?<?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>
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 <CANVAS> and <AUDIO> 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>
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)
UNDERSTANDING THE MOBILE CONTEXT
The Mobile Web isDifferent From the Desktop
Full KeyboardAccurate Pointing DeviceLarge Screen, multiple monitorsPowerful CPU / GPU, Big Disk
Limited / Virtual KeyboardFinger Pointing DeviceSmall Screen, which can rotateLess Capable CPU / GPU, Small StoragePH
YSIC
ALEX
PERI
ENCE Typically used from fixed,
predictable locationsGood for open-ended browsingEasy to switch among many tasksUser is focused and comfortable
Typically used on-the-go in an unpredictable environmentGood for quick, glanceable informationFocused on discrete individual tasksUser is often distracted or busy
UNDERSTANDING THE MOBILE CONTEXTMobile 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
DESIGN FOR THE FINGER, NOT THE STYLUS
Good finger-friendly design is also stylus-friendly Don't make the stylus the only way to access features
Fingers are naturally more dexterous than a device like a stylus It is relatively easy to perform multiple actions with a finger, like flicking, panning, scrolling, tapping, pinching, etc.
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
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
ADAPTING CONTENT TO MOBILE
Do Nothing Basic Mobile Adaptation Multi-Serving Content Mobile-Specific Design
No special content adaptation, result is the desktop site being delivered to the device
Content laid out so it will at least be consumable on a device, special META tags indicate that page is ready for mobile
Same page is sent to mobile and desktop, styled differently for each
Parts of site are designed for mobile specifically, kept in separate domain or subfolder, redirected to when necessary
• Josh Holmes
• @joshholmes
• http://www.joshholmes.com
• Architect Evangelist, Microsoft Ireland
KEY TAKEAWAYS…
• Mobile Web has come a long and is only accelerating
• Think about your mobile strategy
• Remember your user’s context
Josh Holmes
@joshholmes
http://www.joshholmes.com
Architect Evangelist, Microsoft Ireland
IS THAT A RICH WEB IN YOUR POCKET?