Responsive Web Design with HTML5 and the Less Framework 3

What’s responsive web design? It’s a relatively new technique, first described in mid-2010 by Ethan Marcotte in his A List Apart article of the same name. Put simply, it involves providing a number of site layouts adapted to various screen widths, and then serving those layouts accordingly thanks to the use of CSS3 media queries. In the very aptly put words of Jeffrey Zeldman:

It’s what some of us were going for with “liquid” web design back in the 1990s, only it doesn’t suck.

That’s all well and good, but how do you put it to use? After all, the cool kids are all doing it, so why shouldn’t you? In this short tutorial, I’ll walk you through taking a fairly simple page design and making it responsive with the help of the Less Framework 3 by Joni Korpi. “Ack!” I hear you shout; “CSS frameworks are for losers!” Never fear. Less is only “more or less” a framework, in the words of its creator. There are none of those ugly “.grid-24” classes—instead, you’ll simply find a few reset styles, some sensible typographic defaults, and four media queries with the relevant body widths, for four different common resolutions. Those four layouts include some helpful comments on how you could divide them up into golden-ratio-friendly grids, but the decision to do so or not is entirely yours. As such, if you’ve never tested the waters of media queries or responsive design, Less is a good way to get started and see some results fairly quickly. It’s likely you’ll want to adjust the exact details of the media queries as your design progresses, but that will be easy, as there’s no “framework” baggage to hold you down. Less is just a helpful starting point. So, let’s do this thing!

Less Framework 3

For starters, head over to http://lessframework.com/. The site itself is a nice illustration of the power of responsive design, so grab hold of your browser’s resize handles and see how the page responds to the various viewport sizes. When you’re done playing around (don’t worry, I can wait), scroll to the bottom of the page. There are a few customization options available, and text areas containing the output CSS and an HTML skeleton. For the purposes of our example, you can leave all the default options checked. Copy the HTML and CSS into appropriately named files, and update the style tag’s source in the HTML file to point to the CSS file. If you pop open the HTML file in your browser straight away, all you’ll see is a big blue box on the page. Resize your browser and you’ll see it adjust its dimensions, just like you’d hope. With that baseline in place, it’s time to start work on our own responsive layout.

The Layout

For the sake of illustration, we’ll be laying out a simple recipe. I did a quick creative commons search to find some content to use. I found a recipe for Indian Chickpea and Pumpkin Soup from Lisa’s Kitchen. For our page, we want to have a main block consisting of the recipe’s ingredients and instructions, two sidebar blocks with the picture of the soup and a list of related recipes respectively, and a footer attributing the source of the content. The Less Framework provides four suggested grids, one for each body width. These are made up of 60-pixel columns with 24-pixel gutters. The narrowest layout, primarily for mobile devices in portrait orientation with a screen width of 320px, is three columns wide. Next, there’s a five column layout targeting 480px widths for high-resolution mobiles, narrow browsers, or mobile devices in landscape mode. The default eight-column layout, which will also be served to browsers that lack support for media queries (including, you guessed it, Internet Explorer), targets the good old 768px screen width and will also be useful for tablets and netbooks. Finally, there’s a 13-column layout aimed at screens over 1280px wide, including most current desktops and laptops with good browsers. For our recipe, we’ll keep the layout very simple. We’ll have a single-column design for the two narrower layouts, and a two-column design (with the recipe’s image and suggested recipes in the sidebar) for the two wider layouts. The widest layout is thirteen 60-pixel columns wide, so we’ll split that 8-5 between the content and the sidebar. The next widest is eight columns, which we’ll split 5-3.

The Markup

Because this example is purely illustrative, and because most SitePoint readers browse the Web with modern, sophisticated browsers, I’ll be using the newfangled HTML5 semantic element’s for the recipe’s markup. It’s a cool way to become familiar with them pending their eventual world domination. Here’s a skeleton:

<body>
  <article>
    <header>
      <h1>Indian Chickpea and Pumpkin Soup</h1>
    </header>
    <aside>
      <img src="images/pumpkin_soup2.jpg" />
    </aside>
    <div>
      <p>Winter squash soups are a healthy ... </p>
      <section>
        <header>
          <h2>Soup:</h2>
        </header>
        <ul>
          <li>&frac34; cup dried chickpeas</li>
          <li> ... </li>
        </ul>
      </section>
      <section>
        <header>
          <h2>Tempering:</h2>
        </header>
        <ul>
          <li>1 tablespoon olive oil</li>
          <li> ... </li>
        </ul>
      </section>
      <section>
        <p>Rinse the chickpeas ... </p>
      </section>
    </div>
    <aside>
      <header>
        <h1>Related Recipes</h1>
      </header>
      <p>If you liked this recipe you may also enjoy:</p>
      <ul>
        <li><a href="#">Toor Dal Pumpkin Soup</a></li>
        <li> ... </li>
      <ul>
    </aside>
    <footer>
      <p>This recipe is republished from ... >.</p>
    </footer>
  </article>
