← Back to glossary

Responsive Design

mobile Beginner

Also Known As

responsive web design RWD mobile-first fluid layout adaptive design

TL;DR

A CSS approach where layouts adapt to different screen sizes using fluid grids, flexible images, and media queries — one codebase that works across mobile, tablet, and desktop.

Explanation

Responsive design, coined by Ethan Marcotte in 2010, has three technical components: a fluid grid (using percentages or fr units instead of fixed pixels), flexible images (max-width: 100% prevents images from overflowing their containers), and media queries (@media rules that apply different CSS at different viewport widths). The viewport meta tag (<meta name='viewport' content='width=device-width, initial-scale=1'>) is required to prevent mobile browsers from rendering at desktop width and scaling down. Modern CSS has largely superseded custom media query breakpoints for layout — CSS Grid and Flexbox with min-content/max-content sizing create intrinsically responsive layouts without breakpoints. The mobile-first approach writes base styles for mobile and adds complexity for larger screens, which generally produces simpler CSS.

Common Misconception

✗ Responsive design means making a desktop site shrink on mobile. Mobile-first design — writing styles for small screens first, then adding layout for larger screens — produces better results with less CSS. Starting from desktop and trying to compress the layout into mobile almost always results in text that is too small, buttons that are too close together, and horizontal scrolling that breaks the experience.

Why It Matters

Over 60% of web traffic is now mobile. A non-responsive PHP application delivered to a mobile user renders at desktop width, requires pinch-to-zoom to read text, and has touch targets too small to tap accurately. Google uses mobile-friendliness as a ranking signal in search results. The viewport meta tag alone — one line of HTML — is the single most impactful change for a PHP application with no responsive CSS, immediately fixing the zoom-out rendering issue.

Common Mistakes

Missing the viewport meta tag — without it, mobile browsers render at 980px wide and scale down, making text tiny.
Using fixed pixel widths for layout containers — use max-width with 100% width, or CSS Grid/Flexbox.
Setting touch targets smaller than 44×44px — iOS and Android guidelines both specify minimum 44px tap target size for accessibility.
Testing only in browser DevTools device emulation — real devices behave differently, especially for touch events and font rendering.

Code Examples

✗ Vulnerable

/* Fixed desktop layout — breaks on mobile */
.container {
    width: 960px;  /* overflows on phones */
    margin: 0 auto;
}
.sidebar { float: left; width: 240px; }
.main    { float: left; width: 720px; }

✓ Fixed

/* Responsive — mobile-first */
.container {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Single column on mobile by default */
.layout { display: grid; gap: 1.5rem; }

/* Two-column on wider screens */
@media (min-width: 640px) {
    .layout { grid-template-columns: 240px 1fr; }
}

References

↗ https://web.dev/responsive-web-design-basics/