• Like
Adapting to Responsive Design - HCID2014, 24 April 2014
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Adapting to Responsive Design - HCID2014, 24 April 2014

  • 3,554 views
Published

Slides from my talk at HCID2014 at City University.

Slides from my talk at HCID2014 at City University.

Published in Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,554
On SlideShare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
85
Comments
0
Likes
116

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. ADAPTING TO A RESPONSIVE WEB DESIGN
  • 2. HELLO I’m Matt @duckymatt ! ! ! ! ! !
  • 3. @cyberduck_uk cyber-duck.co.uk
  • 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
  • 10. SO WHY GO RESPONSIVE?
  • 11. 3 FACTORS Image Copyright: L.A. Films & Home Box Office (HBO)
  • 12. MULTIPLE CODE BASES1 CONTENT STRATEGY2 KNOWN UNKNOWNS3
  • 13. SETTING 4 GOALS FOR A RESPONSIVE DESIGN Image Copyright: Chartoff-Winkler Productions & United Artists
  • 14. CONTENT PARITY Credit: http://wtfmobileweb.com/ THE SAME CONTENT SHOULD BE AVAILABLE ON ALL PLATFORMS 1
  • 15. SPEED MATTERS BECAUSE PERFORMANCE AFFECTS EVERYONE 2 Image Copyright: Universal Pictures
  • 16. FUTURE FRIENDLY See: http://futurefriend.ly/ CUT DOWN ON MAINTENANCE AND SUPPORT KNOWN UNKNOWNS 3 Image Copyright: Universal TV
  • 17. ACCESSIBILITY STYLES, BACKGROUNDS AND JAVASCRIPT ARE PROGRESSIVE ENHANCEMENTS 4 Photo Credit: Neil McKenzie: http://www.flickr.com/photos/furbyx4/2968376257/
  • 18. CONTENT PARITY 1
  • 19. ASSUMPTIONS 1 Image Copyright: BBC
  • 20. 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/
  • 21. Credit: http://xkcd.com/773/ 1
  • 22. 1
  • 23. RESEARCHING CONTENT STRATEGY SPEAKING TO EXISTING CUSTOMERS GOOGLE ANALYTICS CRAZYEGG LEAD FORENSICS 1 Image Copyright: Warner Bros.
  • 24. OUR CONTENT DEFINES THE LAYOUTS WE NEED! NOT THE OTHER WAY AROUND 1
  • 25. SPEED MATTERS 2
  • 26. 2 moto.oakley.com
  • 27. 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
  • 28. DOES RESPONSIVE = POOR PERFORMANCE? Credit: Guy Podjarny - Creator of Mobitest: http://www.guypo.com/mobile/what-are-responsive-websites-made-of/ 2
  • 29. To react quickly and positively. 2
  • 30. IT’S EASY TO CONFUSE IMPLEMENTATION WITH TECHNIQUE 2 Image Copyright: Metro-Goldwyn-Mayer (MGM)
  • 31. MAKING PERFORMANCE A PRIORITY ! SETTING A PERFORMANCE “BUDGET” 2 timkadlec.com/2013/01/setting-a-performance-budget/ Image Copyright: Twentieth Century Fox Film Corporation
  • 32. 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
  • 33. OFF THE SHELF FRONT-END FRAMEWORKS 2
  • 34. Photo credit: Don Shall: http://www.flickr.com/photos/donshall/3817115551/ 2
  • 35. 2 Photo credit: James Bowe: http://www.flickr.com/photos/jamesrbowe/4231509266/
  • 36. KNOWING YOUR CODE FROM TOP TO BOTTOM IS ESSENTIAL TO HAVE TOTAL CONTROL OVER IT 2 Image credit: http://css-tricks.com/
  • 37. 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
  • 38. ONLY LOADING WHAT WE NEED WHEN WE NEED IT. 2
  • 39. JAVASCRIPT 2 http://requirejs.org/
  • 40. CSS 2 http://sass-lang.com/
  • 41. IMAGES 2 BEGIN WITH OPTIMISATION
  • 42. IMAGES 2 THEN COMPRESSION http://imageoptim.com/ https://tinypng.com/
  • 43. IMAGES 2 27 KB 266 KB USING THE RIGHT IMAGE FOR THE RIGHT TASK
  • 44. CACHING 2 SERVING FILES FASTER http://www.cloudflare.com/ https://www.varnish-cache.org/
  • 45. 2
  • 46. FUTURE FRIENDLINESS 3
  • 47. THE WEB DOESN’T HAVE A FIXED WIDTH 3
  • 48. 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
  • 49. LAYOUT AND FLOW 3
  • 50. LAYOUTS BASED ON CONTENT RATHER THAN DEVICE 3
  • 51. RESPONSIVE DESIGN WORKFLOW 3
  • 52. SKETCH 3 Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures
  • 53. PROTOTYPE 3 Copyright: Paramount Pictures & Marvel Enterprises
  • 54. USE STYLE TILES http://styletil.es/ 3 Copyright: Sandollar Productions & Touchstone Pictures
  • 55. PROTOTYPECREATE PATTERN LIBRARIES http://boagworld.com/design/pattern-library/ 3 Copyright: Universal Pictures & Alphaville Films
  • 56. ENHANCE FOR CONTEXT 3
  • 57. ANIMATION AS AN ENHANCEMENT 3 Copyright: Touchstone Pictures & Amblin Entertainment & Silver Screen Partners III & Walt Disney
  • 58. ACCESSIBILITY 4
  • 59. 7 QUICK WINS FOR ACCESSIBILITY 4 Copyright: Warner Bros.
  • 60. 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
  • 61. 2. CREATE A HIDDEN SKIP NAVIGATION LINK 4
  • 62. 3. MAKE URLS HUMAN READABLE AND PERMANENT WHERE POSSIBLE HTTP://ART.COM/ARTGALLERY/DEFAULT.ASP? ID=9DF4BC0580DF11D3ACB60090271E26A8&COMMAND=FREELIST 4
  • 63. 4. USE DESCRIPTIVE ALT TAGS FOR WHEN AN IMAGE CANNOT BE SHOWN. 4
  • 64. 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/
  • 65. 6. USE APPROPRIATE INPUT TYPES AND ATTRIBUTES ON FORMS 4
  • 66. 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/
  • 67. THE RESULTS
  • 68. SINCE LAUNCH: 200% INCREASE IN MOBILE TRAFFIC 43% INCREASE IN CONVERSION RATE -4000% REDUCTION IN HOMEPAGE EXIT RATE ON MOBILE
  • 69. MUCH TO LEARN THERE IS Copyright: Lucasfilm
  • 70. THANK YOU @duckymatt @cyberduck_uk Copyright: Studio 37 & La Petite Reine & La Classe Américaine & JD Prod & France 3 Cinéma & Jouror Productions & uFilm