Round Up: Sites Using Responsive Web Design

01-31-11 Ben Callahan

The Sparkbox crew has been digging into responsive website design over the past few weeks. This article lists a few of the sites we've been looking to for guidance as we understand the underlying concepts.

The Sparkbox team has really been digging into responsive website design over the past few weeks. Fortunately, our interest in the topic corresponded beautifully with the launch of our new site, which you are now reading. After spending some time working through the process, we thought it would be helpful to write a few articles detailing how we went about it.

The purpose of this article is to show the list of sites we’ve been examining as we learned about the process. Each day we’re seeing more and more responsive sites pop up, indicating that this technique is picking up in popularity. Here are a few sites we think demonstrate a wide array of responsive methods.

Sites that are Built Responsively

Bureau, personal site of Thibaut Sailly

This is a personal site and blog. It’s quite simple in the way it responds, but the design is nice and clean.

Steff.m, personal site of Steffan Williams

Steffan Williams is a freelance front-end developer from South Wales. I love this site because it continues responding at larger resolutions.

Robot or Not, demo site

Robot or Not is the site that Ethan Marcotte designed and built as a demonstration of these techniques. It’s quite fun and provides a great overview of the various approachs you can take in making your site responsive.

Little Pea Bakery, demo site

Little Pea Bakery is a site that was built as an example for the Stunning CSS3 book.

SimpleBits, company site

Dan Cedarholm, aside from being one of the nicest guys you’ll meet, has been providing thought-leadership in CSS for as long as I’ve been making sites. This is his company’s website and it responds beautifully at all browser sizes.

Ethan Marcotte, personal site

Ethan wrote the post that started the responsive web design movement. He’s got some great ideas about how all of this should work and he writes and speaks with some of the top folks in the biz.

Naomi Atkinson, personal site

Naomi Atkinson is a designer, illustrator and photographer. She also presents at some major conferences around the industry. This is her personal site and it’s unique because it actually uses animation to move the components of the site into their new places after the browser is resized.

Hicksdesign, company site

Hicksdesign is a website design, user interface, branding and icon design company based in the UK. They do amazing work for some very big names and their recent site redesign is a beautiful example of how responsive a site can be.

Simon Collison, personal site

Simon was one of the first designers to redesign his site responsively, and it still holds up as one of the best. In particular, the primary navigation on the sub-pages is executed beautifully as the image are actually background images. This means that the site won’t load those images at smaller screen sizes, addressing bandwidth concerns of mobile devices.

In Closing

There are many more responsive sites out there, and no doubt many more in construction now. While a SmartSite is not only a responsive one, responsiveness is a key component of a SmartSite. It will be fascinating to see how the industry pushes the idea of responsive web design and how it holds up in large-scale applications.