Improve HTML/CSS on static pages

Problem

After reviewing the addition of a new static page on Customers Portal it was observed that we could make some improvements on the HTML/CSS of these pages.

Proposal

Review all the HTML pages in the public folder and tidy them up.

How will we measure success?

  • UX: Check with UX if we have any improvements we could make at this point. Added a separate issue for UX audit #435281
  • Accessibility improvements e.g.:
    • alt attribute on img tags
  • HTML
    • All the HTML elements that have semantic value are used properly
    • Links:
      • The links that go to outside the application (e.g. status.gitlab.com) should open in another tab
      • Include rel='noopener noreferrer' to all target='_blank' links
  • CSS improvements, including but not limited to
    • Use rem units
    • Use property shorthands whenever possible
  • Maintainability: Because we want these pages to be as lightweight as possible, we have them be static and not relying on templating (haml). Nonetheless, they should all be as similar as possible.
Edited by Ammar Alakkad