Adapting to Responsive Design - HCID2014, 24 April 2014

ADAPTING TO A RESPONSIVE WEB DESIGN

HELLO I’m Matt @duckymatt !

!

!

!

!

!

@cyberduck_uk cyber-duck.co.uk

HOW DO WE DEFINE RESPONSIVE?

To react quickly and positively.

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

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

Image Copyright: Walt Disney Pictures & Tim Burton Pictures

THE PREVIOUS STATE(S) OF OUR OWN WEBSITE

“DESKTOP” SITE (2011)

“TABLET” SITE (LATER 2011)

*Not to scale :)

“MOBILE” SITE (2012)

OUR SEPARATE MOBILE WEBSITES: A STOP-GAP STRATEGY

SO WHY GO RESPONSIVE?

3 FACTORS

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

MULTIPLE CODE BASES 1

CONTENT STRATEGY2

KNOWN UNKNOWNS3

SETTING 4 GOALS FOR A RESPONSIVE DESIGN

Image Copyright: Chartoff-Winkler Productions & United Artists

CONTENT PARITY

Credit: http://wtfmobileweb.com/

THE SAME CONTENT SHOULD BE AVAILABLE ON ALL PLATFORMS

1

SPEED MATTERSBECAUSE PERFORMANCE AFFECTS EVERYONE

2

Image Copyright: Universal Pictures

FUTURE FRIENDLY

See: http://futurefriend.ly/

CUT DOWN ON MAINTENANCE AND SUPPORT KNOWN UNKNOWNS

3

Image Copyright: Universal TV

ACCESSIBILITYSTYLES, BACKGROUNDS AND JAVASCRIPT ARE PROGRESSIVE ENHANCEMENTS

4

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

CONTENT PARITY

1

ASSUMPTIONS

1

Image Copyright: BBC

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/

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

1

1

RESEARCHING CONTENT STRATEGY SPEAKING TO EXISTING CUSTOMERS

GOOGLE ANALYTICS

CRAZYEGG

LEAD FORENSICS

1

Image Copyright: Warner Bros.

OUR CONTENT DEFINES THE LAYOUTS WE NEED

!

NOT THE OTHER WAY AROUND

1

SPEED MATTERS

2

2

moto.oakley.com

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

DOES RESPONSIVE = POOR PERFORMANCE?

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

2

To react quickly and positively.

2

IT’S EASY TO CONFUSE IMPLEMENTATION WITH

TECHNIQUE

2

Image Copyright: Metro-Goldwyn-Mayer (MGM)

MAKING PERFORMANCE A PRIORITY !

SETTING A PERFORMANCE “BUDGET”

2

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

Image Copyright: Twentieth Century Fox Film Corporation

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

OFF THE SHELF FRONT-END FRAMEWORKS

2

Photo credit: Don Shall: http://www.flickr.com/photos/donshall/3817115551/

2

2

Photo credit: James Bowe: http://www.flickr.com/photos/jamesrbowe/4231509266/

KNOWING YOUR CODE FROM TOP TO BOTTOM IS ESSENTIAL TO

HAVE TOTAL CONTROL OVER IT

2

Image credit: http://css-tricks.com/

http://cyber-duck.github.io/hoisin.scss/

WE CREATED A MINI-LIBRARY THAT IS SIMPLE, FLEXIBLE, LIGHT AND

DOESN’T MAKE DECISIONS FOR YOU

2

ONLY LOADING WHAT WE NEED

WHEN WE NEED IT.

2

JAVASCRIPT2

http://requirejs.org/

CSS2

http://sass-lang.com/

IMAGES2

BEGIN WITH OPTIMISATION

IMAGES2

THEN COMPRESSION

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

IMAGES2

27 KB 266 KB

USING THE RIGHT IMAGE FOR THE RIGHT TASK

CACHING2

SERVING FILES FASTER

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

2

FUTURE FRIENDLINESS

3

THE WEB DOESN’T HAVE A FIXED WIDTH

3

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

LAYOUT AND FLOW

3

LAYOUTS BASED ON CONTENT

RATHER THAN DEVICE

3

RESPONSIVE DESIGN WORKFLOW

3

SKETCH

3

Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures

PROTOTYPE

3

Copyright: Paramount Pictures & Marvel Enterprises

USE STYLE TILEShttp://styletil.es/

3

Copyright: Sandollar Productions & Touchstone Pictures

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

3

Copyright: Universal Pictures & Alphaville Films

ENHANCE FOR CONTEXT3

ANIMATION AS AN ENHANCEMENT

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

ACCESSIBILITY

4

7 QUICK WINS FOR ACCESSIBILITY

4Copyright: Warner Bros.

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

2. CREATE A HIDDEN SKIP NAVIGATION LINK

4

3. MAKE URLS HUMAN READABLE AND PERMANENT

WHERE POSSIBLE

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

4

4. USE DESCRIPTIVE ALT TAGS FOR WHEN AN IMAGE CANNOT BE SHOWN.

4

5. DON’T USE PLACEHOLDERS AS A SUBSTITUTE FOR LABELS

ON FORMS

4

http://www.webaxe.org/placeholder-attribute-is-not-a-label/Image credit: Dave Bushell: http://dbushell.com/2013/11/08/form-label-design/

6. USE APPROPRIATE INPUT TYPES AND ATTRIBUTES ON

FORMS

4

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

THE RESULTS

SINCE LAUNCH:

200% INCREASE IN

MOBILE TRAFFIC

43% INCREASE IN

CONVERSION RATE

-4000% REDUCTION IN

HOMEPAGE EXIT RATE ON MOBILE

MUCH TO LEARN THERE IS

Copyright: Lucasfilm

THANK YOU@duckymatt @cyberduck_uk

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