Back to the Blog index
Stepping Up the Style Guide: Now Responsive!
September 06, 2013

Stepping Up the Style Guide: Now Responsive!

This is a follow-up to Stepping Up the Style Guide, which is about adopting an HTML, rather than a static, style guide to your design workflow.

And we're back with the responsive version of our style guide that you can view here! This was an absolute must for our process since we always make sure that our websites are optimized for all devices. Being that I'm more of a designer than a developer, this also became my first foray into responsive development. Here are some helpful tips I've picked up along the way.

  1. Use percentages, not pixels

    In order for the layout to be fluid, you need to use percentages for structural elements. It'll scale appropriately with viewport size changes.

  2. Set a max-width for your website

    This'll prevent your website from continuing to scale up for really large resolutions. For our guide, I set the max-width to 1280px. This is an instance where the use of pixels is still useful.

  3. Set your images width to 100%

    Now your image will be always scaled to its parents width, no matter what resolution. A max-width would be a good idea here, too. Don't forget to set height: auto; since some browsers do not respect keeping the image proportions when setting the width alone. This doesn't necessarily solve all the problems for flexible images, but it's a good start.

  4. min-width or max-width for media queries?

    This would depend on where you are in your process. For our style guide, the desktop version was already created, thus it made more sense to use max-width for it to adapt to smaller resolutions. With a mobile-first approach, min-width would be the way to go, adding media queries as the resolution grows to add to the design. If you use max-width, make sure your media queries are ordered from largest resolution to smallest; if min-width, the media queries should be from smallest to largest.

  5. Let the users zoom and scale the website

    There are many additions you can add to the viewport meta tag. Let your users zoom and scale as they'd like for accessibility and usability.

  6. With these tips in mind, you're well on your way to designing your own responsive style guide!