Responsive Design

Purpose

Create fluid, adaptable web experiences that work seamlessly across all devices from smartphones (320px) to large desktops (1440px+) using modern CSS techniques and mobile-first methodology.

Core Principles

• Mobile-First: Design for smallest screen first, progressively enhance for larger

• Fluid Typography: Use clamp() for scalable text across viewports

• Flexible Layouts: CSS Grid and Flexbox for adaptable structures

• Touch-Friendly: 44x44px minimum touch targets, adequate spacing

• Performance: Optimize for mobile networks (lazy loading, efficient CSS)

• Content Priority: Most important content visible without scrolling on mobile

Breakpoints

Riksdagsmonitor uses standard breakpoints aligned with common devices:

/* Default: Mobile-first (320px - 767px) / / Base styles for smallest screens */

/* Tablet: Medium screens / @media (min-width: 768px) { / iPad portrait, tablets */ }

/* Desktop: Large screens / @media (min-width: 1024px) { / Laptop, desktop monitors */ }

/* Large Desktop: Extra large screens / @media (min-width: 1440px) { / High-res monitors, 4K displays */ }

/* Ultra-wide: Maximum width constraint / @media (min-width: 1920px) { / Ultra-wide monitors */ max-width: 1920px; margin: 0 auto; }

Enforces

Fluid Typography with clamp()

/* Scalable headings without media queries / h1 { font-size: clamp(2rem, 5vw + 1rem, 4rem); / Min: 32px, Preferred: 5vw + 16px, Max: 64px */ }

h2 { font-size: clamp(1.5rem, 4vw + 0.5rem, 3rem); }

body { font-size: clamp(1rem, 2vw, 1.125rem); line-height: 1.6; }

CSS Grid Responsive Layouts

/* Auto-responsive grid without media queries */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.5rem; }

/* Dashboard layout with sidebar */ .dashboard { display: grid; grid-template-columns: 1fr; gap: 2rem; }

@media (min-width: 1024px) { .dashboard { grid-template-columns: 250px 1fr; } }

Flexbox Navigation

/* Mobile: Vertical stack */ nav ul { display: flex; flex-direction: column; gap: 1rem; }

/* Desktop: Horizontal bar */ @media (min-width: 768px) { nav ul { flex-direction: row; justify-content: space-between; } }

Touch-Friendly Targets

/* Minimum 44x44px for touch targets */ button, a.button, .nav-link { min-height: 44px; min-width: 44px; padding: 0.75rem 1.5rem; display: inline-flex; align-items: center; justify-content: center; }

Responsive Images

<!-- Picture element for art direction --> <picture> <source media="(min-width: 1024px)" srcset="hero-desktop.jpg"> <source media="(min-width: 768px)" srcset="hero-tablet.jpg"> <img src="hero-mobile.jpg" alt="Riksdag building" loading="lazy"> </picture>

<!-- Responsive width --> <img src="chart.png" alt="Voting chart" style="width: 100%; height: auto;">

Viewport Meta Tag (Required)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Container Queries (Modern)

/* Container-based responsiveness */ .card-container { container-type: inline-size; container-name: card; }

@container card (min-width: 400px) { .card { display: grid; grid-template-columns: 150px 1fr; } }

Device Categories

Mobile (320px - 767px)

• Primary Use: iPhone, Android phones

• Layout: Single column, vertical stack

• Navigation: Hamburger menu or bottom tabs

• Typography: 16px base, larger touch targets

• Images: Mobile-optimized, lazy loading

Tablet (768px - 1023px)

• Primary Use: iPad, Android tablets

• Layout: 2-column grids, flexible sidebars

• Navigation: Horizontal tabs or expanded menu

• Typography: 16-18px base

• Images: Medium resolution

Desktop (1024px - 1439px)

• Primary Use: Laptops, standard monitors

• Layout: 3-column grids, persistent sidebars

• Navigation: Full horizontal menu

• Typography: 16-18px base

• Images: High resolution

Large Desktop (1440px+)

• Primary Use: High-res monitors, 4K displays

• Layout: Wide layouts with max-width constraint

• Navigation: Full menu with space for branding

• Typography: 18-20px base

• Images: Retina-quality

When to Use

• All HTML/CSS development for Riksdagsmonitor

• New feature implementation requiring cross-device support

• Dashboard design for political metrics

• Data visualization that adapts to screen size

• Navigation redesign for 14-language support

• Accessibility improvements ensuring mobile usability

• Performance optimization for mobile networks

Examples

Good Pattern: Mobile-First Dashboard

/* Mobile: Single column */ .dashboard { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1rem; }

.widget { padding: 1rem; background: var(--card-bg); border-radius: 8px; }

/* Tablet: 2 columns */ @media (min-width: 768px) { .dashboard { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding: 1.5rem; } }

