Adapting to a Responsive Web Design - TFM&A - 26-02-14
6 likes3,399 views
Responsive web design is a design philosophy focused on creating interfaces that adapt quickly to user conditions, ensuring content is accessible across all devices. Key advantages include reduced maintenance, improved speed and performance, and a future-friendly approach to web architecture. The document also emphasizes the importance of accessibility and offers strategies for optimizing web design and performance.
![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](https://image.slidesharecdn.com/tfma-26-feb-14-140227082826-phpapp01/85/Adapting-to-a-Responsive-Web-Design-TFM-A-26-02-14-49-320.jpg)
Adapting to a Responsive Web Design - TFM&A - 26-02-14
- 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. 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
- 11. Image Copyright: L.A. Films & Home Box Office (HBO) 3 FACTORS
- 12. 1 MULTIPLE CODE BASES 2 CONTENT STRATEGY 3 KNOWN UNKNOWNS
- 14. SETTING 4 GOALS FOR A RESPONSIVE DESIGN Image Copyright: Chartoff-Winkler Productions & United Artists
- 15. CONTENT PARITY THE SAME CONTENT SHOULD BE AVAILABLE ON ALL PLATFORMS Credit: http://wtfmobileweb.com/ 1
- 16. SPEED MATTERS 2 BECAUSE PERFORMANCE AFFECTS EVERYONE Image Copyright: Universal Pictures
- 17. 3 FUTURE FRIENDLY CUT DOWN ON MAINTENANCE AND SUPPORT KNOWN UNKNOWNS Image Copyright: Universal TV See: http://futurefriend.ly/
- 18. ACCESSIBILITY STYLES, BACKGROUNDS AND JAVASCRIPT ARE PROGRESSIVE ENHANCEMENTS Photo Credit: Neil McKenzie: http://www.flickr.com/photos/furbyx4/2968376257/ 4
- 19. 1 CONTENT PARITY
- 21. 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/
- 23. 1
- 24. RESEARCHING CONTENT STRATEGY 1 SPEAKING TO EXISTING CUSTOMERS GOOGLE ANALYTICS CRAZYEGG LEAD FORENSICS Image Copyright: Warner Bros.
- 25. 1 OUR CONTENT DEFINES THE LAYOUTS WE NEED ! NOT THE OTHER WAY AROUND
- 26. 2 SPEED MATTERS
- 28. 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
- 29. DOES RESPONSIVE = POOR PERFORMANCE? Credit: Guy Podjarny - Creator of Mobitest: http://www.guypo.com/mobile/what-are-responsive-websites-made-of/ 2
- 30. 2 To react quickly and positively.
- 31. 2 IT’S EASY TO CONFUSE IMPLEMENTATION WITH TECHNIQUE Image Copyright: Metro-Goldwyn-Mayer (MGM)
- 32. Image Copyright: Twentieth Century Fox Film Corporation 2 MAKING PERFORMANCE A PRIORITY ! SETTING A PERFORMANCE “BUDGET” timkadlec.com/2013/01/setting-a-performance-budget/
- 33. 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
- 34. 2 OFF THE SHELF FRONT-END FRAMEWORKS
- 35. 2 TRYING TO DO EVERYTHING Photo credit: Don Shall: http://www.flickr.com/photos/donshall/3817115551/
- 36. THEY MAKE DESIGN DECISIONS FOR YOU Photo credit: James Bowe: http://www.flickr.com/photos/jamesrbowe/4231509266/ 2
- 37. KNOWING YOUR CODE FROM TOP TO BOTTOM IS ESSENTIAL TO HAVE TOTAL CONTROL OVER IT 2 Image credit: http://css-tricks.com/
- 38. 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/
- 39. 2 ONLY LOADING WHAT WE NEED WHEN WE NEED IT.
- 44. 2 IMAGES USING THE RIGHT IMAGE FOR THE RIGHT TASK 27 KB 266 KB
- 46. 2
- 48. 3 THE WEB DOESN’T HAVE A FIXED WIDTH
- 49. 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
- 51. 3 LAYOUTS BASED ON CONTENT RATHER THAN DEVICE
- 53. 3 SKETCH Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures
- 54. 3 PROTOTYPE Copyright: Paramount Pictures & Marvel Enterprises
- 55. 3 CREATE PATTERN LIBRARIES PROTOTYPE Copyright: Universal Pictures & Alphaville Films http://styletil.es/
- 57. Copyright: Touchstone Pictures & Amblin Entertainment & Silver Screen Partners III & Walt Disney ANIMATION AS AN ENHANCEMENT 3
- 58. 4 ACCESSIBILITY
- 59. Copyright: Warner Bros. 4 7 QUICK WINS FOR ACCESSIBILITY
- 60. 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”
- 61. 4 2. CREATE A HIDDEN SKIP NAVIGATION LINK
- 62. 4 3. MAKE URLS HUMAN READABLE AND PERMANENT WHERE POSSIBLE IS THIS HUMAN READABLE? ! HTTP://ART.COM/ARTGALLERY/DEFAULT.ASP? ID=9DF4BC0580DF11D3ACB60090271E26A8&COMMAND=FREELIST
- 63. 4 4. USE DESCRIPTIVE ALT TAGS FOR WHEN AN IMAGE CANNOT BE SHOWN.
- 64. 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/
- 65. 4 6. USE APPROPRIATE INPUT TYPES AND ATTRIBUTES ON FORMS
- 66. 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
- 67. THE RESULTS
- 68. SINCE LAUNCH: 200% 2.07% -4000% INCREASE IN MOBILE TRAFFIC INCREASE IN CONVERSION RATE REDUCTION IN HOMEPAGE EXIT RATE ON MOBILE
- 69. Copyright: Lucasfilm MUCH TO LEARN THERE IS
- 70. Copyright: Studio 37 & La Petite Reine & La Classe Américaine & JD Prod & France 3 Cinéma & Jouror Productions & uFilm THANK YOU @duckymatt @cyberduck_uk