adapting to responsive web design - marketing week live 2014 - 26, june 2014

60
ADAPTING TO A RESPONSIVE WEB DESIGN

Upload: matt-gibson

Post on 27-Jan-2015

103 views

Category:

Design


0 download

DESCRIPTION

Slides from my talk on 26, June 2014 at Marketing Week Live on the principles of responsive web design. #MWL14

TRANSCRIPT

Page 1: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

ADAPTING TO A RESPONSIVE WEB DESIGN

Page 2: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

HELLO I’m Matt @duckymatt !

!

!

!

!

!

Page 3: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

@cyberduck_uk cyber-duck.co.uk

Page 4: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

HOW DO WE DEFINE RESPONSIVE?

Page 5: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

To react quickly and positively.

Page 6: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

Responsive web design is a design approach that aims to create interfaces that react quickly and positively to the user’s conditions.

Page 7: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

PEOPLE WILL ACCESS OUR WEBSITES IN WAYS WE HADN’T EVEN CONSIDERED YET

Image Copyright: Walt Disney Pictures & Tim Burton Pictures

Page 8: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

THE PREVIOUS STATE(S) OF OUR OWN WEBSITE

“DESKTOP” SITE (2011)

“TABLET” SITE (LATER 2011)

*Not to scale :)

“MOBILE” SITE (2012)

Page 9: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

OUR SEPARATE MOBILE WEBSITES: A STOP-GAP STRATEGY

Page 10: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

SO WHY GO RESPONSIVE?

Page 11: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

3 FACTORS

Image Copyright: L.A. Films & Home Box Office (HBO)

Page 12: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

MULTIPLE CODE BASES 1

CONTENT STRATEGY2

KNOWN UNKNOWNS3

Page 13: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014
Page 14: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

SETTING 4 GOALS FOR A RESPONSIVE DESIGN

Image Copyright: Chartoff-Winkler Productions & United Artists

Page 15: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

CONTENT PARITY

Credit: http://wtfmobileweb.com/

THE SAME CONTENT SHOULD BE AVAILABLE ON ALL PLATFORMS

1

Page 16: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

SPEED MATTERSBECAUSE PERFORMANCE AFFECTS EVERYONE

2

Image Copyright: Universal Pictures

Page 17: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

FUTURE FRIENDLY

See: http://futurefriend.ly/

CUT DOWN ON MAINTENANCE AND SUPPORT KNOWN UNKNOWNS

3

Image Copyright: Universal TV

Page 18: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

ACCESSIBILITYSTYLES, BACKGROUNDS AND JAVASCRIPT ARE PROGRESSIVE ENHANCEMENTS

4

Photo Credit: Neil McKenzie: http://www.flickr.com/photos/furbyx4/2968376257/

Page 19: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

CONTENT PARITY

1

Page 20: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

ASSUMPTIONS

1

Image Copyright: BBC

Page 21: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

You don't get to decide which device people use to access

your website.

KAREN MCGRANE

http://alistapart.com/article/your-content-now-mobile

Photo credit: Eirik Helland Urke: http://www.flickr.com/photos/webdagene/6149954950/

Page 22: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

Credit: http://xkcd.com/773/

1

Page 23: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

1

Page 24: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

RESEARCHING CONTENT STRATEGY SPEAKING TO EXISTING CUSTOMERS

GOOGLE ANALYTICS

CRAZYEGG

LEAD FORENSICS

1

Image Copyright: Warner Bros.

Page 25: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

OUR CONTENT DEFINES THE LAYOUTS WE NEED

!

NOT THE OTHER WAY AROUND

1

Page 26: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

SPEED MATTERS

2

Page 27: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

2

moto.oakley.com

Page 28: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

If you were data roaming on an iPhone, at $9 per Mb data

roaming, that web page would cost me $785 to look at on my

iPhone!

ANDREW CLARKE

http://alistapart.com/article/dao/

Photo credit: Jeffrey Zeldman: http://www.flickr.com/photos/zeldman/12621077243

http://dandelion-burdock.com/articles/view/the-weight-of-the-web

Page 29: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

DOES RESPONSIVE = POOR PERFORMANCE?

Credit: Guy Podjarny - Creator of Mobitest: http://www.guypo.com/mobile/what-are-responsive-websites-made-of/

2

Page 30: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

To react quickly and positively.

2

