Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor
-
Upload
digitalmarketingshow -
Category
Marketing
-
view
99 -
download
2
description
Transcript of Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor
![Page 1: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/1.jpg)
Justin Taylor - Managing Director @JustinGraphitas
design for mobileresponsive or adaptive
who cares?
![Page 2: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/2.jpg)
@JustinGraphitas
responsive or
adaptive
![Page 3: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/3.jpg)
@JustinGraphitas
responsive
![Page 4: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/4.jpg)
@JustinGraphitas
adaptive
![Page 5: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/5.jpg)
@JustinGraphitas
so which is best?
![Page 6: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/6.jpg)
@JustinGraphitas
mobile stats
![Page 7: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/7.jpg)
@JustinGraphitas
2012201120102009
mobile internet usage
![Page 8: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/8.jpg)
@JustinGraphitas
mobile search with local intent
almost half
![Page 9: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/9.jpg)
@JustinGraphitas
of online sales for mothers day from mobile
Source: Westminister eForum 2012 - The future of mobile
![Page 10: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/10.jpg)
@JustinGraphitas
£13 billion mobile sales in 2013
Source: Bloomberg – http://graphit.as/13billion
![Page 11: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/11.jpg)
@JustinGraphitas
and thats just
![Page 12: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/12.jpg)
@JustinGraphitas
everfastest
mobile is the
growingplatform
![Page 13: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/13.jpg)
@JustinGraphitas
what we know about mobile
users
![Page 14: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/14.jpg)
@JustinGraphitas
users browse with intent
users are less tolerant
can’t find what they are looking for they’re off!
![Page 15: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/15.jpg)
@JustinGraphitas
responsive or
adaptivewho cares?
![Page 16: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/16.jpg)
@JustinGraphitas
users don’t care about technology
![Page 17: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/17.jpg)
@JustinGraphitas
users care about finding info
quickly and easily
![Page 18: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/18.jpg)
@JustinGraphitas
nhsdirect.nhs.uk
![Page 19: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/19.jpg)
@JustinGraphitas
![Page 20: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/20.jpg)
@JustinGraphitas
![Page 21: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/21.jpg)
@JustinGraphitas
click to callnot enabled
![Page 22: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/22.jpg)
@JustinGraphitas
<a href="tel:111“>Call 111</a>!
![Page 23: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/23.jpg)
@JustinGraphitas
![Page 24: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/24.jpg)
@JustinGraphitas
![Page 25: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/25.jpg)
@JustinGraphitas
![Page 26: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/26.jpg)
@JustinGraphitas
![Page 27: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/27.jpg)
@JustinGraphitas
![Page 28: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/28.jpg)
@JustinGraphitas
![Page 29: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/29.jpg)
@JustinGraphitas
![Page 30: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/30.jpg)
@JustinGraphitas
![Page 31: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/31.jpg)
@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/
![Page 32: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/32.jpg)
@JustinGraphitas
![Page 33: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/33.jpg)
@JustinGraphitas
![Page 34: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/34.jpg)
@JustinGraphitas
getting it right
![Page 35: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/35.jpg)
@JustinGraphitas
![Page 36: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/36.jpg)
@JustinGraphitas
simpleunclutteredinterface
![Page 37: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/37.jpg)
@JustinGraphitas
location services…yes please!!
![Page 38: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/38.jpg)
@JustinGraphitas
large hit areas
![Page 39: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/39.jpg)
@JustinGraphitas
users wantto sort by these
![Page 40: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/40.jpg)
@JustinGraphitas
autofill ONautocorrect OFF
![Page 41: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/41.jpg)
@JustinGraphitas
email specifickeyboard
![Page 42: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/42.jpg)
@JustinGraphitas
numeric keypadfor
number fields
![Page 43: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/43.jpg)
@JustinGraphitas
![Page 44: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/44.jpg)
@JustinGraphitas
![Page 45: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/45.jpg)
@JustinGraphitas
![Page 46: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/46.jpg)
@JustinGraphitas
![Page 47: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/47.jpg)
@JustinGraphitas
![Page 48: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/48.jpg)
@JustinGraphitas
www.skinnyties.com www.worldwildlife.org www.bbc.co.uk
www.tb-groupe.fr www.subway.co.uk www.graphitas.co.uk :)
![Page 49: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/49.jpg)
@JustinGraphitas
5 tips in 5 mins
![Page 50: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/50.jpg)
@JustinGraphitas
design from a consumers perspective
tip 1
![Page 51: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/51.jpg)
@JustinGraphitas
establish users intent cut the clutter circumstances of user viewing site required outcome
![Page 52: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/52.jpg)
@JustinGraphitas
target your most popular
devices
tip 2
HT: Aleyda Solis @alyeda
![Page 53: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/53.jpg)
@JustinGraphitas
analytics > audience > mobile > devices
![Page 54: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/54.jpg)
@JustinGraphitas
analytics > audience > mobile > devices
![Page 55: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/55.jpg)
@JustinGraphitas
Opera Mobile Emulator
http://www.opera.com/developer/mobile-emulator
![Page 56: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/56.jpg)
@JustinGraphitas
enhance UX with mobile
specific html
tip 3
<meta name= ”format-detection”
content= ”telephone=no”> <input
DXWRFRUUHFW ¯RҬ¯�
DXWRFRPSOHWH ¯RҬ¯�
autocapitalize= ¯RҬ¯!�
![Page 57: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/57.jpg)
@JustinGraphitas
click to call view desktop site
click to sms
disable auto correct on name fields
disable automatic detection of numbers
location services
use relevant keyboard
![Page 58: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/58.jpg)
@JustinGraphitas
put usability first
31
2
tip 4
![Page 59: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/59.jpg)
@JustinGraphitas
put consumers requirements first
THEN worry about these things
responsive
dynamic servingparallel serving
adaptiveSEO
![Page 60: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/60.jpg)
@JustinGraphitas
tip 5
think like a consumer
HT: Dave Trott @davetrott
![Page 61: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/61.jpg)
@JustinGraphitas
think like a consumer
...NOT like the client
![Page 62: Design for Mobile (Responsive or Adaptive, who cares?) by Justin Taylor](https://reader037.fdocuments.us/reader037/viewer/2022102922/548c9abbb47959776d8b4868/html5/thumbnails/62.jpg)
Justin Taylor @JustinGraphitas
thank you
www.graphitas.co.uk
www.slideshare.net/JustinGraphitas