Skip to content

Increase readability by decreasing content width

When reading GitLab docs it's a bit harder to read the text than on other documentation pages like:

Docs 1080p 4K Positioning
React react-1080 react-4k Content aligned center, right navbar aligned right.
Vue vue-1080 vue-4k Content aligned center, left navbar aligned left.
Docker docker-1080 docker-4k Content and left navbar aligned left, right navbar aligned right.
Datadog datadog-1080 datadog-4k Content and navbars stay the same, aligned in the center.
Heroku heroku-1080 heroku-4k Content and navbars stay the same, aligned in the center.

I think this is mostly because of the width of the content. Usability wise, the optimal line length is somewhere between 50-75 characters and with the current design that spans over the whole page it's harder to focus on the text.

I am well aware that some users might not have browsers set to full width on a 27inch screen but we should also care about these cases.

Here is how it looks like with a before and after if the maximum width of the content would decrease:

Before After
Screenshot_2020-03-17_at_16.05.49 Screenshot_2020-03-17_at_16.05.38

I'd like to hear what you think :)

Edited by Nicolas Dular