Designing for mobile (v2) - Digital Marketing Show

1,478 views
1,387 views

Published on

An updated Designing for Mobile deck for the Digital Marketing show.
Shows examples of getting people who are getting it right

Published in: Design, Technology, Business
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
1,478
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
328
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Designing for mobile (v2) - Digital Marketing Show

  1. 1. design for mobile
 responsive or adaptive ares? who c Justin Taylor - Managing Director
 @JustinGraphitas
  2. 2. @JustinGraphitas responsive or adaptive
  3. 3. @JustinGraphitas responsive
  4. 4. @JustinGraphitas adaptive
  5. 5. @JustinGraphitas so which is best?
  6. 6. @JustinGraphitas mobile stats
  7. 7. @JustinGraphitas mobile internet usage 2009 2010 2011 2012
  8. 8. @JustinGraphitas mobile search with local intent almost half
  9. 9. @JustinGraphitas of online sales for mothers day from mobile Source: Westminister eForum 2012 - The future of mobile
  10. 10. @JustinGraphitas £13 billion mobile sales in 2013 Source: Bloomberg – http://graphit.as/13billion
  11. 11. @JustinGraphitas and thats just
  12. 12. @JustinGraphitas mobile is the fastest growing platform ever
  13. 13. @JustinGraphitas what we know about mobile users
  14. 14. @JustinGraphitas users browse with intent users are less tolerant can’t find what they are looking for they’re off!
  15. 15. @JustinGraphitas responsive or adaptivecares? ho w
  16. 16. @JustinGraphitas users don’t care about technology
  17. 17. @JustinGraphitas users care about finding info quickly and easily
  18. 18. @JustinGraphitas nhsdirect.nhs.uk
  19. 19. @JustinGraphitas
  20. 20. @JustinGraphitas
  21. 21. @JustinGraphitas click to call
 not enabled
  22. 22. @JustinGraphitas <a href="tel:111“>Call 111</a>!
  23. 23. @JustinGraphitas
  24. 24. @JustinGraphitas
  25. 25. @JustinGraphitas
  26. 26. @JustinGraphitas
  27. 27. @JustinGraphitas
  28. 28. @JustinGraphitas
  29. 29. @JustinGraphitas
  30. 30. @JustinGraphitas
  31. 31. @JustinGraphitas <?php! ! require_once '../Mobile_Detect.php';! $detect = new Mobile_Detect;! if($detect->isMobile() ) {!   //redirect to mobile site!   header ('HTTP/1.1 301 Moved Permanently');!   header ('Location: http://m.mobilesite.co.uk/');! }else{!   //load site normally! ! }! ! ?>! ! https://code.google.com/p/php-mobile-detect/ http://detectmobilebrowsers.com/
  32. 32. @JustinGraphitas
  33. 33. @JustinGraphitas
  34. 34. @JustinGraphitas getting it right
  35. 35. @JustinGraphitas
  36. 36. @JustinGraphitas simple
 uncluttered
 interface
  37. 37. @JustinGraphitas location services
 …yes please!!
  38. 38. @JustinGraphitas large hit
 areas
  39. 39. @JustinGraphitas users want
 to sort by these
  40. 40. @JustinGraphitas autofill ON
 autocorrect OFF
  41. 41. @JustinGraphitas email specific
 keyboard
  42. 42. @JustinGraphitas numeric keypad
 for
 number fields
  43. 43. @JustinGraphitas
  44. 44. @JustinGraphitas
  45. 45. @JustinGraphitas
  46. 46. @JustinGraphitas
  47. 47. @JustinGraphitas
  48. 48. @JustinGraphitas www.skinnyties.com www.worldwildlife.org www.bbc.co.uk www.tb-groupe.fr www.subway.co.uk www.graphitas.co.uk :)
  49. 49. @JustinGraphitas 5 tips in 5 mins
  50. 50. tip 1 @JustinGraphitas design from a consumers perspective
  51. 51. @JustinGraphitas establish users intent cut the clutter circumstances of user viewing site required outcome
  52. 52. tip 2 @JustinGraphitas target your most popular devices HT: Aleyda Solis @alyeda
  53. 53. @JustinGraphitas analytics > audience > mobile > devices
  54. 54. @JustinGraphitas analytics > audience > mobile > devices
  55. 55. @JustinGraphitas Opera Mobile Emulator http://www.opera.com/developer/mobile-emulator
  56. 56. tip 3 @JustinGraphitas enhance UX with mobile specific html ”fo <meta rma t-d name= et ”te conte ectio n lep n” hon t= e=n o”> <in put aut oca pit ali ze=
  57. 57. @JustinGraphitas click to call view desktop site click to sms location services disable auto correct on name fields disable automatic detection of numbers use relevant keyboard
  58. 58. tip 4 @JustinGraphitas put usability first 2 1 3
  59. 59. @JustinGraphitas put consumers requirements first THEN worry about these things responsive SEO adaptive parallel serving dynamic serving
  60. 60. tip 5 @JustinGraphitas think like a consumer HT: Dave Trott @davetrott
  61. 61. @JustinGraphitas think like a consumer ...NOT like the client
  62. 62. thank you
 Justin Taylor
 @JustinGraphitas 
 www.graphitas.co.uk www.slideshare.net/JustinGraphitas

×