![Page 1: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/1.jpg)
ADAPTING TO A RESPONSIVE WEB DESIGN
![Page 2: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/2.jpg)
HELLO I’m Matt @duckymatt !
!
!
!
!
!
![Page 4: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/4.jpg)
HOW DO WE DEFINE RESPONSIVE?
![Page 5: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/5.jpg)
To react quickly and positively.
![Page 6: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/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: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/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: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/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: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/9.jpg)
OUR SEPARATE MOBILE WEBSITES: A STOP-GAP STRATEGY
![Page 10: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/10.jpg)
SO WHY GO RESPONSIVE?
![Page 11: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/11.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/12.jpg)
MULTIPLE CODE BASES 1
CONTENT STRATEGY2
KNOWN UNKNOWNS3
![Page 13: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/13.jpg)
![Page 14: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/14.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/15.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/16.jpg)
SPEED MATTERSBECAUSE PERFORMANCE AFFECTS EVERYONE
2
Image Copyright: Universal Pictures
![Page 17: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/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: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/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: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/19.jpg)
CONTENT PARITY
1
![Page 20: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/20.jpg)
ASSUMPTIONS
1
Image Copyright: BBC
![Page 21: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/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: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/23.jpg)
1
![Page 24: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/24.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/25.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/26.jpg)
SPEED MATTERS
2
![Page 28: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/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: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/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: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/30.jpg)
To react quickly and positively.
2
![Page 31: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/31.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/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: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/33.jpg)
ONLY LOADING WHAT WE NEED
WHEN WE NEED IT.
2
![Page 34: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/34.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 36: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/36.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/37.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/38.jpg)
2
![Page 39: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/39.jpg)
FUTURE FRIENDLINESS
3
![Page 40: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/40.jpg)
THE WEB DOESN’T HAVE A FIXED WIDTH
3
![Page 41: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/41.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 42: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/42.jpg)
LAYOUT AND FLOW
3
![Page 43: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/43.jpg)
LAYOUTS BASED ON CONTENT
RATHER THAN DEVICE
3
![Page 44: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/44.jpg)
RESPONSIVE DESIGN WORKFLOW
3
![Page 45: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/45.jpg)
SKETCH
3
Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures
![Page 46: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/46.jpg)
PROTOTYPE
3
Copyright: Paramount Pictures & Marvel Enterprises
![Page 47: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/47.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/48.jpg)
ENHANCE FOR CONTEXT3
![Page 49: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/49.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/50.jpg)
ACCESSIBILITY
4
![Page 51: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/51.jpg)
5 QUICK WINS FOR ACCESSIBILITY
4Image Copyright: Paramount Pictures & Lucasfilm
![Page 52: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/52.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 53: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/53.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/54.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/55.jpg)
4. USE APPROPRIATE INPUT TYPES AND ATTRIBUTES ON
FORMS
4
![Page 56: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/56.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/57.jpg)
THE RESULTS
![Page 58: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/58.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/59.jpg)
MUCH TO LEARN THERE IS
Copyright: Lucasfilm
![Page 60: Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c73df14a79593f708b459b/html5/thumbnails/60.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