in Web Development

Responsive Web Design

I recently decided to move away from Posterous and use my personal website as my primary blogging tool. As I’ve indicated in previous posts, WordPress is my CMS (content management system) and blogging platform of choice, so it only made sense to do the design based around a WordPress theme. Before now, my site was built on WordPress, but it was totally overkill because I was simply using the site as a digital business card. In fact, the previous theme I had been using was actually called “Digital Business Card” by John Saddington.

When I decided to redesign my site, I knew that the design I ultimately ended up with would have to be a “responsive” design.

Responsive web design: the website actively changes to accommodate the type of screen it’s being viewed on. You get a different design on a desktop vs. a tablet vs. a smartphone.

This may seem like overkill, but my decision was driven by some very important trends and telling data:

  • More than 50% of Americans own smartphones
  • Some stats I recently read about Facebook mobile usage:
    • Facebook wentĀ from 245 million mobile MAUs at the end of 2010 to 432 million mobile MAUs at the end of 2011 (year-over-year mobile growth of 76 percent) – MAU=monthly active user
    • 58 million, or 13.4 percent of Facebook mobile users only access the site from a mobile device
  • Global use of mobile devices to access internet doubled from Jan 2011 to Jan 2012 (4.3 – 8.5%)
  • Desktop screen resolutions are actually increasing

So, there you have my justification for making the change.

Here’s a quick rundown of what I actually did to get the site up and running:

I’m not a web designer, so I always prefer to start with a premade WordPress theme when building a site. Unfortunately, there are only a handful of free responsive WordPress themes out there, and the couple that I found just either weren’t very appealing visually, or just plain didn’t work (i.e. they weren’t “responsive” enough).

Fortunately, when you can’t find a free WordPress theme, there is always the option of looking for a premium/paid theme. In this case, I ended up finding a pretty good selection of responsive themes at Themeforest.net. I ended up going with the Sentence theme by Kriesi.

After uploading the theme to the site, it was simply a matter of finding the right plugins to finish the site, and then a matter of importing my previous posts to fill out the blog. As far as plugins go, I ended up using 3 onsite plugins, and then one app on Facebook to pull everything together:

  • WP to Twitter – this is a plugin that automatically sends my new posts out to Twitter
  • Disqus Comment System – this plugin makes it easy for blog visitors to leave comments on my posts by letting them login with Twitter, Facebook, or another ID.
  • WP Socializer – this plugin powers the sharing links you will find at the top and bottom of each blog post
  • RSS Grafiti – This is a Facebook app that will automatically post new blog posts to your Facebook profile or page

Write a Comment

Comment