How to Customize Responsive WordPress Themes – Part 1

How to Customize Responsive WordPress Themes is a new series of articles I’ll be posting at the rate of one every few days. This article is an introduction to the series, which I’ll be updating with links and additional info as subsequent articles go live.

Responsive WordPress themes have taken the design community by storm since their first appearance. For good reason too. With all the awesome advances in mobile communications, and the proliferation of mobile devices, folks are now accessing the web a whole lot more often from their phones than from their computers.

It used to be that if you had a website, and wanted to make it accessible to people on mobile devices, you had to either create a dedicated mobile site, or a bunch of dedicated apps. Although the 1st method can now be relegated to the history books, the 2nd may still have its uses.

The whole idea of responsiveness in WordPress themes is to ensure that your web pages serve up lightning fast to any device, from the smallest hand-held to wall-mounted big-screens. Don’t freak out; we’re not gonna get into actually designing a responsive WordPress theme in this series of articles. That’s way beyond me too. We will be taking a real close look inside one or two of them though.

I’ve always been a dig-in-and-get-your-hands-dirty kind of guy. Even as a kid, I used to love tearing things apart to see what made them tick. I still do, to an extent. One of my goals for 2012 was to learn more about responsive WordPress themes, and what makes them tick. So, over the course of the next few weeks, that’s exactly what I will be doing: digging deeper into responsive WordPress themes, and sharing knowledge and discoveries with you.

The series of topics I propose to share will be in a (hopefully) logical structure; from the basics to the more detailed and involved (this is open to debate and suggestions BTW). What makes a good responsive WordPress theme? How are they made? How can they be customized? Those are some of the questions that I hope this series of articles will help answer.

There is one important caveat that needs to be noted before we even begin our fun & games.

The average Joe (or Jane) really couldn’t care less how much time and effort you invest in creating an awesome website.

What they care about is finding the information they need, quickly and easily, without having to think about how to find it, much less have to wait for the darn pages to load. So, no matter what you do, no matter how hard you work at it, no matter how long it takes or how much it costs you; keep it simple :)

What you can expect from this series

Part 2 – Style-sheet organization: where stuff is… or should be, and why.

What differences are there between the style-sheets for regular WordPress themes and responsive ones? How should they be structured? Is one way any better than another? Get answers to these questions in this overview.

Part 3 – Style rules to look out for… and why.

What you should watch for when customizing your responsive WordPress themes. Some style rules should simply not be allowed in your style-sheets. Kick ’em out!

Part 4 – Media queries 1: how they work.

Media queries are all the rage nowadays. Their flexibility is what makes responsive themes possible.

Part 5 – Media queries 2: when to use them and why.

Some basic guidelines to follow when using media queries.

Part 6 – How to make images and videos responsive.

One of the challenges when customizing the media output or functionality not inherent to the theme (plugins) is ensuring its responsiveness.

Part 7 – Introduction to SASS/LESS CSS pre-processors

SASS & LESS provide you with tools to make your style-sheets oh-so-much-easier to manage. Let’s take a quick look at how they do that, and how to use them in WordPress. (Caution: NOT for CSS newbies!)

Part 8 – How to make a static theme responsive.

Got a really nice theme already and don’t want to chuck it? Let’s see if we can make it responsive too!

Part 9 – Building your own responsive WordPress theme? Think mobile first.

Mobile first means designing a fast, lightweight theme for small devices, then expanding on that base design for larger screens. Includes recommendations from some experts, as well as links to tutorials and foundational elements like grid boiler-plates & base style-sheets.

---

If you want to get your hands dirty too by applying what you’ll discover over the next few weeks, start now by creating a child-theme of Twenty-Twelve. That’s the responsive WordPress theme we’ll be tearing apart throughout this series. If you’re not sure how to do that, see this page in the WordPress codex.

I hope this series will develop into a collaborative effort. So please don’t be shy, share your thoughts, your expertise, your suggestions, and your own discoveries in the comments below.

Photo credit: Flickr.com

Tags:

• responsive