A Crash Course on Responsive Web Design

Have you heard all the buzz about responsive web design but felt hopelessly behind? I know how you feel—every wave of new technology brings a flood of new stuff to learn. But responsive design is a revolutionary approach to web design that can’t be ignored: It impacts the industry in every way, from the way we sell sites to the entire design and development process.

Nearly every new website needs to be responsive to some degree. (And there’s a documented app backlash, which makes a good argument for making mobile-friendly responsive websites instead of mobile apps.) This crash course on responsive design will teach you the basics and quickly cover the most critical aspects of this new approach to web design. At the end of the day, you’re still designing websites, just in multiple sizes. Wrap your head around these basics and you’ll be well on your way to digging into responsive design.

This fun responsive site comes from HOW Interactive Conference speaker Steve Fisher.

What is responsive design?

The most basic of questions is simple: What exactly is responsive web design? The best place to start is with this article by Ethan Marcotte where he essentially coined the term “responsive design” in May 2010. It’s definitely a #longread, but it clearly establishes what responsive design is, why it exists and the basics of how it works. It’s a must-read for any designer keeping up with the times.

So what’s adaptive design?

You might have also heard the term “adaptive design.” And if you’ve read anything about it, you likely thought, “This sounds a lot like responsive design…” In late 2010 and early 2011, there were two schools of thought on how a website could adapt to a user’s environment. One was a fluid design that fits any screen size—responsive design. The second was a design that went through a series of fixed-size layouts as the screen size changed—adaptive design. But both accomplish the same end goal: The page fits the user’s screen, no matter whether it’s a smartphone, tablet, laptop or desktop computer.

But now most people just refer to both of these approaches as “responsive design.” Neither is more correct than the other. In a way, adaptive design is simply a method of implementing responsive web design—this article from Jeffrey Zeldman gets into it more.

So now you understand the basic idea and history of responsive design, and two theoretical approaches. Let the lofty ideas sink in, and then dig into the more practical resources.

Finding responsive web design inspiration

If you’re getting started in responsive design, one of the best approaches is to look at the responsive work other people are doing in this area. For this I encourage you to check out MediaQueri.es. It’s a showcase of sites built with responsive. Load up any of the samples and resize your browser from full screen down to a small window to see how the pages change to fill the available space. Also check out a responsive design gallery I made here.

At this point many responsive web design guides dive into technical talk. But I want to focus on the design process that leads up to the coding without getting too deep into code. The difficulty with this plan is that you simply can’t design a responsive site without some understanding of the coding side, and many people make initial web prototypes in live code and later design the skin that goes on top. But let’s assume you’re working with a web developer or team that’s going to deal with the code parts.

Grid systems

One thing on the technical side that’s a real boon for designers is grid systems. Grid systems are an easy way to establish consistency in a multiple-page layout. You’d likely use a grid when designing for print—it establishes visual consistency. But there’s another benefit for using grid systems in web design: When your design relies on a grid, you can often reuse code.

The grid system your site uses has a significant impact on your design work. But that’s not to say it’s restrictive; it just gives you a structure to design within. One great grid system is cssgrid.net. It’s a solid foundation for designing sites that’s responsive by nature. The column structure automatically changes to fit any given screen size. Even better, the download includes a Photoshop template for you to design with.

So you have an underlying structure to work with. Now, to translate those rough sketches into something to show clients and development teams, we need wireframes.

Wireframes

A wireframe is a blueprint of how each page of a site will be structured. Like architectural blueprints, they don’t specify the colors of the walls or the type of furniture a room will have; they establish the basic layout, how you get in and out of a room, where the windows are, etc. Wireframes establish the setup for each page, over which a visual style can be applied.

Traditionally, people have often ignored wireframes in the web design process. But with the complexities of responsive design, wireframes have become more important. Getting clients or developers to sign off on the wireframes will save you a lot of time down the road.

I’ve used many different tools to build wireframes, many of which are listed here. While some of them are awesome, I have yet to find a really solid tool for building responsive wireframes. I’m sure one of the existing tools will get upgraded, and new players will enter the market with responsive wireframing as their main feature. But that doesn’t help us today. Another catch here is that most of the wireframing tools that exist for responsive design are code-based. So you not only have to know HTML and CSS; you have to learn how to write it to fit a system. A perfect example of this is Foundation from Zurb. Foundation is an awesome tool if you know how to code—check out this sample wireframe and resize your browser to see what it can do.

Bring back mood boards

One common practice in web design really needs to go. Back in the day, you’d meet with a client about their new site, find out what they needed. You’d take this information back to your agency or studio, crank out three possible designs for the site and present them to the client. Given that these were fixed-size layouts, the process kind of worked. But with responsive design, there’s a lot more to show a client. What you really want to get them to approve is a look and feel—not so much one specific layout.

It’s old-school, but you should really consider using mood boards—specifically you should check out Style Tiles. This awesome site not only provides great templates to use in Photoshop, it also demonstrates how and when to use them.

Photoshop vs. InDesign

I often get asked by new web designers what the best tool for designing websites is. My answer has been Photoshop for sure, maybe Illustrator, and never, ever, ever InDesign. Very few web developers know how to use the software, and most don’t even have it installed. Sending a developer your site designed in InDesign will likely result in an email back that says, “I can’t open the file.”

But responsive design has made things more complex. If you’re designing a site in Photoshop at multiple sizes, you’ll have to recreate a lot of things over and over again. You might end up with multiple PSD files, one for each planned size. Wouldn’t it be nice to use something that has more of an adaptive layout system? Well, against all odds, InDesign has become a contender. Check out thesearticles from designers who use InDesign to lay out responsive sites to great success. (Work with your developers on this topic to see if InDesign is a viable option for your project.)

I hope this was helpful in getting you started with responsive design—any questions?