/* Desktop: 3 columns with sidebar */ @media (min-width: 1024px) { .dashboard { grid-template-columns: 250px repeat(2, 1fr); gap: 2rem; padding: 2rem; }

.sidebar { grid-column: 1; grid-row: 1 / -1; } }

Good Pattern: Responsive Typography Scale

:root { /* Fluid spacing */ --space-xs: clamp(0.5rem, 1vw, 0.75rem); --space-sm: clamp(0.75rem, 2vw, 1rem); --space-md: clamp(1rem, 3vw, 1.5rem); --space-lg: clamp(1.5rem, 4vw, 2rem); --space-xl: clamp(2rem, 5vw, 3rem);

/* Fluid font sizes */ --text-sm: clamp(0.875rem, 1.5vw, 1rem); --text-base: clamp(1rem, 2vw, 1.125rem); --text-lg: clamp(1.125rem, 2.5vw, 1.25rem); --text-xl: clamp(1.25rem, 3vw, 1.5rem); --text-2xl: clamp(1.5rem, 4vw, 2rem); --text-3xl: clamp(2rem, 5vw, 3rem); }

body { font-size: var(--text-base); padding: var(--space-md); }

h1 { font-size: var(--text-3xl); margin-bottom: var(--space-lg); }

Good Pattern: Responsive Navigation

<!-- Mobile-first navigation --> <nav class="main-nav"> <button class="menu-toggle" aria-label="Toggle menu">☰</button> <ul class="nav-list"> <li><a href="#overview">Overview</a></li> <li><a href="#parties">Parties</a></li> <li><a href="#mps">MPs</a></li> </ul> </nav>

<style> /* Mobile: Hidden menu, toggle button */ .menu-toggle { display: block; min-width: 44px; min-height: 44px; }

.nav-list { display: none; flex-direction: column; gap: 0.5rem; }

.nav-list.open { display: flex; }

/* Desktop: Always visible, horizontal */ @media (min-width: 768px) { .menu-toggle { display: none; }

.nav-list { display: flex; flex-direction: row; gap: 2rem; } } </style>

Anti-Pattern: Desktop-First Approach

/* ❌ BAD: Desktop-first, overcomplicated mobile overrides */ .widget { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 2rem; }

@media (max-width: 1023px) { .widget { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding: 1.5rem; } }

@media (max-width: 767px) { .widget { grid-template-columns: 1fr; gap: 1rem; padding: 1rem; } }

/* ✅ GOOD: Mobile-first, progressive enhancement */ .widget { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1rem; }

@media (min-width: 768px) { .widget { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding: 1.5rem; } }

@media (min-width: 1024px) { .widget { grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 2rem; } }

Anti-Pattern: Fixed Pixel Sizes

/* ❌ BAD: Fixed sizes don't adapt */ h1 { font-size: 48px; }

.container { width: 1200px; }

/* ✅ GOOD: Fluid, adaptable sizes */ h1 { font-size: clamp(2rem, 5vw + 1rem, 4rem); }

.container { width: min(1200px, 100% - 2rem); margin-inline: auto; }

Testing Responsive Design

Browser DevTools

// Test key breakpoints in Chrome DevTools const breakpoints = [ { width: 320, height: 568, device: 'iPhone SE' }, { width: 375, height: 667, device: 'iPhone 8' }, { width: 768, height: 1024, device: 'iPad' }, { width: 1024, height: 768, device: 'iPad Pro' }, { width: 1920, height: 1080, device: 'Desktop HD' } ];

Playwright Testing

// test/responsive.spec.js const { test, expect } = require('@playwright/test');

test('Responsive layout adapts correctly', async ({ page }) => { await page.goto('http://localhost:8080/');

// Mobile await page.setViewportSize({ width: 375, height: 667 }); await page.screenshot({ path: 'screenshots/mobile.png' });

// Tablet await page.setViewportSize({ width: 768, height: 1024 }); await page.screenshot({ path: 'screenshots/tablet.png' });

// Desktop await page.setViewportSize({ width: 1920, height: 1080 }); await page.screenshot({ path: 'screenshots/desktop.png' }); });

Remember

• Mobile-first always - start with smallest screen

• Use clamp() for typography - fluid, responsive text without media queries

• CSS Grid for layouts - modern, flexible, powerful

• 44x44px touch targets minimum for accessibility

• Test on real devices when possible

• Optimize for mobile networks - lazy loading, efficient CSS

• Progressive enhancement - core functionality works everywhere

• Container queries for component-level responsiveness (modern browsers)

• Viewport meta tag required in all HTML files

• Max-width constraint for ultra-wide screens (1920px)

References

• MDN: Responsive Design

• CSS-Tricks: A Complete Guide to CSS Grid

• CSS-Tricks: A Complete Guide to Flexbox

• Web.dev: Responsive Web Design Basics

• MDN: Using Media Queries

• Can I Use: CSS Container Queries

Version: 1.0

Last Updated: 2026-02-06

Maintained by: Hack23 AB