hcid2014: adapting to responsive web design. matt gibson, cyber-duck
DESCRIPTION
We can no longer predict how people are accessing our websites now, let alone in a few years’ time when the technology people use to access the web will inevitably diverge even further and perhaps in ways we haven’t even considered yet. Rather than seeing this unpredictability and lack of control as a problem, we should embrace these ‘known unknowns’ and the inherent flexibility of the web. Put simply, responsive web design is about being more flexible and assuming less about our users, from how they’re accessing our websites and what technology they’re using to their environment. This talk will discuss the four tenets of good responsive design: content parity, performance, future friendliness and accessibility against a backdrop of Matt's experiences designing and building responsive websites over the past 3 years with plenty of useful tips and takeaways along the way.TRANSCRIPT
![Page 1: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/1.jpg)
ADAPTING TO A RESPONSIVE WEB DESIGN
![Page 2: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/2.jpg)
HELLO I’m Matt @duckymatt !
!
!
!
!
!
![Page 4: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/4.jpg)
HOW DO WE DEFINE RESPONSIVE?
![Page 5: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/5.jpg)
To react quickly and positively.
![Page 6: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/6.jpg)
Responsive web design is a design approach that aims to create interfaces that react quickly and positively to the user’s conditions.
![Page 7: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/7.jpg)
PEOPLE WILL ACCESS OUR WEBSITES IN WAYS WE HADN’T EVEN CONSIDERED YET
Image Copyright: Walt Disney Pictures & Tim Burton Pictures
![Page 8: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/8.jpg)
THE PREVIOUS STATE(S) OF OUR OWN WEBSITE
“DESKTOP” SITE (2011)
“TABLET” SITE (LATER 2011)
*Not to scale :)
“MOBILE” SITE (2012)
![Page 9: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/9.jpg)
OUR SEPARATE MOBILE WEBSITES: A STOP-GAP STRATEGY
![Page 10: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/10.jpg)
SO WHY GO RESPONSIVE?
![Page 11: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/11.jpg)
3 FACTORS
Image Copyright: L.A. Films & Home Box Office (HBO)
![Page 12: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/12.jpg)
MULTIPLE CODE BASES 1
CONTENT STRATEGY2
KNOWN UNKNOWNS3
![Page 13: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/13.jpg)
![Page 14: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/14.jpg)
SETTING 4 GOALS FOR A RESPONSIVE DESIGN
Image Copyright: Chartoff-Winkler Productions & United Artists
![Page 15: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/15.jpg)
CONTENT PARITY
Credit: http://wtfmobileweb.com/
THE SAME CONTENT SHOULD BE AVAILABLE ON ALL PLATFORMS
1
![Page 16: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/16.jpg)
SPEED MATTERSBECAUSE PERFORMANCE AFFECTS EVERYONE
2
Image Copyright: Universal Pictures
![Page 17: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/17.jpg)
FUTURE FRIENDLY
See: http://futurefriend.ly/
CUT DOWN ON MAINTENANCE AND SUPPORT KNOWN UNKNOWNS
3
Image Copyright: Universal TV
![Page 18: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/18.jpg)
ACCESSIBILITYSTYLES, BACKGROUNDS AND JAVASCRIPT ARE PROGRESSIVE ENHANCEMENTS
4
Photo Credit: Neil McKenzie: http://www.flickr.com/photos/furbyx4/2968376257/
![Page 19: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/19.jpg)
CONTENT PARITY
1
![Page 20: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/20.jpg)
ASSUMPTIONS
1
Image Copyright: BBC
![Page 21: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/21.jpg)
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 23: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/23.jpg)
1
![Page 24: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/24.jpg)
RESEARCHING CONTENT STRATEGY SPEAKING TO EXISTING CUSTOMERS
GOOGLE ANALYTICS
CRAZYEGG
LEAD FORENSICS
1
Image Copyright: Warner Bros.
![Page 25: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/25.jpg)
OUR CONTENT DEFINES THE LAYOUTS WE NEED
!
NOT THE OTHER WAY AROUND
1
![Page 26: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/26.jpg)
SPEED MATTERS
2
![Page 28: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/28.jpg)
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: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/29.jpg)
DOES RESPONSIVE = POOR PERFORMANCE?
Credit: Guy Podjarny - Creator of Mobitest: http://www.guypo.com/mobile/what-are-responsive-websites-made-of/
2
![Page 30: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/30.jpg)
To react quickly and positively.
2
![Page 31: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/31.jpg)
IT’S EASY TO CONFUSE IMPLEMENTATION WITH
TECHNIQUE
2
Image Copyright: Metro-Goldwyn-Mayer (MGM)
![Page 32: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/32.jpg)
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: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/33.jpg)
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 34: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/34.jpg)
OFF THE SHELF FRONT-END FRAMEWORKS
2
![Page 35: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/35.jpg)
Photo credit: Don Shall: http://www.flickr.com/photos/donshall/3817115551/
2
![Page 36: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/36.jpg)
2
Photo credit: James Bowe: http://www.flickr.com/photos/jamesrbowe/4231509266/
![Page 37: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/37.jpg)
KNOWING YOUR CODE FROM TOP TO BOTTOM IS ESSENTIAL TO
HAVE TOTAL CONTROL OVER IT
2
Image credit: http://css-tricks.com/
![Page 38: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/38.jpg)
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
![Page 39: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/39.jpg)
ONLY LOADING WHAT WE NEED
WHEN WE NEED IT.
2
![Page 42: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/42.jpg)
IMAGES2
BEGIN WITH OPTIMISATION
![Page 43: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/43.jpg)
IMAGES2
THEN COMPRESSION
http://imageoptim.com/ https://tinypng.com/
![Page 44: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/44.jpg)
IMAGES2
27 KB 266 KB
USING THE RIGHT IMAGE FOR THE RIGHT TASK
![Page 45: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/45.jpg)
CACHING2
SERVING FILES FASTER
http://www.cloudflare.com/ https://www.varnish-cache.org/
![Page 46: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/46.jpg)
2
![Page 47: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/47.jpg)
FUTURE FRIENDLINESS
3
![Page 48: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/48.jpg)
THE WEB DOESN’T HAVE A FIXED WIDTH
3
![Page 49: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/49.jpg)
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 50: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/50.jpg)
LAYOUT AND FLOW
3
![Page 51: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/51.jpg)
LAYOUTS BASED ON CONTENT
RATHER THAN DEVICE
3
![Page 52: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/52.jpg)
RESPONSIVE DESIGN WORKFLOW
3
![Page 53: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/53.jpg)
SKETCH
3
Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures
![Page 54: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/54.jpg)
PROTOTYPE
3
Copyright: Paramount Pictures & Marvel Enterprises
![Page 55: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/55.jpg)
USE STYLE TILEShttp://styletil.es/
3
Copyright: Sandollar Productions & Touchstone Pictures
![Page 56: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/56.jpg)
PROTOTYPECREATE PATTERN LIBRARIEShttp://boagworld.com/design/pattern-library/
3
Copyright: Universal Pictures & Alphaville Films
![Page 57: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/57.jpg)
ENHANCE FOR CONTEXT3
![Page 58: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/58.jpg)
ANIMATION AS AN ENHANCEMENT
3Copyright: Touchstone Pictures & Amblin Entertainment & Silver Screen Partners III & Walt Disney
![Page 59: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/59.jpg)
ACCESSIBILITY
4
![Page 60: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/60.jpg)
7 QUICK WINS FOR ACCESSIBILITY
4Copyright: Warner Bros.
![Page 61: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/61.jpg)
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 62: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/62.jpg)
2. CREATE A HIDDEN SKIP NAVIGATION LINK
4
![Page 63: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/63.jpg)
3. MAKE URLS HUMAN READABLE AND PERMANENT
WHERE POSSIBLE
HTTP://ART.COM/ARTGALLERY/DEFAULT.ASP?ID=9DF4BC0580DF11D3ACB60090271E26A8&COMMAND=FREELIST
4
![Page 64: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/64.jpg)
4. USE DESCRIPTIVE ALT TAGS FOR WHEN AN IMAGE CANNOT BE SHOWN.
4
![Page 65: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/65.jpg)
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/
![Page 66: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/66.jpg)
6. USE APPROPRIATE INPUT TYPES AND ATTRIBUTES ON
FORMS
4
![Page 67: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/67.jpg)
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/
![Page 68: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/68.jpg)
THE RESULTS
![Page 69: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/69.jpg)
SINCE LAUNCH:
200% INCREASE IN
MOBILE TRAFFIC
43% INCREASE IN
CONVERSION RATE
-4000% REDUCTION IN
HOMEPAGE EXIT RATE ON MOBILE
![Page 70: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/70.jpg)
MUCH TO LEARN THERE IS
Copyright: Lucasfilm
![Page 71: HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck](https://reader035.vdocuments.net/reader035/viewer/2022070304/54c7b7814a79594b158b4582/html5/thumbnails/71.jpg)
THANK YOU@duckymatt @cyberduck_uk
Copyright: Studio 37 & La Petite Reine & La Classe Américaine & JD Prod & France 3 Cinéma & Jouror Productions & uFilm