Designing Mobile Web Experiences

This introductory session is for designers and developers looking to create their first mobile web experience. We will introduce you to many of the tools and tactics you need to create a usable mobile web experience.

First we will start with outlining mobile web as a platform versus app creation. We will cover the basic considerations in creating a mobile web experience, user context, how human factors play into mobile designs, and mobile usability heuristics.

Next we will go over the methods and tools available to help you bring your mobile web experience from fragile ideas, to paper, to then to pushing pixels around in Photoshop. We will be sure to cover how to navigate all the different displays in mobile, their resolutions, and making sure to outline tactics to take advantage of the iPhone Retina display.

At the end we will have 20 minutes to go over any questions, or review designs from participants.

For more information about the author visit: www.thoughtmerchants.com

Transcript

2. Quantitative Observations
3. Almost half of American adults have smart phones. 46%, 53% among cell phone owners. Just 13% of people 65 or older. http://pewinternet.org/Reports/2012/Smartphone-Update-2012.aspx 50% Have Smart Phones!
4. One word that best describes how you feel about your cell phone. 72% positive responses http://pewinternet.org/Infographics/2011/Smartphones.aspx
6. What you do when you watch TV http://mashable.com/2011/10/13/tv-tablet-smartphone-study-nielsen/
7. http://mashable.com/2011/10/13/tv-tablet-smartphone-study-nielsen/
8. Time Spent http://blog.flurry.com/bid/63907/Mobile-Apps-Put-the-Web-in-Their-Rear-view-Mirror
9. Time Spent http://blog.flurry.com/bid/63907/Mobile-Apps-Put-the-Web-in-Their-Rear-view-Mirror
10. Money money money! http://blog.flurry.com
11. Time & Usage http://blog.flurry.com
12. Qualitative Observations
13. Basic Computer Interaction Skills
14. Advanced Gesturing on Mobile Device
15. Phone Computer
16. Email Interrupts Everything
17. vs. App Web
19. Different Stacks App C Web Rails
22. Webkit Based Browsers RIP
23. Different Stacks Mobile Web Rails Web Rails
24. Sooooo.... App or Web?
25. Apps (Pros) • Best experiences (right now) • Limits connectivity problems • Usability is clearly better • Can control entire experience
26. Apps (Cons) • Expensive • Limited to a particular platform • Requires another skill-set • No continuous deployment
27. Web (Pros) • Same skill-set as the rest of the web • Build once, use everywhere • Continuous deployment! • Can be in the same codebase as your web app • Flexible • Tight integration with rest of the web
28. Web (Cons) • Connectivity* • Rely on browsing experience of platform • Not as tight of an integration to the platform
29. We are done!
30. Whoa whoa whoa...
36. User Content Context
37. Different Approaches
38. Mobile Web Regular Web Site
39. Mobile First
40. Desktop First
41. Mobile First
42. Mobile First • Less data to push to the phone • Optimized for the tiny screen • Plenty of frameworks • Well defined space • Emulating native app patterns
46. Desktop First Technologies
47. Desktop First • Build once, for all platforms • Complicated • Harder to design for • More data to push to the device
51. areyouresponsive.com
52. Sweet! How do I design for them?
53. Draw Use paper an pencil!
55. Careful to not do too many “big” drawings.
56. All About The Flow www.paperwireframes.com
57. ...But I need inspiration...
58. ...But I need inspiration... Users are not on your web site most of the time. Leverage the patterns that already exist.
59. ...But I need inspiration... mobile-patterns.com
60. Ok ok - now what about making them pixel perfect?
62. http://www.teehanlax.com/downloads/
63. iOS Style Guide: Apple iOS Style Guide https://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/ Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html Android Style Guide: http://developer.android.com/design/index.html
66. I can tell by the pixels!
67. Errr ok. But the iPhone now has different pixel density. How do I design for that?
68. iPhone < 4 163 dpi iPhone 4+ 326 dpi
69. iPhone 320 x 480 iPhone & iPod Retina 640 x 960 iPad 768 x 1024 iPad Retina 1536 x 2048
70. Auto scaling 2x
71. ...But I need inspiration...
72. .my-­‐button  {        width:    20px;        height:  20px;        background-­‐image:  url(retina-­‐images/my-­‐button-­‐40x40.png);        -­‐webkit-­‐background-­‐size:  20px  20px;        background-­‐size:  20px  20px; } <meta  name="viewport"  content="width=device-­‐width;  initial-­‐scale=1.0;  maximum-­‐scale=1.0;"> <img  src="retina-­‐images/my-­‐button-­‐40x40.png"  width="20"  height="20"> http://labs.thesedays.com/blog/2010/07/16/10-tips-for-designing-mobile-websites/ https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW1
73. http://www.weedygarden.net/2010/10/13/retina-display-and-css-background-images/
74. ...But I need inspiration...
75.    <link  rel="shortcut  icon"  href="/images/favicon.ico">    <link  rel="apple-­‐touch-­‐icon"  href="/images/apple-­‐touch-­‐icon.png">    <link  rel="apple-­‐touch-­‐icon"  sizes="72x72"  href="/images/apple-­‐touch-­‐icon-­‐72x72.png"  />    <link  rel="apple-­‐touch-­‐icon"  sizes="114x114"  href="/images/apple-­‐touch-­‐icon-­‐114x114.png"  /> Home Screen Icon
77. Testing
78. Live View
81. Steve Berry steve@thoughtmerchants.com www.thoughtmerchants.com @thoughtmerchant Thanks!