25+ Awesome Responsive Blog Designs

by on 27th August 2012 with 16 Comments

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!

Comments & Discussion

16 Comments

Comments & Discussion

16 Comments

  1. Was just looking for some responsive theme ideas. Its nice how some these themes handled their headers when the width is reduced.

  2. DJ says:

    Good collection of posts and I eagerly await the new design. IF you are taking any suggetions: Your first post was an excellent example; HOWEVER, I personally wouldn’t call a few that you listed (i.e. 960 – 1024 down the middle) anything to emulate – unless you were using them for bad examples. Please remember that there are quite a few of us with very large (wide) desktop monitors who continually see the majority of our above-the-fold space completely wasted (perhaps in the name of “mobile-first.”)

  3. Chris Aprea says:

    Hiya, Chris from Dusty Cartridge. Great list, awesome to have been included!

  4. Jon says:

    Hey Joshua, thanks for the mention, it’s nice to see my little site listed alongside such awesome designs :)

  5. Tom Durkin says:

    I’m making a conscious effort to learn responsive styling at the moment…its hard to break old habits but I’m not giving up!

    Thanks for the inspiration!

  6. JDM Digital says:

    Nice list of responsive sites. I’m particularly happy to see responsive sites that use more than just three CSS media queries. It truly IS a post-PC world!

  7. Brad says:

    Those are some nice responsive sites. Didn’t see to many focused on the Twitter Bootstrap framework like the ones we have created.

    Still think it is one of the best responsive frameworks out there.

  8. Hey, Josh, why don’t you practice what you preach, why isn’t Designshack responsive…

    All jokes aside, while we strive to catchup/keep up with the latest and greatest we shouldn’t all jump off the cliff like lemmings together. Its fine if your site isn’t responsive or not ‘properly responsive’ as long as you can see the site on the any interface you have time to commit.

    I actually tried to make logopond responsive, but because of how I have the ads set up left it as a desktop / tablet design for now and guess what, you can still view it on your phone, is it optimal.. no, but you and I (you being everyone) have time to approach this and get it right, what I find even more important than responsive design in terms of relevance of speed of deployment is the new retina issues. Image size which is going to go hand in hand with properly deploying responsive design is making my head hurt a bit, I come from print design so I understand pixels etc, but man its going to get very ‘interesting’ for the masses here soon.

  9. Great list of responsive sites. A fantastic source of inspired designs, complements to the designers.

  10. Niels Pilon says:

    Nice list of blogs but really missing Trent Walton’s site/blog in the list. Especially when it comes to fluid type. http://trentwalton.com

  11. Really nice list. Very inspiring.
    It’s high time to redesign my own blog;]

  12. Tara says:

    @Agencja yeah we’re going to have to redo ours in responsive as well! such slick designs coming out of it.

  13. Kunal says:

    Got to see awesome designs here. But I would say Design shack has better and responsive design than few of them.

  14. Luis Serrano says:

    Smashing and Codrops Websites are just Amazing!

  15. Awesome Blog designs! Your post is full of design inspiration! Thanks a lot for sharing :)

  16. Karam says:

    I like the responsive navigation menu of http://bodhilinux.com

    It’s very simple and effective when browsing on a mobile device. Most other sites make their navigation menu a little too fancy for my liking.

Leave a Comment

Subscribe
Membership
About the Author