25+ Awesome Responsive Blog Designs

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?

 

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

Smashing Magazine

Unmatched Style

Snopp

Bricss

WebAppers

24 Ways

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

Nathan Staines

Ordered List

Anthony Calzadilla

The Backlog

Mike Anderson

Colbow Design

Elliot Jay Stocks

Lewis Malpas

Scott Hanselman

The Blog Of Jon Phillips

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

Thunderbolt

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

The Palantir Blog

globaldev

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

MinnPost

Barrierefreiheit im Internet

UG – Uppdrag Granskning | SVT.se

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!