Responsive Web Design – The Basics

Posted in Responsive Web Design

This is the second blog article that I was recently asked to write for work. In the first article, we discussed how responsive web design can require changes in workflow and strategy. This one is a beginner’s guide to responsive web design where we briefly discuss each of the three technical ingredients.


In Ethan Marcotte’s groundbreaking article published on the blog A List Apart, he helped us think about the web in a more flexible way, where the display of all-important content can adapt to the capabilities of devices instead of being boxed in by fixed-width, inflexible layouts. Let’s take a look at each of Ethan’s three original technical ingredients and see what they can do for us.

Fluid grids

In the beginning (well, in web terms anyway), all websites were responsive. You might remember the early days of the web as fondly as I do. Everything was exciting and new. It was also very simple compared to today’s web. We authored plain old semantic HTML, sprinkled in a few decorative images and released it to the world. We weren’t concerned with locking things down, so consequently our page layouts naturally flexed and breathed as needed.

Somewhere along the line we started using HTML tables and spacer graphics to turn all the random chaos into beautifully ordered web pages. But tables were intended for tabular data (like a spreadsheet), not for layout and presentation. So we converted our table-based code to more web standards-centric CSS layouts. This was more “responsible” and allowed us to separate structure from presentation. We felt like we were doing the “right thing” once again. But we were still locking things down with non-flexible pixel-based layouts. What happened to our beloved flexibility?

If we want our content to be adaptive, we need to convert those pixels to percentages so that our layouts can stretch and contract when the browser viewport changes (as viewed on small screens, tablets, and so forth). In our CSS file we need to change things like this:

.main {
    float: left;
    width: 660px;
    margin-right: 20px;
}

into something like this:

.main {
    float: left;
    width: 68.75%;
    margin-right: 2%;
}

In this simple example, I’m assuming the overall layout width, as viewed on a desktop browser, is 960 pixels. By using Ethan’s simple fluid grid formula, we divide the target width (660 pixels) by the context (960 pixels) to provide our percentage result (68.75%). Here’s the simple formula:

target ÷ context = result

This is a tough concept to describe in words, so let’s take a peek at Ethan’s original responsive demo website. Go check out his website and resize your browser by slowly dragging the right edge toward the left so that it collapses to a tall, narrow viewport. This will approximate what it’s like to view the website on a bunch of devices with a variety of screen widths. It’s not exactly the same, but it demonstrates the concept visually and that’s good for our purposes here.

No, really: go ahead and take a look. I’ll wait until you get back.

See what I mean? Did you see how the design responds and adapts to the width of the browser window as the available viewing space changed? This is one of the most powerful aspects of responsive web design. Not only can we linearize the content (stack it from top to bottom), but we can also optimize our layout for a variety of device sizes and capabilities. It’s important to remember that we’re changing the presentation of the content, not the foundational markup itself. Under the hood it’s the same HTML code, but the layout changes shape and the images shrink and expand as needed. Speaking of images, let’s move on to our next responsive web design ingredient.

Flexible images

So now our layout is fluid and flexible. How do we get those pesky images to flex with the rest of the content? We need to allow the images to shrink while retaining their original proportions. Again, we turn to CSS and add the following rule for our image tags:

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

Well that wasn’t too difficult. One more thing before we’re finished with our flexible images. We need to remove the width and height attributes from our image tags, which leaves us with:

<img src="monkey.jpg" alt="image description">

Nice and simple. Now our images will proportionately shrink down as the available screen width decreases. An important point to keep in mind: it’s not a good idea to increase the dimensions of an image (i.e., start with a small image and stretch it bigger), so we’ll need to create our graphics the right size for the desktop layout and let CSS do the job of shrinking them down as needed. Keep in mind that these large images might be accessed on a mobile phone with a slow connection, so it’s still a good idea to compress and size them as you would normally.

We still need a way to make some minor layout adjustments from time to time, which brings us to our third and final responsive web design ingredient.

Media queries

Actually, one of the components of media queries, called media types, has been around for a while. Have you heard of a “printer” style sheet? That’s when the developer creates CSS rules that are only used when a web page is printed. The screen ignores them, but the printer uses them to format the content for a printed page.

With responsive web design, we can also query the browser for things like minimum and maximum width, device type and other useful features. If we decide that the content in our large-screen, three-column layout gets too tall and narrow on small screens, we can use media queries to make adjustments. We can also change things like background images, colors, font styling and more. Here’s a simple media query that changes the background color as the viewport increases:

.container {
    background-color: blue;
    color: white;
}

@media screen and (min-width: 480px) {
    .container {
        background-color: red;
    }
}

@media screen and (min-width: 960px) {
    .container {
        background-color: green;
    }
}

Do you see how that works? On a small smartphone screen, the container’s background color would be blue. On a medium tablet screen, it would be red. And on a large desktop computer, it would be green. If you were to resize your browser you’d see each in turn as the screen size changed.