Forefront Leeds - Andy Fitch - 18/11/2013

A Mobile-first, OOCSS approach to Responsive Web Design

Transcript

1. Andy Fitch @_andyfitch
2. Director Lead Front-end Developer @helloparallax
3. So what’s involved with running a digital agency?
5. • Summary of our development process ! ! • OOCSS + Responsive Web Design ! ! • Tools, tips & tricks for RWD & Retina
6. • 3 front-end developers ! • 3 back-end developers Andrew Hathaway @andrewhathaway Daniel Le Page @dannylepage Jack Roscoe @northernintro James Hall @MrRio Aran Wilkinson @aran384 Nathaniel Higgins @nathggns
7. • Reduce code block ! ! • Medium - large projects ! ! • Half front-end, half back-end
8. So what do front-end developers do?
9. HTML CSS Grunt Bower Compass CakePHP Inuit CSS JSON BEM RWD MVC DRY SRP JavaScript SASS PHP jQuery Knockout RequireJS
10. Development Process at Parallax • Scoping / feasibility ! • Wireframing ! • Design ! • Development
11. Wireframing • An iterative process with designers, right through to development • Don’t be afraid of pen & paper!
12. Development
14. Development • Bower - package manager ! Search, install, update & remove packages • Grunt - task manager ! Ditch CodeKit! • RequireJS - file and module loader ! Dependencies
15. Responsive Web Design Developers have a terrible habit of making assumptions for their own convenience… ! …base your decisions on facts and evidence! All web design should be responsive Elastic?
16. Assumptions are toxic! DO NOT ASSUME mobile users only want your primary content! ! Mobile users want the same information desktop users do, they just have different priorities
17. Assumptions are toxic! DO NOT ASSUME mobile users only want your primary content! ! Mobile users want the same information desktop users do, they just have different priorities
18. DO NOT ASSUME anyone who is not using a desktop is using an iPhone or an iPad. ! RWD stands for Responsive Web Design RWD does not stand for Reliable With Devices-made-by-Apple
19. DO NOT ASSUME your flashy retina users have flashy internet connections! !
20. Planning! • Draw your layouts ! ! • Mobile first • Schema ! ! • Framework
21. Implementation
22. Implementation yorkshireccc.com
23. • Abstracted code is lovely, generic, reusable code ! • Objects ! • Rapid development ! • Helpers <div class=“media”> <div class=“media”> <div class=“media”> <div class=“media”> <div class=“media”> <div class=“media”> <div class=“media”> <div class=“media”> <div class=“media”> <div class=“media”>
24. Then Now
25. @media all and (min-width: 1000px) {
26. @media all and (min-width: 1000px) { @media all and (min-width: 768px) { @media all and (min-width: 600px) { @media all and (min-width: 420px) {
27. @media all and (min-width: 1000px) { @media all and (min-width: 768px) { @media all and (min-width: 600px) { @media all and (min-width: 420px) { Break points! not Device points
31. Single Responsibility Principle (SRP)! (each class has one job & one job only) ! ! is completely at odds with ! ! Responsive Web Design! (many jobs at different states)
32. <div class=“grid”> <div class=“grid__item”> </div> <div class=“grid__item”> </div> <div class=“grid__item”> </div> </div> A typical problem
33. <div class=“grid”> <div class=“grid__item one-whole soft-half—top soft-half--bottom”> </div> <div class=“grid__item one-whole soft--top”> </div> <div class=“grid__item one-whole soft-half—bottom”> </div> </div>
34. .one-whole { width: 100%; } ! @media all and (min-width: 700px) { .one-whole { ! } } ! @media all and (min-width: 1000px) { .one-whole { } } <div class=“grid”> <div class=“grid__item one-whole soft-half—top soft-half--bottom”> </div> <div class=“grid__item one-whole soft--top”> </div> <div class=“grid__item one-whole soft-half—bottom”> </div> </div>
35. <div class=“grid grid--one-two-three”> <div class=“grid__item grid__item--primary soft-half--top soft-half--bottom”> </div> <div class=“grid__item grid__item--secondary soft--top”> </div> <div class=“grid__item grid__item—tertiary soft-half--bottom”> </div> </div>
36. <div class=“grid grid--one-two-three”> <div class=“grid__item grid__item--primary soft-half--bottom”> </div> <div class=“grid__item grid__item--secondary”> </div> <div class=“grid__item grid__item—tertiary”> </div> </div> .grid—one-two-three { .grid__item--primary { width: 100%; } .grid__item--secondary { width: 100%; } .grid__item--tertiary { width: 100%; } } @media all and (min-width: 700px) { .grid—one-two-three { .grid__item—primary { width: 66.6666%; } .grid__item—secondary { width: 33.3333%; } .grid__item--tertiary { width: 100%; } } } @media all and (min-width: 1000px) { .grid—one-two-three { .grid__item--primary { width: 50%; } .grid__item--secondary { width: 25%; } .grid__item--tertiary { width: 25%; } } }
37. .grid—one-two-three { .grid__item--primary { width: 100%; } .grid__item--secondary { width: 100%; } .grid__item--tertiary { width: 100%; } } @media all and (min-width: 700px) { .grid—one-two-three { .grid__item—primary { width: 66.6666%; } .grid__item—secondary { width: 33.3333%; } .grid__item--tertiary { width: 100%; } } } @media all and (min-width: 1000px) { .grid—one-two-three { .grid__item--primary { width: 50%; } .grid__item--secondary { width: 25%; } .grid__item--tertiary { width: 25%; } } } Mobile Tablet Desktop
38. .grid--one-two-two
39. Stack Similarities, Group Differences ! github.com/andyfitch/ssgd-rwd
40. • Define layouts in a top-level class • Comment your code!! /yccc-skin/objects/_grids.scss /yccc-skin/responsive/_grids.scss
41. • Packery http://packery.metafizzy.co/ ! • Hammer.js http://eightmedia.github.io/hammer.js/ ! • cssarrowplease http://cssarrowplease.com/ ! • FF Chartwell https://www.fontfont.com/how-to-use-ff-chartwell ! ! ! ! ! ! ! ! ! • Chosen http://harvesthq.github.io/chosen/ General
42. • * { box-sizing: border-box; } (IE8+) • http://www.paulirish.com/2012/box-sizing-border-box-ftw/ ! ! • JSConsole - iOS Simulator & Android Debug Bridge • http://jsconsole.com/ ! ! • Flowtype • http://simplefocus.com/flowtype/ Responsive
43. • ImageOptim-CLI • https://github.com/JamieMason/ImageOptim-CLI ! • Compressive images • http://filamentgroup.com/lab/rwd_img_compression/ ! • Retina Cookie trick • https://github.com/andyfitch/retina-cookie-trick ! • ReSRC.it • http://www.resrc.it/ ! • Current state of responsive images, srcset, src-N etc.: • http://html5doctor.com/responsive-images-end-of-year-report/ Retina
44. Andy Fitch @_andyfitch Thank you!