An Introduction to Responsive Web Design

I remember when I bought my first mobile device. It was Christmas of 2008 and my wife and I decided to splurge and get each other iPod Touches. We were dazed and amazed at the incredible computing power we held in our hands. Having only recently started texting, we couldn’t imagine this technology married to our phones yet. This thing had games, music, and books. But it also had the Internet — or did it?

The first web page I visited was apple.com, which had recently been redesigned with a jumbo masthead image that seemed oversized on my desktop. But I realized when I viewed the page from my iPod that it was actually just right for that screen size. But not much else was.

I quickly discovered the technique of pinching the screen to zoom in to see the tiny text on the rest of the page. I could also double-tap portions of the page to zoom to a specific area. Nice, but hardly convenient. So I basically disregarded the idea of web browsing on such a small device. This would never be practical, I thought.

I heard that some companies started building separate pages for mobile devices. Now a user could navigate to the main homepage and, if the technology was set up, be whisked away to a magical optimized version of the site. And when my employer did this I gave it a try. I had a pressing need to use an intranet page to look up financial information, and all I had with me was my magic iPod. The page was poorly designed and uncomfortable to navigate. I was left frustrated and resolved again that this minified Internet was not worth my time. I also concluded that investing the time to create this mirror site was also a waste.

Inefficient. Humbug.

The mobile device craze grew, and I just did not understand it. But I lived in a small town in rural Ohio. My work focused soundly on micro-sites with very specific audiences. Mobile optimization was completely irrelevant.

The moment it all changed

It was not long after that that I attended my first An Event Apart conference in Washington D.C. As a budding web designer/developer I was thrilled to spend three days among colleagues soaking in the latest best practices and new trends from my web heroes — people like Jeffrey Zeldman and Andrew Clarke. I also met several new heroes that week who changed the way I thought about the web: Jeremy Keith, Luke Wroblewsky, and Ethan Marcotte.

Many exciting ideas were illuminated that week. But what really stuck with me was how the people around me were indeed using their mobile devices to access the web. I realized I was missing out. Living in a rural town and having no smart phone had limited my understanding of what this craze was all about.

And to make the perfect storm that rattled my existence, it was 2010; the year of the responsive web. Ethan hit the stage, and within minutes I was flabbergasted. Suddenly it all began to make sense. The mobile experience was crucial (which was further expounded upon by LukeW). But it could also be optimized for smaller screens without needing that confounded mobile sub-site.

I left the conference a different person, professionally. I had caught a vision for what the web already was and what it could further grow to be, and I wanted to get started in my little rural world.

I bought an iPhone. I bought Ethan’s book. I got busy.

A survey of responsive designs

That was just the beginning of what quickly became a major new trend on the web.

Now this thing is everywhere and has completely changed the way we think about web design. Zeldman’s words on an insert at the front of my copy of Ethan’s book are prophetic:

“Some ideas seem inevitable once they arrive… so too will the internet users and designers who come after us find it hard to believe we once served web content in boxy little hardwired layouts left over from the magical but inflexible world of print.”

We designers have an infinitely flexible canvas on which to create — so the challenge is to optimize that experience so that the site we’re designing looks beautiful on any device.

Many techniques and tools have emerged since then. The web is now a responsive place. But for those transitioning from the print world, this notion may be confusing at first. Allow me to share a few examples that demonstrate some of the typical approaches that apply this idea well.

But first…

How to observe a responsive site

It might seem obvious, but the best way to view a responsive site is to open it on a series of devices and observe the adjustments each makes to optimize the experience. This is the true test.

If you don’t just happen to own one of every device on the planet, you can get a pretty good feel for the responsiveness just by opening the site on a large desktop computer and adjusting the size of the browser window. Better yet, use Google Chrome and turn on the developer tools to see the actual dimension of the window as you adjust its size.

With this method you can gain a greater appreciation for the nuances of a responsive design. I think it is freeing not to think about specific sizes but to consider the design canvas a living thing that is fluid and flexible. When we test a responsive site on a desktop browser we can instantly imagine a smaller (or larger) device and consider how our layout can adjust to be optimized for it. With incremental changes to the browser window we can test — almost infinitely — the durability of our solution.

But we should always return to actual devices before we push the site out to the world. One browser will inevitably be a little different here and there, and the more aware we are of those differences — and hopefully account for them — the better our solutions will be.

