Embedded content

Best practices

Embedding PDFs

Starting with a well-designed PDF is the first step in providing a good experience. These guidelines should be followed when creating a PDF:

  • Since most browsers need to download the PDF before they can render it, PDF file size should be limited to 40KB.
  • Optimize all images in the original file to help limit file size.
  • While it is possible to zoom in on PDF documents in many readers, not all users know how to do this. Choose a paragraph font size of at least 16px and default to black text on a white background wherever possible.
  • If possible, include a clickable table of contents within the PDF.

The following guidelines should be followed when adding or embedding a PDF:

  • Use the link label to indicate when a link leads to a PDF.
  • Use PDFs for content that people might want to print or to provide an easier way to view forms. Wherever possible, avoid using PDFs as the only way to access content unless there’s a specific and unavoidable reason.

Embedding video

Video content can be very effective but only if users know that the video is there, are encouraged to watch it, can successfully view it, and have control over it.

The following guidelines should be used when embedding video:

  • If users aren’t able to view video content or simply don’t want to, they should have the ability to access the content in another way.
  • For accessibility, captions and a full transcript of the video should be included. This transcript should be made accessible via a text link labelled ‘Text transcript of video’ that appears directly beneath the embedded video.
  • Users should always have control over what content they listen to or watch. When videos play automatically, many users’ first instincts are to either mute or pause the video. Users should easily be able to start, stop or restart a video, as well as mute it or adjust the volume on it, for any video or audio content on the site.
  • Users should know what the video is about before being asked to view it. The name or title of the video should be descriptive and concise and should be accompanied by the topic, relevant information about the presenter or people who appear in the video, and the length of the video.

Embedding maps

Maps are used frequently on City of Winnipeg (CW) digital properties and generally add value to the user experience.

The following guidelines should be used when embedding maps:

  • Always use a provided API instead of including maps in an iframe.
  • Include a heading directly above the map that describes the purpose of the map.
  • If you’re using a map to display location-based search results, ensure you provide a list view option as well.
  • On mobile, include gutters on the right and left sides of the map to mitigate the risk of users panning the map when their intent is to scroll down the page.