#  Website

  • All written content should be in UK English.
  • All page titles should summarise the content, keep the URL length as short as practical and use Kebab Case.
  • All images should use informative alt tags which clearly describe the point of an image rather than all the details. Alt tags should be no longer than 60 characters.
  • When mentioning FlowForge Concepts (terminology) where possible we should link to an explanation of that concept.
  • All written content should use the Oxford Comma. We believe the Oxford Comma reduces the ambiguity of written technical content.

#  Events Banner

To update the event banner that appears at the top of the Website, you will need two pieces of information:

  • The title of the Webinar
  • URL that the Webinar Registration is hosted at

Once you have those, you can update the following file:

Update the href="" value of the <a> tag to update the Event URL, and change the title inside the middle <span>

#  Images

All images on the website, whether part of the blog or otherwise, are run though an image pipeline, that compresses, resizes and converts the images to reduce file size and improve page loading speed.

That pipeline also generates x2 versions of images for high DPI screens if the provided image is large enough.

The first build locally will take roughly a minute, while the cache remains intact, all future builds should take only a few seconds.

Guidelines for including images:

  • Downsize the image to at maximum two times the width it will be displayed (1300px for blog prose)
  • Ideally use JPEG for lossy ok images, and PNG for others (they will be converted to AVIF and WebP regardless)
  • Wherever possible use:
    • The markdown image include tag in blog prose: ![Name of Image](../relative-path-to-image.jpeg)
      • You can use the @skip tag to disable the image pipeline entirely for an image ![Name of Image](../relative-path-to-image.jpeg "@skip")
    • The NJK shortcode in website body: {% image "./relative-path-to-image.png", "Image alt tag for screen readers", [150] %}
      • Where 150 is the maximum width the image will be displayed on the page (source image should be two times this width)
  • GIFs can grow incredibly large, consider using a video in a modern format if the animation is longer than a few seconds