Summary

Guidance on the responsive grid used for layout of the mygov.scot site.


Beta – We are currently reviewing our grid format, with a view to creating fixed padding and gutters which are scaled to the screen size.

Breakpoints

Defining breakpoints and using a responsive grid allows content to be arranged on the basis of the screen size of the device used to access it, tailoring the experience for users.

We use 4 content breakpoints which relate to the following devices:

  • Mobile – 320px – 767px
  • Tablet – 768px – 991px
  • Desktop medium – 992px – 1199px
  • Desktop – 1200px and over

Media queries are used to identify the viewport (screen) size of the device accessing the site and call on the relevant CSS to style the content accordingly. A 6-unit grid is used for mobile and tablet, with an extended 12-unit grid for both of the desktop options. Padding is fixed at 15 pixels and gutters are fixed at 30 pixels.

The use of 6 and 12 units allows for maximum flexibility when grouping units into columns, easily enabling units to be grouped into full-width columns, half-width columns, thirds and quarters.

The grid

Mobile (for displays 320px – 767px)

Mobile Grid


Tablet (for displays 768px – 991px)

Mobile Grid

Desktop medium (for displays 992px – 1199px)

Mobile Grid

Desktop large (for displays 1200px and over)

Mobile Grid


Design theory

Using a grid to align content results in layouts which are ordered, consistent and simple to navigate by users. Grids also allow efficient layout of content as positioning can be pre-planned and defined, allowing complex sites to be worked on by more than one designer or developer, delivering a uniform structure and journey for users.

Usage

There is currently no universally accepted best practice defining the optimum number and position of breakpoints for responsive design. We have opted to set our breakpoints based on analytical data which defined the most common screen sizes used to access our site.

Accessibility

Using a grid-based design ensures adequate clear space in content layout and also helps to establish a visual hierarchy which works well with screen readers and other assistive technology.