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

1. design for mobile
responsive or adaptive
ares?
who c
Justin Taylor - Managing Director
@JustinGraphitas

2. @JustinGraphitas
responsive
or
adaptive

3. @JustinGraphitas
responsive

4. @JustinGraphitas
adaptive

5. @JustinGraphitas
so which
is best?

6. @JustinGraphitas
mobile stats

7. @JustinGraphitas
mobile internet
usage
2009
2010
2011
2012

8. @JustinGraphitas
mobile search with
local intent
almost half

9. @JustinGraphitas
of online sales for
mothers day from mobile
Source: Westminister eForum 2012 - The future of mobile

10. @JustinGraphitas
£13 billion
mobile sales in 2013
Source: Bloomberg – http://graphit.as/13billion

11. @JustinGraphitas
and thats just

12. @JustinGraphitas
mobile is the
fastest
growing
platform
ever

13. @JustinGraphitas
what we know
about mobile
users

14. @JustinGraphitas
users browse with intent
users are less tolerant
can’t find what they are
looking for they’re off!

15. @JustinGraphitas
responsive
or
adaptivecares?
ho
w

16. @JustinGraphitas
users don’t
care about
technology

17. @JustinGraphitas
users care about
finding info
quickly and easily

18. @JustinGraphitas
nhsdirect.nhs.uk

19. @JustinGraphitas

20. @JustinGraphitas

21. @JustinGraphitas
click to call
not enabled

22. @JustinGraphitas
<a href="tel:111“>Call 111</a>!

23. @JustinGraphitas

24. @JustinGraphitas

25. @JustinGraphitas

26. @JustinGraphitas

27. @JustinGraphitas

28. @JustinGraphitas

29. @JustinGraphitas

30. @JustinGraphitas

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. @JustinGraphitas

33. @JustinGraphitas

34. @JustinGraphitas
getting it
right

35. @JustinGraphitas

36. @JustinGraphitas
simple
uncluttered
interface

37. @JustinGraphitas
location services
…yes please!!

38. @JustinGraphitas
large hit
areas

39. @JustinGraphitas
users want
to sort by these

40. @JustinGraphitas
autofill ON
autocorrect OFF

41. @JustinGraphitas
email specific
keyboard

42. @JustinGraphitas
numeric keypad
for
number fields

43. @JustinGraphitas

44. @JustinGraphitas

45. @JustinGraphitas

46. @JustinGraphitas

47. @JustinGraphitas

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. @JustinGraphitas
5 tips in
5 mins

50. tip
1
@JustinGraphitas
design from
a consumers
perspective

51. @JustinGraphitas
establish users intent
cut the clutter
circumstances of user
viewing site
required outcome

52. tip
2
@JustinGraphitas
target your
most popular
devices
HT: Aleyda Solis @alyeda

53. @JustinGraphitas
analytics > audience > mobile > devices

54. @JustinGraphitas
analytics > audience > mobile > devices

55. @JustinGraphitas
Opera Mobile Emulator
http://www.opera.com/developer/mobile-emulator

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. @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. tip
4
@JustinGraphitas
put usability
first
2
1
3

59. @JustinGraphitas
put consumers
requirements first
THEN worry about these things
responsive
SEO
adaptive
parallel serving dynamic serving

60. tip
5
@JustinGraphitas
think like a
consumer
HT: Dave Trott @davetrott

61. @JustinGraphitas
think like a consumer
...NOT like the client

62. thank you
Justin Taylor
@JustinGraphitas
www.graphitas.co.uk
www.slideshare.net/JustinGraphitas