Author: vdebolt

Two trends converged during 2011. One from the world of Internet connected devices and the other from web site design world. Statistics show that more people are connected to the Internet through some sort of mobile device than through a desktop or laptop computer. Web designers are scrambling to make sure that web pages are going to work on all those devices – phones, tablets, and computers.

Image: Spark Box

The direction web designers are heading in this quest for universal access is called responsive web design.

Responsive web design is a way of organizing information and page layout so that a web page responds in an appropriate way to the device on which it’s viewed. On a large screen, the page might have two or three columns. On a tablet sized device it might have two columns. On a phone, it might have one column with simplified navigation. The images and the font sizes might be adjusted to fit the size of the device, too.

Want to see some examples of working sites that use it? Mediaqueri.es has a lot of examples. You can click through to look directly at each of the examples, such as the one at Spark Box. On Mediaqueri.es, the examples are shown in four sizes so you can see how each design looks at different widths like this example, The Boston Globe.

 

It’s the same content in every case, it simply responds to the device with a different presentation of that content. Even if you only know a little about web design, you probably know that content and presentation are code words for HTML (the content) and CSS (the presentation).

Stay with me here on the content and the presentation. The HTML stays the same for every device. (Of course, the HTML you start with must be thought through so that your content can be laid out effectively for different devices. See Fluid Grids for more detail.) Add to that a few CSS rules aimed specifically at different types of devices. These CSS rules are called media queries.

Media Queries

Here are the rough basics of media queries.

In a media query, you specify a media type – screen, for example. Then you set up a feature for that particular form of media – width or color, for example. Check my fact sheet for a list of all the features (like screen) and resolution sizes for which you can write CSS rules.

You can put media rules in a separate style sheet for each device. If you do it that way, the link to the separate stylesheet looks like this:

<link rel="stylesheet" media="screen and (max-device-width: 480px" href="example.css">

In that linked stylesheet, you write rules that determine the display for any screen device with a maximum width of 480px, the width of an iPhone in landscape mode.

You can incorporate media queries into your existing stylesheet with @media rules. If you do it that way, you add this to your stylesheet.

@media screen and (max-device-width: 480px) {rules here}

At this point, all you have is the media query. You don’t have the style rule changes to make the design respond for various media features. Let’s say that your blog, at its computer screen width, has two columns. One floated left called “main” at 66% of the width and one floated right called “sidebar” that is 33% of the width. Here’s how you would turn off that layout for devices with a maximum width of 480 px.

@media screen and (max-device-width: 480px) {
#main {
float: none;
width: 100%;
}
#sidebar {
float: none;
width: 100%;
}
}

Now the two columns will line up one under the other, and look like what you see in the left-most image from the Boston Globe example above.

There’s a lot more to it, but that’s really all it involves: tweaking the CSS for various devices. For more in depth information you can check out the following.

• Examples of Flexible Layouts with CSS3 Media Queries by Zoe Gillentwater
• Guidelines for Responsive Web Design from Smashing Magazine
• Respond to Different Devices With CSS3 Media Queries by Emily Lewis
• Fluid Images talks about making images responsive, too.

Are there Blog Themes for Responsive Designs?

Yes, there certainly are. wplift has a list of both free and paid WordPress themes you can look through. Here are the Premium Themes. If you use the Genesis theme popularized by CopyBlogger at Studio Press, responsive designs are available for you. Search for responsive designs for your particular blog platform and you’ll probably find several choices.

Should You Rush Out and Get Responsive?

Well, that depends. You should investigate your audience and the sizes of devices that are using your site. Is your site one that people are reading at their leisure on a big screen, or one they are doing something with while on the run?

A while back, I wrote about some Useful WordPress Plugins for Your Blog. One in particular, WPTouch, made your WordPress blog more mobile friendly. I have that one working on my own blog now and don’t feel in a big hurry to choose a responsive theme yet because of it. You may feel pretty well covered in the mobile department in the same way I do.

On the other hand, I know the trend toward mobile is only going to grow. The need for web sites to look good and work easily on mobile devices is going to grow along with that trend. While there’s no rush, but there is the need to think about responsive design, learn about it, and choose a time to adapt to the idea of mobile design as an important consideration for your blog.

Have you Already Gone Responsive Design?

Do you have a blog that has already taken this design route? Please share.

Note: Originally written for BlogHer and cross-posted there.