Content Editors (WYSIWYG)

What is a WYSIWG?

WYSIWG stands for What You See Is What You Get, and their interfaces look similar platform to platform. Essentially, they are just content editors, like Microsoft Word or Google Docs, in a way.

WYSIWYGs usually contain

• A dropdown to select heading level or paragraph
• Bold, italic, underline, strikethrough… (all or some denoted similarly to Microsoft Word)
• Blockquote (usually denoted by a quotation mark)
• Ordered and unordered lists
• Links (usually with a chain icon)
• Inline images/media button
• Text alignment or other text formatting options

Headings

Headings are nested and there are six levels. It’s important to make sure to never use a heading level 1, or H1, within the body of a page. H1s are reserved for a single use on a page, the main page title. You will almost never use this within a WYSIWYG.

• H1: Heading level 1 being the top of a page, only one per page.
• H2: Heading level 2 would be a section of a page.
• H3: Heading level 3 would be a sub-section within a heading level 2.
• H4, H5, H6: Heading level 4, 5 and 6 would be further sub-sections.

It’s very important that the heading levels are used in order. Skipping from Level 2, to Level 4, confuses screen readers and search engines. Your content will not be as easy to navigate, and it won’t rank as well within search engines. The appearance of the heading (size, color, font) is secondary to the semantics (which level is selected, and the order of the headings).

People who use screen readers to navigate a website may pull up a list of all headings on a page before beginning to read the page content. This saves them time to get to the exact content that they need.

An example page structure looks like this:

• H1: Main page title “All about baking.”
  • H2: Section title “Cupcakes”
    • H3: Sub-section title “History”
    • H3: Sub-section title “How to bake”
  • H2: Section title “Cakes”
    • H3: Sub-section title “History”
    • H3: Sub-section title “How to bake”
  • H2: Section title “Pastries”
    • H3: Sub-section title “History”
    • H3: Sub-section title “How to bake”

Videos

We’re big on accessibility here, so we think it’s best to use a third party service like YouTube or Vimeo that has great built-in accessibility options, like closed captions for deaf or hard of hearing viewers. They also offer subtitling options for viewers whose primary language differs from the language spoken in the video.

Using a third party service also decreases load on the servers where your website is hosted. Imagine if 10,000 people were all trying to watch your super fantastic 4k video all at the same time! If the video is on YouTube and linked to on the website, we can direct that part of the traffic to YouTube’s servers instead.

How to embed a video depends on the service, but we will link instructions for YouTube videos, and Vimeo. Of course, if you’ve been given instructions for your specific website, use those instead.

• How to embed a YouTube video.
• How to embed a Vimeo video.

PDFs and other files

You can link to these files in many different ways across a website depending on the different fields’ instructions. However in WYSIWYGs, it might not be as clear. You can usually link to them by highlighting the text you want as the link, and going about it as if you were to insert an image (clicking add image, or the image icon).

If that doesn’t work, or it’s not quite what you want, you can go to add an image, but instead of selecting or uploading the image, you can select or upload your pdf/file.

Depending on your organization’s accessibility commitments, it may be important to provide an accessible PDF, or an accessible alternative that complies with the level your organization has chosen. For audio or video files, you may need to upload a transcript, or create subtitles in your video sharing platform. Speak to your digital media specialist about this, or as a member of our Maintenance & Care plans, we are happy to help, so please contact us.

Further Reading

Please take a look at our other articles on writing content for the web:

• Alt Text – best practices in providing alternate content/text for images on your website.
• All About Images – Information on image compression, and sizing guidelines.
• Writing Guidelines for Accessible Websites – Word count suggestions, and other text formatting tips.
• 10 SEO Tips

If you found this post helpful, consider subscribing to our newsletter for monthly updates and posts about digital design and development.