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.
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 />
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 />
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 />
Design for the Finger, not the Stylus<br /><ul><li>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).</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 />
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 />