Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Adaptive Mobile UX Design

5,880 views

Published on

An overview for user experience designers of mobile experience considerations, approaches to creating mobile web sites, and some of the new capabilities for interaction and UI adaptation introduced via HTML5 and CSS3.

Full text transcript of my talk available at: http://jenmatson.com

Published in: Design
  • Be the first to comment

Adaptive Mobile UX Design

  1. 1. Adaptive Mobile UX Design Pragmatic mobile web techniquesphoto: http://www.flickr.com/photos/matthijs/3514892055/
  2. 2. @nstop
  3. 3. @nstopphoto: Ashley Pomeroy
  4. 4. @nstopphoto: http://www.flickr.com/photos/ferret111/4538338004/
  5. 5. @nstop
  6. 6. @nstop
  7. 7. @nstop
  8. 8. @nstop
  9. 9. @nstop
  10. 10. @nstop
  11. 11. @nstopphoto: http://www.flickr.com/photos/kzirkel/2374822053/
  12. 12. What is Adaptive Mobile UX Design? @nstop
  13. 13. What is Adaptive Mobile UX Design? @nstop
  14. 14. @nstopphoto: http://www.flickr.com/photos/eugeneflores/3530886940/
  15. 15. @nstopphoto: http://www.flickr.com/photos/toby_d1/2976481163/
  16. 16. @nstopphoto: http://www.flickr.com/photos/toby_d1/2976481163/ http://www.flickr.com/photos/toby_d1/2976479343/
  17. 17. @nstopphoto: http://www.flickr.com/photos/toby_d1/2976481163/ http://www.flickr.com/photos/toby_d1/2976476165/ http://www.flickr.com/photos/toby_d1/2976479343/
  18. 18. @nstopphoto: http://www.flickr.com/photos/toby_d1/2976474501/ http://www.flickr.com/photos/toby_d1/2976476165/ http://www.flickr.com/photos/toby_d1/2976479343/ http://www.flickr.com/photos/toby_d1/2976481163/
  19. 19. @nstopphoto: http://www.flickr.com/photos/toby_d1/2976474501/ http://www.flickr.com/photos/toby_d1/3030796938/ http://www.flickr.com/photos/toby_d1/2976476165/ http://www.flickr.com/photos/toby_d1/2976479343/ http://www.flickr.com/photos/toby_d1/2976481163/
  20. 20. @nstop
  21. 21. @nstopphoto: http://www.flickr.com/photos/gardenbeth/3466767207/
  22. 22. @nstopphoto: http://www.flickr.com/photos/elmada/437435881/
  23. 23. @nstop
  24. 24. Design considerations @nstop • • •
  25. 25. Design considerations @nstop • • •
  26. 26. Design considerations @nstop • • •
  27. 27. Design considerations @nstop • • •
  28. 28. @nstop
  29. 29. A balanced approach @nstop
  30. 30. A balanced approach @nstop •
  31. 31. A balanced approach @nstop • •
  32. 32. A balanced approach @nstop • • •
  33. 33. @nstop
  34. 34. HTML5 features @nstop
  35. 35. HTML5 features @nstop •
  36. 36. HTML5 features @nstop • •
  37. 37. HTML5 features @nstop • • •
  38. 38. HTML5 features @nstop • • • •
  39. 39. HTML5 features @nstop • • • • •
  40. 40. Smart web forms @nstop
  41. 41. Smart web forms @nstop
  42. 42. Smart web forms @nstop
  43. 43. Smart web forms @nstop <input type="number">
  44. 44. Smart web forms @nstop
  45. 45. Smart web forms @nstop
  46. 46. Smart web forms @nstop <input type="email">
  47. 47. Geolocation @nstop
  48. 48. Geolocation @nstop
  49. 49. Geolocation @nstop
  50. 50. Dynamic device orientation @nstop
  51. 51. Dynamic device orientation @nstop
  52. 52. Web-native video playback @nstop
  53. 53. Web-native video playback @nstop
  54. 54. Web-native video playback @nstop
  55. 55. Web-native video playback @nstop
  56. 56. Semantic web markup @nstop source: http://slides.html5rocks.com
  57. 57. Semantic web markup @nstop source: http://slides.html5rocks.com
  58. 58. CSS3: media queries @nstop
  59. 59. CSS3: media queries @nstop •
  60. 60. CSS3: media queries @nstop • •
  61. 61. CSS3: media queries @nstop • • •
  62. 62. Screen size @nstop
  63. 63. Screen size @nstop
  64. 64. Screen size @nstop
  65. 65. Screen size @nstop <link rel="stylesheet" type="text/ css" media="screen and (max-device- width: 480px)" href="phone.css">
  66. 66. Screen orientation @nstop <link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”> <link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>source: http://robertnyman.com/css3/media-queries/media-queries.html
  67. 67. Screen orientation @nstop <link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”> <link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>source: http://robertnyman.com/css3/media-queries/media-queries.html
  68. 68. Screen resolution @nstop
  69. 69. Screen resolution @nstop <link rel="stylesheet" type="text/css" media="screen and (max- device-width: 480px) and (resolution: 163dpi)" href="phone.css" />
  70. 70. Feature support in mobile web browser, per platform @nstop
  71. 71. @nstopphoto: http://www.flickr.com/photos/andreasl/4558473029/
  72. 72. @nstop• Think any device, any screen,any context• Work with developers to buildsmart sites that have someflexibility• Modern smartphone browserscan handle HTML5 and CSS3• Adaptive web experiences arenot limited to mobile photo: http://www.flickr.com/photos/andreasl/4558473029/
  73. 73. Additional reading @nstop • • •
  74. 74. @nstopTHANK YOU

×