![Page 1: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/1.jpg)
By: Aaron Bernardo
Responsive Web DesignBridging the Gap Between Art Directorsand Developers
![Page 2: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/2.jpg)
Me.
Aaron Bernardo
@steamin
Experience Architect
![Page 3: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/3.jpg)
Goals for Today
1. What is Responsive Web Design?
2. Present Best Practice Patterns for Art Directors
![Page 4: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/4.jpg)
INTRODUCTION
![Page 5: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/5.jpg)
Phrase coined by Ethan Marcotte in a2010 article in A List Apart
What is Responsive Web Design?
![Page 6: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/6.jpg)
“Rather than tailoring disconnected designs to each of an
ever-increasing 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
What is Responsive Web Design?
![Page 7: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/7.jpg)
“New default for Web Design”.NET Magazine November 2011
“2013 Is the Year of Responsive Web Design”Mashable December 2012
What is Responsive Web Design?
![Page 8: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/8.jpg)
An Example
![Page 9: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/9.jpg)
Desktop view
![Page 10: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/10.jpg)
Tablet view
![Page 11: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/11.jpg)
Mobile view
![Page 12: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/12.jpg)
So… How Does it Work?
![Page 13: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/13.jpg)
There are 3 Essential Ingredients
A Flexible, Grid-based Layout
Flexible Images and Media
Media Queries
![Page 14: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/14.jpg)
A Flexible, Grid-based Layout
![Page 15: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/15.jpg)
1. Sites can still have fixed/max. width
2. Move your thinking from px to %
3. Sites now have ‘Breakpoints’ createdto allow multiple devices to displaycontent differently
Flexible, Grid-based Layout
![Page 16: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/16.jpg)
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
Flexible, Grid-based Layout
![Page 17: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/17.jpg)
Flexible images and media
![Page 18: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/18.jpg)
1. A flexible layout is useless if its components
are at a fixed width
2. Components include images, fonts, videoplayers, and audio players
Flexible Media
![Page 19: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/19.jpg)
As an Art Director you need to …1. Remember images containing embedded
fonts will scale smaller
2. Think about images as being insidefluid containers
Flexible Media
![Page 20: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/20.jpg)
Media Queries
![Page 21: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/21.jpg)
1. New styling applied to different breakpoints
2. Common media queries include:
min-width: ?px
max-width: ?px
orientation : portrait
orientation: landscape
Media Queries
![Page 22: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/22.jpg)
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
Media Queries
![Page 23: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/23.jpg)
The Challenge…How do you create mockups that align with Development?
![Page 24: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/24.jpg)
Pattern List
Best Practices
![Page 25: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/25.jpg)
Viewport: The visible portion of the canvas
Breakpoint: The pixel width at which a page changes its layout
Pattern Templates: Created by Luke Wroblewski
Commonly Used Terms
![Page 26: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/26.jpg)
1. Mostly Fluid
A
B C
A
B C
A
B C
A
B
C
MOBILE tablet netbook DESKTOP
![Page 28: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/28.jpg)
2. Column Drop
AB CAB
C
A
BC
A
B
C
MOBILE tablet netbook DESKTOP
![Page 30: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/30.jpg)
3. Layout Shifter
AB
C
AB
C
A
B
C
A
B
C
MOBILE tablet netbook DESKTOP
![Page 32: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/32.jpg)
4. Off Canvas
AB C AB C
AB C AB C
MOBILE tablet
netbook DESKTOP
![Page 33: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/33.jpg)
Example: Off Canvas
![Page 34: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/34.jpg)
5. Tiny Tweaks
A A A A
MOBILE tablet netbook DESKTOP
![Page 36: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/36.jpg)
Helpful Resources
Luke Wroblewski
Responsive sketch templates
Adobe Reflow (comes with Creative Cloud)
12 Helpful Tools
![Page 37: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/37.jpg)
In Conclusion…
![Page 38: Responsive Web Design - Bridging the Gap Between Art Directors](https://reader035.vdocuments.us/reader035/viewer/2022062617/54b7a1324a795998738b46a0/html5/thumbnails/38.jpg)
Thank you.@steamin