Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014
2 likes2,261 views
This document discusses adapting websites to responsive web design. It defines responsive design as creating interfaces that react quickly and positively to user conditions. It notes that people access websites in many ways, so responsive design aims to have one code base that works across devices rather than separate mobile sites. The document outlines four goals for responsive design: content parity across devices, speed optimization, future-proofing the design, and accessibility. It provides examples and tips for achieving each goal, such as conducting content audits, optimizing images, caching, and designing first for touch interfaces. The results of implementing responsive design on one website included increased mobile traffic and conversions as well as reduced exit rates.
![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](https://image.slidesharecdn.com/mwl-2014-140626060705-phpapp01/85/Adapting-to-Responsive-Web-Design-Marketing-Week-Live-2014-26-June-2014-41-320.jpg)
Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014
- 1. ADAPTING TO A RESPONSIVE WEB DESIGN
- 4. HOW DO WE DEFINE RESPONSIVE?
- 5. To react quickly and positively.
- 6. Responsive web design is a design approach that aims to create interfaces that react quickly and positively to the user’s conditions.
- 7. PEOPLE WILL ACCESS OUR WEBSITES IN WAYS WE HADN’T EVEN CONSIDERED YET Image Copyright: Walt Disney Pictures & Tim Burton Pictures
- 8. THE PREVIOUS STATE(S) OF OUR OWN WEBSITE “DESKTOP” SITE (2011) “TABLET” SITE (LATER 2011) *Not to scale :) “MOBILE” SITE (2012)
- 9. OUR SEPARATE MOBILE WEBSITES: A STOP-GAP STRATEGY
- 11. 3 FACTORS Image Copyright: L.A. Films & Home Box Office (HBO)
- 12. MULTIPLE CODE BASES1 CONTENT STRATEGY2 KNOWN UNKNOWNS3
- 14. SETTING 4 GOALS FOR A RESPONSIVE DESIGN Image Copyright: Chartoff-Winkler Productions & United Artists
- 15. CONTENT PARITY Credit: http://wtfmobileweb.com/ THE SAME CONTENT SHOULD BE AVAILABLE ON ALL PLATFORMS 1
- 16. SPEED MATTERS BECAUSE PERFORMANCE AFFECTS EVERYONE 2 Image Copyright: Universal Pictures
- 17. FUTURE FRIENDLY See: http://futurefriend.ly/ CUT DOWN ON MAINTENANCE AND SUPPORT KNOWN UNKNOWNS 3 Image Copyright: Universal TV
- 18. ACCESSIBILITY STYLES, BACKGROUNDS AND JAVASCRIPT ARE PROGRESSIVE ENHANCEMENTS 4 Photo Credit: Neil McKenzie: http://www.flickr.com/photos/furbyx4/2968376257/
- 19. CONTENT PARITY 1
- 21. 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/
- 23. 1
- 24. RESEARCHING CONTENT STRATEGY SPEAKING TO EXISTING CUSTOMERS GOOGLE ANALYTICS CRAZYEGG LEAD FORENSICS 1 Image Copyright: Warner Bros.
- 25. OUR CONTENT DEFINES THE LAYOUTS WE NEED! NOT THE OTHER WAY AROUND 1
- 26. SPEED MATTERS 2
- 28. 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
- 29. DOES RESPONSIVE = POOR PERFORMANCE? Credit: Guy Podjarny - Creator of Mobitest: http://www.guypo.com/mobile/what-are-responsive-websites-made-of/ 2
- 30. To react quickly and positively. 2
- 31. IT’S EASY TO CONFUSE IMPLEMENTATION WITH TECHNIQUE 2 Image Copyright: Metro-Goldwyn-Mayer (MGM)
- 32. MAKING PERFORMANCE A PRIORITY ! SETTING A PERFORMANCE “BUDGET” 2 timkadlec.com/2013/01/setting-a-performance-budget/ Image Copyright: Twentieth Century Fox Film Corporation
- 33. ONLY LOADING WHAT WE NEED WHEN WE NEED IT. 2
- 34. 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
- 36. IMAGES 2 27 KB 266 KB USING THE RIGHT IMAGE FOR THE RIGHT TASK
- 37. CACHING 2 SERVING FILES FASTER http://www.cloudflare.com/ https://www.varnish-cache.org/
- 38. 2
- 40. THE WEB DOESN’T HAVE A FIXED WIDTH 3
- 41. 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
- 43. LAYOUTS BASED ON CONTENT RATHER THAN DEVICE 3
- 45. SKETCH 3 Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures
- 46. PROTOTYPE 3 Copyright: Paramount Pictures & Marvel Enterprises
- 47. PROTOTYPECREATE PATTERN LIBRARIES http://boagworld.com/design/pattern-library/ 3 Copyright: Universal Pictures & Alphaville Films
- 49. ANIMATION AS AN ENHANCEMENT 3 Copyright: Touchstone Pictures & Amblin Entertainment & Silver Screen Partners III & Walt Disney
- 50. ACCESSIBILITY 4
- 51. 5 QUICK WINS FOR ACCESSIBILITY 4 Image Copyright: Paramount Pictures & Lucasfilm
- 52. 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
- 53. 2. MAKE URLS HUMAN READABLE AND PERMANENT WHERE POSSIBLE HTTP://ART.COM/ARTGALLERY/DEFAULT.ASP? ID=9DF4BC0580DF11D3ACB60090271E26A8&COMMAND=FREELIST 4
- 54. 3. DESIGN FOR TOUCH BY DEFAULT 4 DOES YOUR DESIGN PASS THE “RULE OF THUMB” TEST? ! ARE YOU RELYING ON HOVER?
- 55. 4. USE APPROPRIATE INPUT TYPES AND ATTRIBUTES ON FORMS 4
- 56. 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/
- 57. THE RESULTS
- 58. SINCE LAUNCH: 200% INCREASE IN MOBILE TRAFFIC 43% INCREASE IN CONVERSION RATE -4000% REDUCTION IN HOMEPAGE EXIT RATE ON MOBILE
- 59. MUCH TO LEARN THERE IS Copyright: Lucasfilm
- 60. THANK YOU @duckymatt @cyberduck_uk Copyright: Studio 37 & La Petite Reine & La Classe Américaine & JD Prod & France 3 Cinéma & Jouror Productions & uFilm