Is that a Rich Web in Your Pocket?

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
<?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?

We've Come a Long Way
<!DOCTYPE html>
<html id="demohtml" xmlns="http://www.w3.org/1999/xhtml" class="testdrive">
<head>

<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">

<!--<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
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

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

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
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

Josh Holmes
@joshholmes

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
Is that a Rich Web in your Pocket?

http://blogs.oracle.com	345
http://www.joshholmes.com	123
http://userassistance.tumblr.com	22
url_unknown	7
http://www.slideshare.net	2
http://prsync.com	2
http://paper.li	1
http://translate.googleusercontent.com	1

Is that a Rich Web in Your Pocket?

by Josh Holmes on Jun 30, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 503

Statistics

Is that a Rich Web in Your Pocket? — Presentation Transcript