Responsive Classroom Sampler Presented by: Andrew Moral Responsive Classroom Approach.
Responsive
-
Upload
aaron-bernardo -
Category
Business
-
view
102 -
download
1
Transcript of Responsive
Goals for Today
1. What is Responsive Web Design?
2. Present Best Practice Patterns for Art Directors
“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?
There are 3 Essential Ingredients
A Flexible, Grid-based Layout
Flexible Images and Media
Media Queries
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
1. A flexible layout is useless if its componentsare 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 inside
fluid containers
Flexible Media
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
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
Helpful Resources
Luke Wroblewski
Responsive sketch templates
Adobe Reflow (comes with Creative Cloud)
12 Helpful Tools