New web pages and page refreshes

New web page: Is an entirely new page build
Page refresh: Is changing or adding to the existing layout, this can be the whole page or just one section

Before you start

  • Both types of requests (Page refresh and New webpage) are represented by an epic with 3 tasks inside: UX, visual and development. Make sure you start the development phase after both UX and visual parts are marked as Done (or Rejected).
  • Make sure you have djLint installed on your machine as that’s the linter/formatter we use for our Jinja templates. This topic about linting and formatting includes steps how you can install and use it.

Important! The date until which the request should be finished and deployed to production is indicated in the Due date field on the epic.

Identify the changes

  • Find the appropriate repo, fork/clone it (if you havent already), pull any changes from main and create a branch (the name isn’t important).
  • Identify what needs to change/be added from the copy document (shortly “copy doc”).
    A copy doc can be found in the Jira epic inside the “Attached forms” section → “Add Copydoc link” field.
  • The changes for page refresh will be described as suggestions inside a copy doc. If you are still not sure about what needs to change, reach out to the reporter of the Jira task.
  • For a new webpage request since it’s a new webpage, the whole document content needs to be implemented.

Adding a new page

All of our sites use Flask, so this process will be the same everywhere. The only thing that can change is naming and language conventions.

For the below steps I will be using ubuntu.com:

  • For most pages you just need create a file with the appropriate page name. For example, if there request is to build ubuntu.com/desktop/upcoming-features, you go to templates > desktop and create a file upcoming-features.html.
  • In some cases the folder wont exist, if this is the case you will need to make one. To make a page that has the same path name as the folder, you call it index.html. So for ubuntu.com/desktop, you go to templates create the folder desktop and create a file index.html.
  • Make sure you add the jinja extend, for the above example it will be desktop/base_desktop.html (you will have to make one if it doesn’t exist already) and include the appropriate metadata meta_description, meta_copydoc, title. If you are not sure, just look at a recent page build and copy it.

Last checks

  • Has the page been added to the sitemap.yaml (no we don’t automate this yet)
  • Is it linked to from other pages? If there are no links to the page how will people access it.
  • Is it in the main navigation? Bubble navigation? Footer? Should it be?

Make a PR

  • fill in the description by specifying what changed
  • add link to the copy doc in the description
  • add link to the Figma design in the description if available
  • provide a link to a webpage(-s) in the demo instance for peers to have a quick access to a changed webpage(-s)
  • add “UX needed” label and select a UX designer from the epic’s UX task as a reviewer
  • in case the Visual task is marked as Done (not Rejected) add “Design needed” label and select a Visual designer from the epic’s visual task as a reviewer
  • add “Code needed” and “QA needed” labels

Important Once merged, please return to the copydoc and accept the changes you have made

Last updated a month ago.

Help improve this document in the forum.