Document how GitLab should scale on different screen sizes
Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.
Problem to solve
There are currently no documented guidelines covering how GitLab should scale on different screen sizes.
Proposal
After having a discussion as a team, seems like there's an agreement that even though mobile experience isn't a high priority for many of the GitLab features, we need to provide a consistent product experience and usability across different breakpoints. The reasons for that are:
- There's a desire among users to access some of GitLab's features on mobile devices.
While many users aren't accessing GitLab on mobile devices today, there is a desire to do so. Low usage is likely due to low support on our side. @clenneville
- We should be inclusive of all user groups who may be accessing GitLab from inferior devices, even if that group is a minority.
- Responsive not only means good mobile experience. For example, it also means the product is usable in a scaled browser window (for example using split screen).
- GitLab competition is investing heavily into mobile and native applications, and even though we don't have a proven business case to follow the same path, it makes sense to put in the effort to make GitLab usable on various screens and devices.
Next Steps
To achieve greater consistency in how GitLab looks and behaves across all breakpoints, we should make responsive design part of the UX design process.
As MVC steps in this direction, we should:
- Add a process step for making designs and components responsive in the sketch workflow. We want to make sure that the design scales on all breakpoints. For some designs it'll mean we just need to set proper constraints. For other designs, adjusting the design for various breakpoints may be necessary. We should always aim to achieve usability on all screen sizes with the least effort necessary.
- Document the breakpoints from Bootstrap and add the artboard presets for these widths to the instance sheet file. Ideally with the header navigation and footer as well.
- Add Responsive guidelines in the behavior section within each component (add placeholder sections where applicable).