Responsive Design Patterns

Explaining Markdown

Responsive design has enjoyed several years of popularity now and design patterns that link mobile, tablet, and desktop experiences are starting to emerge. In this post, I’ll suggest some specific techniques and point out some further reading.

What’s a design pattern?

On the web, a design pattern is a common method of solving a design problem. For instance, if you enter a query into any search engine, the results will probably be spread across many pages. What’s the best way to navigate across all of those pages? Well, every search engine approaches the problem with the same solution. Down at the bottom, each search result page will include a next link (to move forward by 1 page) and numbers (to jump to individual pages). This concept as a whole is commonly referred to as pagination; and in turn, pagination is an example of a very common design pattern.

Examples of pagination from Google, Yahoo!, and Bing

Examples of pagination from Google, Yahoo!, and Bing

Designers should take advantage of design patterns like this, because more often than not, the problem they’re dealing with has already been solved by someone else. No need to reinvent the wheel if it’s already been built, tested, and perfected.

Responsive Design Patterns

Let’s get to the goods.

These sets of problems and solutions are well documented for the old web (one where mobile devices don’t exist). There are lots of design patterns, they’re well understood, and they’re well established across many websites. This is not the case for the mobile landscape, where UX and UI is evolving at a more rapid pace. In fact, it’s moving so quickly, that it’s even influencing desktop interfaces, which is another good reason to design your mobile interfaces first. There’s still a lot of room for innovation, but here are a few common situations you might encounter when designing your next responsive site.

Responsive Galleries

Let’s start out simple with a pattern you probably encounter a lot: image galleries. Brad Frost has put together a wonderful collection of responsive design patterns that I’ve included in the resources section. Check out his example of a gallery (or image grid, as he calls it). When the example is loaded, try resizing the browser. You’ll notice that the grid collapses itself so that there are fewer and fewer columns as the page gets smaller.

I would add to this example that you should consider the margin, padding, and borders on each of your images as you move across screen sizes. For example, at full width on my computer, those images feel a little bit tight and could probably use some negative space. Below is an image depicting this adjustment:

Example of an image gallery being resized to fit mobile devices.

Responsive Progress Bars

The term progress bar is a bit muddled, but in this case, I’m referring to progress bars that walk you through a series of steps. This could be anything from checking out at an online store to filling out a user profile. In essence, you use a progress bar in situations where there are steps involved; presenting everything on one page could potentially overwhelm the user. Breaking it up across multiple pages helps to ease this burden, and it also helps indicate how far along they are in the process. Below is an example of a progress bar (scaled up for the purposes of this example).

A simple progress bar.

This is a little bit tricky, because it’s typically very wide and narrow. When sized down to a mobile screen, this wouldn’t look very good as is. This is where responsive patterns get a little bit more advanced: You have to think about the essence of what’s being communicated and then decide if anything can be slashed. From there, you rebuild a new widget. In my opinion, the progress bar really only needs to communicate the name of the current step and then give some idea of where that step is in the process. Here’s a solution I came up with:

An example of a responsive progress bar.

The dark areas indicate where you might display the name of the current step. The lighter areas would be clickable and allow you to jump to other steps. I think this is a bit ideal, because there may be a process that’s too lengthy and would fill the screen with these bars. In those instances, the two arrows might suffice, like this:

Another example of a responsive progress bar.

They don’t tell you exactly how many steps there are, but they at least give an indication that there’s a step behind you and a step ahead of you.

Responsive Tables

Tables are notoriously difficult to make responsive. The problem is that tables tend to be very wide with many columns, but mobile devices (particularly in portrait view) tend to be quite narrow. Fortunately, numerous solutions have surfaced in recent years. Chris Coyier put together an excellent responsive table blog post that outlines a few of these. I have two favorite solutions.

Maybe this first one is a bit too clever, but I like the idea of replacing a table with a visual. In other words, mobile devices and small screens might display a graph that conveys the information, but a larger screen would expand the graph to show the full data table. Under the hood, you could still keep the data for accessibility and SEO purposes.

An example of a table transforming into a visual graph.

While interesting, that solution probably isn’t ideal for most scenarios. If you absolutely need to display the data in a table without compromise, then Zurb’s Responsive Table solution is the best I’ve seen.

Resources

This just scratches the surface of responsive patterns. You should definitely check out the responsive web design pattern collection from Brad Frost for comprehensive code examples of many common interfaces. It’s also worth taking a look at both Pattern Tap and the Yahoo! Design Pattern library. They don’t have responsive patterns exclusively, but they’ll give you a good idea of the types of patterns that are already popular.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Nick Pettit

Nick is a designer, public speaker, and teacher at Treehouse. He is also a co-host of The Treehouse Show. Twitter: @nickrp

Comments

9 comments on “Responsive Design Patterns

  1. In my opinion, a responsive icon has to be as simple as possible. That’s why I am really glad about this new trend with flattening the graphical user interfaces of the operating systems of our devices, and as an architect and geometric pattern researcher I really have to admit it that patterns play a very important role in the visual experience of a site’s design. I still can remember when a lot of responsive buttons were animated and all the sites were full of bling:) but the age of flash is already over:)

  2. In responsive design as a designer i would like to suggest that we should choose our content first which will be displayed on all device :)

  3. Ah this is really cool! I’m totally new to your site but am really looking forward to learning more. I’m taking the leap as a freelance designer and have a lot of learning to do :) PS can I also say that I love love love treehouse’s logo?

  4. I’m coming from desktop dev to mobile right now; the word to keep in mind is Slide, remember it and use it.

  5. Could somebody direct me to a training or how-to source aimed at visual designers? Contrary to most web site designers, larger corps employ specialists in interaction design, visual design and HTML/CSS. And while I was a “web designer” of olden days, and know how to provide pixel specifications hex and the like, I do not do development. Do we all have to become HTML 5 / CSS 3 experts to learn this? What is out there for Visual Designers, beyond the grid information, to help?