design for mobile (responsive or adaptive, who cares?) by justin taylor
Post on 14-Dec-2014
99 Views
Preview:
DESCRIPTION
TRANSCRIPT
Justin Taylor - Managing Director @JustinGraphitas
design for mobileresponsive or adaptive
who cares?
@JustinGraphitas
responsive or
adaptive
@JustinGraphitas
responsive
@JustinGraphitas
adaptive
@JustinGraphitas
so which is best?
@JustinGraphitas
mobile stats
@JustinGraphitas
2012201120102009
mobile internet usage
@JustinGraphitas
mobile search with local intent
almost half
@JustinGraphitas
of online sales for mothers day from mobile
Source: Westminister eForum 2012 - The future of mobile
@JustinGraphitas
£13 billion mobile sales in 2013
Source: Bloomberg – http://graphit.as/13billion
@JustinGraphitas
and thats just
@JustinGraphitas
everfastest
mobile is the
growingplatform
@JustinGraphitas
what we know about mobile
users
@JustinGraphitas
users browse with intent
users are less tolerant
can’t find what they are looking for they’re off!
@JustinGraphitas
responsive or
adaptivewho cares?
@JustinGraphitas
users don’t care about technology
@JustinGraphitas
users care about finding info
quickly and easily
@JustinGraphitas
nhsdirect.nhs.uk
@JustinGraphitas
@JustinGraphitas
@JustinGraphitas
click to callnot enabled
@JustinGraphitas
<a href="tel:111“>Call 111</a>!
@JustinGraphitas
@JustinGraphitas
@JustinGraphitas
@JustinGraphitas
@JustinGraphitas
@JustinGraphitas
@JustinGraphitas
@JustinGraphitas
@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/
@JustinGraphitas
@JustinGraphitas
@JustinGraphitas
getting it right
@JustinGraphitas
@JustinGraphitas
simpleunclutteredinterface
@JustinGraphitas
location services…yes please!!
@JustinGraphitas
large hit areas
@JustinGraphitas
users wantto sort by these
@JustinGraphitas
autofill ONautocorrect OFF
@JustinGraphitas
email specifickeyboard
@JustinGraphitas
numeric keypadfor
number fields
@JustinGraphitas
@JustinGraphitas
@JustinGraphitas
@JustinGraphitas
@JustinGraphitas
@JustinGraphitas
www.skinnyties.com www.worldwildlife.org www.bbc.co.uk
www.tb-groupe.fr www.subway.co.uk www.graphitas.co.uk :)
@JustinGraphitas
5 tips in 5 mins
@JustinGraphitas
design from a consumers perspective
tip 1
@JustinGraphitas
establish users intent cut the clutter circumstances of user viewing site required outcome
@JustinGraphitas
target your most popular
devices
tip 2
HT: Aleyda Solis @alyeda
@JustinGraphitas
analytics > audience > mobile > devices
@JustinGraphitas
analytics > audience > mobile > devices
@JustinGraphitas
Opera Mobile Emulator
http://www.opera.com/developer/mobile-emulator
@JustinGraphitas
enhance UX with mobile
specific html
tip 3
<meta name= ”format-detection”
content= ”telephone=no”> <input
DXWRFRUUHFW ¯RҬ¯�
DXWRFRPSOHWH ¯RҬ¯�
autocapitalize= ¯RҬ¯!�
@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
@JustinGraphitas
put usability first
31
2
tip 4
@JustinGraphitas
put consumers requirements first
THEN worry about these things
responsive
dynamic servingparallel serving
adaptiveSEO
@JustinGraphitas
tip 5
think like a consumer
HT: Dave Trott @davetrott
@JustinGraphitas
think like a consumer
...NOT like the client
Justin Taylor @JustinGraphitas
thank you
www.graphitas.co.uk
www.slideshare.net/JustinGraphitas
top related