Responsive Design Patterns — Complete Guide

In this tutorial, you will learn about Responsive Designink "Design Patterns" >}}. We cover key concepts, practical examples, and best practices to help you master this topic.

Responsive design patterns provide reusable solutions for layout challenges across devices including mostly fluid, column drop, layout shifter, off-canvas, and tiny tweaks.

What You'll Learn

• Five core responsive design patterns
• When to use each pattern
• Code implementation for each
• Combining patterns for complex layouts
• Accessibility considerations for each pattern

Why It Matters

• Patterns save design and development time
• Proven patterns reduce user surprise
• Consistent patterns improve usability
• Patterns provide a shared vocabulary for teams

Real-World Use

• A news site uses column-drop pattern
• An e-commerce site uses mostly-fluid pattern
• A dashboard uses layout shifter pattern
• A mobile app uses off-canvas pattern

flowchart LR
  A[Responsive Patterns] --> B[Mostly Fluid]
  A --> C[Column Drop]
  A --> D[Layout Shifter]
  A --> E[Off Canvas]
  A --> F[Tiny Tweaks]
  B --> G[Fluid grids, margins adjust]
  C --> D[Columns stack vertically]
  D --> H[Content reorders at breakpoints]
  E --> I[Navigation hides off-screen]
  F --> J[Content adjusts spacing]

The Five Core Patterns

Mostly Fluid

The mostly fluid pattern uses a fluid grid on large screens, with margins that grow as the viewport widens. On smaller screens, the margins disappear and columns stack.

.mostly-fluid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 1024px) {
    .mostly-fluid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .mostly-fluid {
        grid-template-columns: 1fr;
    }
}

Column Drop

The column drop pattern stacks columns vertically on small screens. The order of content does not change; columns simply drop below each other.

.column-drop {
    display: flex;
    flex-wrap: wrap;
}

.column-drop .main {
    flex: 2 1 400px;
}

.column-drop .sidebar {
    flex: 1 1 200px;
}

.column-drop .extra {
    flex: 1 1 200px;
}

@media (max-width: 800px) {
    .column-drop .main,
    .column-drop .sidebar,
    .column-drop .extra {
        flex: 1 1 100%;
    }
}

Layout Shifter

The layout shifter pattern changes the layout structure significantly at different breakpoints. Content moves to different positions.

.layout-shifter {
    display: grid;
    grid-template-areas:
        "header header header"
        "main   main   sidebar"
        "main   main   sidebar"
        "footer footer footer";
    grid-template-columns: 1fr 1fr 300px;
    gap: 1rem;
}

.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

@media (max-width: 900px) {
    .layout-shifter {
        grid-template-areas:
            "header header"
            "main   sidebar"
            "footer footer";
        grid-template-columns: 1fr 250px;
    }
}

@media (max-width: 600px) {
    .layout-shifter {
        grid-template-areas:
            "header"
            "sidebar"
            "main"
            "footer";
        grid-template-columns: 1fr;
    }
}

Off Canvas

The off-canvas pattern places navigation or secondary content off-screen, revealed on demand.

.off-canvas-layout {
    display: flex;
    overflow-x: hidden;
}

.off-canvas-nav {
    width: 250px;
    margin-left: -250px;
    transition: margin-left 0.3s ease;
}

.off-canvas-nav.open {
    margin-left: 0;
}

.off-canvas-content {
    flex: 1;
    min-width: 0;
}

@media (min-width: 768px) {
    .off-canvas-nav {
        margin-left: 0;
    }
}

Tiny Tweaks

The tiny tweaks pattern makes small adjustments like font size, spacing, and image sizing rather than changing layout structure.

body {
    font-size: 16px;
    line-height: 1.6;
    padding: 1rem;
    max-width: 800px;
    margin: 0 auto;
}

@media (min-width: 600px) {
    body { font-size: 18px; padding: 2rem; }
}

@media (min-width: 900px) {
    body { font-size: 20px; padding: 3rem; }
}

Common Mistakes

1. Using the wrong pattern for the content — News sites need column-drop, not layout shifter. Choose based on content hierarchy.
2. Not testing content reordering — Layout shifter changes DOM order visually but not source order. Screen readers follow source order.
3. Off-canvas without focus management — When navigation slides in, focus must move to the first link. Closing must return focus.
4. No gesture support for off-canvas — Mobile users expect swipe gestures to open/close navigation.
5. Breaking typography in tiny tweaks — Changing font size without adjusting line-height creates readability issues.
6. Hiding content instead of using column-drop — Column-drop preserves all content; hiding removes it.
7. Ignoring print styles — All patterns should include print styles that remove navigation and sidebars.

Practice Questions

1. Which pattern is best for a news site with a main article, sidebar, and related stories? Column drop or mostly fluid. Content should drop below rather than be hidden.
2. When would you use the layout shifter pattern? When the layout fundamentally needs to change between devices, like moving a sidebar from right on desktop to left on mobile.
3. What are the accessibility considerations for off-canvas navigation? Focus management (move focus to first link when opened, return when closed), keyboard support (Escape to close), and aria-expanded attributes.
4. How does the mostly fluid pattern differ from tiny tweaks? Mostly fluid changes column layout at breakpoints. Tiny tweaks only adjust spacing and typography, keeping the same basic layout.

FAQ

Mini Project

Build a page that uses three different patterns in different sections. Use off-canvas for the main navigation, column-drop for a blog post with sidebar, and mostly-fluid for a product grid in the footer. Ensure the patterns work together without CSS conflicts. Add print styles that simplify the layout to a single column. Test each pattern's breakpoints with a keyboard and screen reader. Document why each pattern was chosen for its section.

What's Next

Continue with Lesson 19: Column Drop Pattern for a deep dive into this responsive pattern.