1. Responsive Web Design
Bridging the Gap Between Art Directors
and Developers
By: Aaron Bernardo

2. Me.
Aaron Bernardo
@steamin
Experience Architect

3. Goals for Today
1. What is Responsive Web Design?
2. Present Best Practice Patterns for Art Directors

4. INTRODUCTION

5. What is Responsive Web Design?
Phrase coined by Ethan Marcotte in a
2010 article in A List Apart

6. What is Responsive Web Design?
“Rather than tailoring disconnected designs to each of an everincreasing number of web devices, we can treat them as facets of the
same experience. We can design for an optimal viewing experience,
but embed standards-based technologies into our designs to make
them not only more flexible, but more adaptive to the media that
renders them.”
Ethan Marcotte

7. What is Responsive Web Design?
“New default for Web Design”
.NET Magazine November 2011
“2013 Is the Year of Responsive Web Design”
Mashable December 2012

8. An Example

9. Desktop view

10. Tablet view

11. Mobile view

12. So… How Does it Work?

13. There are 3 Essential Ingredients
A Flexible, Grid-based Layout
Flexible Images and Media
Media Queries

14. A Flexible, Grid-based Layout

15. Flexible, Grid-based Layout
1. Sites can still have fixed/max. width
2. Move your thinking from px to %
3. Sites now have ‘Breakpoints’ created
to allow multiple devices to display
content differently

16. Flexible, Grid-based Layout
As an Art Director you need to …
1. Consider how your designs will be altered with resizing
2. Have an understanding of how your decisions will affect
developers
3. Produce artwork or diagrams/sketches for each viewport

17. Flexible images and media

18. Flexible Media
1. A flexible layout is useless if its components
are at a fixed width
2. Components include images, fonts, video
players, and audio players

19. Flexible Media
As an Art Director you need to …
1. Remember images containing embedded
fonts will scale smaller
2. Think about images as being inside
fluid containers

20. Media Queries

21. Media Queries
1. New styling applied to different breakpoints
2. Common media queries include:
min-width: ?px
max-width: ?px
orientation : portrait
orientation: landscape

22. Media Queries
As an Art Director you need to …
1. Identify the minimum number of breakpoints required
for your design based off the ecosystem of possible
devices/screens
2. Understand the possibilities and limitations of CSS

23. The Challenge…
How do you create mockups that align with Development?

24. Pattern List
Best Practices

25. Commonly Used Terms
Viewport: The visible portion of the canvas
Breakpoint: The pixel width at which a page
changes its layout
Pattern Templates: Created by Luke Wroblewski

26. 1. Mostly Fluid
MOBILE
tablet
netbook
DESKTOP
A
A
A
A
B
B
C
C
B
C
B
C

27. Example: Mostly Fluid
http://www.antarcticstation.org/

28. 2. Column Drop
MOBILE
A
tablet
A
B
C
B
C
netbook
B
A
C
DESKTOP
B
A
C

29. Example: Column Drop
http://modernizr.com/

30. 3. Layout Shifter
MOBILE
A
B
tablet
netbook
A
B
B
A
C
C
DESKTOP
C
B
A
C

31. Example: Layout Shifter
http://www.anderssonwise.com/

32. 4. Off Canvas
MOBILE
B
A
C
tablet
B
A
C
B
A
C
netbook
B
A
C
DESKTOP

33. Example: Off Canvas

34. 5. Tiny Tweaks
MOBILE
A
tablet
netbook
A
A
DESKTOP
A

35. Example: Tiny Tweaks
http://futurefriend.ly/

36. Helpful Resources
Luke Wroblewski
Responsive sketch templates
Adobe Reflow (comes with Creative Cloud)
12 Helpful Tools

37. In Conclusion…

38. Thank you.
@steamin