</body>

The recipe is marked up as an article, containing a header, two asides (one each for the image and the related recipes list), a div for the recipe itself, and a footer. Within the recipe div, there are a number of sections, one each for each set of ingredients and the list of instructions.

The Styles

Let’s start with the default eight-column layout. Scroll down in your stylesheet to that section (which will be just below the reset styles and typography defaults). Our first task will be to set the widths of the main content div and the asides, and to float them opposite each other:

article > div {
 float: left;
 width: 348px;
 margin-right: 24px;
 margin-bottom: 24px;
 padding: 24px;

 background: #FFF;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
} 

article > aside {
 float: right;
 width: 228px;
}

You’ll notice I’m using the child selector (>). Of course, that works for the sake of example, but you may need to rely on more traditional selectors depending on which browsers you need to support, in which case you’d need to add some class and id attributes to your markup. The math here is straightforward: the main div is five columns wide, and includes four gutters between those colums. So, (5 x 60) + (4 x 24) = 396. With 24px of padding on either side, that leaves 348px for the width of the div. For the asides, the math is (3 x 60) + (2 x 24) = 228. The full width of the layout is then made up with the 24 pixels of margin on the content div. Those styles have already given us a nice enough two-column layout, though there are some issues. Firstly, the image is too big for the column it sits inside. That’s an easy enough fix (I’ve thrown in some borders and a slight shadow as well):

article > aside img {
	width: 218px;
	padding: 4px;
	background-color: #FFFFFF;
	border: 1px solid #DDDDDD;
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0, 0.2);
	-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}

I’ve also thrown together some default styles for the headers, paragraphs, and lists, but as those don’t relate to layout I’ll skip over them here. You can always check out the source code of the final example to see them. Okay, now that we have our default layout, let’s move on down the stylesheet. The next layout, as you’ll see, is the super-wide 1280px one. In your own responsive designs, you might want to switch from a two-column design to a three- or even four-column design, and reorganize your entire layout to make better use of all that available space. But for the sake of illustration, let’s just supersize our existing layout:

@media only screen and (min-width: 1212px) {

	body {
		padding: 96px 72px 0;
		width: 1068px;
		position: relative;
	}

	article > div {
		width: 600px;
		margin-bottom: 24px;
	}

	article > aside {
		width: 396px;
	}

	article > aside img {
		width: 386px;
	}
}

Check out the syntax of the @media declaration: it’s stating that the contained CSS rules should only apply to screens, and then only those with a minimum width of 1212 pixels. With those rules in place, you should now be able to stretch your browser window wide and watch the design pop up to the larger size when you pass 1212 pixels. Nice and easy! Finally, let’s deal with the narrower, single-column displays for mobile devices and smaller screens. These both require that we overwrite the float declarations to keep everything in one column. For the smallest layout, at 320px, we’ll also reduce all the font sizes to keep the line lengths readable:

@media only screen and (max-width: 767px) and (min-width: 480px) {

	body {
		padding: 60px 42px 0;
		width: 396px;
		-webkit-text-size-adjust: 100%;
	}

	article > div, article > footer, article > aside {
		float: none;
		clear: none;
	}

	article > div {
		width: 348px;
	}

	article > aside img {
		width: 386px;
	}

}

@media only screen and (max-width: 479px) {

	body {
		padding: 48px 46px 0;
		width: 228px;
		-webkit-text-size-adjust: 100%;
		font-size: 13px;
		line-height: 18px;
	}

	article > div {
		width: 192px;
		padding: 18px;
		margin-bottom: 18px;
	}

	article > header > h1 {
		font-size: 26px;
		line-height: 36px;
	}

	article > div > header > h2 {
		font-size: 16px;
		line-height: 24px;

	}

	article > div, article > footer, article > aside {
		float: none;
		clear: none;
	}

	p, section, aside, ul {
		margin-top: 18px;
	}
}

And that’s it! You now have a fully responsive design that adapts to screen widths ranging from your smartphone up to your widescreen office monitor. Have a look at the demo to see it in action.

Final Notes

Responsive layouts are a great way to make your existing sites more accessible to a wider range of devices. However, that’s not to say that you can call it a day as far as your mobile strategy is concerned. As Jeff Croft and others have pointed out, there’s a lot more to a good mobile site than a narrow display. That said, depending on your resources, your audience, and the focus of your site, a fully responsive layout is at the very least a strong first step in the direction of supporting mobile devices. The Less Framework 3, which isn’t really a framework in the traditional sense at all, is a good way to experiment with responsive designs using grid layouts, and to get a feel for the CSS syntax and structure required for this kind of work. Once you move on to creating your own responsive designs, you can leave it behind and craft your CSS from scratch, or you can use it as a blueprint to kickstart your own responsive layouts.

Frequently Asked Questions on Responsive Web Design with HTML5 and the LESS Framework