David Airey is an independent graphic designer working with companies of all sizes since 2005.

Responsive

On the summer list is making my site responsive. I’ve been thinking about it for a year or so, the usual story of client projects coming first.

The layout here is obviously simple, so it’s alright when viewed on a mobile, but not ideal. I don’t actually mind viewing full screen versions of websites on my phone — especially when mobile layouts make it tough to find what I’m looking for.

Responsive design
Illustration via Psdblast

Anyway, in case you’re in the same boat, there are a couple of nice looking WordPress themes for sale on Northeme, and here are a few on ThemeForest that could be a good fit for design portfolios and blogs.

If a drag-and-drop builder that features parallax and video backgrounds is more your thing, the Divi theme might be the one.

There are loads of free responsive themes around, but you tend to get what you pay for.

I might just keep the design similar to the current layout, except wider, with larger fluid images, a font update, a responsive grid for the portfolio, and a single column layout for mobile.

Do you know any WordPress specialists currently available?

A few responsive design resources

Building smartphone-optimised websites, on Google Developers (2013)
Responsive Web Design, the book, by Ethan Marcotte, reviewed on the Mule blog
Responsive web design, on A List Apart (2010)
Responsive web design: what it is and how to use it, on Smashing Magazine (2011)
25 responsive web design tools, on Creative Bloq (2013)
Create a responsive web design with media queries, on Line25 by Chris Spooner (2012)

Update 1:
Frank Chimero’s new site is a nice example of simple, responsive design: Another.

Update 2:
I found Skeleton after a quick look at the source code on Shauna’s Nubby Twiglet. I’m not sure if Skeleton is what Shauna used, but it seems like a useful guide.

My second book on Amazon

Related posts

23 appreciated comments about “Responsive”

  1. Hi David, good move… it’ll really help users with smaller mobile screens get into your content.

    I’ve used Dynamik a few times and really like it. It’s a theme builder for Genesis (rock solid frameworks for WordPress) but doesn’t have the bloat of some of the others. It’s great if you’re a bit of a techy, but don’t want to / don’t have the skills / don’t have the time to code themes from the ground up!

    Just a third option for you aside from a commercial theme or a developer…

    http://cobaltapps.com/

    Nick

  2. I wouldn’t mind giving something like that a go. Thanks Nick. I’ll check it out.

  3. Hey David!

    I highly recommend http://www.cssigniter.com not only for their greatly designed WP themes, but also for their astonishing support.

    Cheers,
    Julie

  4. Hi David, I use a designer called Stewart Richie, very helpful and was recommended to me by a design agency who work with him regularly. http://poweredbycoffee.co.uk

  5. Sorry, that’s Stewart Ritchie.

  6. You can convert your current site design to be responsive pretty easily. All you have to do is to disable sidebar on lower resolutions and make content fluid.

  7. Hi David,
    Longtime reader, saw this come up in my Feedly. A bit of self-promotion here, but I’m a WordPress designer and developer. Would love to chat if the above recommendations don’t pan out. I agree with the other commenters that it’s easy to responsive-ize your current layout, but you might also want a slightly refreshed design perhaps.
    Alicia

  8. I saw your tweets, Julie. Good of you to ask around! You’re on Squarespace, right? I’ll have a look at cssigniter.

    BP&O’s a great layout, Rich. Fitting. Have you thought about making your horizontal nav responsive, too? It’s a shame that your contact page seems to disappear on mobile. Thanks for the pointer. I see that Mash Creative is one of the poweredByCoffee clients. It’s nicely done.

    Hi Lucian. There’d be the mobile navigation and maximum width, too. You do make it seem easy, though.

    Alicia, thanks for sticking around this long. I’ll follow up with Stewart and see how he’s fixed. Good luck with your portfolio relaunch, by the way.

  9. You’re most welcome, David. Yes, I’m on Squarespace and very pleased with their templates and support as well. However, when it comes to WordPress, cssigniter is my first choice. There are dozens of WP themes out there, but only a few well-supported ones. I hope you find what works best for you.

  10. Thanks David, glad to read that you think so and appreciate your thoughts on the nav, it isn’t something I’ve really considered but will certainly address it when I come to implementing the next round of changes.

  11. One the posts above mentions this, but making your current responsive won’t be too big a job. Unless you’re wanting a complete refresh.

    The templates on Themeforest are great but tend to be packed to the rafters with stuff you probably won’t need.

  12. **current site I was meant to say!

  13. Fair point, Abbas. Some of those mentioned have tons of features I doubt I’ll touch.

  14. You might like to have a look at the Foundation framework by Zurb: http://foundation.zurb.com/index.html

    Very easy to prototype with and there are several WordPress templates you can build on once you’ve got a design: http://foundation.zurb.com/develop/tools.html

  15. Hello David,

    I really find its fundamental to have a responsive website. Now I’m typing in a tablet and your site works like a charm here.

    But when it comes to cellphones, I believe every site should be projected by thinking how it is the best way possible for a person to navigate through your content. And in that context a template can help or give you limitations, so you have to adapt.

    I was lucky because I had the chance to make an exchange with a client. I made the identity for his company and he did the development of my website. This way I could design and plan it all. And guess, 30% of my readers comes from mobiles. I have to say that is a very hard thing to do, but I’m glad I did! Maybe today if I had to do this again I would choose the template. :p

    If you plan to do it yourself someday the best thing I can say is “start by the mobile version”, cause I didn’t.

    Good luck, David. Chears from Brazil!

  16. Hola David,

    Longtime reader to your many blogs. Just wanted to tell you this is a great article. Thank you very much for the examples and links to the different options, both commercial and free. keep up the good work amigo!

    Jorge

  17. I’d not seen that before, Richard. Thanks for the link.

    Walter, glad to know everything’s working well on your tablet, and nice job with your responsive layout. I’ve seen how much my stats have changed over the past year or so, and how many more views are coming from mobiles, so I’ll need to get something sorted.

    Jorge, thanks for joining me on my blog adventure.

  18. Hi David,

    you may want to consider the problem with buying themes is when you want to modified it, there’s a lot of design boundaries because of the themes framework.

    For clients, i’ve tested css framework bootstrap, zurb and purecss.io, and my option fall to the later because really light on size, and to be honest, i mostly just need grid and light typography changes.

  19. Whatever you choose, I can’t wait to see the new website :) However, I bet it will be minimalist and clean.

  20. Thank you David, I appreciate that. By the way, you helped me by reeporting a bug in Mac while ago. Thanks for that. If you need some help organizing any thoughts I’d be glad to help.

    Keep it up your great work and good luck!

  21. I know I’m late to the party, but you might just want to take your current theme and retrofit it into something like the Bootstrap framework Twitter has.

    All you do is add some div tags and classes to existing things and it works :)

  22. I’ll look into Bootstrap and Foundation, Cheers Dian, Jon.

  23. For my own site I decided to use the WordPress Twenty Twelve theme, stripped it to the bone (no header, no footer, no sidebar) and tweaked the CSS a little.

    It looks beautiful and works well on all devices from smartphones to large desktop monitors. Definitely worth looking into while you’re shopping around! Later…

Anything to add?

Comments may be edited or deleted if I don't like the cut of your jib, but that's quite unlikely.