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