Your SlideShare is downloading. ×
0
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Adapting to a Responsive Web Design - TFM&A - 26-02-14

2,704

Published on

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 …

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.

Published in: Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,704
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
32
Comments
0
Likes
6
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. Image Copyright: Walt Disney Pictures & Tim Burton Pictures PEOPLE WILL ACCESS OUR WEBSITES IN WAYS WE HADN’T EVEN CONSIDERED YET
  • 8. THE PREVIOUS STATE(S) OF OUR OWN WEBSITE “DESKTOP” SITE “TABLET” SITE “MOBILE” SITE (2011) (LATER 2011) (2012) *Not to scale :)
  • 9. OUR SEPARATE MOBILE WEBSITES: A STOP-GAP STRATEGY
  • 10. SO WHY GO RESPONSIVE?
  • 11. Image Copyright: L.A. Films & Home Box Office (HBO) 3 FACTORS
  • 12. 1 MULTIPLE CODE BASES 2 CONTENT STRATEGY 3 KNOWN UNKNOWNS
  • 13. SETTING 4 GOALS FOR A RESPONSIVE DESIGN Image Copyright: Chartoff-Winkler Productions & United Artists
  • 14. CONTENT PARITY THE SAME CONTENT SHOULD BE AVAILABLE ON ALL PLATFORMS Credit: http://wtfmobileweb.com/ 1
  • 15. SPEED MATTERS 2 BECAUSE PERFORMANCE AFFECTS EVERYONE Image Copyright: Universal Pictures
  • 16. 3 FUTURE FRIENDLY CUT DOWN ON MAINTENANCE AND SUPPORT KNOWN UNKNOWNS Image Copyright: Universal TV See: http://futurefriend.ly/
  • 17. ACCESSIBILITY STYLES, BACKGROUNDS AND JAVASCRIPT ARE PROGRESSIVE ENHANCEMENTS Photo Credit: Neil McKenzie: http://www.flickr.com/photos/furbyx4/2968376257/ 4
  • 18. 1 CONTENT PARITY
  • 19. 1 ASSUMPTIONS Image Copyright: BBC
  • 20. KAREN MCGRANE You don't get to decide which device people use to access your website. http://alistapart.com/article/your-content-now-mobile Photo credit: Eirik Helland Urke: http://www.flickr.com/photos/webdagene/6149954950/
  • 21. 1 Credit: http://xkcd.com/773/
  • 22. 1
  • 23. RESEARCHING CONTENT STRATEGY 1 SPEAKING TO EXISTING CUSTOMERS GOOGLE ANALYTICS CRAZYEGG LEAD FORENSICS Image Copyright: Warner Bros.
  • 24. 1 OUR CONTENT DEFINES THE LAYOUTS WE NEED ! NOT THE OTHER WAY AROUND
  • 25. 2 SPEED MATTERS
  • 26. 2 moto.oakley.com
  • 27. ANDREW CLARKE 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! 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. 2 To react quickly and positively.
  • 30. 2 IT’S EASY TO CONFUSE IMPLEMENTATION WITH TECHNIQUE Image Copyright: Metro-Goldwyn-Mayer (MGM)
  • 31. Image Copyright: Twentieth Century Fox Film Corporation 2 MAKING PERFORMANCE A PRIORITY ! SETTING A PERFORMANCE “BUDGET” timkadlec.com/2013/01/setting-a-performance-budget/
  • 32. 2 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
  • 33. 2 OFF THE SHELF FRONT-END FRAMEWORKS
  • 34. 2 TRYING TO DO EVERYTHING Photo credit: Don Shall: http://www.flickr.com/photos/donshall/3817115551/
  • 35. THEY MAKE DESIGN DECISIONS FOR YOU Photo credit: James Bowe: http://www.flickr.com/photos/jamesrbowe/4231509266/ 2
  • 36. KNOWING YOUR CODE FROM TOP TO BOTTOM IS ESSENTIAL TO HAVE TOTAL CONTROL OVER IT 2 Image credit: http://css-tricks.com/
  • 37. 2 WE CREATED A MINI-LIBRARY THAT IS SIMPLE, FLEXIBLE, LIGHT AND DOESN’T MAKE DECISIONS FOR YOU http://cyber-duck.github.io/hoisin.scss/
  • 38. 2 ONLY LOADING WHAT WE NEED WHEN WE NEED IT.
  • 39. JAVASCRIPT http://requirejs.org/ 2
  • 40. 2 CSS http://sass-lang.com/
  • 41. IMAGES BEGIN WITH OPTIMISATION 2
  • 42. 2 IMAGES THEN COMPRESSION http://imageoptim.com/ https://tinypng.com/
  • 43. 2 IMAGES USING THE RIGHT IMAGE FOR THE RIGHT TASK 27 KB 266 KB
  • 44. 2 CACHING SERVING FILES FASTER http://www.cloudflare.com/ https://www.varnish-cache.org/
  • 45. 2
  • 46. 3 FUTURE FRIENDLINESS
  • 47. 3 THE WEB DOESN’T HAVE A FIXED WIDTH
  • 48. JOHN ALLSOPP We should embrace the fact that the web doesn’t have the same constraints [as the printed page] and design for this flexibility. http://alistapart.com/article/dao/ Photo credit: TEDxNSW: http://www.flickr.com/photos/42645924@N02/3933255654/ 3
  • 49. LAYOUT AND FLOW 3
  • 50. 3 LAYOUTS BASED ON CONTENT RATHER THAN DEVICE
  • 51. 3 RESPONSIVE DESIGN WORKFLOW
  • 52. 3 SKETCH Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures
  • 53. 3 PROTOTYPE Copyright: Paramount Pictures & Marvel Enterprises
  • 54. 3 CREATE PATTERN LIBRARIES PROTOTYPE Copyright: Universal Pictures & Alphaville Films http://styletil.es/
  • 55. ENHANCE FOR CONTEXT 3
  • 56. Copyright: Touchstone Pictures & Amblin Entertainment & Silver Screen Partners III & Walt Disney ANIMATION AS AN ENHANCEMENT 3
  • 57. 4 ACCESSIBILITY
  • 58. Copyright: Warner Bros. 4 7 QUICK WINS FOR ACCESSIBILITY
  • 59. 4 1. MAKE THE PURPOSE OF ALL LINKS AS CLEAR AND DESCRIPTIVE AS POSSIBLE AVOID LINK ANCHORS THAT PRESUME THE INTERACTION METHOD LIKE “CLICK HERE”
  • 60. 4 2. CREATE A HIDDEN SKIP NAVIGATION LINK
  • 61. 4 3. MAKE URLS HUMAN READABLE AND PERMANENT WHERE POSSIBLE IS THIS HUMAN READABLE? ! HTTP://ART.COM/ARTGALLERY/DEFAULT.ASP? ID=9DF4BC0580DF11D3ACB60090271E26A8&COMMAND=FREELIST
  • 62. 4 4. USE DESCRIPTIVE ALT TAGS FOR WHEN AN IMAGE CANNOT BE SHOWN.
  • 63. 4 5. DON’T USE PLACEHOLDERS AS A SUBSTITUTE FOR LABELS ON FORMS Image credit: Dave Bushell: http://dbushell.com/2013/11/08/form-label-design/ http://www.webaxe.org/placeholder-attribute-is-not-a-label/
  • 64. 4 6. USE APPROPRIATE INPUT TYPES AND ATTRIBUTES ON FORMS
  • 65. Related: http://24ways.org/2012/colour-accessibility/ 7. PROOF DESIGNS IN GREYSCALE TO CHECK COLOUR CONTRAST ALSO USE COLOUR BLINDNESS SIMULATORS AND COLOUR CONTRAST CHECK TOOLS 4
  • 66. THE RESULTS
  • 67. SINCE LAUNCH: 200% 2.07% -4000% INCREASE IN MOBILE TRAFFIC INCREASE IN CONVERSION RATE REDUCTION IN HOMEPAGE EXIT RATE ON MOBILE
  • 68. Copyright: Lucasfilm MUCH TO LEARN THERE IS
  • 69. Copyright: Studio 37 & La Petite Reine & La Classe Américaine & JD Prod & France 3 Cinéma & Jouror Productions & uFilm THANK YOU @duckymatt @cyberduck_uk

×