And now for…

Some terminology

It might also help to define a few terms up front so we’re sure to be on the same page.

• Breakpoint: a device size or browser dimension at which a design or layout adjustment is made. We discover these as we scrub the size of the browser window and notice elements change size, move, or disappear altogether. Oh, and by the way, text wrapping around the inside of a container doesn’t count.
• Fluid elements: elements that stretch, squeeze, flow, or continually adjust size in some fashion between breakpoints.
• Fixed elements: elements that maintain their size between breakpoints.

Now with testing methods and terminology in mind, let’s take a look at some common approaches, which I’ve classified into three groups.

Class 1: 100% (or at least very nearly 100%) fluid

This class maximizes every browser size by accounting for adjustments as infinitely as possible. Flexible imagery and layouts are typical and these often include animations as well (but that’s another topic, right?). Every size appears as if it was intentionally designed with the real estate used to its greatest potential.

• Cotap — Gorgeous imagery abounds here with a design that flexes right out to the edge of my Apple Cinema Display without hesitation. While most of the layout remains centered within a 960-wide box, the imagery floods the canvas and flexes its height so as not to be cropped awkwardly. A smart little snap at 1000 adjusts the positioning of the phone graphic and elements in the top panel. The imagery and four-up layout continue to flex smoothly down to 640 with a quick consolidation of links in the footer at 800. 640 and down the phone graphic is dropped from the top, while the beautiful icons and features are all clear, just formatted vertically rather than in columns.
• The Icon Factory — While icons are their speciality this company also keeps the large web screen full of vivid imagery and content. While here most of the layout remains centered in a relatively narrow box (800 pixels) textures and imagery, along with layout elements lower in the page flex to fill the canvas. Watch the bright red section featuring the team members as the layout slides below 1900. Interestingly, their featured carousel items adjust their layout at 1000 while the beautiful award-winning icons keep their super-size until 800. Below 800 the entire design flexes smoothly. A quick adjustment happens in the header at 640.
• Sparkbox — This team does it without the flashy imagery. Crisp lines, fine-tuned typography and clear colors make this site absolutely stunning on all devices. From full bleed on my Cinema display the page flexes smoothly down without major adjustments until 960 where one module is restacked. From there, little fine-tuning adjustments are made such that the design gracefully morphs into a single-column design. The primary navigation doesn’t even tuck away until aroudn 600. Fantastic work.

Class 2: Part fluid, part fixed

This class basically includes sites that contain a mixture of class 1 and class 3. Usually, they will have a fixed centered design on larger screens but fluid design elements moving to smaller layouts.

• Agents of Value — This design remains centered when larger than 1200 pixels, but watch how it becomes fluid under 1200. The graphic featuring their team members continually adjusts as we move down with a major adjustment at 960. Notice that the main navigation also switches to a nested menu around 1024. And don’t take for granted the considerations made for the text below the masthead that starts as three columns but adjust to a single column around 640.
• Swatch — This nifty work features a centered banner and tile design from 1100 up. Around that 1100 mark though the images begin to resize thanks to some fancy JavaScript work that manually resizes each height (note that flexible heights are really challenging to accomplish well without JavaScript, so be cautious with how you plan them). Around 768 the font size in the nav scales down as things continue to resize all around. At 640 the first major layout change occurs and from there down the nav tucks away and the three-up tiles switch to two-up. This works well for them!

Class 3: Flexibly fixed

This class is the simplest to plan and execute for beginners while also a solid, clean approach to the topic. The designer defines several static states for the layout at specific device widths and the design neatly snaps from one to the next. There’s only one here because today these are a lot harder to find. But its a good example of the concept.

Cedarville University — This site is designed at 1200 and remains centered at sizes higher than this. But between 1200 and 980 the layout snaps to a slightly thinner version and remains aesthetically centered. The same thing occurs between 768 and 980 with a noticable difference in font size for navigation items. Under 768 a hybrid mobile look is adopted with the navigation tucked into a nested menu and the layout switching to an overall single-column design. Oddly enough, from about 780 to 768 the columns remain. From 768 down the design flows naturally as a single column.

Many more examples of responsive web sites can be found in the Zurb Library or through a quick Google search for examples of responsive web design.

