Agile mobile first
- 1. NLHTML5 Mobile and TV development @ Netvlies
- 2. Agile mobile first Responsibly responsive in an agile environment
- 3. Jelmer de Maat Front-end developer @ Netvlies jelmer@netvlies.nl @jelmerdemaat
- 4. Netvlies — Est. 1997
- 5. 44 communicative professionals with 18 years of experience in complex online projects
- 6. What is our goal? Being responsibly responsive in an agile environment
- 7. Topics Leveling the playing field What do “responsive” and “mobile first” really mean? Theories and concepts. An agile workflow The consequences for your team: observations and advices. An agile front-end How to build for a changing environment: tips and techniques. Conclusions and Q&A
- 8. Leveling the playing field
- 10. But what’s next? An iPad website? An N90 website? Can we really continue to commit to supporting each new user agent with its own bespoke experience? At some point, this starts to feel like a zero sum game. But how can we — and our designs — adapt? Ethan Marcotte — Responsive Web Design “
- 13. Creating a website in a device- agnostic way, thus making its content accessible and its interface usable to a diverse range of users. — Me
- 15. All web pages are by default responsive motherfuckingwebsite.com Breaking that is your choice.
- 17. Luke Wroblewski in a tweet about an OpenSignal study on app downloads.
- 18. We need to expand beyond the viewport and consider how we support myriad device capabilities, how we retain accessibility in complex interfaces, and how we deliver assets over the wire. Scott Jehl — Responsible Responsive Web Design “
- 19. Think of it like you're moving. If you're living in a mansion and you have to move into a small apartment, it's really hard to find a place for all of your stuff. If you live in a small apartment first, you learn how to get by with less stuff, and you can then add more stuff when you move into a mansion. Clarissa Peterson, UX strategist “
- 21. Your desktop website Your user’s mobile browser
- 23. Content first Performance first Future proof Progressive enhanced Mobile first
- 24. “Constructing a website mobile first costs more time” ...not understanding what responsive/mobile first means? ...not willing to think about abstract systems? ...not enough proficient with the tools that are required to build it? ..scared of trying new things that may affect available hours?
- 26. ✔ Changing, fast and often ✔ New insights ✔ Collaborative ✔ Iterative ✔ Shifts in priorities
- 28. Things Clients Ask Who Don’t Understand Responsive ? ? ? ? ©
- 29. Things clients ask who don’t understand responsive Can you put my products inside the screen at all times? Users have to scroll now. “
- 30. Things clients ask who don’t understand responsive This text we have should always run over two lines. “
- 31. Things clients ask who don’t understand responsive Why don’t these two columns have the same height? “
- 32. Things clients ask who don’t understand responsive This image should align with the height of the text next to it. “
- 33. Things clients ask who don’t understand responsive It all has to fit on my screen; make everything smaller. “
- 34. Things clients ask who don’t understand responsive At which resolution should we deliver the designs? “
- 35. consequences for Design and concept
- 36. We already have component X! Let’s use it again on this new page. Be prepared for this request “
- 37. Component based ✔ Your client is already convinced ✔ Discuss what deliverables are ✔ Define the constraints with the team ✔ Delivering a design system (styleguide) ✔ Sell it!
- 39. /*--- title: Buttons section: Base CSS --- Button styles can be applied to any element. Typically you'll want to use either a `<button>` or an `<a>` element: ```example:html <button class="btn">Click</button> <a class="btn" href="/some-page">Some Page</a> ``` */ .btn { background-color: black; color: white; }
- 42. Hello Workspace Defining the constraints
- 43. So... ✔ your entire team knows what responsive means ✔ your entire team knows what mobile first means ✔ your entire team knows what the design implications are ✔ you communicated what the design implications are ✔ your workflow is agile ✔ you have set up a design system Now, how to build the thing?
- 45. We need a system that is Brad Frost - Maintaining Design Systems ✔ official ✔ maintainable ✔ cross-disciplinary ✔ approachable ✔ visible ✔ agnostic ✔ contextual (and more)
- 46. We need this
- 48. Even when the final deliverable is a pattern library, clients often still expect to sign off on page designs. Charlotte Jackson — From Pages to Patterns: An Exercise for Everyone, ALA “
- 52. There are two hard things in computer science: cache invalidation and naming things. Phil Karlton “
- 53. There are two hard things in computer science: cache invalidation, naming things and off- by-one errors. — Internet joke “
- 54. Charlotte Jackson — A List Apart Part one: paper and scissors Part two: naming components Part three: code From Pages to Patterns: An Exercise for Everyone
- 56. Part one: paper and scissors
- 57. Part one: paper and scissors
- 58. Part two: naming components
- 59. Part two: naming components
- 60. Part three: code 1. Everyone grab a component. 2. Code it up in HTML and CSS. Set a time limit. 3. Compare and discuss your code. 4. Repeat.
- 61. Dare to challenge coding conventions & test your assumptions { ? }
- 62. html { font-size: 1em; } /** * Headings are always ‘just a bit bigger’ than body copy. */ h1, h2, h3, h4, h5, h6 { font-size: 1.25rem; }
- 63. Absolute units are usually the wrong answer. Elika J. Etemad (fantasai) — CSS Best Practices “
- 65. And other tips ✔ Go for modular CSS as much as possible ✔ Avoid using ID's ✔ Avoid nesting selectors ✔ Keep the specificity graph in mind ✔ Make use of progressive enhancement ✔ Embrace new technologies where possible
- 66. Harry Roberts — The Specificity Graph
- 67. We have a codebase that is likely to prove problematic because we have erratic and poorly managed specificity-and-source-order: we are more likely to spend time undoing or negating the effects of high specificity CSS that was defined too early in the project. Elika J. Etemad (fantasai) — CSS Best Practices “
- 68. Harry Roberts — The Specificity Graph
- 69. Functional CSS Component-driven design vs. component-driven CSS Cole Peters — Building and shipping functional CSS <div class='u-relative u-mt1 u-p2 v-bg-white v-bs2'> <!-- The contents of the card --> </div>
- 70. Functional CSS Component-driven design vs. component-driven CSS Cole Peters — Building and shipping functional CSS <div class='u-relative u-mt1 u-md-mb0 u-p2 v-bg-white v-bs2'> <!-- The contents of the card --> </div>
- 71. Conclusions responsive mobile first agile workflow agile code
- 72. Conclusions What’s the necessary basis for doing this right? ✔ Determine if everybody on your team understands "responsive" ✔ Determine if everybody on your team understands "mobile-first" ✔ Research, setup and evaluate your agile, componentized workflow ✔ Dare to challenge coding conventions and test your assumptions
- 73. Thanks! Questions? ? Jelmer de Maat Front-end developer @ Netvlies netvlies.nl jelmer@netvlies.nl @jelmerdemaat