Content
Responsive Design
Responsive design means building one website that works at any screen width—from
a 320px phone to a 2560px desktop monitor. Rather than maintaining separate sites for
separate devices, you write CSS that adapts to whatever environment it's rendered in.
There are three core ideas behind it:
- Fluid grids — use relative units like
%,
em, rem, and fr instead of fixed pixel
widths wherever possible.
- Flexible media — images and video that scale within their
containers (
max-width: 100% is your go-to here).
- Media queries — conditional CSS rules that apply only when
certain conditions are met, such as the viewport reaching a minimum width.
The Viewport Meta Tag
For responsive CSS to work on a real mobile device, this tag needs to be in your
<head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Without it, mobile browsers render the page at desktop width and scale it down,
ignoring your breakpoints entirely. It's already in your template—just make
sure you're not removing it.
Mobile-First Development
In this class we write CSS mobile-first. Your default
styles—the ones outside of any media query—are written for the smallest
screen. From there, min-width media queries layer in additional styles
as more screen space becomes available.
This keeps your CSS cleaner. You're building outward from a simple base rather than
writing a full desktop layout and then overriding it for smaller screens. It also
pushes you to think about content priority up front: when space is limited, what
gets shown first?
Media Queries
A media query is a block of CSS that only applies when a condition is true. Writing
mobile-first, you'll use min-width most often: apply these styles when
the viewport is at least this wide.
.container {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 768px) {
.container {
grid-template-columns: 1fr 3fr;
gap: 2rem;
}
}
The single-column layout is the default and works on any screen. The two-column
layout gets applied only when there's room for it.
Common Breakpoints
Breakpoints are the widths at which your layout changes. There's no universal
standard—they should come from your content, not from specific device sizes.
Some widely used reference points:
- ~480px — larger phones and small devices
- ~768px — tablets and large phones in landscape
- ~1024px — small laptops and tablets in landscape
- ~1280px+ — typical desktop viewports
Start with your mobile layout and widen the browser slowly. When things start to
look stretched or awkward, that's where a breakpoint belongs.
What Changes at a Breakpoint?
You can change almost anything inside a media query. Common adjustments include:
- Expanding a single-column layout into multiple columns
- Increasing
font-size, padding, and
margin as space opens up
- Showing or hiding elements with
display: none and
display: block
- Switching navigation from a stacked or collapsed menu to a horizontal bar
- Adjusting image sizes or layout orientation
nav {
flex-direction: column;
}
.hero h1 {
font-size: 2rem;
}
.sidebar {
display: none;
}
@media (min-width: 768px) {
nav {
flex-direction: row;
}
.hero h1 {
font-size: 3.5rem;
}
.sidebar {
display: block;
}
}
Testing Responsive Layouts
Chrome and Firefox both have device emulators built into their developer tools.
Right-click anywhere on your page → Inspect → click the
device icon in the top-left of the DevTools panel. You can simulate specific screen
sizes and devices from there. Get in the habit of checking this as you build.
Visual Hierarchy
We've looked at design principles like alignment, proximity, and repetition. This
week we focus on visual hierarchy: how the arrangement and styling of elements on
a page signals their order of importance.
When hierarchy is working, users know where to look first, what to read next, and
what action to take. When it's not, a page feels flat or hard to navigate—even
if the content itself is good.
Read more: Visual Hierarchy — Interaction Design
Foundation ↗
The Tools of Visual Hierarchy
Hierarchy is built through deliberate use of the CSS properties you've been working
with all semester:
- Size — Larger elements draw attention first. The jump
from
h1 to h2 to body copy should be visible and
intentional. Subtle differences in size are easy to miss.
- Weight & Style — Bold text pops. Italic text
distinguishes. Both lose their effect if overused.
- Color & Contrast — High-contrast elements come
forward visually; low-contrast elements recede. Color can direct attention
toward a call-to-action or de-emphasize secondary content.
- Whitespace — Space around an element increases its
visual weight. A heading with generous margin above it reads as the start of
something new and important.
- Position — In left-to-right reading cultures, the
top-left of a page is seen first. Put your most important content there.
- Repetition & Consistency — Consistent styling
patterns teach users how to read your page. When section headers always look
the same, scanning becomes faster and easier.
How Users Scan: F-Pattern and Z-Pattern
Users scan before they read. Eye-tracking studies show that most people don't start
at the top of a page and read straight through—they skim for visual anchors
that tell them whether the page is worth their time. Two scanning patterns show up
consistently across different types of pages.
The F-pattern appears on text-heavy pages: articles, search
results, documentation, blog posts. Users make a horizontal sweep across the top,
then a shorter one a bit lower, then scan down the left edge—occasionally
moving right when something catches their eye. The shape this traces looks like an
F. What this means for your layouts: content on the right side of the page and
further down gets significantly less attention. Put important information on the
left and early in your content, not buried inside a paragraph or in a right-hand
column.
The Z-pattern tends to appear on pages with less text and more
visual layout—landing pages, hero sections, marketing pages. The eye moves
from top-left across to top-right, then diagonally to bottom-left, then across
to bottom-right. Many landing page layouts are deliberately built around this
path: logo top-left, navigation or headline top-right, supporting content
bottom-left, call-to-action bottom-right.
Neither pattern is a precise formula, but both point to the same thing: the top
and left of a layout get the most attention. A quick check—squint at your
design and see where your eye lands first. That should be your most important
content.
Text Alignment and Readability
Alignment and line length affect how readable your text is, which is a direct part
of hierarchy. If body copy is hard to read, the hierarchy breaks down regardless
of how well the headings are styled.
Left-align body text. Left-aligned text gives the eye a consistent
return point at the start of each line. Centered text shifts that starting point
on every line, which slows reading and makes longer passages harder to follow.
Save centered alignment for short, display-level content: a headline, a tagline,
a brief caption. Don't use it for running prose.
Keep line length under control. Lines that are too long make it
difficult to track from the end of one line to the start of the next. Lines that
are too short fragment the reading experience. The comfortable range is
45–75 characters per line, or about
15–20 words. The ch unit in CSS is useful
here—it equals the width of one zero character in the current font:
p {
max-width: 65ch;
}
On wide desktop screens, body text without a max-width can easily
stretch to 150 or more characters per line. That's genuinely uncomfortable to
read, and a sign the layout hasn't been thought through at that size.
Hierarchy Across Screen Sizes
Responsive layouts don't just rearrange content—they require you to
re-examine whether the hierarchy still works at each screen size. A heading
that reads as bold and commanding at 3.5rem on a wide screen can
feel oversized on a 375px phone. Reconsider your typographic scale and spacing
at every breakpoint, not just your columns.
h1 {
font-size: 2.25rem;
}
h2 {
font-size: 1.5rem;
}
p {
font-size: 1rem;
max-width: 65ch;
}
@media (min-width: 768px) {
h1 {
font-size: 3.5rem;
}
h2 {
font-size: 2.25rem;
}
}
The ratio between h1 and h2 stays roughly the
same across both sizes. Keeping that proportional relationship intact is what
preserves the hierarchy when the layout shifts.
Assignments
Explainer: Responsive Design
- Apply responsive design principles to your site so it is visible and
functional on all screen sizes, including tablet and mobile.
- Your site should use a combination of media queries and responsive units.
- Apply any HTML and CSS feedback you received on prior turn-ins.
- Check how everything looks in the browser. Use browser tools to
see different screen widths.
- Once your responsive CSS is applied, push your files to
GitHub.
- Add your name in the Slack turn-in thread.
Recipe Project: Prototype
- Create a new design file in Figma named 'lastname-firstname-recipe'.
- In that one design file, create at least 2 designs for your recipe
project—mobile and desktop.
- If necessary, you may add a third design for tablet.
- The design must have:
- A Google or Adobe font
- A clearly defined color palette tested for accessibility
- Clear visual structure and hierarchy
- Application of design principles covered in class (alignment,
proximity, repitition, etc.)
- At least 3 images
- Your recipe content must include:
- Header/Hero Unit
- Ingredients
- Data such as cook time, tools, nutrition, etc.
- Steps or instructions
- Other information / background information
- A footer
- You should apply all concepts learned in the class so far.
- Remember you will be graded on the quality of your design for this project.
- Create a publicly shareable Figma link and paste it into the recipe design
turn-in in Slack.
