Responsive Web Design with HTML5 and the Less Framework 3

Share this article

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 section
s, 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

What is the LESS framework and how does it aid in responsive web design?

The LESS framework is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side. It extends the capability of CSS with dynamic behavior such as variables, mixins, operations, and functions. LESS helps in responsive web design by allowing developers to write cleaner, more modular, and reusable code. It also provides advanced features like nesting, variables, and mixins which can make your CSS more readable and easier to maintain.

How does HTML5 contribute to responsive web design?

HTML5 is the latest version of Hypertext Markup Language, the code that describes web pages. It’s actually three kinds of code: HTML, which provides the structure; Cascading Style Sheets (CSS), which take care of presentation; and JavaScript, which makes things happen. HTML5 has been designed to deliver almost everything you’d want to do online without requiring additional software such as browser plugins. It does everything from animation to apps, music to movies, and can also be used to build incredibly complicated applications that run in your browser.

What are the advantages of using HTML5 and the LESS framework for responsive web design?

Using HTML5 and the LESS framework for responsive web design has several advantages. HTML5 allows for cleaner and more efficient coding, improved semantics, elegant forms, and enhanced connectivity. The LESS framework, on the other hand, provides dynamic behavior to your CSS, making it easier to maintain and manage your stylesheets. It also allows for more modular and reusable code, which can significantly speed up your development process.

How does responsive web design with HTML5 and the LESS framework improve user experience?

Responsive web design ensures that your website looks and functions well on all devices, regardless of screen size. This is particularly important in today’s mobile-first world, where more people are accessing the web via smartphones and tablets than desktop computers. By using HTML5 and the LESS framework, you can create a responsive design that is not only visually appealing but also efficient and user-friendly.

Can I use other CSS preprocessors like SASS or Stylus instead of LESS for responsive web design?

Yes, you can use other CSS preprocessors like SASS or Stylus instead of LESS for responsive web design. Each preprocessor has its own set of features and syntax, so the choice largely depends on your personal preference and the specific requirements of your project. However, all these preprocessors essentially provide the same benefits, such as enabling cleaner and more modular code, and speeding up your development process.

What are some best practices for using HTML5 and the LESS framework for responsive web design?

Some best practices for using HTML5 and the LESS framework for responsive web design include keeping your code clean and organized, using a mobile-first approach, testing your design on multiple devices and browsers, and optimizing images and other media for different screen sizes. It’s also important to keep up with the latest trends and developments in the field, as web design is a rapidly evolving discipline.

Are there any limitations or challenges in using HTML5 and the LESS framework for responsive web design?

While HTML5 and the LESS framework offer many benefits for responsive web design, they also have some limitations. For instance, not all browsers fully support HTML5, so you may need to provide fallbacks for older browsers. Similarly, LESS requires a compilation step, which can add complexity to your development process. However, these challenges can be overcome with careful planning and testing.

How can I learn more about responsive web design with HTML5 and the LESS framework?

There are many resources available online to learn more about responsive web design with HTML5 and the LESS framework. These include tutorials, online courses, blogs, and forums. You can also practice by creating your own responsive web designs and getting feedback from other developers.

Can I use HTML5 and the LESS framework for developing mobile apps?

Yes, you can use HTML5 and the LESS framework for developing mobile apps. In fact, many hybrid mobile app frameworks, such as PhoneGap and Cordova, use HTML5 and CSS (which can be written using LESS) for creating the app’s user interface. However, keep in mind that while this approach allows you to develop an app once and deploy it on multiple platforms, it may not provide the same performance and native look and feel as developing an app using the native development tools for each platform.

What are some popular websites that use HTML5 and the LESS framework for responsive web design?

Many popular websites use HTML5 and the LESS framework for responsive web design. These include large tech companies like Google and Facebook, as well as many smaller startups and personal websites. By studying these websites, you can gain inspiration and learn from their design choices.

Louis SimoneauLouis Simoneau
View Author

Louis joined SitePoint in 2009 as a technical editor, and has since moved over into a web developer role at Flippa. He enjoys hip-hop, spicy food, and all things geeky.

CSS3HTML5 Dev CenterHTML5 Tutorials & Articles
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form