HELLO I’m Matt @duckymatt #EdgeBRUM !

!

!

!

!

@cyberduck_uk cyber-duck.co.uk

ADAPTING TO A RESPONSIVE WEB DESIGN

HOW DO WE DEFINE RESPONSIVE?

To react quickly and positively.

http://goo.gl/hMFzFm

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

ARE YOU BUILDING A BARRIER TO YOUR USERS?

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

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

4 PRINCIPLES FOR RESPONSIVE DESIGN

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

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/

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/

CONTENT PARITY

1

AVOID ASSUMPTIONS

1

Image Copyright: BBC

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/

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

Source: 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)

GOOD RESPONSIVE DESIGN HAS PERFORMANCE AT ITS HEART

!

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

ONLY LOADING WHAT WE NEED

WHEN WE NEED IT.

2

JAVASCRIPT2

http://requirejs.org/

CSS2

http://sass-lang.com/

IMAGES2

BEGIN WITH OPTIMISATION

IMAGES2

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

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

ENHANCE FOR CONTEXT3

ANIMATION AS AN ENHANCEMENT

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

LOCATION AS AN ENHANCEMENT?

3Copyright: Metro-Goldwyn-Mayer (MGM)

ACCESSIBILITY

4

5 QUICK WINS FOR ACCESSIBILITY

4Image Copyright: Paramount Pictures & Lucasfilm

1. DESIGN FOR TOUCH BY DEFAULT

4

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

!

ARE YOU RELYING ON HOVER?

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

3. MAKE URLS HUMAN READABLE AND PERMANENT

WHERE POSSIBLE

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

4

4. USE APPROPRIATE INPUT TYPES AND ATTRIBUTES ON

FORMS

4

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/

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

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

THANK YOU@duckymatt @cyberduck_uk

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