Download - Design for Mobile - BrightonSEO
Justin Taylor - Managing Director@JustinGraphitas
design for mobileresponsive or adaptive
who cares?
@JustinGraphitas
responsiveor
adaptive
@JustinGraphitas
responsive
@JustinGraphitas
adaptive
@JustinGraphitas
so whichis best?
@JustinGraphitas
mobile stats
@JustinGraphitas
2012201120102009
mobile internetusage
@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 billionmobile 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
responsiveor
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
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 in5 mins
@JustinGraphitas
design from a consumers perspective
tip 1
@JustinGraphitas
establish users intentcut the cluttercircumstances of user viewing siterequired 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
speci!c 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 correcton name fields
disable automatic detection of numbers
location services
use relevant keyboard
@JustinGraphitas
put usability !rst
31
2
tip 4
@JustinGraphitas
put consumersrequirements 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
