Restyle footer of docs.gitlab.com
Problem
The footer of the docs site is styled similarly to the one on the marketing site, but it isn’t the best layout for docs:
- The purple of the footer competes with the rest of the content
- The center alignment of the footer content doesn’t align with the page content
- Many of the links may not be relevant to the Docs site
- The scale of the links could be reduced to take up less space
Solution
Reduce the overall scale and prominence of the footer in relation to the content:
- Use a light background with dark text for links
- Consider left alignment with page content
- Remove unnecessary links
- Use different type styles
Concepts
General notes…
- Edit is the first link, and closest to the page content to help infer page editing, while the rest of the footer is separated by the Tanuki.
- Links that aren’t directly related to docs have been removed. This is not based on any research or analytics (forthcoming), but I’d like to limit the purview of the footer to this site only as much as possible. There can still be links to other sites, but ideally just the homepage for those sites, and not content within.
- The footer treats the docs sections as equals, which may be fine here. In the header I think that the GitLab section might need to have more weight, as right now it feels like 4 equal products.
- There’s likely a more elegant way to say “Docs repo,” but this is what I have for now.
- The footer scrolls with the main content area for all breakpoints, and does not overlap the left sidebar navigation at larger breakpoints.
- These comps assume that the left sidebar nav can be responsive, and not simply collapsed at smaller breakpoints like it is today.
- The footer does not need to follow what the marketing site’s design. I think of this more like, “if the product had a footer, what would it be styled like?”
/cc @eread
Edited by Craig Norris