Getting Responsive with WordPress
In the past few months I have blogged about both DIY projects using WordPress and the basics of Responsive Web Design. When it comes to building highly functional, utilitarian, and great looking websites that are viewable on most devices, I guess I am a little partial.
In this post I’m going take a more in-depth look at how these two favorites are playing together and how you can get responsive with WordPress.
Responsive Design Got Sticky
A quick refresher:
"Responsive Design is the use of CSS techniques, design principles such as fluid grids, flexible images, and media queries to deliver the best possible viewing experience (without compromising the quality of content) to users no matter how large (or small) their display".
While Responsive Design is still new to many non-developers, it has made a powerful appearance on the web development scene and is a hot topic in the design community. Web designers and developers are embracing the techniques and acquiring skills to help clients present content on multiple viewing devices, particularly tablets and mobile smartphones.
In fact, our new monthly publication Digital Bites is built on the Jux platform which has heavily invested in Responsive Design techniques to create an elegant viewing experience across devices.
WordPress Got Responsive
WordPress developers and designers are not an exception to this trend. In fact the twentyeleven theme that ships with WordPress is a responsive theme. It’s a clean, minimalist theme and a great way to get started with Responsive Design in WordPress.
Here's what Ian Stewart (involved with the twentyeleven project) has to say about Responsive Design:
"Responsive Design is the most exciting design idea on the web since the separation of presentation and content".
An increasing number of sessions at WordCamps are now dedicated to Responsive Design. So if your interest is piqued, you are not alone.
How Can You Get Responsive with WordPress?
Keep in mind, there are several ways to create mobile-optimized sites using WordPress, including using Responsive Design. If you want to go the Responsive Design route, you essentially have three choices:
1. Get your code on, and learn the techniques to DIY
It may at first appear difficult to design a responsive theme from scratch or to upgrade an existing one. The good part is that there a lot of great resources to get you up to speed.
Start with this video on Responsive Design from a NY WordPress Meetup.
And here is a select list of resources to get you started:
- Article - Top 12 Tools for Responsive Design (Green Diablo)
- Article - Creating WordPress Themes Using Responsive Frameworks (WP Tuts+)
- Article - Smashing Mag’s quick guide on making a WP theme mobile (see bottom of article for responsive conversion)
- Article - Ethan Marcotte’s seminal article (the one that started it all)
- Book - Responsive Web Design by Ethan Marcotte (the must have book)
2. Get a responsive WP theme and DIY
There are several free and paid options to get Responsive Design themes for WordPress. My personal favorites are the themes from StudioPress using the Genesis Parent/Child Framework. I used the minimalist Driskill child theme for a responsive site I recently built for a client.
Other responsive themes for WordPress (via Sara Cannon):
- Examples of premium responsive WP themes (Smashing Mag)
3. Get a WP designer who knows how to create responsive themes
Ideally, you will want to go with someone whose work you are familiar with. Be sure to ask for references and examples of their work, specifically with Responsive Design projects.
Which route you chose really depends on a number of factors such as your skills, time and budget. If you are not adept at designing WordPress themes, you can still buy and install a ready-to-use responsive WordPress theme. However, if you want a customized solution, getting a WordPress expert who has Responsive Design skills is probably a good bet.
However you decide to take on the exciting world of Responsive Design in your WordPress projects, I suspect that you will be pleased with the end results. Especially when you see your site looking great on mobile devices like the iPad. Good luck in your efforts.