$30 off During Our Annual Pro Sale. View details »

Designing Mobile Web Experiences

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


March 09, 2012

More Decks by thoughtmerchant

Other Decks in Design


  1. None
  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
  5. None
  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

  18. None
  19. Different Stacks App C Web Rails

  20. None
  21. None
  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...

  31. None
  32. None
  33. None
  34. None
  35. None
  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
  43. None
  44. None
  45. None
  46. Desktop First Technologies

  47. Desktop First • Build once, for all platforms • Complicated

    • Harder to design for • More data to push to the device
  48. None
  49. None
  50. None
  51. areyouresponsive.com

  52. Sweet! How do I design for them?

  53. Draw Use paper an pencil!

  54. None
  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?

  61. None
  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
  64. None
  65. None
  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
  76. None
  77. Testing

  78. Live View

  79. None
  80. None
  81. Steve Berry steve@thoughtmerchants.com www.thoughtmerchants.com @thoughtmerchant Thanks!