Booklet

author

Fullstack HQ

Design

Best Collection of Responsive Design Patterns

design

Design

|

Best Collection of Responsive Design Patterns

WHAT'S A DESIGN PATTERN?
A design pattern is a common method of solving a design problem.
Example if you search on Google, the results are spread across many pages. What's the best way to navigate across all of those pages?
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 is referred to as pagination; and in turn, pagination is an example of a very common design pattern.

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.

HOW DOES _________WORK IN A RESPONSIVE DESIGN?
It's a common question when starting responsive design & development.
Breadcrumbs. Tables. Navigation. Carousels. You name it. How do they work?

Let's start out simple with a pattern you probably encounter a lot: image galleries. You'll notice that the grid collapses itself so that there are fewer and fewer columns as the page gets smaller.

Next is responsive progress bars that walk you through a series of steps. 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.
Here's one solution. The dark area 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.

Tables are notoriously difficult to make responsive. The problem is that tables tend to be very wide with many columns, but mobile devices tend to be quite narrow.
Chris Coyier put together great responsive table patterns here https://css-tricks.com/responsivedata-table-roundup/

This just scratches the surface of responsive patterns.
Now I'm going to share with you this great, underrated collection of responsive design patterns for many common interface including navigation,tabs, iframes, video, etc.
You can use this reference when working on your project.

Check out this collection of patterns by Brad Frost http://bradfrost.github.io/this-isresponsive/ patterns.html

More booklets by Fullstack HQ

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets