design for mobile - brightonseo
DESCRIPTION
It's no secret, the rapid growth of mobile has made site owners sit up and pay attention, as a result responsive and adaptive have become the buzzwords of the moment. Avoid the common pitfalls of building mobile optimised websites and rediscover the lost art of building sites for users. Read more: http://snipi.co/l/0:1lZAlbCDaYEETRANSCRIPT
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