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

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:

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).

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:

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:

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.

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.

• Responsive Web Design Patterns via Brad Frost
• Pattern Tap – A collection of design patterns.
• Yahoo! Design Pattern Library

The post Responsive Design Patterns appeared first on Treehouse Blog.