Responsive design best practices

Orde Saunders' avatarPublished: by Orde Saunders

Responsive design has always been about adapting to the media that renders it and keeping that in mind at every stage is the key to any successful responsive website.

The strength of the web is its reach and diversity - your users can be anyone anywhere. To make the most of this you need to be able to provide your content in a way that suits them. Since trying to anticipate every possible use case isn't practical we define a set of rules that the browser can query to see how it should respond in a given situation.

Let's take a look at a simplified example of how this works in practice. In this case we've set a sensible default baseline and added media queries to define how we want to respond to both large and monochrome displays:

/* Baseline. */
body {
  font-size: 100%;
  color: dimgrey;
  background-color: whitesmoke;
}
/* Large displays. */
@media (min-width: 48em) {
  body {
    font-size: 125%;
  }
}
/* Monochrome displays. */
@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

We can now serve this set of rules to any user and their browser can respond in the way it deems most suitable. By building a modular system centered around outcomes we're able to cater for the wide diversity of situations in which our website will be accessed.

Like all good design, responsive design is user focused design.