Responsive design

How and why is should be used

Design principles

These principles should inform the choices made when building a responsive website.

  • Basic experience first
  • Device agnostic
  • Performance focussed
  • Unsuitable for ‘retro-fit’
  • Accessible

Basic experience first

This is often referred to as 'mobile first' or 'content first'. All elements must be specified, designed and built for the most basic experience first ie:

  • Smallest screen
  • Non-JavaScript
  • Etc.

More enhanced experiences can then be added progressively on top of this base using the Progressive Enhancement methodology.

Device agnostic

No element must be specified, designed or built for any particular device ie:

  • Do not specify breakpoints for certain devices — base them on where the design breaks and so requires them
  • Consider larger as well as smaller devices

Performance focussed

Page and overall site performance must be considered at every stage. Overly 'heavy' pages are an accessibility problem and as such the minimum possible page weight should be targeted. The performance of any responsive site must be at least as good as if it was not being built to be responsive and ideally better.

Unsuitable for 'retro-fit'

The site must have been intended to be responsive from the beginning of the design process and all content produced with this in mind.

Accessible

Accessibility must be considered on all devices. Each breakpoint needs to be accessible and all possible interfaces taken into account ie touch, keyboard, pointer etc.

Technical standards

Browser support

Any website whether or not it is responsive must support the browsers in the core browser support matrix. In order to support browsers that do not have support for media queries such as Internet Explorer 8 and below the latest version of Respond.js should be used:

Respond.js

Viewport

The meta viewport tag must be used as follows in the head of the page:

<meta name="viewport" content="width=device-width, initial-scale=1.0;" />

Alongside this the css @viewport must be specified as follows as it is required for Internet Explorer 10 and it is also supported by Opera:

@-ms-viewport { width: device-width; }
		@-o-viewport { width: device-width; }
		@viewport { width: device-width; }

Breakpoints

We do not specify any particular breakpoints to use. The breakpoints for each site should be chosen based on the content and design of each individual site.

  • All media queries should be specified in em units.
  • The absence of a media query is the first media query.

Lightboxes

When using lightboxes to show larger versions of images consider how these will appear on smaller screens as they may display no larger than the original. Consider conditional loading of the lightbox or alternative solutions.

Considerations for specific elements

Images

  • Set max-width="100%" on images so that they will scale to the viewport.
  • Use SVG and WebP where possible and appropriate.
  • Use double sized images with maximum compression to produce small images that will also look sharp on HiDPI screens.
  • Vary file types as well as size.

Forms

The new HTML5 form input types should always be used where appropriate. This will enable devices to show an appropriate input on screen, for example a date-picker or numeric keypad.