screenshot

One of the very first steps that you should take in any major redesign is to get a feel for the state of the industry by taking a look around at what others are doing. When used properly, good inspiration drives you to your own unique ideas.

This is especially helpful when embarking on your first responsive design project. Today we’re going to hone in specifically on blogs and take a look at how some of the early adopters in responsive blog design have approached the challenge. If you’re thinking about taking your blog responsive, you won’t want to miss these 25 sites!

Why Isn’t Design Shack on This List?

“We’ll get there, but we want to be sure to do it right.”

 

Every time I write anything about responsive design, the inevitable responses ask a valid question: why aren’t you taking your own advice? For now, all I can say is, have patience folks. The whole reason this post came about is that I happened to be researching responsive blogs… so you can probably guess where we’re going with this. We’ll get there, but we want to be sure to do it right.

In the mean time, feast your eyes on these 25+ sites that have already made the jump!

Design & Development Blogs

These are the sites that really impress me. Design blogs tend to have a ton of content and plenty going on in their home pages. Obviously, as a web page becomes more complex, the difficulty of making it responsive increases greatly.

Sites like Codrops and Smashing Magazine have risen to meet this challenge and knocked it out of the park. Both of these sites start with a wide, three column format, then drop columns one and three in that order as the page narrows.

Be sure to take a look at how each handles advertising as the design shifts, this is a major issue with responsive design and you’ll have to decide how your projects will handle it.

Codrops

screenshot
screenshot

Smashing Magazine

screenshot
screenshot

Unmatched Style

screenshot
screenshot

Snopp

screenshot
screenshot

Bricss

screenshot
screenshot

WebAppers

screenshot
screenshot

24 Ways

screenshot
screenshot

Personal Blogs

Personal sites and blogs are the playgrounds of web developers everywhere. Often, before developers begin offering a service to their clients, they’ll use their own sites as an experimentation laboratory. For this reason, you often see lots of really cool tricks and ideas in play. There’s no client to hold them back, it’s just pure creativity!

Interestingly enough though, when designers have complete freedom, you’ll see that they tend towards simplistic, minimal layouts. Personal blogs often take the single column route, which is obviously already primed to scale down to a mobile device. I personally like “The Backlog” by CJ Melegrito, it’s a great example of a beautiful online publication that fuzes beauty and simplicity with a responsive layout.

Jeff Croft

screenshot
screenshot

Nathan Staines

screenshot
screenshot

Ordered List

screenshot
screenshot

Anthony Calzadilla

screenshot
screenshot

The Backlog

screenshot
screenshot

Mike Anderson

screenshot
screenshot

Colbow Design

screenshot
screenshot

Elliot Jay Stocks

screenshot
screenshot

Lewis Malpas

screenshot
screenshot

Scott Hanselman

screenshot
screenshot

The Blog Of Jon Phillips

screenshot
screenshot

Tech Blogs

Tech blogs pretty much have the exact same story as design blogs, they tend to be quite complex and feature a bunch of disparate content in various sections and content blocks. Both of the sites below have a decent amount of complexity and handle the media query jumps quite well.

Dusty Cartridge

screenshot
screenshot

Thunderbolt

screenshot
screenshot

Design & Dev Firms

Much like the personal blogs above, these sites serve as a testing ground for development companies. More than that though, these sites are really under a lot of pressure to show off and display their skills. If a dev firm can’t wow me with their own site, I’m not going to pay them a truckload of cash to build mine.

For this reason, these sites really need to be pixel perfect in their jump to responsive design. This is especially true when we’re talking about a high profile company like Happy Cog. They have a sparkling reputation in the design industry and wouldn’t want to mar it with a sloppy responsive conversion. Fortunately, they did just fine.

Cognition: The blog of web design & development firm Happy Cog

screenshot
screenshot

The Palantir Blog

screenshot
screenshot

globaldev

screenshot
screenshot

Miscellaneous

Everyone is going responsive these days, not just people in the tech world. Here’s a handful of other blogs that I found with responsive layouts.

Bahston Film Critic

screenshot
screenshot

MinnPost

screenshot
screenshot

Barrierefreiheit im Internet

screenshot
screenshot

UG – Uppdrag Granskning | SVT.se

screenshot
screenshot

Show Us Yours!

The 25+ responsive blog designs above should be enough fuel to get your brain banging on all cylinders, churning out ideas for how to take your own blog responsive. If you have a second, leave me a comment below and tell me which of the sites above is your favorite.

Also, if you have a responsive blog or know of any that I missed, leave a link so I can check it out!