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.
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.
max-widthfor your website
This'll prevent your website from continuing to scale up for really large resolutions. For our guide, I set the
max-widthto 1280px. This is an instance where the use of pixels is still useful.
Set your images width to 100%
Now your image will be always scaled to its parents width, no matter what resolution. A
max-widthwould 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.
max-widthfor 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-widthfor it to adapt to smaller resolutions. With a mobile-first approach,
min-widthwould 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.
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.
With these tips in mind, you're well on your way to designing your own responsive style guide!