Page 31: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

IT’S EASY TO CONFUSE IMPLEMENTATION WITH

TECHNIQUE

2

Image Copyright: Metro-Goldwyn-Mayer (MGM)

Page 32: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

MAKING PERFORMANCE A PRIORITY !

SETTING A PERFORMANCE “BUDGET”

2

timkadlec.com/2013/01/setting-a-performance-budget/

Image Copyright: Twentieth Century Fox Film Corporation

Page 33: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

ONLY LOADING WHAT WE NEED

WHEN WE NEED IT.

2

Page 34: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

To load the Facebook, Twitter and Google social media buttons for a total of 19 requests takes

246.7 KB in bandwidth.

http://zurb.com/article/883/small-painful-buttons-why-social-media-bu

2

Page 35: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

JAVASCRIPT2

http://requirejs.org/

Page 36: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

IMAGES2

27 KB 266 KB

USING THE RIGHT IMAGE FOR THE RIGHT TASK

Page 37: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

CACHING2

SERVING FILES FASTER

http://www.cloudflare.com/ https://www.varnish-cache.org/

Page 38: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

2

Page 39: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

FUTURE FRIENDLINESS

3

Page 40: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

THE WEB DOESN’T HAVE A FIXED WIDTH

3

Page 41: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

We should embrace the fact that the web doesn’t have the same constraints [as the printed page]

and design for this flexibility.

JOHN ALLSOPP

http://alistapart.com/article/dao/

Photo credit: TEDxNSW: http://www.flickr.com/photos/42645924@N02/3933255654/

3

Page 42: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

LAYOUT AND FLOW

3

Page 43: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

LAYOUTS BASED ON CONTENT

RATHER THAN DEVICE

3

Page 44: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

RESPONSIVE DESIGN WORKFLOW

3

Page 45: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

SKETCH

3

Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures

Page 46: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

PROTOTYPE

3

Copyright: Paramount Pictures & Marvel Enterprises

Page 47: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

PROTOTYPECREATE PATTERN LIBRARIEShttp://boagworld.com/design/pattern-library/

3

Copyright: Universal Pictures & Alphaville Films

Page 48: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

ENHANCE FOR CONTEXT3

Page 49: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

ANIMATION AS AN ENHANCEMENT

3Copyright: Touchstone Pictures & Amblin Entertainment & Silver Screen Partners III & Walt Disney

Page 50: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

ACCESSIBILITY

4

Page 51: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

5 QUICK WINS FOR ACCESSIBILITY

4Image Copyright: Paramount Pictures & Lucasfilm

Page 52: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

1. MAKE THE PURPOSE OF ALL LINKS AS CLEAR AND

DESCRIPTIVE AS POSSIBLE

IF YOUR LINKS SAY “CLICK HERE” YOU’RE DOING IT WRONG

4

Page 53: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

2. MAKE URLS HUMAN READABLE AND PERMANENT

WHERE POSSIBLE

HTTP://ART.COM/ARTGALLERY/DEFAULT.ASP?ID=9DF4BC0580DF11D3ACB60090271E26A8&COMMAND=FREELIST

4

Page 54: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

3. DESIGN FOR TOUCH BY DEFAULT

4

DOES YOUR DESIGN PASS THE “RULE OF THUMB” TEST?

!

ARE YOU RELYING ON HOVER?

Page 55: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

4. USE APPROPRIATE INPUT TYPES AND ATTRIBUTES ON

FORMS

4

Page 56: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

5. PROOF DESIGNS IN GREYSCALE TO CHECK COLOUR CONTRAST

4

ALSO USE COLOUR BLINDNESS SIMULATORS AND COLOUR CONTRAST CHECK TOOLS

Related: http://24ways.org/2012/colour-accessibility/

Page 57: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

THE RESULTS

Page 58: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

SINCE LAUNCH:

200% INCREASE IN

MOBILE TRAFFIC

43% INCREASE IN

CONVERSION RATE

-4000% REDUCTION IN

HOMEPAGE EXIT RATE ON MOBILE

Page 59: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

MUCH TO LEARN THERE IS

Copyright: Lucasfilm

Page 60: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014

THANK YOU@duckymatt @cyberduck_uk

Copyright: Studio 37 & La Petite Reine & La Classe Américaine & JD Prod & France 3 Cinéma & Jouror Productions & uFilm