Adapting to Responsive Design - On The Edge Conference #edgebrum

2,380 views

Published on

My slides from On The Edge Birmingham 2014 on 3rd July 2014 (#edgebrum). My talk was about the principles of responsive web design with real world experiences of how Cyber-Duck approached responsive design for our own website.

Published in: Design, Technology

Adapting to Responsive Design - On The Edge Conference #edgebrum

  1. 1. HELLO I’m Matt @duckymatt #EdgeBRUM ! ! ! ! !
  2. 2. @cyberduck_uk cyber-duck.co.uk
  3. 3. ADAPTING TO A RESPONSIVE WEB DESIGN
  4. 4. HOW DO WE DEFINE RESPONSIVE?
  5. 5. To react quickly and positively. http://goo.gl/hMFzFm
  6. 6. Responsive web design is a design approach that aims to create interfaces that react quickly and positively to the user’s conditions.
  7. 7. ARE YOU BUILDING A BARRIER TO YOUR USERS? Image Copyright: Michael White Productions & National Film Trustee & Python (Monty) Pictures
  8. 8. PEOPLE WILL ACCESS OUR WEBSITES IN WAYS WE HADN’T EVEN CONSIDERED YET Image Copyright: Walt Disney Pictures & Tim Burton Pictures
  9. 9. THE PREVIOUS STATE(S) OF OUR OWN WEBSITE “DESKTOP” SITE (2011) “TABLET” SITE (LATER 2011) *Not to scale :) “MOBILE” SITE (2012)
  10. 10. OUR SEPARATE MOBILE WEBSITES: A STOP-GAP STRATEGY
  11. 11. SO WHY GO RESPONSIVE?
  12. 12. 3 FACTORS Image Copyright: L.A. Films & Home Box Office (HBO)
  13. 13. MULTIPLE CODE BASES1 CONTENT STRATEGY2 KNOWN UNKNOWNS3
  14. 14. 4 PRINCIPLES FOR RESPONSIVE DESIGN Image Copyright: Warner Bros. & The Guber-Peters Company & PolyGram Filmed Entertainment
  15. 15. CONTENT PARITY Credit: http://wtfmobileweb.com/ THE SAME CONTENT SHOULD BE AVAILABLE ON ALL PLATFORMS 1
  16. 16. SPEED MATTERS BECAUSE PERFORMANCE AFFECTS EVERYONE 2 Image Copyright: Universal Pictures
  17. 17. FUTURE FRIENDLY See: http://futurefriend.ly/ CUT DOWN ON MAINTENANCE AND SUPPORT KNOWN UNKNOWNS 3 Image Copyright: Universal TV
  18. 18. ACCESSIBILITY STYLES, BACKGROUNDS AND JAVASCRIPT ARE PROGRESSIVE ENHANCEMENTS 4 Photo Credit: Neil McKenzie: http://www.flickr.com/photos/furbyx4/2968376257/
  19. 19. 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/
  20. 20. CONTENT PARITY 1
  21. 21. AVOID ASSUMPTIONS 1 Image Copyright: BBC
  22. 22. 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/
  23. 23. Credit: http://xkcd.com/773/ 1
  24. 24. 1
  25. 25. RESEARCHING CONTENT STRATEGY SPEAKING TO EXISTING CUSTOMERS GOOGLE ANALYTICS CRAZYEGG LEAD FORENSICS 1 Image Copyright: Warner Bros.
  26. 26. OUR CONTENT DEFINES THE LAYOUTS WE NEED! NOT THE OTHER WAY AROUND 1
  27. 27. SPEED MATTERS 2
  28. 28. 2 moto.oakley.com
  29. 29. 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
  30. 30. DOES RESPONSIVE = POOR PERFORMANCE? Credit: Guy Podjarny - Creator of Mobitest: http://www.guypo.com/mobile/what-are-responsive-websites-made-of/ 2
  31. 31. To react quickly and positively. 2
  32. 32. IT’S EASY TO CONFUSE IMPLEMENTATION WITH TECHNIQUE 2 Image Copyright: Metro-Goldwyn-Mayer (MGM)
  33. 33. GOOD RESPONSIVE DESIGN HAS PERFORMANCE AT ITS HEART ! 2 timkadlec.com/2013/01/setting-a-performance-budget/Image Copyright: Twentieth Century Fox Film Corporation
  34. 34. ONLY LOADING WHAT WE NEED WHEN WE NEED IT. 2
  35. 35. JAVASCRIPT 2 http://requirejs.org/
  36. 36. CSS 2 http://sass-lang.com/
  37. 37. IMAGES 2 BEGIN WITH OPTIMISATION
  38. 38. IMAGES 2 COMPRESSION http://imageoptim.com/ https://tinypng.com/
  39. 39. IMAGES 2 27 KB 266 KB USING THE RIGHT IMAGE FOR THE RIGHT TASK
  40. 40. CACHING 2 SERVING FILES FASTER http://www.cloudflare.com/ https://www.varnish-cache.org/
  41. 41. 2
  42. 42. FUTURE FRIENDLINESS 3
  43. 43. THE WEB DOESN’T HAVE A FIXED WIDTH 3
  44. 44. 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
  45. 45. LAYOUT AND FLOW 3
  46. 46. LAYOUTS BASED ON CONTENT RATHER THAN DEVICE 3
  47. 47. RESPONSIVE DESIGN WORKFLOW 3
  48. 48. SKETCH 3 Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures
  49. 49. PROTOTYPE 3 Copyright: Paramount Pictures & Marvel Enterprises
  50. 50. USE STYLE TILES http://styletil.es/ 3 Copyright: Sandollar Productions & Touchstone Pictures
  51. 51. PROTOTYPECREATE PATTERN LIBRARIES http://boagworld.com/design/pattern-library/ 3 Copyright: Universal Pictures & Alphaville Films
  52. 52. TEST, TEST AND TEST SOME MORE Copyright: The Ladd Company & Shaw Brothers & Warner Bros. http://vanamco.com/ghostlab/
  53. 53. ENHANCE FOR CONTEXT 3
  54. 54. ANIMATION AS AN ENHANCEMENT 3 Copyright: Touchstone Pictures & Amblin Entertainment & Silver Screen Partners III & Walt Disney
  55. 55. LOCATION AS AN ENHANCEMENT? 3 Copyright: Metro-Goldwyn-Mayer (MGM)
  56. 56. ACCESSIBILITY 4
  57. 57. 5 QUICK WINS FOR ACCESSIBILITY 4 Image Copyright: Paramount Pictures & Lucasfilm
  58. 58. 1. DESIGN FOR TOUCH BY DEFAULT 4 DOES YOUR DESIGN PASS THE “RULE OF THUMB” TEST? ! ARE YOU RELYING ON HOVER?
  59. 59. 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
  60. 60. 3. MAKE URLS HUMAN READABLE AND PERMANENT WHERE POSSIBLE HTTP://ART.COM/ARTGALLERY/DEFAULT.ASP? ID=9DF4BC0580DF11D3ACB60090271E26A8&COMMAND=FREELIST 4
  61. 61. 4. USE APPROPRIATE INPUT TYPES AND ATTRIBUTES ON FORMS 4
  62. 62. 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/
  63. 63. THE RESULTS
  64. 64. SINCE LAUNCH: 200% INCREASE IN MOBILE TRAFFIC 43% INCREASE IN CONVERSION RATE -4000% REDUCTION IN HOMEPAGE EXIT RATE ON MOBILE
  65. 65. MUCH TO LEARN THERE IS Copyright: Lucasfilm
  66. 66. WANT TO LEARN MORE? https://shop.smashingmagazine.com/responsive-web-design-vol-2.html
  67. 67. THANK YOU @duckymatt @cyberduck_uk Copyright: Studio 37 & La Petite Reine & La Classe Américaine & JD Prod & France 3 Cinéma & Jouror Productions & uFilm

×