There are reasons to use a few responsive grid frameworks. The primary reason is that things just go faster. For rapid prototyping I often use Less Framework, created by the talented Joni Korpi. It divides a site design into four column based layouts, perfectly suited for both mobile and desktop viewing experiences. If you want to develop responsive websites, it’s quite the time-saver.

Why use a framework?

Some web professionals would argue against the use of frameworks, citing code bloat and ramp-up time as serious detractors. If a framework was only used to save time on projects, I’d be inclined to agree, but there is a better reason for using them.

If your team is educated on a particular framework, you can avoid the pitfalls of miscommunication. If your team members aren’t on the same page, the scope and budget of a site quickly falls apart. Using a framework like Less comes with a set of rules that both designers and developers can adhere to.

Why use a template?

As a designer, I know that rules were meant to be broken. If I know what those rules are, however, I can keep track of what’s changed, making it easier to mark-up what I’ve designed. If development starts with a code framework, then the design should be generated using a matching framework template.

Less Framework, for example, has several template resources on their site, most notably the Photoshop/Illustrator/Fireworks templates designed by Ari Palo. He created a file template for each layout that’s included Less Framework, complete with column grids and typography baselines.

 What my template does

After building a few sites using Ari’s templates, I found myself repeating the same steps each time. If I simplified the process by creating my own template, I could speed up the design time for a project.

The first decision I made was to incorporate all the layouts into one master file. This makes the sharing of logos and other content elements across layouts easier. I’ve divided each layout into a series of groups.

Desktop (992px)

• Tablet (768px)
• Mobile-Wide (480px)
• Mobile (320px)

Nested within each layout group are additional folders for the content divs I find myself using over and over again:

Baseline (for the 24 pixel typography grid)

• Header (includes a nested group for Main Navigation)
• Main (main Content area)
• Sidebar (we use these a lot for WordPress sites)
• Footer
• Background

Each of the div groups include a color-coded vector shape that adheres to the column grid for it’s particular layout. While not all the divs or layouts might be used in a particular project, it’s a great starting place for a designer. This system establishes how the layouts relate to each other, keeping the design and mark-up better connected.

If you’re using the Less Framework and would like to build responsively designed sites, this template is a good starting point. If you want to use my custom template, here it is. Take it for a spin and let me know how it works out. Use it and your designer or developer won’t have to read each other’s minds!

 Download the Responsive Web Design Template.

Shawn Coots is a web designer and front-end developer. Although Shawn primarily works on web design in Louisville, he has worked in nearly every medium you can imagine over the last twelve years. He’s constantly researches the latest advances in HTML5 and CSS3, keeping clients ahead of the curve. As a jack-of-all-trades, he’s ready for whatever clients throw at him, just so long as he’s had his morning coffee. Shaw works at VIA Studio: www.VIAStudio.com