Categories
CSS Mobile Web Design

Responsive Web Design: Building Sites for All Devices

Introduction

The mobile web is here. iPhones, Android phones, iPads – users access the web from dozens of devices with different screen sizes. The traditional approach of building separate mobile sites is becoming unsustainable.

Enter responsive web design, a term coined by Ethan Marcotte in his recent article on A List Apart. The idea is simple but powerful: use CSS to adapt your site's layout to the viewing device. One site, one codebase, works everywhere.

This isn't just about mobile. With tablets, netbooks, and varying desktop resolutions, responsive design creates sites that work on any screen size.

Let's explore how to build responsive websites.

The Three Pillars

Responsive web design has three core components:

1. Fluid grids – Layouts use percentages instead of fixed pixels

2. Flexible images – Images scale with their containers

3. Media queries – CSS rules that apply based on screen size

Together, these create sites that adapt to any device.

Fluid Grids

Traditional layouts use fixed widths:

#container {
    width: 960px;
    margin: 0 auto;
}

#sidebar {
    width: 300px;
    float: left;
}

#content {
    width: 660px;
    float: left;
}

This works on desktops but breaks on smaller screens.

Fluid layout uses percentages:

#container {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
}

#sidebar {
    width: 31.25%; /* 300px / 960px */
    float: left;
}

#content {
    width: 68.75%; /* 660px / 960px */
    float: left;
}

The formula: (target / context) × 100 = result%

Now the layout scales with the browser window.

Flexible Images

Images need to scale too:

img {
    max-width: 100%;
    height: auto;
}

Images never exceed their container width. On small screens, they shrink appropriately.

For background images:

.header {
    background: url(header.jpg) center center no-repeat;
    background-size: cover;
}

The background-size property (CSS3) makes backgrounds responsive.

Media Queries

Media queries are the magic ingredient. They apply CSS based on device characteristics:

/* Default styles for desktop */
body {
    font-size: 16px;
}

#sidebar {
    width: 31.25%;
    float: left;
}

/* Tablet styles */
@media screen and (max-width: 768px) {
    body {
        font-size: 14px;
    }

    #sidebar {
        width: 100%;
        float: none;
    }
}

/* Mobile styles */
@media screen and (max-width: 480px) {
    body {
        font-size: 12px;
    }

    #nav {
        display: none; /* Hide complex nav on mobile */
    }
}

Different CSS rules for different screen sizes.

Common Breakpoints

Where should you add media queries? Common breakpoints:

/* Smartphones (portrait and landscape) */
@media screen and (max-width: 480px) { }

/* Tablets (portrait) */
@media screen and (min-width: 481px) and (max-width: 768px) { }

/* Desktop */
@media screen and (min-width: 769px) { }

These aren't universal. Choose breakpoints based on your design.

Mobile-First Approach

Two strategies for responsive design:

Desktop-first – Start with desktop, scale down Mobile-first – Start with mobile, scale up

Mobile-first is often better:

/* Mobile styles (default) */
body {
    font-size: 14px;
}

#sidebar,
#content {
    width: 100%;
}

/* Tablet and up */
@media screen and (min-width: 481px) {
    body {
        font-size: 16px;
    }
}

/* Desktop */
@media screen and (min-width: 769px) {
    #sidebar {
        width: 31.25%;
        float: left;
    }

    #content {
        width: 68.75%;
        float: left;
    }
}

This ensures mobile devices get simple, lightweight styles by default.

Viewport Meta Tag

Mobile browsers zoom out to show full desktop sites. Tell them not to:

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

This sets the viewport width to the device width and prevents zooming.

Essential for responsive design on mobile.

A Complete Example

Let's build a responsive page:

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Responsive Site</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="container">
        <header>
            <h1>My Responsive Site</h1>
            <nav>
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/about">About</a></li>
                    <li><a href="/contact">Contact</a></li>
                </ul>
            </nav>
        </header>

        <div id="content">
            <article>
                <h2>Article Title</h2>
                <p>Article content...</p>
            </article>
        </div>

        <aside id="sidebar">
            <h3>Sidebar</h3>
            <p>Sidebar content...</p>
        </aside>

        <footer>
            <p>&copy; 2011 My Site</p>
        </footer>
    </div>
</body>
</html>

CSS:

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base styles (mobile-first) */
body {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

#container {
    width: 90%;
    margin: 0 auto;
}

header {
    padding: 20px 0;
    border-bottom: 2px solid #333;
}

header h1 {
    font-size: 24px;
    margin-bottom: 10px;
}

nav ul {
    list-style: none;
}

nav li {
    margin: 10px 0;
}

nav a {
    text-decoration: none;
    color: #333;
}

#content,
#sidebar {
    width: 100%;
    padding: 20px 0;
}

img {
    max-width: 100%;
    height: auto;
}

footer {
    padding: 20px 0;
    border-top: 2px solid #333;
    text-align: center;
}

