Intro to Web Design

Semester: Fall 2026
Instructor: Michael McDermott
Location: Art and Design Building, Room 1020
Timing: Mondays or Wednesdays from 10:30–1:10pm
Office Hours: Scheduled here

Exercise 5

Visualizing Responsiveness

Description

Find a website that has a well design mobile and desktop site with reasonable differences in layout between them. Take screenshots of the full height of the home page for each size, meaning from top to bottom of the page, and taken with your browser at widths of 1440px, 1000px, and 320px (or the smallest your browser width will go). Arrange the screenshots taken at each width in Figma on an frame that is the appropriate width and height. Make sure the screenshots overlap so that it looks like a complete recreation of the live site.

Find your browser width at How Big is My Browser?

Requirements

Screenshots for the full height of the 3 sizes
Images are the appropriate widths (1440px, 1000px, 320px) and the height is as tall as the homepage is on the web

Things to Keep in Mind

What is changes between each width
Be precise about aligning your screenshots

Objectives

Begin to understand responsive design

Final Submission

Turned in on time
All requirements met
Prototype link submitted on Canvas
Linked on your class index