I don’t know why it has taken me so long to write this article. I guess I thought the “problem” would eventually go away. It hasn’t… and it probably won’t. So now I want to talk about it.

The problem I’m talking about here is the idea that everyone should demand something they don’t understand, and in some cases, they don’t even need it.

That thing is responsive web design. If you don’t know what that is, don’t even worry about this article. If you do know what it is, you consider it to be a requirement, but you don’t know how to write responsive code, this is for you. Follow me.

The Truth About Responsive Web Design

Responsive CSS is not something that a web designer can just plug into a website to make it responsive. It’s not a toggle switch. It is not one-size-fits-all. Responsive CSS for one website will not be the same for other websites.

It simply rewrites the style rules for HTML (content) elements based on the screen size of the device being used to view it.

This means that it must be written based on what changes need to be made for a website to display its content in different forms.

First, the content. Then, the responsive CSS. Think about that.

Why Responsive Web Design Is Misunderstood

An image is an image. As of right now, images on websites have four sides and four corners. They can look abstract all day long. But unless you’re getting tricky with some CSS Exclusions, the content on your website will always treat images like parallelograms with four right angles.

With that being said, if I build website for small business, I can write responsive CSS right now that handles the resizing behavior of every single image on your website.

img {
	max-width: 100%;
	height: auto;
}

That’ll pretty much do it. Your image will display as it should but its maximum width will never exceed 100% of its container element. Thanks to the value of the height property, it will automatically scale to proportion as the width of that container element gets smaller or bigger. Done.

The only reason I’m able to do that without seeing your website is because image behavior is a constant. Your images are just like everyone else’s images.

This is how theme developers such as myself are able to release responsive themes.

When a developer says that his or her theme is fully responsive, that means every single constant available in HTML has been accounted for in the responsive CSS for the theme.

For many of you, you think that means no matter what you add to your website, it will behave perfectly when you play the accordion with your web browser.

You are wrong.

Understanding Responsiveness

When you add content to your website, chances are you’ll keep it simple. Blog posts are usually just text, images, and maybe a video. That means the responsive CSS only needs to be written for images, video elements, and the HTML container that holds this content… like sidebars and content columns.

But what happens when you start being creative and adding new elements to your website? What happens when you add a big “Feature Box” with a three-column layout on your homepage?

What will those three columns do when the screen width is reduced to 600px?

The answer is nothing. They will do nothing… but remain the three columns they were created as. In order for them to squeeze down and then stack themselves one on top of the other, responsive CSS must be written for those HTML elements.

Your specific columns are not HTML constants and cannot be predicted by designers!

Like I said before…

First, the content. Then, the responsive CSS.

It is not until after I know the content exists in a certain form that I can write the CSS needed to make it responsive. Does that make sense?

What’s the point of this article?

What I want is for you all to understand what you’re asking for and what you’re getting. It’s not a plugin.

Any theme, including my Volatyl Framework, that ships with a “responsive” label is nothing more than a responsive “template” that does its best to predict what elements of your website will need to respond to the screen size.

Some developers choose not to deal with responsiveness. I don’t blame them. Some designers would rather you have a website full of content before they will write responsive CSS for you. They use good logic as well.

But when a theme developer or designer is willing to give you a responsive head start, understand that no matter what, complete responsiveness must be specific to your website unless you know for a fact that you will not have any unique elements that can’t be predicted by your code author.

Keep this in mind when you look at a theme and the first thing you ask is, “Is it responsive?” The answer may be yes. But that doesn’t mean the work is complete.

If everything was a simple as some of you make it out to be, I wouldn’t get paid to do what I do. Trust me.

Published by Sean Davis

When I'm not developing WordPress themes and plugins, I'm usually helping further the Easy Digital Downloads project, traveling, or playing racquetball. Say hi on Twitter. @SDavisMedia

1 Comment

  1. I totally agree. Responsive theme has become a common word used for any theme. In actuality the users also needs to make their pages and posts responsive.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *