General Best Practices to Employ

  • Fonts, Sizes, and Colors

    • It's best to use the default font so the size and appearance will be consistent, dictated by your template.  To ensure you are using the default font, in the Content App, click the Paste as Text button before pasting in any text that you have copied from elsewhere (Microsoft Word, a web page, etc.).
      paste as text button
    • To format for headings and subheadings, use the built-in options by clicking on the T button with the up and down arrows. The subheadings in this article were done using Sub-Title (H2).
      headings button
    • Although you can change text colors in the Content App, we recommend avoiding red, green, and yellow as color blind people will have difficulty seeing/reading the text. You should also keep color contrast in mind for ADA compliance. Also, be aware that screen reader software does not convey font styles, including size, color, bold, italic, or underlined. So if you want to emphasize wording, it's best to use the heading/subheading button.
    • More information about designing accessible content.

     

    Samples of Heading Sizes

    Below are examples of each heading size (available by clicking the T button in the toolbar). Note that heading sizes may vary from template to template. This site uses the Empire (MyWay Ultra) template.

    heading 1

    heading 2

    heading 3

    heading 4

    Links and Attachments

    • Links to outside web pages should open in a new window, so that your visitor can easily get back to your school site.         
    • Verify that links outside your webpages are functioning, current, and appropriate in nature.
    • Links should be descriptive and put into context. Don't use "click here" to instruct a user where to click. For example:
    • Depending on what template you choose, and whether you customize it at all, text links may automatically have some visual cue that they are links. They should be a different color from the standard text, and may be underlined (depending on your template configuration settings). We don't recommend manually changing the formatting, to ensure consistency site-wide. This will provide a more user-friendly experience for your viewers.
    • Consider using PDF format when posting attachments. This will ensure that you will not be denying a user access to a document because of the program in which it was created. However, to remain ADA compliant, your document should be formatted properly.
    • If your page will only have one document, rather than linking to it, consider using the Document Viewer App to embed it on the web page (example).
      • It is generally accepted best practice to avoid sending visitors away from your site whenever possible. The more content you can display for them so they don't have to open another program or visit a different site, the better.
      • Please note, however, that we recommend not using documents larger than 2MB with this app. Larger documents take longer to load, and a visitor to your site may think the page is blank and click away from it when in fact it is just taking a long time to load.
      • The Dcument Viewer App behaves most reliably when file names do not contain any spaces. This is generally a good practice when naming files for the web anyway.

     

    Images

    • Avoid animated images as they are a distraction from the content on the page.
    • .JPG, .PNG, and .GIF are the three supported image file types. WCM does not support .bmp images.
    • Resize photos prior to uploading them whenever possible. Otherwise, resize them during the upload process to avoid distortion.
    • Avoid background colors and background images on pages. If background colors are used, maintain high contrast between background and font for accessibility and improved readability.

    Source of some of this material: ABANET.ORG