Responsive Web Design
Bridging the Gap Between Art Directors
and Developers

By: Aaron Bernardo
Me.
Aaron Bernardo

@steamin
Experience Architect
Goals for Today
1. What is Responsive Web Design?

2. Present Best Practice Patterns for Art Directors
INTRODUCTION
What is Responsive Web Design?
Phrase coined by Ethan Marcotte in a
2010 article in A List Apart
What is Responsive Web Design?
“Rather than tailoring disconnected designs to each of an everincreasing number of web devi...
What is Responsive Web Design?
“New default for Web Design”
.NET Magazine November 2011

“2013 Is the Year of Responsive W...
An Example
Desktop view
Tablet view
Mobile view
So… How Does it Work?
There are 3 Essential Ingredients
A Flexible, Grid-based Layout

Flexible Images and Media

Media Queries
A Flexible, Grid-based Layout
Flexible, Grid-based Layout
1. Sites can still have fixed/max. width
2. Move your thinking from px to %
3. Sites now have ...
Flexible, Grid-based Layout
As an Art Director you need to …

1. Consider how your designs will be altered with resizing
2...
Flexible images and media
Flexible Media
1. A flexible layout is useless if its components
are at a fixed width
2. Components include images, fonts,...
Flexible Media
As an Art Director you need to …
1. Remember images containing embedded
fonts will scale smaller
2. Think a...
Media Queries
Media Queries
1. New styling applied to different breakpoints

2. Common media queries include:
min-width: ?px
max-width: ...
Media Queries
As an Art Director you need to …
1. Identify the minimum number of breakpoints required
for your design base...
The Challenge…
How do you create mockups that align with Development?
Pattern List
Best Practices
Commonly Used Terms
Viewport: The visible portion of the canvas
Breakpoint: The pixel width at which a page
changes its la...
1. Mostly Fluid
MOBILE

tablet

netbook

DESKTOP

A

A

A

A
B

B

C

C

B

C

B

C
Example: Mostly Fluid

http://www.antarcticstation.org/
2. Column Drop
MOBILE

A

tablet

A

B
C
B

C

netbook

B

A

C

DESKTOP

B

A

C
Example: Column Drop

http://modernizr.com/
3. Layout Shifter
MOBILE

A
B

tablet

netbook

A
B

B

A
C

C

DESKTOP

C

B

A
C
Example: Layout Shifter

http://www.anderssonwise.com/
4. Off Canvas
MOBILE

B

A

C

tablet

B

A

C

B

A

C

netbook

B

A

C

DESKTOP
Example: Off Canvas
5. Tiny Tweaks
MOBILE

A

tablet

netbook

A

A

DESKTOP

A
Example: Tiny Tweaks

http://futurefriend.ly/
Helpful Resources
Luke Wroblewski
Responsive sketch templates
Adobe Reflow (comes with Creative Cloud)
12 Helpful Tools
In Conclusion…
Thank you.
@steamin
Upcoming SlideShare
Loading in …5
×

Responsive

190 views
148 views

Published on

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
190
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive

  1. 1. Responsive Web Design Bridging the Gap Between Art Directors and Developers By: Aaron Bernardo
  2. 2. Me. Aaron Bernardo @steamin Experience Architect
  3. 3. Goals for Today 1. What is Responsive Web Design? 2. Present Best Practice Patterns for Art Directors
  4. 4. INTRODUCTION
  5. 5. What is Responsive Web Design? Phrase coined by Ethan Marcotte in a 2010 article in A List Apart
  6. 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. 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. 8. An Example
  9. 9. Desktop view
  10. 10. Tablet view
  11. 11. Mobile view
  12. 12. So… How Does it Work?
  13. 13. There are 3 Essential Ingredients A Flexible, Grid-based Layout Flexible Images and Media Media Queries
  14. 14. A Flexible, Grid-based Layout
  15. 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. 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. 17. Flexible images and media
  18. 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. 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. 20. Media Queries
  21. 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. 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. 23. The Challenge… How do you create mockups that align with Development?
  24. 24. Pattern List Best Practices
  25. 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. 26. 1. Mostly Fluid MOBILE tablet netbook DESKTOP A A A A B B C C B C B C
  27. 27. Example: Mostly Fluid http://www.antarcticstation.org/
  28. 28. 2. Column Drop MOBILE A tablet A B C B C netbook B A C DESKTOP B A C
  29. 29. Example: Column Drop http://modernizr.com/
  30. 30. 3. Layout Shifter MOBILE A B tablet netbook A B B A C C DESKTOP C B A C
  31. 31. Example: Layout Shifter http://www.anderssonwise.com/
  32. 32. 4. Off Canvas MOBILE B A C tablet B A C B A C netbook B A C DESKTOP
  33. 33. Example: Off Canvas
  34. 34. 5. Tiny Tweaks MOBILE A tablet netbook A A DESKTOP A
  35. 35. Example: Tiny Tweaks http://futurefriend.ly/
  36. 36. Helpful Resources Luke Wroblewski Responsive sketch templates Adobe Reflow (comes with Creative Cloud) 12 Helpful Tools
  37. 37. In Conclusion…
  38. 38. Thank you. @steamin

×