How to Responsively Design a Blog

24 Jul 2012 by Shingo Tamura

What is a Responsive Design?

In basic terms, it is a website design that adapts and responds to the varying screen sizes of unique visitors. Not everyone uses the same screen size when browsing the web, and by using a responsive design, your website will be seen correctly to a wide range of visitors. The development of responsive design is partly due to the growing amount of internet browsing done on handheld devices, such as mobile phones, tablets and e-readers.

So, namely what makes a responsive design?

  • Flexible layout
  • Fluid images
  • Media queries

In this tutorial, we'll look at each of these aspects by using a prototype blog that I've created called The Coffee Blog.

This tutorial was highly inspired by the book Responsive Web Design by Ethan Marcotte. From this book, I learnt a few great tips and tricks which I'll be using to guide you through creating your own responsively designed blog.

Demo and Download

Flexible layout

To begin, you should create a flexible blog layout, which is a layout that uses proportional units such as % and em. This type of layout can easily adjust to varying widths, with images, fonts and other elements automatically resizing accordingly.

Start with a fixed layout

The best way to create your flexible layout is to start with a fixed layout, using px to set the width of the elements.

Here is my initial fixed layout:

Example of a layout with fixed widths

The width-defining properties of width, padding and margin were all set to px.

.banner-wrapper,
#wrapper {
    width: 900px;
    ...
}

.main {
    width: 559px;
    padding: 16px 13px;
    ...
}
.other aside {
    width: 302px;
    padding: 0 0 0 13px;
    ...
}

As you might expect, this particular layout doesn't respond at all to any resizing of the browser window. This is because, so far, it is very much a fixed layout.

To change the layout from a fixed layout to a flexible one, simply convert px to % once you have finished styling the design.

Set the font-size to set up a flexible system

Before jumping into resolving the fixed widths, lay a foundation for the flexible layout by setting the font size of the body with % instead of pt or px. The default font size font-size: 100% is equal to font-size: 16px. I used the default size of 100% on the prototype blog, but if you want a smaller font for your design, divide the desired font size in px by 16. This will give you the correct percentage for your desired size.

font-size: 93.75% /* 15 / 16 */
font-size: 87.5% /* 14 / 16 */
font-size: 81.25% /* 13 / 16 */
font-size: 75% /* 12 / 16 */
font-size: 68.75% /* 11 / 16 */
font-size: 62.5% /* 10 / 16 */

Once you've set the font size of body, use em to set the font size of the child nodes further down in the DOM hierarchy. Why are we using em instead of px? Because the font size of the child nodes is relative to the font size of the parent element, and by simply setting the font size of the parent element (body in this case), the width and the height, as well as the overall font size, will change relatively.

For the demo page, I've set the font size of the two panels in the middle section to font-size: 81.25% (13px as specified in the list of font sizes above). Now, if I change the font size of body to 75% (which is 12px), the two panels' font size will automatically be set to 81.25% of the new root font size.

Use % to set the width of all layout elements

Elements such as the banner, the footer and the smaller panels in the main content area should be set with % for all CSS properties that affect the overall width of the elements. width, padding and margin are the most important properties to update here. In addition, border-width also affects the width of the layout, but unfortunately you cannot use % for this property. If you decide to incorporate border-width into your design, be sure to thoroughly test it on various screen sizes.

I've used the CSS rules below to set the width of .main and .other. A notable aspect of these rules is that they take into account the 1.5% padding on the sides of both elements, ensuring the width of the elements total is 100%.

.main {
    float: left;
    width: 62%;
    padding: 1em 1.5%;
    font-size: 81.25%;
}
.other {
    float: right;
    width: 32%;
    padding: 0 1.5%;
    font-size: 81.25%;
}

For this approach to work, you'll need to make sure there's absolutely no other elements that will expand the total width over 100%. This may sound simple, but this means you can't have anything with a fixed width within the elements, such as a border. Even a few elements using a border might cause the layout to break.

It is often a good idea to leave a bit of a gap, or a "gutter", between 2 floating elements so that the total width is slightly less than 100%. This simple trick could save you from hours of frustration.

Make it work for a range of widths, and then move on

I admit that it's a bit of a challenge to create a flexible layout. It involves a lot of testing and fiddling with CSS to find the right combination of settings. However, getting it right is important as it will provide a solid base for making the design as responsive as possible.

At this stage, the flexible layout doesn't need to be perfect. Test it out with a small range of widths, and if it works correctly for those, then move on to the next step. Later, we will cover how you can use media queries for issues specific to a certain range of widths.

Once you feel confident about the flexible layout, you can move onto the next aspect of your responsive design: fluid images.

Fluid images

In the context of Responsive Web Design, fluid images are basically images that scale down in size if the available width of the container element is less than the original width of the image.

The CSS

To make your img tags fluid, simply update to:

img {
    max-width: 100%;
}

However, before doing this, consider the following 2 options for each image on your page:

  • Crop

    If the image is there for decorative purposes, is it important to show the entire image? If not, then simply use overflow: hidden instead of max-width: 100%.

  • Scale down

    Is it important for the entire image to be shown even when the screen size is small? If yes, then you should use max-width: 100% for the image.

Luckily, max-width: 100% works with many other tags as well, including object, video, and embed. To incorporate all of these elements, simply update your stylesheet with the following:

img,
object,
video,
embed {
    max-width: 100%;
}

Browser compatibilities

Suprisingly enough, the CSS works with pretty much all modern browsers, even IE7! If your site absolutely must work on IE6, you could use a conditional comment to set the class of the html tag to ie6, as follows: Surprisingly enough, the CSS above works well with pretty much all modern browsers, even IE7! If your website absolutely must work on IE6, you can add a conditional comment to set the class of the html tag to ie6, as follows:

