LearnResponsive Design Patterns

Nick Pettit
writes on July 15, 2013

Share with your friends


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.


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.

12 Responses to “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. Sometimes, ornamentation has to be sacrificed in order to achieve usability across all devices. There’s still a number of visually impressive sites on that list! 😉


  4. 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?

  5. Great roundup, the point regarding the responsive tables is a good point, especially for the purposes of accessibility and seo.

  6. Danderson on August 7, 2013 at 10:25 am said:

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

  7. Chris Hawkins on August 10, 2013 at 9:49 pm said:

    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?

  8. ブランドコピー時計大人気を海外激安通販専門店ロレックス、ブルガリ、フランク ミュラー、シャネル、カルティエ、オメガ、IWC、ルイヴィトン、オーデマ ピゲ、ブライトリング、グッチ、エルメス、パネライ、パテックフィリップ偽物(コピー商品)のブランドの腕時計の販売、通販。
    人気スーパーコピーブランド時計激安通販専門店私達は長年の実体商店の販売経験を持って、先進とプロの技術を持って、高品質のスーパーコピー時計づくりに 取り組んでいます。最高品質のロレックス時計コピー、カルティエ時計コピー、IWC時計コピー、ブライトリング時計コピー、パネライ時計コピー激安販売中商品の数量は多い、品質はよい。海外直営店直接買い付け!★ 2015年注文割引開催中,全部の商品割引10% ★ 在庫情報随時更新! ★ 実物写真、付属品を完備する。 ★ 100%を厳守する。 ★ 送料は無料です(日本全国)!★ お客さんたちも大好評です★ 経営方針: 品質を重視、納期も厳守、信用第一!税関の没収する商品は再度無料にして発送します http://www.ooowatch.com/kabann/dior/index.html

  9. エルメス スーパーコピー品激安通販!完璧品質!お客様の満足度は業界No.1です!
    BVLGARI(バッグ?財布?小物)CHLOE(バッグ?財布、小物)偽物ブランド,激安,コピー?ルイヴィトンバッグ,偽物?ルイヴィトン財布,コピーバッグ,ブランドバッグ,偽物バッグ,偽物シャネルバッグ,偽物エルメスバッグ,偽物グッチバッグ,偽物財布,コピー財布,時計の專門店 http://www.brandiwc.com/brand-20-copy-0.html

  10. 弊社は海外安心と信頼のプラダ 時計 コピーです。2015 新作が満載!皆様を歓迎して当店をご光臨賜ります。ロレックス時計コピー,パネライ時計コピー,ウブロ時計コピー ,ブライトリング時計コピー,IWC時計コピー,フランクミュラー時 計コピー,ショパール時計コピー,フェラーリ時計コピー,グラハム 時計コピー,ハリー ウィンストン時計コピー等。サイトは世界一流ブランド コピー 専門店です。ぜひ一度当店の商品をお試しください。驚きと満足を保証致します。ご利用をお待ちしております。
    スーパーコピー、スーパーコピーブランド(N級品)激安通販専門店世界一流ブランドコピー 財布、スーパーコピー 商品、激安ブランドコピー 。 ヴィトンコピー 、 ミョウミョウコピー 、シャネルコピー 、エル メスコピー 品格安通販。商品は全て最高な材料 と優れた技術で造られて、正規と比べて、品質が無差別です!人気ブランド.. http://www.gowatchs.com/brand-237.html

Leave a Reply

Want to learn more about Design?

Design refers to visuals, interaction flows, wireframes, branding, and more. Learn how to use good design to enhance your website, mobile app, or business.

Learn more