Adapting to Responsive Design - On The Edge Conference #edgebrum

of 68 /68
HELLO I’m Matt @duckymatt #EdgeBRUM

description

My slides from On The Edge Birmingham 2014 on 3rd July 2014 (#edgebrum). My talk was about the principles of responsive web design with real world experiences of how Cyber-Duck approached responsive design for our own website.

Transcript of Adapting to Responsive Design - On The Edge Conference #edgebrum

Page 1: Adapting to Responsive Design - On The Edge Conference #edgebrum

HELLO I’m Matt @duckymatt #EdgeBRUM !

!

!

!

!

Page 2: Adapting to Responsive Design - On The Edge Conference #edgebrum

@cyberduck_uk cyber-duck.co.uk

Page 3: Adapting to Responsive Design - On The Edge Conference #edgebrum

ADAPTING TO A RESPONSIVE WEB DESIGN

Page 4: Adapting to Responsive Design - On The Edge Conference #edgebrum

HOW DO WE DEFINE RESPONSIVE?

Page 5: Adapting to Responsive Design - On The Edge Conference #edgebrum

To react quickly and positively.

http://goo.gl/hMFzFm

Page 6: Adapting to Responsive Design - On The Edge Conference #edgebrum

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 Design - On The Edge Conference #edgebrum

ARE YOU BUILDING A BARRIER TO YOUR USERS?

Image Copyright: Michael White Productions & National Film Trustee & Python (Monty) Pictures

Page 8: Adapting to Responsive Design - On The Edge Conference #edgebrum

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

Image Copyright: Walt Disney Pictures & Tim Burton Pictures

Page 9: Adapting to Responsive Design - On The Edge Conference #edgebrum

THE PREVIOUS STATE(S) OF OUR OWN WEBSITE

“DESKTOP” SITE (2011)

“TABLET” SITE (LATER 2011)

*Not to scale :)

“MOBILE” SITE (2012)

Page 10: Adapting to Responsive Design - On The Edge Conference #edgebrum

OUR SEPARATE MOBILE WEBSITES: A STOP-GAP STRATEGY

Page 11: Adapting to Responsive Design - On The Edge Conference #edgebrum

SO WHY GO RESPONSIVE?

Page 12: Adapting to Responsive Design - On The Edge Conference #edgebrum

3 FACTORS

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

Page 13: Adapting to Responsive Design - On The Edge Conference #edgebrum

MULTIPLE CODE BASES 1

CONTENT STRATEGY2

KNOWN UNKNOWNS3

Page 14: Adapting to Responsive Design - On The Edge Conference #edgebrum
Page 15: Adapting to Responsive Design - On The Edge Conference #edgebrum

4 PRINCIPLES FOR RESPONSIVE DESIGN

Image Copyright: Warner Bros. & The Guber-Peters Company & PolyGram Filmed Entertainment

Page 16: Adapting to Responsive Design - On The Edge Conference #edgebrum

CONTENT PARITY

Credit: http://wtfmobileweb.com/

THE SAME CONTENT SHOULD BE AVAILABLE ON ALL PLATFORMS

1

Page 17: Adapting to Responsive Design - On The Edge Conference #edgebrum

SPEED MATTERSBECAUSE PERFORMANCE AFFECTS EVERYONE

2

Image Copyright: Universal Pictures

Page 18: Adapting to Responsive Design - On The Edge Conference #edgebrum

FUTURE FRIENDLY

See: http://futurefriend.ly/

CUT DOWN ON MAINTENANCE AND SUPPORT KNOWN UNKNOWNS

3

Image Copyright: Universal TV

Page 19: Adapting to Responsive Design - On The Edge Conference #edgebrum

ACCESSIBILITYSTYLES, BACKGROUNDS AND JAVASCRIPT ARE PROGRESSIVE ENHANCEMENTS

4

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

Page 20: Adapting to Responsive Design - On The Edge Conference #edgebrum

People will forget what you said. People will forget what you did. But people will never forget how you made them feel.

MAYA ANGELOU

Photo credit: York College ISLGP http://commons.wikimedia.org/wiki/File:Maya_Angelou_visits_YCP!_2413.jpg

Source: http://mayaangelou.com/news/13/

Page 21: Adapting to Responsive Design - On The Edge Conference #edgebrum

CONTENT PARITY

1

Page 22: Adapting to Responsive Design - On The Edge Conference #edgebrum

AVOID ASSUMPTIONS

1

Image Copyright: BBC

Page 23: Adapting to Responsive Design - On The Edge Conference #edgebrum

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

your website.

KAREN MCGRANE

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

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

Page 24: Adapting to Responsive Design - On The Edge Conference #edgebrum

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

1

Page 25: Adapting to Responsive Design - On The Edge Conference #edgebrum

1

Page 26: Adapting to Responsive Design - On The Edge Conference #edgebrum

RESEARCHING CONTENT STRATEGY SPEAKING TO EXISTING CUSTOMERS

GOOGLE ANALYTICS

CRAZYEGG

LEAD FORENSICS

1

Image Copyright: Warner Bros.

Page 27: Adapting to Responsive Design - On The Edge Conference #edgebrum

OUR CONTENT DEFINES THE LAYOUTS WE NEED

!

NOT THE OTHER WAY AROUND

1

Page 28: Adapting to Responsive Design - On The Edge Conference #edgebrum

SPEED MATTERS

2

Page 29: Adapting to Responsive Design - On The Edge Conference #edgebrum

2

moto.oakley.com

Page 30: Adapting to Responsive Design - On The Edge Conference #edgebrum

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

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

Page 31: Adapting to Responsive Design - On The Edge Conference #edgebrum

DOES RESPONSIVE = POOR PERFORMANCE?

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

2

Page 32: Adapting to Responsive Design - On The Edge Conference #edgebrum

