FLO style guide for authors

Headings and text

For readability and consistency, it is suggested that you left align headings and text. Use the HTML editor to format headings and text. Don't create your own styles; this will make your FLO site look inconsistent, and may breach accessibility guidelines.

For screen usability and readability, minimal capitalisation (ie first word of a sentence or proper nouns only) is strongly recommended.


Tone

You will want to contextualise your FLO site in the top section ('sticky bit' or Module 0). For example, this is an ideal place to welcome your audience (eg students) and explain the site's purpose.

Use an informal friendly style of writing and address the user as 'you' for more direct engagement.

In the weeks/modules, you could either give a personal take on the content (eg alerting students to assessment preparation or a resource around which the week/module will be based), highlight the key tasks and/or questions, or grab an introductory sentence from a study guide or other topic planning document.


Heading formatting

If you are using the default HTML editor (Atto), your heading options will be as per the screen grab below right. Previously, FLO used the 'tinyMCE' HTML editor. The following table shows heading equivalency. 

Default editor (current) TinyMCE HTML editor
Heading (large) Heading 3
Heading (medium) Heading 4
Heading (small) Heading 5

default editor headingsUse the Paragraph styles drop-down menu in the HTML toolbar (image to right) to style your headings. 

Depending on where you use headings in your FLO site, you may find that Heading (large) – heading 3 size  is a good choice for the main heading in a module. Visually it looks right when viewed below 'non-formattable' headings such as the module name. (An exception is a 'book' resource, where you can tick 'Custom titles' in the settings, and then decide what your chapter headings will look like.)  

  • Use a hierarchical order: Heading (large) > Heading (medium) > Heading (small). This is an accessibility requirement.
  • Use headings to break up large amounts of text into chunks for screen readability. Headings also provide a visual snapshot which makes screen scanning easier (a common practice of web users).

For naming modules, see Site structure.

A soft return (Shift+Enter) at the beginning of a heading adds space above the heading. The headings in this chapter have been formatted like this. See if you find this easier to read. 


Text formatting

To maintain a consistent paragraph font type, use the Clear formatting iconClear formattingin the text editor toolbar. Doing this prevents Word formatting code from being copied into FLO and ensures a consistent display. You could also copy and past Word (or other) text into Notepad, but this will remove all formatting (dot points etc).

Avoid underlining text for emphasis. Underlining confuses users who may think these are links, plus it looks ugly. Bold text instead, or italicise if a short phrase (italics are hard to read if a whole sentence). But don't use both styles for the same purpose - this will also confuse the user. Italics are best suited to book/journal/media titles.

Lead text

If you want to make text larger because it is important or to grab attention, you can use the HTML code class="lead". You do this in HTML view in the HTML editor, placing this code in the p (paragraph) tag <p>:

<p class="lead">Larger font text here, emphasising an important point (one or two sentences only). </p>

The eLearning Gateway uses this code to state the site's purpose in Module 0:

larger font text



Bulleted/numbered list formatting

If you have a long list of lengthy dot points (rather than a couple of shortish ones), you may find that they are more readable if you apply a Paragraph style to them. To do this:

  1. In the page/book chapter or wherever you have access to the html toolbar, use the Unordered list icon Insert/edit bulleted list icon to create the dot points from text.

  2. Highlight your bullet points, and from the drop-down styles menu choose 'Paragraph' (the last option in this list).  

This will space your bullet points and make them easier to read. This also applies to numbered lists (as per the list above).


Alerts 

There are several ways you can attract attention to text, without making your site an eyesore of highlighted or different coloured text elements. Key messages could also be conveyed in a FLO announcement.

styles options in default HTML editorThe default HTML editor (Atto) offers the Styles options Standard block, Readings, Assessment, Reflection and Key. Place your cursor in the text you want a box around (a paragraph) and select the option that best relates to your text. To use these styles click on the Stylesicon.

Bootstrap styles offer variations on alerting users such as 'success', 'info', 'warning' and 'danger' – these are coloured boxes and coloured text. However, the styles offered in the default HTML editor may cover your needs and require minimal effort (you don't need to use code as they are built in). You could use an alert box to highlight something important (eg an exam date or change to the syllabus/content).


Wells

You could use a 'well' to emphasise an important point for the week/module (eg tasks students are expected to do for that week/module). As with alerts, the aim is to make the topic site more readable, so use this feature wisely and consistently. Bootstrap styles provides the HTML code to create this shaded box and is fairly simple to use. However, you will need to do this in code view – click on the code icon icon.

A well might be a feature in each week/module (depending on how much other content was present). A well could also be used as a subheading for the week/module. 


Horizontal rule

You may want to separate chunks of text with a horizontal rule (as per the line above the heading 'Example' below). This style can make it easier to differentiate between sections in a week/module (or book chapter, page etc). To insert a horizontal rule below or above a heading or text, place your cursor at the beginning or end of text and select thehorizontal ruleicon.


Example

This book chapter has the unformattable heading 'Teaching roles for online' which is automatically displayed at the top of the screen. Heading (medium) to follow this heading is probably your best choice. If you then had a subheading under this heading content, you would logically choose Heading (small). If you don't think it stands out enough from surrounding text, you could bold it as well.

heading book chapter

 


Resources

These glossary how-to entries sit under the category Styles & layout.