Week 9 ^3.23

Notes

Responsive Media

• Responsive Images Overview
• Terms for Responsive Media
• Discovering Various Divice Pixel Densities

Browser Support (caniuse.com):

• background-size

Examples and Resources:

• DPI Love
• High DPI Demo
• Extra High DPI Demo
• Making sense of DPI, PPI, Megapixels and Resolution

SVG

Neat examples:

• Svg hover example
• SVG Lightbulb example

Relevant Library Code

• Fluid Images
• CSS Responsive Images

Reading

Read for week 10:

• Chapter 3: Images and Videos of Responsive Design: Patterns & Principles [Google Drive ]
• Read parts 1-5 of Responsive Images 101 Series
• Read Designer's guide to DPI. (stop after "What is a Multiplier")
• Review examples of design sketches (for project 2)

Homework

Choose your topic for your Project 2. Find high resolution media for the site and write any necessary text. Complete multiple detailed sketches for your design. Make sure to sketch your layout at multiple sizes and think about how it will adjust or change. Use annotations to indicate movement or animation. Don't forget the navigation!

Once you have completed your sketches, begin working on prototypes in Sketch.