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