Our Website Standards

STYLE STANDARDS

  • Similar to the document standards, use the default fonts built into the theme and don’t do any unnecessary styling. Use Headers for headings, not normal text made big or simply bold. Make sure to write a strong lede.
  • Write your text ONLY in a google doc first, as that does the best possible grammar checking. You can then simply cut and paste it into a web page.
  • Use the right Gutenberg block for the job (image, quote, figure, table, “media with text”)
  • For embedding pdf’s in readable/printable/downloadable format, us the Algori PDF Viewer block. If you are doing a special pdf where we want to track downloads, there is a special plugin for that – check with the staff.
  • EVERY page must have a “featured image” and that MUST be in 16×9 format bigger than 800 pixels wide (just like our slide shows.). For other images on your page, use either 16×9 if it’s fills the column, or a square image (for, say, headshots of speakers).
  • All our videos are stored in the mcld youtube channel, which we embed in the sites with the Youtube block.
  • ALL images must include Alt Text for accessibility.
  • MCLD Theme is custom, and adds a few special classes you can add under “advanced” where it says you can add additional classes.
    • The colored shadow blocks use classes sq-green, sq-red, sq-gold, sq-orange, sq-blue
    • The vertical color tabs use tab-green, tab-blue etc.
    • The organize divider uses the class divider

ACCESSIBILITY STANDARDS

We are committed to creating webpages that are accessible to those with disabilities, particularly the blind who use screen readers. This is not too difficult, but it takes some work and you HAVE to follow these rules. Some of these have already been built into the sites, but some you need to obey each time you create a page.

  1. Use Headings in the correct order. Each page automatically uses an H1 header for the page title, and must only have one. If you create a subhead in the page, it should be an H2 (don’t skip numbers!). Only use H3 if it a subhead within a H2 headed section.
  2. Add descriptive “Alt Text” to every image you add to a page. For any table or graphic, include a description sufficient for an unsighted person to understand what’s there.
  3. When adding a video, include a written description for those who cannot either see or hear it. For example – “Video of the event, with closed captioning available. The main takeaways are summarized in the remainder of this piece.”

Feature Photo by Avel Chuklanov on Unsplash