Responsive
Download as PPTX, PDF0 likes282 views
This document discusses responsive web design and provides best practices for art directors. It defines responsive web design as using flexible layouts, images and media queries to create an optimal viewing experience across different devices. It presents five common responsive patterns (mostly fluid, column drop, layout shifter, off canvas, tiny tweaks) and recommends that art directors create sketches for different screen sizes and consider how their designs will change during resizing.
Responsive
- 1. Responsive Web Design Bridging the Gap Between Art Directors and Developers By: Aaron Bernardo
- 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?
- 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
- 36. Helpful Resources Luke Wroblewski Responsive sketch templates Adobe Reflow (comes with Creative Cloud) 12 Helpful Tools
- 37. In Conclusion…