To react quickly and positively.

2

Page 33: Adapting to Responsive Design - On The Edge Conference #edgebrum

IT’S EASY TO CONFUSE IMPLEMENTATION WITH

TECHNIQUE

2

Image Copyright: Metro-Goldwyn-Mayer (MGM)

Page 34: Adapting to Responsive Design - On The Edge Conference #edgebrum

GOOD RESPONSIVE DESIGN HAS PERFORMANCE AT ITS HEART

!

2timkadlec.com/2013/01/setting-a-performance-budget/Image Copyright: Twentieth Century Fox Film Corporation

Page 35: Adapting to Responsive Design - On The Edge Conference #edgebrum

ONLY LOADING WHAT WE NEED

WHEN WE NEED IT.

2

Page 36: Adapting to Responsive Design - On The Edge Conference #edgebrum

JAVASCRIPT2

http://requirejs.org/

Page 37: Adapting to Responsive Design - On The Edge Conference #edgebrum

CSS2

http://sass-lang.com/

Page 38: Adapting to Responsive Design - On The Edge Conference #edgebrum

IMAGES2

BEGIN WITH OPTIMISATION

Page 39: Adapting to Responsive Design - On The Edge Conference #edgebrum

IMAGES2

COMPRESSION

http://imageoptim.com/ https://tinypng.com/

Page 40: Adapting to Responsive Design - On The Edge Conference #edgebrum

IMAGES2

27 KB 266 KB

USING THE RIGHT IMAGE FOR THE RIGHT TASK

Page 41: Adapting to Responsive Design - On The Edge Conference #edgebrum

CACHING2

SERVING FILES FASTER

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

Page 42: Adapting to Responsive Design - On The Edge Conference #edgebrum

2

Page 43: Adapting to Responsive Design - On The Edge Conference #edgebrum

FUTURE FRIENDLINESS

3

Page 44: Adapting to Responsive Design - On The Edge Conference #edgebrum

THE WEB DOESN’T HAVE A FIXED WIDTH

3

Page 45: Adapting to Responsive Design - On The Edge Conference #edgebrum

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 46: Adapting to Responsive Design - On The Edge Conference #edgebrum

LAYOUT AND FLOW

3

Page 47: Adapting to Responsive Design - On The Edge Conference #edgebrum

LAYOUTS BASED ON CONTENT

RATHER THAN DEVICE

3

Page 48: Adapting to Responsive Design - On The Edge Conference #edgebrum

RESPONSIVE DESIGN WORKFLOW

3

Page 49: Adapting to Responsive Design - On The Edge Conference #edgebrum

SKETCH

3

Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures

Page 50: Adapting to Responsive Design - On The Edge Conference #edgebrum

PROTOTYPE

3

Copyright: Paramount Pictures & Marvel Enterprises

Page 51: Adapting to Responsive Design - On The Edge Conference #edgebrum

USE STYLE TILEShttp://styletil.es/

3

Copyright: Sandollar Productions & Touchstone Pictures

Page 52: Adapting to Responsive Design - On The Edge Conference #edgebrum

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

3

Copyright: Universal Pictures & Alphaville Films

Page 53: Adapting to Responsive Design - On The Edge Conference #edgebrum

TEST, TEST AND TEST SOME MORECopyright: The Ladd Company & Shaw Brothers & Warner Bros. http://vanamco.com/ghostlab/

Page 54: Adapting to Responsive Design - On The Edge Conference #edgebrum

ENHANCE FOR CONTEXT3

Page 55: Adapting to Responsive Design - On The Edge Conference #edgebrum

ANIMATION AS AN ENHANCEMENT

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

Page 56: Adapting to Responsive Design - On The Edge Conference #edgebrum

LOCATION AS AN ENHANCEMENT?

3Copyright: Metro-Goldwyn-Mayer (MGM)

Page 57: Adapting to Responsive Design - On The Edge Conference #edgebrum

ACCESSIBILITY

4

Page 58: Adapting to Responsive Design - On The Edge Conference #edgebrum

5 QUICK WINS FOR ACCESSIBILITY

4Image Copyright: Paramount Pictures & Lucasfilm

Page 59: Adapting to Responsive Design - On The Edge Conference #edgebrum

1. DESIGN FOR TOUCH BY DEFAULT

4

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

!

ARE YOU RELYING ON HOVER?

Page 60: Adapting to Responsive Design - On The Edge Conference #edgebrum

2. 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 61: Adapting to Responsive Design - On The Edge Conference #edgebrum

3. MAKE URLS HUMAN READABLE AND PERMANENT

WHERE POSSIBLE

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

4

Page 62: Adapting to Responsive Design - On The Edge Conference #edgebrum

4. USE APPROPRIATE INPUT TYPES AND ATTRIBUTES ON

FORMS

4

Page 63: Adapting to Responsive Design - On The Edge Conference #edgebrum

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 64: Adapting to Responsive Design - On The Edge Conference #edgebrum

THE RESULTS

Page 65: Adapting to Responsive Design - On The Edge Conference #edgebrum

SINCE LAUNCH:

200% INCREASE IN

MOBILE TRAFFIC

43% INCREASE IN

CONVERSION RATE

-4000% REDUCTION IN

HOMEPAGE EXIT RATE ON MOBILE

Page 66: Adapting to Responsive Design - On The Edge Conference #edgebrum

MUCH TO LEARN THERE IS

Copyright: Lucasfilm

Page 67: Adapting to Responsive Design - On The Edge Conference #edgebrum

WANT TO LEARN MORE?https://shop.smashingmagazine.com/responsive-web-design-vol-2.html

Page 68: Adapting to Responsive Design - On The Edge Conference #edgebrum

THANK YOU@duckymatt @cyberduck_uk

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