The ultimate responsive web design roundup
Responsive design is the new darling of the web design world. It seems that not a week goes by that there aren’t new resources for doing it, opinions about how to do it or even whether to do it at all, and new sites that make beautiful use of it.
It can quickly get overwhelming trying to keep up with it all.
Here we’ve compiled a list of more than seventy resources for creating responsive designs.
Included are articles discussing responsive design and related theories, frameworks and boilerplates for responsive layouts, tools for testing your responsive designs, techniques for resizable images, and a whole lot more.
Then, to top it all off, we’ve collected a hundred of the best responsive designs out there right now to inspire you and give you some real-world ideas.
Articles and Publications
Below are a number of high-quality articles talking about responsive design and the techniques that go into it. Some might include a few code snippets or other technical information, but for the most part, these are concept-level discussions.
Responsive Web Design
This is the original post by Ethan Marcotte that was posted on A List Apart. It discusses the reasoning and principles behind responsive design, as well as practical techniques for creating responsive sites.
Responsive Web Design Book
Responsive Web Design by Ethan Marcotte, published by A Book Apart, covers the state of the responsive web, flexible grids, flexible images, media queries, and how to create responsive designs.
The Practicalities of CSS Media Queries, Lessons Learned
This post, from Bloop, is a fantastic overview of how to use media queries (and their pros and cons compared to creating a dedicated mobile site), as well as some useful tips for implementing them. Some useful code snippets are included, too.
Big vs. Small: Challenges in Responsive Web Design
This article discusses some of the challenges responsive web design can present, including the unique considerations that are required as desktop screen sizes continue to grow, while at the same time many users are now accessing the web more on tablets or smartphones.
Beginner’s Guide to Responsive Web Design
This Beginner’s Guide from Think Vitamin offers a great introduction to responsive design, including information on fluid grids and media queries.
Responsive Web Design: What It Is and How To Use It
This introduction to responsive design from Smashing Magazine is a great primer on the subject. It covers the basic concept, as outlined by Ethan Marcotte, as well as practical concerns for creating responsive designs. Code examples are also included.
Responsive by Default
This article from Andy Hume discusses why the web is responsive by default, and that designers have been forcing it to be un-responsive for years. It’s an interesting idea, discussed mostly from a developer’s point of view.
We often talk about responsive design strictly from the technical end of things, but the entire point of responsive design is to improve the content experience. This post from Trent Walton talks about just that, how stacking content isn’t always the best solution, and what can be done instead.
Understanding the Elements of Responsive Web Design
This post from Six Revisions covers the basics of responsive design: flexible grid, flexible images, and media queries.
A Brief Overview of Responsive Design
Here’s another great basic rundown of what responsive design is and how to achieve it, this time from 1st Web Designer.
Responsive Web Design has Created Opportunities Across the Board
This post covers some of the opportunities that responsive design presents for designers and developers.
Designing for a Responsive Web
This article from Webdesigntuts+ discusses responsive design in terms of fluid grid, fluid images, and media queries.
Experimenting with Responsive Web Design
This article from Lee Munroe gives a simple overview of responsive design, particularly media queries, as well as some examples.
CSS3 Media Queries
Web Designer Wall offers a great roundup of media query code snippets, responsive design examples, and more in this article.
20 Amazing Examples of Using Media Queries for Responsive Web Design
This post from Design Shack offers up some great examples of responsive design, as well as plenty of information how to create your own responsive sites.
This post from Adactio covers some of the confusion that often surrounds responsive design, breaking it down in simple terms and offering some useful insight.
A Richer Canvas
This article from Mark Boulton discusses some of the advantages that responsive design, CSS3, and other tools give designers and content creators, specifically that we should be designing from the content out, rather than the other way around.
Some Thoughts on Responsive Web-Design and Media Queries
This post from Jon Phillips discusses some of the potential downsides to responsive design and, more importantly, offers some great solutions.
Responsive Web Design and Mobile Context
This post discusses how mobile devices are being used for browsing web content, and how that can affect your responsive design choices.
The New Front End Design Stack: The Role of Responsive Design
This post from Acquia discusses the importance of responsive design, offers some great examples, the technical elements that go into creating responsive designs, and more.
Responsive Web Design from the Future
Responsive Web Design from the Future is a presentation by Kyle Neath that discusses the future of web design in relation to responsive design principles.
To Hell With Bad Devices: Responsive Web Design and Web Standards
This is an in-depth look at responsive design, discussing device-specific design, what responsive design means for apps, and more.
The Pros and Cons of Responsive Web Design
Plenty of articles discuss how to create a responsive design, but not that many discuss the good and bad things about responsive designs. The Pam does just that, giving a fairly comprehensive list of the positives and negatives associated.
11 Reasons Why Responsive Web Design Isn’t That Cool
This post from WebDesignShock outlines some of the potential challenges and problems that responsive design can present.
The tutorials below will teach you about CSS media queries and other responsive design techniques.
Quick Tip: A Crash-Course in CSS Media Queries
This Nettuts+ tutorial offers some basics for working with media queries, complete with video tutorial and code snippets.
Adaptive Layouts with Media Queries
This tutorial from .Net Magazine offers a look at basic CSS3 media query techniques. It includes plenty of code snippets and practical information about crafting your own responsive layouts.
Responsive Web Design: A Visual Guide
This video tutorial from Tuts+ offers a great introduction to what responsive design looks like, with examples. It then explains how to create your own responsive design, taking into account both the visual and technical aspects.
CSS Media Queries & Using Available Space
This post from CSS-Tricks explains the concept of using media queries to take advantage of the available space in the browser viewport. It includes plenty of useful code snippets and examples.
Working with Media Queries
Here’s a short tutorial for working with media queries, with plenty of code examples. It’s basic and to-the-point, but a perfect introduction to basic media queries.
How to Use CSS3 Orientation Media Queries
Media queries are great for adjusting the way your responsive design displays on different browser sizes, but a lot of designers overlook the orientation controls. These allow you to change the way your site is displayed based on whether a device is currently oriented to portrait or landscape mode, which is useful for both smart phones and tablets.
Optimizing Your Email for Mobile Devices with the @media Query
We often overlook HTML email newsletters when thinking about responsive design, but considering the number of people who are likely to view your HTML emails on their phone, it’s a good idea to use media queries in this case. This post from Campaign Monitor explains how it’s done.
How to Use CSS3 Media Queries to Create a Mobile Version of Your Website
This post from Smashing Magazine explains how to use media queries for creating a mobile site or otherwise linking separate stylesheets.
Adaptive & Responsive Design with CSS3 Media Queries
This fantastic post from Web Designer Wall includes a responsive design template, as well as a tutorial on how the template was created. It’s a great resource for those who like to learn new techniques by dissecting finished projects.
Responsive Web Design with HTML5 and the Less Framework 3
This article from SitePoint offers thorough instructions for creating a responsive design using HTML5 and the Less Framework. It includes all the code you’ll need for the final design, as well as a good breakdown of what that code does.
Tools and Techniques
The techniques and tools below make it a lot easier to create designs that respond the way you want them to. Many are for handling images (arguably one of the more challenging aspects of responsive design), but there are others, too.
CSS Effect: Spacing Images Out to Match Text Height
Depending on your layout, you may need text to line up properly with images, regardless of how the images and text are spaced. This technique from Zomigi shows you how to do just that.
Hiding and Revealing Portions of Images
Resizing images can only take you so far with responsive designs in some cases. At times, it’s more important for a particular part of an image to be visible or readable than for the entire image to be shown. That’s where this technique from Zomigi can come in handy. It makes it possible to dynamically crop background and foreground images as your layout width changes.
Creating Sliding Composite Images
This technique, from Zomigi, lets you create what appears to be a single image but is actually multiple images layered on top of one another. In this way, you can control the exact placement of different elements of the image as your browser viewport changes size and shape.
Seamless Responsive Photo Grid
This gallery from CSS-Tricks offers up a seamless photo grid that automatically resizes your images and the overall grid to fit your browser viewport.
Responsive Data Tables
Responsive design techniques aren’t very friendly to data tables. It’s easy to end up with tables where the type is so small it’s impossible to read. Or you can specify a minimum width, but then that kind of defeats the purpose of a responsive design. This technique from CSS-Tricks offers a solution for responsively displaying tabular data on a mobile device.
Foreground Images that Scale with the Layout
So it’s easy enough to create scaling background images, but foreground images are a little trickier. This article covers a technique from Zomigi for creating foreground images in your content that will scale with your layout.
FitText is a jQuery plugin for scaling headline text in your responsive designs. Using this, your text will always fill the width of the parent element.
Sencha.io Src is an image hosting service that sizes your images to the appropriate size for the device requesting them. Images are also optimized for efficient repeat delivery.
The Goldilocks Approach to Responsive Design
This post by Chris Armstrong talks about the “Goldilocks Approach” for creating responsive designs that are “just right” for any device.
Responsive-Images is an experiment in mobile-first images that scale responsively to fit your design. The idea is to deliver optimized, contextual image sizes in responsive layouts.
Lettering.js is a jQuery plugin that gives you precise control over the way your web typography appears, which can be a big plus in maintaining readability in a responsive design.
This technique from Ethan Marcotte creates fluid-width images for your fluid designs. It also works for embedded videos, and there’s a workaround for IE compatibility.
Respond is a lightweight polyfill script for min/max width CSS3 media queries, to make them work in Internet Explorer 6-8. It’s only 3kb minified, or 1kb gzipped.
Responsive Web Design Sketch Sheets
If you wireframe your designs on paper, you’ll find these Responsive Web Design Sketch Sheets to be very useful. There are a couple of different layouts you can download for free, each of which shows a handful of likely device viewports.
Frameworks and Boilerplates
Frameworks and boilerplates can greatly speed up your design process. The good news is that there are tons of boilerplates and frameworks already available for creating responsive designs.
Golden Grid System
The Golden Grid System uses a 16-column base design for widescreen monitors. On tablets, the columns will fold into an 8-column layout. And on smaller smartphone screens, the columns fold again to 4-columns, allowing the design to adapt to anything from a 2560 pixel wide screen down to a 240 pixel screen.
The Semantic Grid System
The Semantic Grid System allows for fluid layouts and responsive designs, while also using semantic markup (which is sorely lacking from most grid frameworks).
Gridless is an HTML5 and CSS3 boilerplate for creating mobile-first responsive websites. It includes no predefined grid system and no non-semantic classes.
Less Framework 4
The Less Framework is a CSS grid system for designing responsive sites that adapt to the size of the browser viewport. It has four layouts: default (for desktops and landscape mode tablets), tablet layout, wide mobile layout, and mobile layout. This is a good option for designers who want a responsive design but don’t necessarily want fluid columns.
Responsive Twenty Ten
Responsive Twenty Ten is based on the Twenty Ten WordPress theme. There’s also a plugin available to turn your Twenty Ten child theme into a responsive design.
Columnal is a CSS grid system that’s a “remix” of some other grids, with added custom code. The elastic grid base is taken from cssgrid.net, while other bits of code are taken from 960.gs.
1140 CSS Grid
The 1140 CSS Grid System is a flexible, fluid grid that will rearrange based on the browser viewport. It’s designed to fit perfectly in a 1280 pixel wide monitor, but becomes fluid below that.
320 and Up
320 and Up uses the mobile-first principle to prevent mobile devices from downloading desktop assets. It’s an alternative to starting with a desktop version and scaling down.
Skeleton is a boilterplate for responsive, mobile-friend designs. It starts with the 960 grid but scales down for smaller screens, and is designed to be both fast to get started with a style agnostic.
Fluid Grid System
The Fluid Grid System is based on a six-column grid and has 720 different layout possibilities. Because of its simplicity, it degrades well in older browsers.
Fluid 960 Grid System
The Fluid 960 Grid System is based on 960.gs, but has a fluid layout regardless of browser size.
Foldy960 is a responsive version of 960.gs. It consists of some extra classes and other things for turning a 960.gs design into a responsive design.
SimpleGrid is another responsive grid framework that supports infinite nesting. It’s configured for screens at four different sizes, including 1235px and 720px.
These tools make it much easier to test your responsive designs without having to use a bunch of different devices.
resizeMyBrowser is a useful testing tool for responsive designs. Just click one of the predefined browser size buttons and your browser will resize. Each size is labeled with the name of at least one device that uses that resolution.
responsivepx is a browser testing tool that lets you enter a URL (local or online) and then adjust the height and width of the browser viewport to see exact break-point widths in pixels.
Responsive Design Testing
Matt Kersley has created this browser testing tool that lets you see exactly how your site displays at common browser widths, starting at 240px and going up to 1024px.
Screenfly shows you how a website will look on various devices, including internet-enabled TVs and mobile devices.
Adobe Device Central
A number of Adobe Creative Suite products come with Device Central, which can be a very valuable tool for testing your responsive designs. It lets you not only preview, but also test your designs on the device of your choice.
Below are 100 examples of fantastic responsive designs. There are a lot more sites out there using the technique, and new ones are launched every day. One great resource for finding new sites is Media Queries, a gallery dedicated specifically to sites using responsive design techniques.
The Highway Hurricanes
Merlin Ord & Media
The Happy Bit
Easy Readers: Adaptive Web Design
More Hazards More Heroes
Hi, My Name is Andrew
The Obvious Corporation
Geek in the Park
New Adventures in Web Design Conference
Cisco London 2012
Team PAWS Chicago
Designing with Data
Full Frontal 2011
Web Design Yorkshire
Dust and Mold Design
El Sendero del Cacao
Ash Physical Training
The Modern Gentleman
320 and Up
The Sweet Hat Club
Little Pea Bakery
Philip Meissner Design
City Crawlers Berlin
A Flexible Grid
Here are some more great responsive design roundups from other sites.
- Responsive Web Design Techniques, Tools and Design Strategies: A very thorough roundup from Smashing Magazine.
- Responsive Web Design Articles, Tutorials & Guides: A high-quality roundup from Line25 with some great resources featured.
- 21 Top Tools for Responsive Web Design: A roundup from .net magazine that includes some great tools and resources for your responsive designs.
- 10 Excellent Tools for Responsive Web Design: This roundup from Six Revisions has ten excellent tools for responsive design, including text and image resizers and design frameworks.
- Responsive Web Design. Roundup from DesignFloat: A short roundup of other responsive design roundups, examples, and articles.
- Responsive Web Design: A Recap and Resources: This post from AIGA gives a quick overview of responsive design and offers some leading resources about the subject.
Written exclusively for WDD by Cameron Chapman.
Are you using responsive design techniques in your projects? Know of any resources we missed? Let us know in the comments!