Viewports
It's important to understand the foundational responsive behaviour of the layouts required, for all device types and sizes.
The narrowest width of a smartphone tends to be 320px and the widest desktop can be in excess of 2560px. A difference which equates to a 700% increase in width!
Sizes#
Using a modular scale of 2:3 (1.5) and setting our minimum viewport size to be 320px; we use the formula 320 * 1.5x to calculate our viewports.
Taking a device independent approach to deciding on the widths to design to in order to illustrate how a design could adapt at different sizes, we start small and use a modular scale of 1.5 resulting:
| Size | Viewport | Column | Offset |
|---|---|---|---|
| 🔵 Squash court | 320px (x=0) | 288px | 16px |
| 🎾 Tennis court | 480px (x=1) | 432px | 24px |
| 🏀 Basketball court | 720px (x=2) | 648px | 36px |
| 🏑 Hockey pitch | 1080px (x=3) | 972px | 54px |
| ⚽ Football pitch | 1270px (x=3.4) | 1143px | 63.5px |
| 🏉 Rugby pitch | 1620px (x=4) | 1458px | 81px |
| 👕 Polo field | 2430px (x=5) | 1600px | 415px |
Viewport#
Using a modular scale of 1:5, starting at the narrowest (popular) smartphone viewport of 320px width and maintaining a fluid approach using one single percentage value across all viewports (90%) to provide us with the Column and Offset.
Football pitch#
As much as possible we like to keep the value of x to whole numbers; this makes the viewport changes predictable and easy to work with.
However, we discovered that the range of hockey pitch was too broad, this meant there were a variety of layout issues, which included squashed and overflowing content at the narrower end (1080px), and stretched components at the wider end (1619px).
Football pitch was introduced to reduce these layout issues.
Column#
Our Column width is determined by setting the left and right Offset to be 5%.
- The maximum width of our Column is 1600px.
Offset#
The offset refers to the space to the left and right of the Column taking up 5% of the width of the viewport each side. At 320px the Offset is 16px.
Our Sketch library#
Our latest Sketch library uses just the two most commonly used viewports (based on our analytics). A set of components have been designed for each, labelled as 'Narrow' and 'Wide' – these equate to 'Squash court' and 'Hockey pitch' sizes. They align with our coded components (as found in Storybook) and as they appear in those viewports.
It means there is a version for mobile and a version for laptop-sized viewports. Limiting the number of viewports in the Sketch library has vastly reduced file size, maintenance effort and the chances of using an incorrectly sized variant of a component for your chosen viewport.
Ultimately, we recommend using our prototyping tool when designing journeys because it uses fully responsive coded components and is better for user testing. The Sketch library is a supplementary tool for trying out new ideas.
Instructions on how to obtain the library –
Sketch Library - GitHub Wiki
Our Figma library#
Our current Figma library is based on our Sketch library. Note that there are a few differences that make use of Figma's Autolayout functionality etc. This may evolve and change over the next release to further take advantage of things such as Component Variants properties etc. that will make the process of altering states and the like much slicker. Unlike the Sketch library, the Figma library is published through Figma instead of it being released on GitHub. It is currently in an early release phase, and not published on the British Gas Figma organisation. If you want access to it, please do get in touch on our Teams channel should you want to use it so we can help you get set up.