Consider adjusting tablet/desktop breakpoints

[dannyleech]

What

I'm not sure how to classify this but I'd like to discuss the tablet/desktop breakpoint aspect of the core layout

Why

I assume the current tablet/desktop breakpoint of 768px portrait pixel width was derived from typical tablet screen sizes of the time such as the ipad. However, with the latest iPad range only the iPad mini now fits this category. All other iPads have a greater pixel width so are not captured by this breakpoint for example the basic iPad is now 810px wide in portrait mode and the iPad Air is wider at 834px. With iPads dominating tablet use would it now be time to explore adjusting the tablet/desktop breakpoint to capture modern iPads?

[edwardhorsford]

@danleech-defra I think the naming possibly implies more than it means to. In reality there are three main breakpoints, and they've given handy names to remember - but I don't think they have to be for those target devices. So even if tablets are now different resolutions, the point at which we change breakpoint still seems reasonable.

I've found the three breakpoints easy to design for - and not sure they need to change - though do wonder if we want to consider a larger final width than 960px.

[vanitabarrett]

As Ed said, the breakpoint naming implies use but it doesn't have to be the case. I think your first comment referenced touch targets - ideally touch targets should be consistent across all breakpoints now that we have more touch devices that are larger in size, e.g: touchscreen monitors. If you've noticed any issues with touch targets please feel free to raise those as issues! 🙂

I've marked this issue as something for the team to discuss as we might want to investigate whether the breakpoints align with what others are doing now, as I don't think they've been looked at recently.

[dannyleech]

Hi Both, thanks for your thoughts! Yes I edited my post when I referred to touch targets as opposed to flow of content/layout. The three default breakpoints do help with design and I can always use custom breakpoints to optimize line length/layout where needed... focussing on the content and not devices :-). I'm currently working on a map component and I'm finding the need to use custom breakpoints more to address modal overlay panel behavior on tablets and mobiles. Maybe it's more of a niche case though and doesn't warrant a global change :-)

[36degrees]

Hi Dan,

Thanks for raising this. The breakpoints haven't changed in a long time, and in hindsight it probably would make more sense if they were device agnostic (for example, small, medium and large) as the naming is confusing.

However, we've discussed this as a team and it doesn't feel like changing this would be a priority at the minute, as the breakpoints seem to be working well for the majority of use cases. From your last post it sounds like you're happy that nothing needs to be changed – and there's nothing wrong with defining your own breakpoints if you need to do so – so with that in mind I'm going to close this for now.

Please do feel free to reply if you think we've missed anything.

[dannyleech]

Thanks for following up Oliver and to all the above for the opportunity to discuss. I agree that this is not a priority for now and happy for the issue to be closed. Kind regards, Dan