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.
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.
Mobile (for displays 320px - 767px)
Tablet (for displays 768px - 991px)
Desktop medium (for displays 992px - 1199px)
Desktop large (for displays 1200px and over)
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.
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.
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.