AMDE 355 · Advanced Web Design · Week 03
Design for Every Screen.
Responsive design is not a smaller desktop page. It is a system of layout decisions that adapt to the content, the device, and the way someone is using the page. This week, you’ll build a layout that changes composition—not just scale.
01 / The challenge — design the change
A responsive layout should preserve the message while adapting its arrangement. A three-column gallery might become two columns, then one. Navigation might wrap or change alignment. Type should remain readable without awkward jumps.
Fluid foundations
Use relative units, flexible containers, and intrinsic sizing so the layout can grow and shrink.
Intentional breakpoints
Add a media query when the content needs a different arrangement—not because a device list says so.
Content priority
Decide what must stay prominent and what can move, stack, or become more compact.
02 / Fluid sizing before breakpoints
Start by making the page flexible. max-width prevents long lines from becoming uncomfortable; percentages allow a container to adapt; clamp() sets a minimum, preferred, and maximum size.
clamp() from 7vw to 5vw. Resize the browser and watch how the title responds.03 / Build a responsive grid
Use Grid’s intrinsic sizing to fit as many columns as comfortably fit in the available space. This can reduce the number of breakpoints you need.
Discuss: auto-fit lets the browser fit as many columns as possible. minmax(240px, 1fr) sets a minimum card width while allowing remaining space to be shared.
04 / Add breakpoints when the design needs them
Some changes are art-direction decisions. Maybe the featured story should move above the gallery, the navigation should stack, or the page padding should tighten.
05 / Responsive design is more than width
Typography
Use comfortable line lengths, fluid type where appropriate, and enough line-height for readability.
Images and media
Prevent images from overflowing their containers. Preserve useful crops and make sure visual content remains understandable.
Interaction
Ensure links and controls remain easy to identify and use at narrow widths and with touch input.
Content order
Make sure the visual arrangement does not undermine the logical reading order in the HTML.
06 / Instructor demo — the responsive remix
Build one page and test it at three widths. Ask students to predict the change before each edit.
- Desktop: Start with a feature area beside a three-column project grid. Identify the visual focal point.
- Fluid pass: Add a max-width container, fluid title sizing, and responsive images before adding breakpoints.
- Tablet pass: Resize until the grid cards feel cramped. Change the layout to two columns or one column based on the content.
- Mobile pass: Reduce side padding, stack the navigation if needed, and check for overflow.
- Compare: Ask which content changed position and whether the hierarchy stayed clear.
07 / Studio assignment — one page, three contexts
Create or adapt a portfolio, exhibition, event, or project page. Design the desktop layout first, then make deliberate changes for tablet and mobile.
Desktop
Use a clear hierarchy and an intentional grid or split layout.
Tablet
Adjust columns, spacing, or navigation where the content needs it.
Mobile
Prioritize reading order, legibility, tap targets, and a clean single-column flow when appropriate.
08 / What to submit
- Working CodePen link or project files.
- Desktop, tablet, and mobile screenshots.
- At least one example of fluid sizing, such as percentages,
min(),max(), orclamp(). - At least one media query with a clear purpose.
- A short note explaining where you placed your breakpoint and why.
Instructor-only material · Remove before publishing to students
Instructor Layout Code — Step by Step
Live-code a responsive creative portfolio. Build it in stages and pause after each stage to let students predict what will happen when the viewport changes.
Step 1 — Start with HTML
Paste this into the HTML panel. The content is intentionally simple so the class can focus on layout behavior rather than writing copy.
Step 2 — Create the fluid base
Start without a media query. The container should already be flexible, the title should scale smoothly, and the cards should be able to shrink within their grid tracks.
Step 3 — Make a grid that adapts on its own
Before adding breakpoints, use auto-fit and minmax(). Preview at multiple widths and observe when the browser moves from three columns to two.
Step 4 — Introduce a deliberate breakpoint
Now make one design choice that intrinsic sizing cannot decide for you: on a narrow screen, let the featured project take the full row and tighten the intro spacing.
Step 5 — Test and narrate the design
- Start wide and identify the page’s focal point.
- Resize the preview slowly and note when the layout shifts naturally.
- Cross the breakpoint and explain which rule changes the composition.
- Check for horizontal overflow, cramped text, and uneven spacing.
- Ask: “What did we allow the browser to handle, and what did we decide as designers?”
09 / Final quality check
- The layout adapts to wide, medium, and narrow viewports.
- Fluid sizing is used for the container or typography.
- At least one breakpoint has a clear content-driven purpose.
- Images and cards do not overflow their containers.
- The reading order and visual hierarchy remain clear.