search

nhsuk / redesign-frontend-kit

NHS.UK redesign project. Prototyping & redesign research findings.
https://github.com/nhsuk/nhsuk-frontend
6 stars 4 forks source link

Control how the grid columns stack on tablet and mobile viewpoints #186

Closed GrilloPress closed 6 years ago

GrilloPress commented 6 years ago

Idea

Provide mechanism to control how and when the grid collapses to 100%. Enabling teams to keep designs consistent across tablet and mobile viewpoints.

So, a row with three columns currently collapses on tablets and mobiles to a single column. Have the ability to keep the three columns on explicitly stated viewpoints when needed.

Why?

We did extensive lab and in-home testing on tablet layout. The landing pages, as well as the transactional journey, performed better when we had the ability to keep the same layout as the desktop.

Observed behaviour in private beta saw that on tablet users incorrectly clicked numbered buttons in a single column in the transactional journey. This issue disappeared on tablets when we introduced the tablet three column layout.

Our user demographic has a high concentration of desktop/tablet use. Users reported to us that tablets are preferred over mobiles for their screensize and over laptops for their portability.

Where we've used it already

Currently use this on NDOP. https://www.nhs.uk/your-nhs-data-matters/benefits-of-data-sharing/

chrimesdev commented 6 years ago

A change has been proposed and @GrilloPress is going to test it in the NDOP pages. Following a successful test the Grid documentation will be updated on how to use this.

GrilloPress commented 6 years ago

Change tested on redesign styled NDOP pages with no regression

chrimesdev commented 6 years ago

Cheers Andrew.

Documentation on how to use the Grid override functionality can be found: https://nhsuk-redesign.azurewebsites.net/styles/layout#grid-overrides

Closing bug