Responsive design has landed in lots of places and is becoming business as usual. Time to reflect: are we doing the right things in the right ways? How do we gracefully move away from desktop-first designs? And how do you approach a responsive design with your complete team in your agile workflow? Let's take a look at the current status of responsive design and figure out how to incorporate a mobile-first workflow in your business.

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

14. Responsive
Fluid
Large phone
...
Adaptive
Liquid
Small tablet
...

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?

25. An agile workflow

26. ✔ Changing, fast and often
✔ New insights
✔ Collaborative
✔ Iterative
✔ Shifts in priorities

27. consequences for
Client communication

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?

44. An agile front-end

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