Building Responsive Layouts (Mobile + Tablet)

Learning Objectives

• Define mobile-first breakpoints for phone and tablet layouts.
• Use fluid spacing, typography, and media that adapt to screen width.
• Reflow sections using columns/containers and responsive controls.
• Test and debug with browser device simulators and real devices.
• Apply accessibility and performance best practices for touch screens.

Key Terms

• Breakpoint: A screen width at which layout styles change (e.g., 768px for tablets, 480–576px for phones).
• Mobile-First: Design starts at the smallest screen then scales up.
• Fluid Units: Relative units like em, rem, %, vw, and clamp() for sizing.
• Viewport: The visible area of a webpage on a device.
• Touch Target: The tappable area of an interactive element (recommended ≥ 44×44 px).

Before You Start

1. Your theme or page builder is installed and you can edit pages.
2. You have a basic desktop layout built (hero, features, CTA, footer).
3. You can open DevTools in your browser (Chrome/Edge/Firefox).

Responsive Strategy in 5 Steps

1. Plan breakpoints: Phone (≤ 480–576px), Tablet (≈ 768–1024px). Keep them simple.
2. Set fluid type & spacing: Use relative units and clamp() for headings, body text, margins/padding.
3. Reflow layout: Multi-column sections collapse to single column on phones; adjust order if needed.
4. Constrain media: Make images/videos scale within their containers and avoid overflow.
5. Test & iterate: Simulate devices in DevTools and validate on a real phone/tablet.

Recommended Breakpoints

Tip: It’s fine to use just two custom breakpoints if your theme/page builder also offers defaults.

Hands-On Workflow (Phone → Tablet → Desktop)

1. Switch to Phone view in your editor or narrow your browser to ~375px.
2. Collapse columns: For 2–4 column sections, stack them vertically. Ensure a clear reading order (heading → text → media → CTA).
3. Adjust spacing: Reduce large paddings/margins; keep consistent vertical rhythm (e.g., 16–24px between blocks).
4. Scale text: Ensure headings don’t wrap awkwardly. Use fluid sizes (see snippet below).
5. Fix media overflow: Set images/videos to max-width 100% within containers.
6. Upgrade to Tablet view: Reintroduce 2-column layouts for features or text+image pairs.
7. Check CTAs & forms: Make buttons full width on phones, increase input spacing and label size.
8. Navigation: Use a hamburger or off-canvas on phones; simple top bar on tablets.

Optional Copy-Paste Snippets

1) Fluid Typography with clamp()

<!-- Add in a Custom CSS area if your theme allows -->
:root{
  --step--1: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);     /* small text */
  --step-0:  clamp(1rem,     0.95rem + 0.30vw, 1.125rem); /* body */
  --step-1:  clamp(1.25rem,  1.10rem + 0.90vw, 1.5rem);   /* h4 */
  --step-2:  clamp(1.5rem,   1.20rem + 1.6vw,  2rem);     /* h3 */
  --step-3:  clamp(2rem,     1.60rem + 2.5vw,  2.75rem);  /* h2 */
  --step-4:  clamp(2.5rem,   1.80rem + 4vw,    3.5rem);   /* h1 */
}
h1{font-size:var(--step-4)} h2{font-size:var(--step-3)} h3{font-size:var(--step-2)}
h4{font-size:var(--step-1)} body, p{font-size:var(--step-0); line-height:1.6}
    

2) Mobile-First Columns

<section class="features">
  <div class="feature">Feature A</div>
  <div class="feature">Feature B</div>
</section>

<style>
.features{
  display:grid;
  grid-template-columns: 1fr;          /* phone: 1 column */
  gap: 16px;
}
@media (min-width: 768px){             /* tablet: 2 columns */
  .features{ grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (min-width: 1024px){            /* desktop: 3 columns */
  .features{ grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
}
</style>
    

3) Responsive Media

<figure class="media-wrap">
  <img src="your-image.jpg" alt="Descriptive alt text">
  <figcaption>Optional caption</figcaption>
</figure>

<style>
.media-wrap img{ max-width:100%; height:auto; display:block; }
.media-wrap{ margin: 0 auto; width: min(100%, 720px); }
</style>
    

4) Touch-Friendly Buttons

<a class="btn-primary" href="#contact">Get Started</a>

<style>
.btn-primary{
  display:inline-block;
  padding: 14px 20px;                   /* ~44px tall on most devices */
  min-height: 44px;
  line-height: 1.2;
  text-decoration:none;
  border-radius: 8px;
}
@media (max-width: 576px){
  .btn-primary{ display:block; width:100%; text-align:center; }
}
</style>
    

Testing & Debugging

1. Browser DevTools: Toggle device toolbar and preview common sizes (375×812, 414×896, 768×1024).
2. Real Devices: Load the page on a phone/tablet; scroll and tap every interactive element.
3. Scrolling & Overflow: Look for horizontal scroll bars. If present, find and fix any element wider than the viewport.
4. Images: Check that images don’t blur or crop oddly; compress large images for faster loads.
5. Forms: Ensure inputs are large enough and labels are clear; test the keyboard type on mobile (email, number, etc.).

Accessibility & Performance

• Touch targets: Minimum 44×44 px; give links enough spacing to avoid mis-taps.
• Contrast: Maintain readable color contrast for text on backgrounds.
• Focus states: Keep visible focus rings for keyboard users.
• Motion: Avoid large parallax or heavy video on mobile; provide a static fallback.
• Optimize assets: Use modern image formats and lazy-load below-the-fold media to improve Core Web Vitals.

Common Pitfalls to Avoid

• Using fixed pixel sizes everywhere (causes cramped mobile layouts).
• Forgetting to collapse multi-column sections for phones.
• Buttons and links too small or too close together.
• Hero text too large on small screens (use clamp()).
• Images set with fixed width larger than the container (use max-width:100%).

Activity: Make Your Home Page Mobile-Ready

1. Open your Home page and switch to Phone preview.
2. Collapse each multi-column section to 1 column. Reorder blocks for a logical reading flow.
3. Apply fluid typography: h1–h4 and body using your theme/page builder controls or the CSS snippet.
4. Set images to scale within their containers; ensure no horizontal scroll.
5. Convert primary CTA buttons to full-width on phones.
6. Switch to Tablet preview and adjust gutters and column counts.
7. Test on a real phone and tablet; note any issues and fix them.

Deliverable: A screenshot of your Home page in Phone and Tablet sizes, plus a brief note (3–5 bullets) on what you changed.

Mobile & Tablet Checklist

• No horizontal scrolling at 375px and 768px widths.
• Readable text sizes and line-height at all breakpoints.
• Buttons and links are easy to tap (≥ 44px height).
• Images and videos scale and remain sharp.
• Navigation is usable on phone (hamburger/off-canvas) and tablet (simple top bar).
• Primary CTAs visible without excessive scrolling.

Assessment

Quick Quiz (5 Questions)

1. What is a breakpoint and why is it used?
2. Name two advantages of mobile-first design.
3. What’s the recommended minimum touch-target size?
4. How do you prevent images from causing horizontal scroll?
5. When would you switch from 1 to 2 columns on tablet?

Practical Task

Take an existing 3-section page (hero, features, CTA) and make it responsive for phone and tablet. Provide device screenshots and a 1-paragraph summary of your changes.

FAQ