I am designing a responsive website and wanted to provide the developers with a style guide. But I was wondering if I should provide 2 separate guides, one for the big screen one for the small.

  • 1
    I'd say provide one style guide that addresses multiple screen sizes. An H1 is this size/font/color/whatever on screens above 1200px wide. At 900px wide it changes to this. At 600px wide... and so on. Or whatever your chosen breakpoints are.
    – tobybot
    May 12, 2017 at 22:12
  • Agreed, you absolutely want to produce your style guide in it's simplest form. A single document where your product's elements and styles are intuitively presented in harmony is the goal. I would recommend thinking of it as if you are a person who will be absorbing it to understand its content. Clearly section the element variants by the dimensions they're intended for, but present them together so the comparison is clear. Identify what makes the most sense for your product and apply it using minimalist design standards. That's my advice and what has worked for me.
    – ke11en
    May 12, 2017 at 23:47

1 Answer 1


Regardless of how many guides you provide, they just need to be in the one place that is easily accessible to the developers. The more flexible strategy is to help developers understand how to adapt to different screen sizes, because the layout is only one aspect of responsive design. How the content needs to be adapted for different screen sizes, and how the interaction and behaviour needs to be adapted for different or multiple screens at the same time is just as important as the actual styling of the on screen elements.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.