design for mobile - brightonseo

46
Justin Taylor - Managing Director @JustinGraphitas design for mobile responsive or adaptive who cares?

Upload: justin-taylor

Post on 30-Oct-2014

3.968 views

Category:

Design


0 download

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:1lZAlbCDaYEE

TRANSCRIPT

Page 1: Design for Mobile - BrightonSEO

Justin Taylor - Managing Director@JustinGraphitas

design for mobileresponsive or adaptive

who cares?

Page 2: Design for Mobile - BrightonSEO

@JustinGraphitas

responsiveor

adaptive

Page 3: Design for Mobile - BrightonSEO

@JustinGraphitas

responsive

Page 4: Design for Mobile - BrightonSEO

@JustinGraphitas

adaptive

Page 5: Design for Mobile - BrightonSEO

@JustinGraphitas

so whichis best?

Page 6: Design for Mobile - BrightonSEO

@JustinGraphitas

mobile stats

Page 7: Design for Mobile - BrightonSEO

@JustinGraphitas

2012201120102009

mobile internetusage

Page 8: Design for Mobile - BrightonSEO

@JustinGraphitas

mobile search with local intent

almost half

Page 9: Design for Mobile - BrightonSEO

@JustinGraphitas

of online sales for mothers day from mobile

Source: Westminister eForum 2012 - The future of mobile

Page 10: Design for Mobile - BrightonSEO

@JustinGraphitas

£13 billionmobile sales in 2013

Source: Bloomberg – http://graphit.as/13billion

Page 11: Design for Mobile - BrightonSEO

@JustinGraphitas

and thats just

Page 12: Design for Mobile - BrightonSEO

@JustinGraphitas

everfastest

mobile is the

growingplatform

Page 13: Design for Mobile - BrightonSEO

@JustinGraphitas

what we know about mobile

users

Page 14: Design for Mobile - BrightonSEO

@JustinGraphitas

users browse with intent

users are less tolerant

can’t find what they are looking for they’re off!

Page 15: Design for Mobile - BrightonSEO

@JustinGraphitas

responsiveor

adaptivewho cares?

Page 16: Design for Mobile - BrightonSEO

@JustinGraphitas

users don’t care about technology

Page 17: Design for Mobile - BrightonSEO

@JustinGraphitas

users care about

finding info quickly and easily

Page 18: Design for Mobile - BrightonSEO

@JustinGraphitas

nhsdirect.nhs.uk

Page 19: Design for Mobile - BrightonSEO

@JustinGraphitas

Page 20: Design for Mobile - BrightonSEO

@JustinGraphitas

Page 21: Design for Mobile - BrightonSEO

@JustinGraphitas

click to callnot enabled

Page 22: Design for Mobile - BrightonSEO

@JustinGraphitas

<a href="tel:111“>Call 111</a>

Page 23: Design for Mobile - BrightonSEO

@JustinGraphitas

Page 24: Design for Mobile - BrightonSEO

@JustinGraphitas

Page 25: Design for Mobile - BrightonSEO

@JustinGraphitas

Page 26: Design for Mobile - BrightonSEO

@JustinGraphitas

Page 27: Design for Mobile - BrightonSEO

@JustinGraphitas

Page 28: Design for Mobile - BrightonSEO

@JustinGraphitas

Page 29: Design for Mobile - BrightonSEO

@JustinGraphitas

Page 30: Design for Mobile - BrightonSEO

@JustinGraphitas

Page 31: Design for Mobile - BrightonSEO

@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/

Page 32: Design for Mobile - BrightonSEO

@JustinGraphitas

www.skinnyties.com www.worldwildlife.org www.bbc.co.uk

www.tb-groupe.fr www.subway.co.uk www.graphitas.co.uk :)

Page 33: Design for Mobile - BrightonSEO

@JustinGraphitas

5 tips in5 mins

Page 34: Design for Mobile - BrightonSEO

@JustinGraphitas

design from a consumers perspective

tip 1

Page 35: Design for Mobile - BrightonSEO

@JustinGraphitas

establish users intentcut the cluttercircumstances of user viewing siterequired outcome

Page 36: Design for Mobile - BrightonSEO

@JustinGraphitas

target your most popular

devices

tip 2

HT: Aleyda Solis @alyeda

Page 37: Design for Mobile - BrightonSEO

@JustinGraphitas

analytics > audience > mobile > devices

Page 38: Design for Mobile - BrightonSEO

@JustinGraphitas

analytics > audience > mobile > devices

Page 39: Design for Mobile - BrightonSEO

@JustinGraphitas

Opera Mobile Emulator

http://www.opera.com/developer/mobile-emulator

Page 40: Design for Mobile - BrightonSEO

@JustinGraphitas

enhance UX with mobile

speci!c html

tip 3

<meta name= ”format-detection”

content= ”telephone=no”> <input

DXWRFRUUHFW ¯RҬ¯�

DXWRFRPSOHWH ¯RҬ¯�

autocapitalize= ¯RҬ¯!�

Page 41: Design for Mobile - BrightonSEO

@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

Page 42: Design for Mobile - BrightonSEO

@JustinGraphitas

put usability !rst

31

2

tip 4

Page 43: Design for Mobile - BrightonSEO

@JustinGraphitas

put consumersrequirements first

THEN worry about these things

responsive

dynamic servingparallel serving

adaptiveSEO

Page 44: Design for Mobile - BrightonSEO

@JustinGraphitas

tip 5

think like a consumer

HT: Dave Trott @davetrott

Page 45: Design for Mobile - BrightonSEO

@JustinGraphitas

think like a consumer

...NOT like the client

Page 46: Design for Mobile - BrightonSEO

Justin Taylor@JustinGraphitas

thank you

www.graphitas.co.uk

www.slideshare.net/JustinGraphitas