Tweet
Tweet

Slide 1

Slide 1 text

‘Responsivable’ Web Development @iamkeir

Slide 2

Slide 2 text

Thank you! A big thank you to all the Skillswappers who came to Going Beyond Code and participated in my Wild Wild Web talk.

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Start small blendedcreative.co.uk lightwellresearch.com thecompliancepartnership.com barneswilliams.co.uk monkeycalls.com blakelondon.co.uk

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Gotchas It takes longer! 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)

Slide 7

Slide 7 text

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)

Slide 8

Slide 8 text

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...

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

‘Responsivable’ Web Development @iamkeir