As some of you may have noticed, Actual Insights has changed its design. What’s new? Not only the look and feel, but also the fact the this website is now fully Responsive!
Why move to a WordPress responsive web design theme? It is simple. With many visitors accessing this or any other website via a multitude of devices means that the website must be accessible and readable on all of them. Well, at least if you care for your visitors.
True, my website, Actual Insights, has no e-commerce goals so the need to make it accessible, on a variety of different devices, and readable on a growing number of screen resolutions, is not an urgent one. Nevertheless, I have seen that the number of visitors accessing Actual Insights on mobile (mainly iOS) devices is growing steadily.
Why Responsive Web Design?
I use WordPress to power this website. It is flexible and easy to use. In a nutshell, it fits all my needs. However, making your website suitable for mobile devices is where WordPress’ scope ends and you are on your own to solve the problem. In the past, I have resorted to using wpTouch to make my website look relatively decent on a smartphone.
Bravenewcode’s wpTouch strips, unless you pay for a Pro version or are yourself a web designer, your website of everything visual. So devoid of what might be your ‘personal brand’ you end up serving your content in a very bland manner.
Todd Follansbee wrote an interesting article titled “Your Customer’s Memory — and Website Design” in which he discusses the effects of (and differences between) Recognition and Recall in human beings. Todd goes on to say that Consistency in web design should be guarded in order to positively influence the user experience (and theoretically conversion). Responsive Web Design solves this problem.
Responsive Web Design allows you to serve your content in such a way that your look and feel remains untouched. Maybe not so important for personal websites, but crucial for businesses.
As you can see in the example above, the look and feel will generally remain untouched, only the content is shifted around to accommodate the screen resolution it is being served in.
Now, I won’t tell you what the website looks like now, because at this point it does not really matter. I don’t know what platform you are on and what your screen resolution is. With Responsive Web Design the site will adjust itself.
For the purpose of giving examples to accompany this article, I have taken the liberty to take some screenshots to show you how content is shifted.
Responsive WordPress Themes
Yes, I kind of cheated. *busted*
I am not a web designer or a front-end developer. So, where can someone like me get a good responsive wordpress theme?
Personally I used Envato’s Themeforest to hunt for this theme. There of course many other resources out there, but one thing you might want to keep in mind when migrating to a responsive wordpress theme, is that you want to make sure your previously published content is easily adaptable.
In WordPress you can use shortcodes to add funky bits to your post. WordPress comes with its own set of shortcodes, but themes do too. So make sure that you check your post after your migration to make sure your articles are still being presented as you intended them too.
If you want to test a responsive theme for your WordPress website, make sure to check out Yoko. Yoko is a free responsive wordpress theme that will allow you to test drive the concept prior to taking the big leap.
There are not many books (yet) on the subject of Responsive Web Design. I am a firm believer in the sharing of knowledge, so I don’t want you to leave this website empty-handed. Here are some links I would recommend visiting. One is of a book that I can recommend reading, the other a presentation worth watching and the rest some interesting articles I found around the web.
- Book – Responsive Web Design by Ethan Marcotte (A Book Apart)
- Presentation – What the heck is Responsive Web Design by John Polacek
- Article – Responsive Web Design – What it is and how to use it (Smashing Magazine)
- Article – How to build a Mobile Responsive Website (UX Booth)
- Tools - Responsive Web Design Techniques, Tools and Design Strategies (Smashing Magazine)
- Examples – Responsive Web Design: 50 Examples and Best Practices (DesignMoDo)