Is that a Rich Web in Your Pocket?
•Descargar como PPTX, PDF•
0 recomendaciones•2,558 vistas
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.
Recomendados
Más contenido relacionado
Similar a Is that a Rich Web in Your Pocket?
Similar a Is that a Rich Web in Your Pocket? (20)
Más de Josh Holmes
Más de Josh Holmes (20)
Último
Último (20)
Is that a Rich Web in Your Pocket?
- 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 <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>
- 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
- 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.
- 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?