Structuring a Responsive Stylesheet

Organizing your stylesheet is difficult enough. Adding responsiveness adds a whole new level of complexity. Take a basic look at how we've done it on past projects.

Structuring a basic responsive stylesheet can be done in one of two ways.

  1. A "desktop first" method—lay out the full site and use media queries to resize it for smaller resolutions
  2. A "mobile first" method—declaring your mobile styles as the default and using media queries to rework your site for larger resolutions

Until recently, we've built our sites at Sparkbox using the first method, a "desktop first" mentality. This is pretty common for those of us wading into the responsive waters. We are definitely moving away from this method, however, exploring the "mobile first" method in current projects.

With that in mind, the purpose of this article is to detail how we've structured stylesheets up to this point using "desktop first." This method has its faults, but we think there is benefit in understanding it in comparison to "mobile first." My plan is to write a follow up article with an overview of the "mobile first" approach in the near future.

So let's get started.

Including the Responsive Stylesheet

And a Fallback for Browsers Without Media Query Support

Three basic scenarios need accounted for:

  1. Browsers/devices that support media queries
  2. Browsers/devices that do not support media queries
  3. Browsers/devices that are smaller than 320px

We’ve decided that a device or browser smaller than 320px would benefit most from just accessing the un-styled content. A device accessing the site at a resolution smaller than 320px most likely is not a device capable of experiencing the site at it's full potential, therefore it's our thinking that just getting the content would be best. To target everything but a small device like this, we’ll use the following:

  <link rel="stylesheet" href="css/style.css" media="only screen and (min-width: 320px)">

This will include the stylesheet for any browser that supports media queries and has a minimum width of 320px. This works great, but if a browser doesn’t support media queries (like IE 8 and below), no stylesheet would be included at all. Here’s how we remedy that. We include the stylesheet with no media query (probably something you’re used to seeing already):

  <!--[if lt IE 9]>
<link rel="stylesheet" href="css/style.css">
<![endif]-->

Stylesheet Layout

Now that the stylesheet is loaded, what about organizing it?

Laying out your CSS for a responsive website can be tricky and overwhelming. There's a lot more to account for, so structuring it appropriately is critical. Remember, this stylesheet is not only going to cover browsers that support media queries, but also browsers that do not. So our stylesheet must be fully functional with or without media queries.

Let’s assume we are designing a site based on the 960px grid. Based on that assumption, all styles for the site at 960 must be declared at the very beginning of the stylesheet. This is nothing different from the structure of a non-responsive stylesheet.

After all of our styles have been declared to work perfectly at 960px we can start the responsive styles.

Beginning The Responsive Styles

As far as layout is concerned, we have three basic screen states we have accounted for on past sites.

  1. Larger than 1024px
  2. In-between 768px and 1023px
  3. Everything 767px and lower

So below the global site styles in our stylesheet, we begin by including these three media queries:

  @media only screen and (min-width : 1024px) {}
  @media only screen and (min-width : 768px) and (max-width : 1023px) {}
  @media only screen and (max-width : 767px) {}

The first media query targets everything 1024px and larger. You can be more specific here if you'd like, but in the past we've used this as a starting point. 

The second media query targets everything between 768px and 1023px. In an earlier article, Ryan Clark talked about designing for the 600. Here's where we've made those changes happen. These styles would be commonly seen on a vertical tablet or netbook.

The third media query is mainly for targeting mobile devices. A wide range of resolutions in mobile devices exist (growing every day), so at this size we have gone completely fluid with our styles. This will account for any mobile device at any resolution.

Targeting Specific Devices Based on Widths

There are times when the basic layout media queries above just aren't specific enough. Though we no longer generally suggest targeting specific devices, there are times that clients and other circumstances demand it. In these cases, solutions do exist.

For example, both horizontal iPhone and vertical iPhone at this point will be rendered exactly the same as they are both below 767px. Say you'd like to make the text size a little larger on a vertical iPhone. We know the resolution of a vertical iPhone is 320px, so we target it with this media query and increase the font size appropriately.

  @media only screen and (width : 320px) {
	font-size: 1.6em;
}

Same thing goes for any other device. For your reference, here are a few of the major devices and how to target them specifically with media queries when unique project circumstances demand device targeting. Keep in mind, however, that you won't hit only these devices with these queries. You will also hit new devices introduced in the future with same specifications or even browsers resized to these pixel dimensions.

iPad horizontal specific styles

  @media only screen and (width : 1024px) and (orientation : landscape) {}

Droid horizontal specific styles

  @media only screen and (width : 854px) and (orientation : landscape) {}

iPad vertical specific styles

  @media only screen and (width : 768px) and (orientation : portrait) {}

iPhone horizontal, Droid vertical, Torch horizontal specific styles

  @media only screen and (width : 480px) and (orientation : landscape) {}

Torch vertical specific styles

  @media only screen and (width : 360px) and (orientation : portrait) {}

iPhone vertical, Blackberry Curve specific styles

  @media only screen and (width : 320px) and (orientation : portrait) {}

iPhone 4 specific styles (retina display)

  @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {}

Final Thoughts

At the end of the day, there is no standard template for a responsive stylesheet. Each unique site design will need to respond differently, so each site will need a uniquely responsive stylesheet. This article is simply meant to provide a reference for you to start your site responding appropriately, especially if you have an exisiting site designed for desktops only right now.

One fairly significant drawback I've seen so far with the "desktop first" approach is that desktop assets are downloaded to mobile browsers, as noted by Peter Gasston. Of course, this can be resolved by adapting something like the "mobile first" approach, much like 320 and up and others. As I referenced at the start of this article, I am currently exploring this and plan to document it here on the Foundry.