I'm a graphic designer and writer in Northern Ireland. Welcome to my blog.

Responsive

On the to-do 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, then Salient or Divi might be the one.

There are loads of free responsive themes, 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 through Shauna’s Nubby Twiglet. Seems like a useful guide.

My second book on Amazon

Related posts

30 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…

  24. The well-known Emil Olsson recently updated his Hi Response theme, which is well worth a look. Great for those minimalists out there like me. I think it would make a great fit for you too David. http://emilolsson.com/hi-response/

  25. Coincidentally, Seth, I’ve been trying Hi-Response on my .co.uk site:

    http://www.davidairey.co.uk

    The only thing is, I think all content may need to be recreated from scratch, and there are 700+ pages here. So I might end up using the .co.uk for my portfolio and leaving this site as a blog. I’m not sure what’s best.

  26. Oh I see. Truth is, I purchased the Hi-Response theme and chose not to use it because of the same reason! I have since been doing a customization on the Salient theme. It is similar to Divi. Here’s my work in progress (haven’t finished bringing all content in):

    http://salient.sethaddison.com

  27. Smart. Do you have a lot to import?

  28. I don’t have too many posts to import – nothing close to your page count! But I am planning on making my blog a centerpiece to my strategy (like you). I was concerned that blog posts created with Hi-Response’s custom builder might not export correctly a few years down the road when it’s time for another update.

  29. That’s a good point about a future switch. Cheers Seth.

  30. Great to hear you’re thinking about taking the plunge into responsive web.

    It’s clearly the case now that – not only the website, but also the designer and developer – has to be responsive in order to make the most of today’s web. After a slow start, thankfully most clients are starting to respond to the change in view and are embracing responsive design.

    Really enjoy your work David. Thanks.

Anything to add?

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