In 2010 Ethan Marcotte packaged together fluid grids, media queries and flexible images to create Responsive Web Design. Fast-forward to today and responsive design is now a project requirement coming directly from clients and stakeholders. But is the way we define (and therefore approach) responsive design holding us back? In this session we’ll explore why we should adopt a new mindset as fluid and flexible as the techniques themselves suggest.

1. Stretching the rules
!
RESPOND, 2015
@webfliccy

3. Tim Berners-Lee, the inventor of the world wide web, outside his office at the Massachusetts
Institute of Technology in 2000. Photograph: Ed Quinn/Corbis

4. http://www.guidebookgallery.org/pics/articles/thexeroxstararetrospective/fig1.big.jpg
Xerox Star, 1982

5. http://www.guidebookgallery.org/pics/articles/thexeroxstararetrospective/fig1.big.jpg
Windows 8, 2012

6. RWD
• Flexible grid
• Flexible images
• Media queries

7. The critics

8. –Jeffrey Zeldmann
If Ethan hadn’t included three simple
executional requirements […] the concept
might have quickly fallen by the wayside […]
The simplicity, elegance, and completeness
of the package—here’s why, and here’s how
—sold the idea to […] hundreds of
thousands.
“
”

9. Device Lab

10. Device Lab

11. Media queries
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px){…}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px){…}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px){…}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px){…}

12. Our arsenal

13. Sydney Opera House,
competition scheme

14. Sydney Opera House,
competition scheme

15. Sydney Opera House,
competition scheme

16. Operating System

17. Browser

18. Input type

19. Screen width
3.5" | 4" | 4.7" | 5" | 5.5" | 5.7" …
http://www.xda-developers.com/

20. Connection speed

21. Implementation?
• Content-led
• Consider vertical space
Media queries

22. Vertical media queries
.carousel {
width: 100%;
height: auto;
}
!
@media (max-height: 466px) {
.carousel { height: 140px; }
}

23. Implementation?
• Content-led
• Consider vertical space
• Modular
Media queries

24. Modular
• Object-oriented CSS
• Pre-processors
• AMD JavaScript libraries
• Web components

25. Media Queries

26. Viewport Grid ModulesTemplate
Page anatomy

27. Element Queries

28. Element Queries
<script src="assets/js/ResizeSensor.js"></script>
<script src="assets/js/ElementQueries.js"></script>
.story[max-width~="250px"] {
padding: 5px;
background: #bbffeb;
}
!
.story[max-width~="250px"] .story__lead {
float: none;
margin: 0 0 10px 0;
width: 100%;
}
.story[max-width~="250px"] .story__lead img {
width: 100%;
}
http://marcj.github.io/css-element-queries/

29. The other-side
• unreliable user-agents
• not a natural fit
• past pain
Whatever happened to RESS?

30. RWD
=
Web design
DONE RIGHT

31. @webfliccy
Thanks for
listening!