Responsive Design Patterns

A while back Colin sent me a link to a blog post by Joshua Johnson about responsive design patterns. What’s a responsive design pattern you ask? It’s a mockup that helps us plan out how our sites are going to react on various display types and resolutions. Since we’ve started using Foundation all of our sites behave in basically the same on smaller devices: that is, columns become rows and we hide some elements.

Our newly deployed site Internet Hall of Fame is a good example of a complex-looking theme with a very basic, very out-of-the-box responsive behaviour. Notice the menus and the logo in particular:

Now there is nothing wrong with what Foundation gives you out of the box but we’re all about pushing the edges here. Joshua’s post clued us into the fact that we can do more and be a lot more creative with our layouts. In the end it will help our clients show the world content that rearranges itself in logical and creative ways based on how you’re looking at it and on what kind of device.

The Mockups:

Go take a look at all of them listed in an index or pick and choose from the ones we’ve done so far:

The mockups work at the following resolutions so take your browser window and make it these various sizes to see the magic.

  • Greater than 980px wide (PC)
  • Between 768px and 980px (tablet-y)
  • Less than 768px (phone-ish)



All of these patterns start with what Foundation gives you out of the box and then we add as few custom classes and media queries as possible. Feel free to view source and take a look at how they work. All of these patterns use a common style.css in addition to the Foundation libraries.

Here's an example of the sorts of media queries we need to make this happen.

/* Biggest size */
@media only screen and (min-width: 980px) {     
  .block-grid.shuffle-up { margin-left: -2% }
  .block-grid.shuffle-up>li { margin-left: 2%; width: 31.3%; margin-bottom: 2%;}
  .block-grid.shuffle-up img{ width: 200px; margin: 0 auto; }
  .block-grid.shuffle-up h3{ text-align: center; }
/* Medium size */
@media only screen and (max-width: 980px)  and (min-width: 768px) {   
  .shuffle-even, .shuffle-odd { width: 100px;}
  .shuffle-even { float: right; margin-left: 3%;} 
  .shuffle-odd  { float: left; margin-right: 3%; }
/* Small size */
@media only screen and (max-width: 768px) {   

As we take on projects with interesting layouts we’ll add them to the list. Also if you have any suggestions we’re always looking for new challenges. Can you create a sensible design pattern that Foundation can't handle?