January 2013 Update: I updated the article to include some sample code to illustrate my point after receiving a couple requests.

With each project I do, I find ways to write better CSS. This is especially valid for responsive web projects. Today I’m going to share a few tips and things I’ve learned on my journey to becoming a better responsive web designer.

The Givens

Reading Responsive Web Design by Ethan Marcotte was a great jumpoff point for learning responsive web design. It solidifies the foundation, but you won’t learn a thing until you jump into code and try it for yourself.

When writing responsive CSS there are a few givens we need to get out of the way. Adhering to the following gives us a better mindset when writing our CSS responsively.

  • Ditch the px – Stop using pixels as a unit of measurement. Ems and percentages only, please.
  • Mobile first – We write our CSS to be mobile first, then build upon that with media queries.
  • Keep it DRYDon’t repeat yourself. By not repeating your CSS, you save yourself confusion as well as decrease your maintenance difficulty.

Getting in the Mindset

When I first started writing CSS for responsive design, my head hurt. A lot. I’ve met a few designers who got intimidated and overwhelmed with the concept of responsive CSS, but when it comes down to brass tacks it’s no different than any other stylesheet. It’s just a shift in your mindset.

One thing that helped me with developing my CSS to be “mobile first”, was to think of that section of CSS as a separate media query: @media screen and (min-width:0px). This helped me visualize the grouping a little better: “mobile”, “tablet”, “desktop”.

The biggest thing that has helped me in writing better CSS for responsive web design has been to separate structural CSS from presentational CSS. By doing this, we allow additional media queries to inherit those styles without having to create duplicates. Structural CSS would be properties like width, height, and floats; presentational CSS would be properties like color, fonts, and backgrounds.

To illustrate this, here’s some sample markup:

<section id="container">
    <section>
        <article>
            <h1>A Title</h1>
            <p>Some really interesting content.</p>
        </article>  
        <article>
            <h1>A Title</h1>
            <p>Some really interesting content.</p>
        </article>  
        <article>
            <h1>A Title</h1>
            <p>Some really interesting content.</p>
        </article>  
    </section>

    <aside>
        Some cool sidebar stuff.
    </aside>
</section>

And some CSS:

/* 
YourStylesheet.css 

You don't need to adhere to the stylesheet structure I've outlined below, this is only to illustrate the points of my article. 
*/

/* Resets and Fonts
======================================================================= */
/* This is where you would place your CSS reset or @font-face declarations (if applicable) */

/* "Mobile" CSS
======================================================================= */
/* This is normally where you'd start putting your site's styles for layout, sizing, etc. The styles here are things we will try not to repeat in our media queries. Ex: font colors, font families, etc. Think of this section as having a media query equivalent to @media screen and (min-width: 0px). */

body{ font-size: 16px; font-family: Helvetica, Arial, sans-serif; } /* This is the font size with which em units are based off of */

h1 { font-size: 2em; }

p{ font-size: 1em; color: #222; }

article{ margin-bottom: 1em; }

img{ max-width: 100%; }

#container{ padding: 1em; }


/* "Tablet" CSS
======================================================================= */
/* This is the section where you may want to start introducing some layout changes, so you'd start building on the foundation you've already created in the first section of CSS. */

@media screen and (min-width: 600px){
    body{ font-size: 18px; } /* upping the font-size all around (as long as you're using em units!) */

    #container{ max-width: 900px; margin: 0 3em; }

}


/* "Desktop" CSS
======================================================================= */
/* Anything you want to cleanup for user's with large resolutions can go here, there really shouldn't be much though unless you drastically change your layout. */

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

    #container{ margin: 0 auto; }       

    section, aside{ float: left; }
    section{ width: 66.666666667%; margin-right: 3.333333333%; } /* target/context = result */
    aside{ width: 30%; }

}

CSS, Responsively

Just let styles do what they do best, cascade.

When writing CSS for “mobile” views, I avoid using structural CSS at all costs, though it all depends on your design and layout. Traditionally, I’ll find that buttons should be full width so I’ll just let them render naturally at 100%. I’ve always found that adding widths seems to complicate things. The majority of this section is comprised of presentational CSS.

When it comes time to add media queries, my goal is to write the least amount of CSS possible. The first thing I do in my media query is set the font size on the body tag. By using ems for typography in my “mobile” CSS, everything should scale accordingly without having to redeclare font-sizes on each element. Next, I’ll add widths and floats where it’s appropriate. Again, you should only be setting widths on containing elements, avoid setting widths on children of container/wrapper elements. You’re just creating more work for yourself.

Hopefully by the time your finished with your media query, you won’t have too much CSS. The goal here is to maintain layout with the least amount of CSS possible. It makes your design more flexible and easier to update.

I apologize if this article has been obvious for most, but I hope that someone can benefit from it. If you have suggestions or questions, please leave a comment!