Accessibility and Maintainability as foundations for Responsive Design

Continuing our series on Responsive Design, Darren Belding and Tom Robertshaw spoke at Meet Magento Romainia. During the 25 minutes we covered how to build more maintainable and structured frontend code.

Transcript

1. Responsive Design Tom Robertshaw & Darren Belding @meanbee @bobbyshaw @dsbelding Meanbee
3. http://bradfrostweb.com/blog/post/this-is-the-web/
4. One Web • The same information and services are available for all devices • No “This feature is not available” http://www.w3.org/TR/mobile-bp/#OneWeb
5. Mobile First • A great exercise to consider content priorities • Starts with a solid base • Technically efficient
6. Accessibility More than just screen readers
7. “Adaptability is accessibility” - John Allsopp http://alistapart.com/article/dao/
8. Developing for the unknown For Features For Users
9. • Relative units • Fluid grid and content • Connection speed • Infinite inputs theory Accessibility
10. Think Modular
11. OOCSS +! OOJS
14. Results of Modularity • DRY • Reusable • Scalable • Familiar for developers
15. • OOJS • Init • Reinit • Destroy • Conditional • matchMedia + modernizr • enquire.js, harvey.js • require.js
16. The future is web components http://webcomponents.org
18. Server-side or client-side optimisations RESS vs Local Storage
19. 5 success criteria for responsive imagery
20. • Fluid • File size • Resolution • Mime types • Art Direction Responsive Imagery
23. • Speed and Maintainability are emergent system properties • You can only scale with a solid foundation
24. • Build Responsibly • Be a Frontend Engineer • Duty to client to advise them even if it means moulding the design/requirement
25. Conclusion Responsive design paired with server side optimisations enables maintainable, future friendly device experiences