BETAThis is a new service – your feedback will help us to improve it.

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.

A media query...

Lessons last updated 12th July 2019. You can improve this lesson on Github.
Part of Building webpages
  1. Your first webpage
  2. Introducing HTML
  3. HTML attributes
  4. Classes and IDs
  5. Introducing CSS
  6. CSS selectors
  7. CSS specificity
  8. Creating layouts
  9. Responsive design
  10. Get confident with HTML and CSS
  11. Turn your prototypes into webpagesP