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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.pushinpixels.co.uk pushinpaul

    The use of header in the markup is overused. The header element is not sectioning content; it doesn’t introduce a new section. Certainly all for the Responsive web design methods, testing all the devices seems to take up most of your time against coding probably 60/40.

  • tracylester

    Newbie to responsive web design – absolute convert. Love the power to reach multiple devices. Very interested in Less Framework 3. Needed a little more help in using it. This is the first walk through/tutorial I’ve found – thank you.

  • vertmonkee

    I’ve only used 960 grids before where I could split the content into 3 equal width columns easily.

    What would be the best way to use less for this?

    • Louis Simoneau

      Well, if you wanted to use Less and still have that option available to you, one option would be to recalculate a column width that would let you have 3, 6, 9, and 15 columns (for example) instead of 3, 5, 8, and 13. Then you can keep the existing width stops but use your own grid instead.

      But as I pointed out, there’s so little code in Less to begin with that if you wanted to do something rather different, you could just use the structure of the CSS as a starting point and replace all the @media rules with your own.

  • Sr. Anonymous

    Less Framework isn’t enough for mobile. Even the techniques shown in Responsive Web Design won’t work for mobile. That happens because (unfortunately) many mobile browsers don’t have good support for CSS3 media queries.
    To make it really work across mobile browsers, the default stylesheet – the one without any media query – should be optimized for (poor) mobile browsers. The others stylesheets could be for (better) mobile phones, tablets and desktops – all using media queries. For a better understanding, see Rethinking the Mobile Web (http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu).

    • Joni Korpi

      It’s a pretty complex issue though. If you _do_ start with Mobile First, you’ll either have to serve the mobile layout to IE6-8 as well, or use Javascript to plug in media query support for them. In the latter case, you’ll be forced to IE-proof *all* of your layouts, since IE could be using any of them. Not fun.

      • Karl Westin

        conditional comments?

  • http://www.pixmasta.com/en/ Pixmasta

    You can use the best of both worlds : css media queries AND fluid design for small resolutions (i.e. : mobile screens).
    check out my website to see it in action : http://www.juslisen.com

    • Joni Korpi

      Yup, that’s what I’m looking into currently as well. My personal site – http://www.jonikorpi.com/ – works like that, but I’m still looking into how to make the mobile layout feel more consistent with the static ones.

  • stew

    I am new to adaptive Web design. I didn’t get the division of every different layout into different number of columns. What do you mean by columns here? When you say 8 column layout, what is the column here?
    Any links to beginners tutorials for understanding the above layout design?

    Thanks

    • Louis Simoneau

      Hi stew, the term “column” here is referring to grid-based design. The idea is you divide up your total width into a number of small, equal-sized columns. So, for example, in the case of the Less Framework, the widest layout is made up of 13 columns, each with a width of 60 pixels and with 24 pixel gutters between them.

      That doesn’t necessarily mean that any element in your design will be 60 pixels wide, though. Some elements (like an author info box) might be two columns wide (60+60+24=144px). Your main content column might be 5 or 6 columns wide. The advantage of grid-based design is that it allows all your elements to “snap” together in a more aesthetic and readable way.

      Mark Boulton wrote a good series of articles on grid-based layout that should help clarify things a little further:
      http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1

  • TimG

    Hi,
    Noticed that an intended closing ordered list tag is lacking the backslash just after the ‘Indian Style Cream of Cauliflower Soup’ list item in the second Aside. This causes the to be included in this second Aside when rendered in Firefox (3.6). Displays correctly (at foot of page) when the offending closing ordered list tag is has it’s backslash added.
    This doesn’t detract from what is a really good tutorial on Responsive Design though, and it was by chance I spotted the code typo. SitePoint and it’s contributors, are along with A List Apart, an excellent resource for web coding.

    Edited for tag references stripped – sorry hadn’t allowed for that when typing originally.

    Kind regards
    Tim

    • Louis Simoneau

      Thanks for catching that. Fixed now.

  • Anonymously

    Line 41 needs the ul closing.

  • Eric

    I just previewed their site using IE9 beta, Chrome, and Firefox. I am not seeing how this is consistant across browers. I am on the lessframework homepage and noticing how the content under “The Four Layouts” wraps differently. Looks like its back to 960 and blueprint for me.