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.
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.
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|
Use 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.
To maintain a consistent paragraph font type, use the Clear formatting iconin 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.
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:
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:
In the page/book chapter or wherever you have access to the html toolbar, use the Unordered list icon to create the dot points from text.
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).
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.
The 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 icon.
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).
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 icon.
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 theicon.
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.
These glossary how-to entries sit under the category Styles & layout.