Suggested Design Process

Looking at great sites like these it can be intimidating to turn to our own tools and start working especially considering the vast amount of variation even inside of one site. Therefore, let me suggest the following process:

When getting started, design for class 3

Don’t try to tackle a fully fluid design your first — or even second or third — time. Design three comps for each page: one for a standard desktop device, one for a typical tablet device, and one for a typical smartphone device. Query your site’s analytics data to get a sense of the kinds of devices visitors are using to accessing your site.

Oh, by the way, use a great tool like Adobe Fireworks, which lets you create each comp of different sizes as a series of pages in one document. This way you can share common elements quicker through using symbols or other shortcuts.

If you don’t have any data to run from, some suggested sizes are:

Suggested device sizes for designing for multiple devices.

• 1350 x 800 for Desktop*
• 1024 x 768 for Landscape Tablets
• 768 x 1024 for Portrait Tablets
• 480 x 320 for Landscape Smartphones
• 320 x 480 for Portrait Smartphones

*Recent analytics from a site I worked on showed most users were on a device 1440-wide or higher. 1350 accounts for a slightly smaller browser window and scrollbars on left and right. A fold line at 800 accounts for the browser window toolbars and other window frame UI.

Plan the smartphone first and sketch wireframes

There’s much more that could be said about this, but I’ll leave that to the heroes of the web. Suffice to say, if you think first about what the your smartphone user wants to see (or what they want to see at all) you’re not only set up to make better design choices for that comp, but you also set yourself up well to optimize what appears in the comps for larger devices.

If you don’t have them already, draw a wireframe for each comp using grid or dot paper that helps you keep things to scale.

Design thoroughly

I will often create three comps. One will show the smartphone layout (usually a 320-wide typography-focused comp with any extras in expandable or off-screen panels). Another will show my desktop size (the full 1350-wide layout taking advantage of all the real estate as well as the typically faster download speed). A final will show an intermediate point (usually between the 768–1024 mark), such as the smallest point that maintains the desktop layout (anything below this might switch to the smartphone approach).

As I design I’m continually switching between each of the three comps and thinking through how the elements will adjust. I want to do as much thinking now as possible. When I get to the browser I want to focus on the in-betweens, so solidifying the major breakpoints now is my crucial.

Also, don’t be afraid of layouts that require the user to scroll. Know where the initial “fold” is on the current device and try to get crucial elements above it. But plan on stretching your canvas as tall as you need rather than trying to squash everything into one height. This is the web; we scroll.

Reconstruct from the top down

See this great article on how to get started, technically speaking.

When you’re getting started with responsive design it might benefit you to start where you’re familiar and design from the desktop size down (don’t shoot me, LukeW; I left a note for more advanced designers below). There are a variety of approaches to follow, but if you’re planning on designing the flexibly fixed idea from class 3 above you have a pretty straight-forward process:

• Reconstruct the large comp and default settings in your CSS. Keep your preview browser at least one pixel wider than your comp.
• Add a media query for your next breakpoint down and set min-width to that breakpoint’s width and a max-width to your larger comp’s base width. Place any styles you need inside this media query to override the larger layout’s settings. Overriding with the same selectors you used earlier in your stylesheet should be simple since you’re lower in the sheet. But consider reviewing the concept of specificity if you have trouble with your settings taking effect and ensure you have a selector that is specific enough. Make sure to resize your browser window to a size inside the range your query specifies to see the design taking effect.
• Repeat for the smallest size. Note, however, that you’ll be overriding both the overridden settings from your previous step as well as any that persist from the original reconstruction.

NOTE: (Yes, LukeW and other mobile first advocates, here it is) This approach is definitely a simplified suggestion for beginners. Those more experienced might find designing from mobile up challenges you to optimize for mobile users first.

Tweak the in-betweens

With the basic breakpoints in place you can now begin to play with the design in the browser. Does anything unexpected happen between breakpoints? Did things in each breakpoint pan out the way you expected?

If you see any issues, simply add a new media query to add an override for that point in the design.

Conclusion and next steps

With an overview of how some designers have tackled the responsive design issue and a simple process to help get started you’re now equipped to make your own decisions for an upcoming project. But know there is a lot more to consider in the whole picture. Be sure to read up on the following related issues:

• Mobile first
• Content strategy