<!--[if IE 6 ]><html lang="en" class="ie6"><![endif]-->

Then insert the following code into your stylesheet:

.ie6 img,
.ie6 object,
.ie6 video,
.ie6 embed {
    width: 100%;
}

The code above will stretch the width of the media tag to the width of the container element. It doesn't work quite the same as max-width because the width of the media tag can in fact grow wider than its original width. However it's a successful workaround for this particular browser as max-width does not work at all on IE6.

Media queries

Once you have a solid flexible layout using fluid images, it should be fairly easy to add media queries to make your design responsive.

How to write media queries

To target a certain width and above, use min-width:

@media screen and (min-width: 1000px) {
    ...
}

To target a certain width and below, use max-width:

@media screen and (max-width: 860px) {
    ...
}

Test various screen sizes and identify issues

Test your design with various screen sizes, and note down any issues that you come across. Here are some of the issues I identified in my demo blog:

Squashed contents

Text in the right-hand-side column is squashed. In addition, there are only 1 or 2 words in each line, which makes it difficult to read.

Broken layout

Things go horrifically wrong on a tiny screen.

Microscopic images

The fluid images become entirely too small for anyone to really see what they are.

Resolve the issues

Once you have identified the issues of your layout across many different screen sizes, go back into the CSS and make changes to the code.

Here are the steps I took to resolve the issues I found above:

Squashed contents

The width of the main area is set to width: 90%. This setting results in the right-hand-size panel being squashed too quickly. I've added the following code to widen the width:

@media screen and (max-width: 860px) {
    .banner-wrapper, #wrapper {
        width: 96%;
    }
    ...
}

This gave the text area of the right panel a bit more room.

Broken layout

At some point, you realise it's impossible to completely avoid the contents from being squashed. When the screen width is set to be a little narrower than 700px, the two middle columns still become squashed. Furthermore, the social media icons become superimposed on the menu bar, and the cups move off of the panels they should be sitting on, as follows:

What I've done to resolve this issue is change the 2-column layout to a single-column layout. Specifically I've set float: none on both columns to 700px or narrower:

@media screen and (max-width: 700px) {
    ...
    .main {
        padding: .6em 2%;
        width: 96%;
        float: none;
    }
    .other {
        padding: 0;
        width: 100%;
        float: none;
    }
    ...
}

In addition, I've tweaked the layout of the banner to prevent it from being squashed. The result is as follows:

Microscopic images

You can fix the microscopic images issue by giving the images more room as the available width becomes smaller. Changing the 2-column layout to a single-column layout has given the panels a lot more room. As a result, the images don't become as small as they were, and it's much easier to see them properly on a smaller screen size.

Design for mobile devices

Don't forget to make your design look great for mobile devices! Be sure to take out your mobile phones and tablets to test your blog layout on them, ensuring your design adapts well to the handheld screens.

Force devices to use their actual screen sizes

The following meta tag will do the magic on iPhones.

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

This tag forces the device to scale the web page to their actual screen size rather than to the pixel size that they are capable of handling. By default, Mobile Safari renders web content at 980px wide, even though its display is 320px wide when held in portrait mode.

Of course, iPhones aren't the only handheld devices you need to keep in mind. Test your design on any and every mobile device you can get your hands on.

On which browsers do Media Queries work?

Luckily, media queries work well on all modern browsers, such as Google Chrome, Firefox, Safari, Opera and IE9. As you might expect, media queries aren't compatible with IE8 and below, but there are a few workarounds to get them working for users of those older browsers.

JavaScript-based solutions

There are few JavaScript-based solutions for incompatible browsers. I used respond.js by Scott Jehl. Simply add a reference to this script in your page, and media queries will work on IE7 and IE8 like a dream.

Another solution is css3-mediaqueries.js written by Wouter van der Graaf. The reason why I've chosen respond.js over this solution is purely its size. While css3-mediaqueries.js is 16 KB (minified), respond.js is only 4 KB!

Animate Media Queries with CSS3

Now we've got a page that responds well to different screen sizes. However, these transitions happen rather abruptly on a desktop machine browser, and it's not a pleasant experience for the user. In order to fix this issue, we need to use CSS3 to smooth out the transitions.

The CSS

I've used the CSS from the article CSS3 Animated Media Queries by Paul Underwood, simply adding the following set of rules to the elements that needed an animated transition:

-webkit-animation-property: -webkit-width;
-webkit-animation-property: -webkit-height;
-webkit-transition-duration: 1s;
-moz-animation-property: -moz-width;
-moz-animation-property: -moz-height;
-moz-transition-duration: 1s;
-o-animation-property: -o-width;
-o-animation-property: -o-height;
-o-transition-duration: 1s;

Take a few minutes to identify the container elements that change their width or/and height when a media query kicks in, rather than inserting the code above to every container element.

You can see the effect of the above in the demo blog by simply expanding and shrinking your browser.

That's a wrap!

In this tutorial, I've guided you through each of the three key components of responsive design: flexible layout, fluid images and media queries. I hope this has assisted you, and feel free to use the live demo as an example when creating your own responsive design!

About the Author

Shingo Tamura photo

Shingo Tamura is a web developer based in New Zealand with 8+ years of experience in web development. Shingo is capable of dealing with a wide range of web or non-web technologies, and has a passion for HTML, CSS, JavaScript and Web Usability.

Follow him on Twitter at shingokko.

Rate This Posting

 
blog comments powered by Disqus

Related Blog Posts

  • This tutorial will show you through the process of coding for animated icons within a horizontal menu using HTML, CSS and JavaScript/jQuery.
  • Following on from my blog entry, Pure CSS Hover Menu, uploaded in 2009, this blog provides detailed instructions for the creation of an even cooler hover menu with CSS3.