By: Aaron Bernardo Responsive Web Design Bridging the Gap Between Art Directors and Developers
Responsive Web Design - Bridging the Gap Between Art Directors
Jan 15, 2015
Attempting to bridge the gap between developers and art directors. Too often there is conflict and differing opinions about how to design for a responsive site.
Content of this presentation follows Luke Wroblewski's multi-device layout pattern library.
Content of this presentation follows Luke Wroblewski's multi-device layout pattern library.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
By: Aaron Bernardo
Responsive Web DesignBridging the Gap Between Art Directorsand Developers
Me.
Aaron Bernardo
@steamin
Experience Architect
Goals for Today
1. What is Responsive Web Design?
2. Present Best Practice Patterns for Art Directors
INTRODUCTION
Phrase coined by Ethan Marcotte in a2010 article in A List Apart
What is Responsive Web Design?
“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?
“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?
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
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
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
Flexible images and media
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
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
Media Queries
1. New styling applied to different breakpoints
2. Common media queries include:
min-width: ?px
max-width: ?px
orientation : portrait
orientation: landscape
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
Media Queries
The Challenge…How do you create mockups that align with Development?
Pattern List
Best Practices
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
1. Mostly Fluid
A
B C
A
B C
A
B C
A
B
C
MOBILE tablet netbook DESKTOP
2. Column Drop
AB CAB
C
A
BC
A
B
C
MOBILE tablet netbook DESKTOP
3. Layout Shifter
AB
C
AB
C
A
B
C
A
B
C
MOBILE tablet netbook DESKTOP
4. Off Canvas
AB C AB C
AB C AB C
MOBILE tablet
netbook DESKTOP
Example: Off Canvas
5. Tiny Tweaks
A A A A
MOBILE tablet netbook DESKTOP
Helpful Resources
Luke Wroblewski
Responsive sketch templates
Adobe Reflow (comes with Creative Cloud)
12 Helpful Tools
In Conclusion…
Thank you.@steamin
Related Documents
