Responsive design

Users can access webpages on all kinds of devices, from large, fast desktop screens to small low-end smartphones.

We don't know how users will access our app, so we need to design our webpages to adapt to many screen sizes. This is called responsive design.

New government services must make use of responsive design to pass a service assessment.

Mobile-first

A good approach to making sure that we design for the smallest screen first, and then adjust the design for larger screens as needed.

This is a good idea because:

• For most apps, the majority of users will be using smartphones
• Designing for a narrow screen forces you to consider the priority of your content - what does the user truly need to see first?

Media queries

Media queries are one of the tools at our disposal to make a webpage functional on a variety of screens.

These are special CSS statements which wrap around normal CSS. The CSS inside the media query is only "turned on" when the user's screen is wider or narrower than a certain value.

@media screen and (min-width: 500px){

  h1{
    color: red;
  }

}

This media query will activate only on screens wider than 500px. It will turn all <h1> elements red.

In a mobile-first approach, we first write all the CSS for the smallest screen. We'll then use some media queries to tweak and adjust the page layout, turning on more CSS as the screen gets bigger.

The CSS for a mobile-first webpage might look like this:

/* CSS for smallest screens goes here */

@media screen and (min-width: 500px){
  /* CSS for tablets goes in here  */
}

@media screen and (min-width: 1000px){
  /* CSS for laptops goes in here  */
}

@media screen and (min-width: 1500px){
  /* CSS for desktop screens goes in here  */
}

The screen widths we specify for media queries to activate on are known as breakpoints.

Media queries are not necessary to produce a good responsive webpage. The design of gov.uk webpages is simple enough that they need very few media queries.