Responsive Web Design

PLEASE READ: I decided to give myself a fresh start. Read more about that here.

It’s no secret that the days of the desktop computer are slowly being numbered. In fact, it’s estimated that not too far into the future, the amount of folks viewing on mobile devices will outnumber those on desktops.

A year ago we shifted our focus to responsive WordPress themes, which are created for optimal user experience across mobile devices such as the iPad and iPhone.

Over at StudioPress it’s important for us to be pioneers in the industry and run with the latest design trends as they are being introduced.

An Ever-Changing Design World

Last week I took a vacation and was looking for something to read on my flight home. At the same time I was talking with Rafal Tomal about the future of Genesis and themes.

It became quite evident that the book Responsive Web Design by Ethan Marcotte was the perfect choice for me to read while killing time in the air.

In a matter of a couple hours, I had read it from cover to cover.

This is one of the best books I’ve read that deal with the subject of responsive web design. Ethan walks you through the rationale behind it, as well as how to design for it.

As the book advertises, “I learned how to think beyond the desktop and craft beautiful designs that anticipate and respond to users’ needs.”

The Application of Knowledge

By nature, I’m a self-learner. This means I like to take a hands-on approach to see how things work — which explains why I think being street smart has its advantages.

In this case, I’m actually taking a hybrid approach to responsive web design. I’ve read the book, and now I’m planning on rolling up my sleeves and get dirty.

You may have noticed design changes on my site — I know, gasp, no surprise there.

Now that I’ve given you permission to rip off my design, it’s time for me to move along once again. But don’t worry, I actually have contemplated making my current theme’s source code available on Github. (More on that some other day.)

Aiming for (true) Responsive Web Design

If you take a look at my theme’s style sheet, you’ll see some subtle differences in the way some things are defined — look for ems and % widths in my definitions.

I’ve always considered my site a playground of sorts, where I like to test things out (long) before they ever make their way into our themes over at StudioPress.

Think of it as a visual and functional beta period in a sense. If it doesn’t break for you when you view it here, then it’s possible it won’t break when we update and release new themes there.

A Work in Progress

I’ve still got a lot of work to do — in fact, the work never ends. The theme I’m on now is the same theme I’ve had for a while now. It’s a continual refinement that evolves.

Once in a while I get caught while I’m playing around:

The invitation is extended for you to take a look at what I’m playing with, and identify some changes that might make their way into Genesis into future versions.

Getting YOUR Hands Dirty

Now comes the fun part, where I encourage you to really consider the power of responsive web design. Are you willing to explore CSS techniques and design principles, including fluid grids, flexible images and media queries?

If you read my blog, subscribe to my newsletter or follow me on Twitter, there’s a pretty good chance that you spend a lot of time with WordPress development.

With that said, I believe it’s YOUR responsibility to do what’s best for your clients.

So pick up the Responsive Web Design book, and start demonstrating how you can deliver a quality experience to your users no matter how large (or small) their display.

Let’s Talk About Responsive Web Design

I think that a majority of the resistance with responsive web design stems from something we all fear — entering the word of the unknown and the world of change.

I can honestly say that when I first heard about it, I wanted nothing to do with it. I wanted to close my eyes and pretend that it wasn’t happening because I knew that I would mean entering the unknown and dealing with change.

However, I knew that I was doing myself and our users a huge disservice by ignoring what I knew was the inevitable. Mobile devices such as the iPad, iPhone and now the iPad mini are NOT going away.

Responsive web design is more than a trend. It’ll soon be a necessity to the way we all approach development. And that time will come sooner vs. later — the question is, will you be prepared?