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.
Actually this is the first time I heard about this “responsive web design.” thanks for sharing it
This is a very interesting and useful information for web designers. On the other hand devices are also being updated to display pages as would on desktops & laptops. Thanks for sharing.
i have recently built my latest website this year and have been adding finishing touch after finishing touch – now that all pieces are in place, i am prepared to begin blogging on the topics at hand… looking forward to it, actually.
.. and then came this article (thanks haha)
Makes me wonder if i should hold off blogging bit longer and examine these methods a little further(?)
I have been doing web design for almost ten years now and have been looking forward to the day that they actually standardize screen resolution, but it looks like it is going the complete opposite way, making things much more complicated.
Nice bit of info in this article – i will need to sift through the code a little bit more and try to execute as you have suggested.
Thanks for the tip.
Best of luck. 🙂
One thing to keep in mind with a blog–you’re probably using a template or theme. If you want to go this route, pick one that’s ready for mobile with media queries.
Thanks VDEBOLT
… i am using joomla. There are some pre-built mobile templates to use, but i’ve always been somewhat of a fan of the actual website displaying on mobiles.
i would like to find the time to try what you suggest however, if/when i actually do – i will post back with results.
thanks again 🙂