'Responsivable' Web Development

"Responsibly developing responsive sites."

This talk was delivered at the Responsive Web Design edition of Bristol Skillswap.
http://bristolskillswap.org/responsive/

Transcript

1. ‘Responsivable’ Web Development @iamkeir
2. Thank you! A big thank you to all the Skillswappers who came to Going Beyond Code and participated in my Wild Wild Web talk.
3. New Adventures New adventure, new challenges My first RWD was only last year (Aug 2012) Fluid + breakpoints Fluid is nothing new Breakpoints = evolution There is no spoon (device-agnostic) I love simple
4. Start small blendedcreative.co.uk lightwellresearch.com thecompliancepartnership.com barneswilliams.co.uk monkeycalls.com blakelondon.co.uk
5. Go large Large sites & teams (cxpartners) SASS is invaluable (variables for breakpoints) Importance of modularity (build + test) Respond in any environment Grouped vs inline breakpoints Piece together jigsaw breakpoint-sass.com
6. Gotchas It takes longer! <select> max-width buffoonery: http://codepen.io/iamkeir/pen/DnsAz Firefox vs The World: http://iamkeir.com/post/26647025450/firefox-media-query-breakpoints-wtf Zooming = resizing? http://blog.55minutes.com/2012/04/media-queries-and-browser-zoom/ Beware of BRD (Browser Resize Disorder)
7. Theory Mobile-first vs desktop-first (real life) Responsive media (img, video, table) Responsive fonts (vw, vh, vmin, FitText.js) Grid systems, ems & calculators Is responsive always right? (FreeAgent, GoCardless) https://gocardless.com/blog/unresponsive-design/ Mobile vs responsive (web perf, Andy Davies)
8. Be ‘responsivable’ Don’t go mad (but do be eager) Keep it simple Mobile-first (where possible) Flags in the sand (thanks Pete) Consider the context, remember the human Don’t reinvent wheel (tried & tested) Test, test, test, test, test, test, test, test, test, test, test, test, test, test, test...
9. Thanks! Further reading... http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ http://adaptive-images.com/ http://cxpartners.co.uk/cxblog/user-experience-problems-with-responsive-photos/ http://responsivedesignweekly.com/rwd-summit/javascript-in-responsive-web- design-by-dave-rupert/ https://gocardless.com/blog/unresponsive-design/ http://www.slideshare.net/AndyDavies/making-mobile-sites-faster
10. ‘Responsivable’ Web Development @iamkeir