https://www.iatefl.org/
https://www.tesol.org/

Pages - Best practices

To maintain a consistant single voice for the content it is important to avoid excessive html styles. This website will be viewed on a number of different screen sizes so it is necessary to maintain a minimum of styling to avoid unforseen errors. For this reason the editor bar is reduced to only the allowable styles that can be used to format a page. 

When necessary the website administrator may make adjustments to your page so that it complies with the standard look and feel of this website.

Important points

Importing from another document

  • Use the "Paste as plain text" function. This will remove all formats. Then use the provided style buttons to stylize the page.
  • Programs like "Word" or cutting from another web page can import unwanted formatting and potentially viruses/malware.
     

Spacing

  • Only one space between sentences within a single paragraph.
  • "Shift + Enter" will create a single line break (BR) instead of the standard paragraph break (P)
  • "M-dash" (long dash rather than hyphen) is  — please do not copy-paste from MSWord, copy from here! No M-dash in page titles please!
  • Note that spacing following bullets (un-numbered lists, such as in this section) or numbered lists may be irregular, you may wish to put an extra "Shift + Enter" at the end of the last line (creating a new tight line without the bullet or number) before starting a new "regular" line or heading -- which should always come after the (P) (regular paragraph ending created by "Enter").
     

Tabs

  • For short lines you can add three spaces before the first word, nothing more.
  • Or, preferably use the Unordered Lists (buttons) or Ordered Lists (numbers) function.
  • Never use a long line of blank spaces to create an indent, it will look imbalanced on different screens.
     

Colours:

  • Do not add colours to text, readers will automatically assume it is a link. If you must, limit colors (red is a strong visual).
     

Font sizing

  • Do not resize fonts it will cause imbalance within a page if used incorrectly.
  • In Filtered HTML and Full HTML you can add the H2 tags for major headings and teh H3 tags for subheadings within a page. Only use when absolutely necessary. These can be found in the "Styles" button in the formatting menubar, labeled Heading 2 and Heading 3. Generally it is a bad idea to add italics or bold in H2. or H3.
  • As in this page, use standard font with Bold to indicate subsections (subsubheadings)
     

Lines

  • Only add lines to break up a page when necessary. If used incorrectly can cause imbalance within a page.
  • Never use underline "____" or dashes "-----" to create a long line across a page. Different display screen sizes will break that line. Use the HR (bar) tag. It it available in the formatting menubar.
     

Pictures, Videos, PDFs

  • To improve and maintain the image of the page the embed function has been removed from the body of the page. In it's place a simple upload function has been created that will automatically resize images, import and resize videos, and properly list PDF files.
  • To use first click the Media Attachments link under the content body. It will open up to reveal the upload file fields.
  • Video can only be uploaded through YouTube and Vimeo. If it's a personal video please upload it to YouTube first then add it to your page.
     

CSS

In general CSS should be avoided. An exception are the green buttons found on some pages. See further below for a quick guide. If you are not familiar with CSS, please contacts the Admins.

 

Images

We encourage the use of images to enhance the beauty of the page and add meaning to the message.

The picture prompt above the text editing area will place your image at the top of the page (below the menu bar). The first picture listed in the Media Attachments section will appear first at the bottom of the page, and subsequent follow in same order.  There is a 1600 x 1600 pixel image limit (our Drupal Content Management System will automatically downsize images that are too big) on each image, and a 10mb limit on the page.

 

H2 Header title

H3 Header (subtitle)

Bold face subsub header (normal type size)

Italics text

  • Unordered list
  • Unordered list
  • Unordered list
  1. Ordered list
  2. Ordered list
  3. Ordered list

Standard paragraph. Curabitur consequat erat sit amet mauris condimentum vel vulputate quam convallis. Duis id tellus ante, et euismod nisl. Nunc nec felis nisi. Phasellus gravida luctus nulla, id posuere odio aliquam luctus. Nunc est ipsum, varius quis volutpat nec, pellentesque ac tortor. Cras ut felis enim.

Single space sentence break - br. (ctrl + Enter)
Single space sentence break - br. (ctrl + Enter)
 

Block quotes Curabitur consequat erat sit amet mauris condimentum vel vulputate quam convallis. Duis id tellus ante, et euismod nisl. Nunc nec felis nisi. Phasellus gravida luctus nulla, id posuere odio aliquam luctus. Nunc est ipsum, varius quis volutpat nec, pellentesque ac tortor. Cras ut felis enim.

CSS Button link

Double click link, select Advanced > Stylesheet Classes: "button green"

CSS Button link