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