Images on the web present designers with new challenges because the layout is fluid. These challenges exist because we cannot control what device or scale our web page will be viewed by users. The solutions to these problems have one foot in visual design principals and another in code.

• Web Design Syllabus

Teacher Activities

• Check Learning Journals
• Discuss the nature of the fluid web
  • Demonstrate resizing the browser, zooming, and mobile emulation.
  • Discuss the challenges of screen orientation and bandwidth
  • Demonstrate the art direction problem
  • Demonstrate the resolution switching problem
• Pre-teach vocab (resolution / orientation / raster)

Student Activities

• Participate in class discussion
• Read Responsive images and take Outline Notes
• Complete the Assessment: Mozilla splash page
  1. Read the instructions
  2. Ask questions
  3. Download the starter files
  4. Complete the task
  5. Show me your web page!*
• Open your summer story in VS Code
  • Identify what images present the resolution switching problem or art direction problem
  • Use image editing software as necessary to prepare your image solutions
  • Implement your HTML solution
  • Show me your web page!*

Extend

In the article #133: Figuring Out Responsive Images, Chris Coyier goes into detail about responsive images. Read this article and tryout or refine your code to integrate his ideas. This article includes discussion of the CSS rules for responsive images.