/* Tablet styles */
@media screen and (min-width: 481px) {
    body {
        font-size: 15px;
    }

    header h1 {
        font-size: 28px;
    }

    nav li {
        display: inline-block;
        margin: 0 15px 0 0;
    }
}

/* Desktop styles */
@media screen and (min-width: 769px) {
    body {
        font-size: 16px;
    }

    #container {
        max-width: 960px;
    }

    header h1 {
        font-size: 32px;
    }

    #content {
        width: 68.75%;
        float: left;
    }

    #sidebar {
        width: 31.25%;
        float: right;
    }

    footer {
        clear: both;
    }
}

Resize your browser window and the layout adapts.

Navigation Patterns

Navigation is tricky on mobile. Several approaches:

1. Footer anchor:

<header>
    <h1>Site Name</h1>
    <a href="#nav">Menu</a>
</header>

<!-- Content here -->

<nav id="nav">
    <ul>...</ul>
</nav>

On mobile, "Menu" link jumps to footer navigation.

2. Toggle menu:

<a href="#" id="menu-toggle">Menu</a>
<nav id="nav" class="hidden">
    <ul>...</ul>
</nav>
document.getElementById('menu-toggle').onclick = function() {
    document.getElementById('nav').classList.toggle('hidden');
    return false;
};

3. Select menu:

<select onchange="window.location=this.value">
    <option value="/">Home</option>
    <option value="/about">About</option>
    <option value="/contact">Contact</option>
</select>

Native form elements work well on mobile.

Typography

Text should be readable on all devices:

body {
    font-size: 14px;
}

@media screen and (min-width: 481px) {
    body {
        font-size: 15px;
    }
}

@media screen and (min-width: 769px) {
    body {
        font-size: 16px;
    }
}

Also consider line length:

#content {
    max-width: 600px; /* ~70 characters per line */
}

Shorter lines are easier to read.

Touch Targets

Mobile users tap with fingers, not pixels:

/* Desktop */
a, button {
    padding: 5px 10px;
}

/* Mobile */
@media screen and (max-width: 480px) {
    a, button {
        padding: 15px 20px; /* Bigger touch targets */
        display: block;
        margin: 10px 0;
    }
}

Apple recommends 44×44 pixels minimum for touch targets.

Testing Responsive Designs

Resize browser window: Basic testing

Browser dev tools: Firefox 4 and Chrome have responsive design tools

Real devices: Test on actual phones and tablets when possible

iOS Simulator: Comes with Xcode on Mac

Android Emulator: Available in Android SDK

Nothing beats testing on real devices.

Performance Considerations

Mobile devices have slower connections:

Optimize images: Use smaller images for mobile

Minimize CSS/JS: Fewer HTTP requests

Conditional loading: Only load what's needed

if (screen.width > 480) {
    // Load desktop-only resources
}

Performance matters more on mobile.

Common Pitfalls

Forgetting viewport meta tag: Mobile browsers will zoom out

Fixed-width elements: Break the layout

Too many breakpoints: Keep it simple

Not testing on devices: Desktop browsers aren't enough

Ignoring touch: Mobile users don't hover

Browser Support

Media queries work in:

  • Safari 4+
  • Chrome 3+
  • Firefox 3.5+
  • Opera 10+
  • IE9+ (not IE8 or below)

For older browsers, consider using a JavaScript polyfill or serve a fixed-width layout.

Tools and Resources

Responsive design testing:

Frameworks:

  • 1140 Grid System
  • Less Framework
  • (Bootstrap launching soon)

Reading:

  • Ethan Marcotte's article on A List Apart
  • "Responsive Web Design" book by Ethan Marcotte

Real-World Examples

Sites using responsive design:

Study these for inspiration.

The Bottom Line

Responsive web design isn't optional anymore. Mobile traffic is growing fast. Building separate mobile sites is expensive and difficult to maintain.

With fluid grids, flexible images, and media queries, you can create sites that work on any device. One codebase, one URL, accessible everywhere.

It requires rethinking how we build sites. Fluid layouts feel different from fixed-width designs. Testing takes more time. But the result is sites that truly work for all users.

Start simple. Take an existing design and make it fluid. Add a few media queries. Test on your phone. You'll quickly see the power of responsive design.

The future of the web is multi-device. Responsive design is how we build for that future.

By Shishir Sharma

Shishir Sharma is a Software Engineering Leader, husband, and father based in Ottawa, Canada. A hacker and biker at heart, and has built a career as a visionary mentor and relentless problem solver.

With a leadership pedigree that includes LinkedIn, Shopify, and Zoom, Shishir excels at scaling high-impact teams and systems. He possesses a native-level mastery of JavaScript, Ruby, Python, PHP, and C/C++, moving seamlessly between modern web stacks and low-level architecture.

A dedicated member of the tech community, he serves as a moderator at LUG-Jaipur. When he’s not leading engineering teams or exploring new technologies, you’ll find him on the open road on his bike, catching an action movie, or immersed in high-stakes FPS games.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.