Skip to main content

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:

SizeViewportColumnOffset
๐Ÿ”ต Squash court320px (x=0)288px16px
๐ŸŽพ Tennis court480px (x=1)432px24px
๐Ÿ€ Basketball court720px (x=2)648px36px
๐Ÿ‘ Hockey pitch1080px (x=3)972px54px
โšฝ Football pitch1270px (x=3.4)1143px63.5px
๐Ÿ‰ Rugby pitch1620px (x=4)1458px81px
๐Ÿ‘• Polo field2430px (x=5)1600px415px

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.

Figma library#

Our Figma UI Kit 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, typically a small mobile and a small laptop size. The Figma components align with our coded components (the single source of truth, as found in Storybook) and are correct for how they appear or and responsively transformed at those viewport sizes. The Figma components have been constructed to emulate the same options and behaviour as closely as possible whilst being able to accommodate varied content.

The Nucleus British Gas Figma UI Kit library is published and consumed online through Figma and updates are released in the same way. If you need access to it you will need to request to be added to the Figma British Gas organisation workgroup. Get in touch on our Teams channel

Sketch library (deprecated)#

Our Sketch library is no longer maintained or updated and can be considered deprecated. The Figma library is currently the only supported version.