unimelb / unimelb-design-system

A complete design system for the University of Melbourne
https://web.unimelb.edu.au
30 stars 12 forks source link

Adjust pathfinder breakpoint #903

Open rhyslawry opened 7 years ago

rhyslawry commented 7 years ago

Expected behaviour

Pathfinder-4 should ideally appear in one row for most devices, and not split into two rows quite so early.

Actual behaviour

The pathfinder-4's current break-point width is 1400px - Below which it splits into two rows. The pathfinder-3's responsive breakpoint is only 769px, after which it breaks out into a single column. Many people viewing pages on laptops have a screen width below 1400px, the most common being around 1280px, casing them to see an ugly two-row version of the pathfinder on all sites. (see examples below)

I agree with @axelboc that the pathfinder looks bad when it's split over two rows. I would suggest we lower the pathfinder-4's responsive minimum breakpoint to be something more reasonable like 1200px, that would include many laptop screens.

The pathfinder-4 is by far the most common pathfinder type used across the university.

@dkevey do you have some analytics from funnelback on how many of each of pathfinder-4, pathfinder-3, and pathfinder-2 are used across Unimelb sites?

Examples

>1400px wide: (1410px) image

<1400px wide: (1350px) image

e.g. This is what http://science.unimelb.edu.au/#courses looks like on my small laptop screen: image

When it would look much better like this: (exact same width screen) image

This was achieved by changing the min-width from 1400px to 1200px: image

rhyslawry commented 6 years ago

Hey @axelboc Any more thought about adjusting the two-row breakpoint for the pathfinder-4 from 1400px to 1200px?

Apparently 1366 x 768 has recently become the most common screen resolution, meaning many people on laptops are missing out by a measly 34px, and are seeing the very popular pathfinder-4 component split into two rows when it looks best in one single row

Could this be included in the next Design System patch?