Print bookPrint book

FLO style guide for authors

Site structure, headings and text, labels, files, hyperlinks, images, tables, videos, referencing – good practice guidelines for all FLO sites

Site: Flinders Learning Online
Topic: eLearning Gateway (staff support)
Book: FLO style guide for authors
Printed by: Guest user
Date: Thursday, 19 September 2019, 10:40 AM

About this guide

FLO style guide
Creative Commons, Capture Queen

This guide provides good practice guidelines for the development of FLO sites for topic coordinators and other staff setting up and/or maintaining FLO sites. Following these guidelines will save time and create consistent and user-friendly, visually meaningful FLO sites.

Where possible, examples are provided.


References

Flinders Library, Copyright information for teaching

Flinders University, Writing for the web

Lynch, Patrick J & Horton, Sarah, Web style guide3rd edn

National Center on Universal Design for Learning, UDL Guidelines

Wikipedia, Deep linking 

World Wide Web Consortium (W3C), Standards


Key resources

Styling checklist

When styling for online, consistency and purpose are the key. What do you want to achieve?  

Use the following good practice list to check your FLO site. It is also a contents page – links go to specific chapters; chapter sections are indicated in bold italics (if relevant). However, not all information in chapters is listed here so they are still worth a visit even if you can tick the box!

Site structure

☐  Are headings/summaries for weeks/modules informative and meaningful? (Week/module name and Week/module summary

Headings and text 

☐  Is there a context for your topic site (eg in Module 0)? (Tone)

☐  Do you use an informal friendly writing style and address the user as 'you'? (Tone)

☐  Are headings and text left aligned, and do they use HTML editor styles? (Headings and text)

☐  Are headings hierarchical and do they use HTML editor styles? (Heading formatting)

☐  Are alerts and wells used to highlight important events etc? (Alerts and wells)

☐  Is text consistent in spelling, capitalisation etc? (Consistency – style sheets)

Labels

☐  Do these visually and meaningfully fit under other headings in the module?

Files

☐  Are files (mostly or all) in PDF format?

☐  Is copyright assured? (Copyright)

☐  Do files have meaningful names and descriptions? (Name and Description)

Hyperlinks

☐  Do external hyperlinks open in a new window? (Links to external sites)

Images

☐  Are these consistently placed (to the right is a good rule) and sized?

☐  Are stop signs and other attention-getting symbols used sparingly? (Headings and text > Alerts and wells)

Tables

☐  Are these used for data, not layout?

☐  Are they readable on screen (if complex)? (Resources)

Videos

☐  Are videos linked/embedded in a page so they take up less space in the topic? (Video placement and size)

☐  Are videos large enough that content is readable or able to be made full screen? (Video placement and size)

Referencing and quoting

☐  Is referencing consistent and correct? (Referencing)

☐  Are quotes consistently styled and easily readable? (Quoting)

Site structure

FLO, the University's web-based learning platform, uses Moodle software. 


What does a FLO site look like?

A FLO site typically has a main screen with a grey navigation bar below the banner. This navigation bar has pull-down menus for Administration, Navigation and My FLO settings. 'Blocks' are situated in the right of the screen and can be hidden. All sites have a Latest announcements block. Topic sites will also have a Topic links block. Blocks can be hidden or docked.

  • The main screen is usually organised into modules or weeks (Moodle refers to these as 'module modules' or 'weekly modules'). 
  • The top section  ('sticky bit' or Module 0), in web terms, is 'prime real estate'. Think carefully about what you want to put in this section (eg a brief overview of the topic/welcome and key links or documents that students will need to access often). You might want to upload a short video that talks about the topic, or walk students through the FLO site.
  • You can add extra blocks (eg Activities, Attendance, Messages, Random glossary entry). (Note: WebPET blocks cannot be deleted/removed.)

Think carefully about the structure of your FLO site and what will make sense to users (eg students) and contextualise the content and activities meaningfully. Aim to make the structure and content of your weeks/modules logical and clear.


Topic format

The format refers to the layout of the site. Decisions about content and purpose will help you decide on a format (eg linear/sequential, mobile friendly, collection-based, collapsed) that helps users interact meaningfully with your FLO site. Refer to Organise my FLO site for topic design steps, design characteristics, models that use different FLO structures, and workshops.


Week/module name

If your topic uses a weekly format (Edit settings > Topic format > Format > Weekly format), FLO shows the date range automatically (make sure you check that these dates are correct).

If your topic uses a modular format (Edit settings > Topic format > Format > Modular format), FLO shows the number of the module (eg Module 1). You can change these headings. However, note that they are unformattable (ie you cannot choose a style for them). See Headings and text for more details.

If the student access date for the topic appears to be incorrect, contact your school administration team to alter the dates. 


Week/module summary 

You can also give the week a name. For example, you may want to rename 'Module 1' to something more informative (eg 'Introduction' or 'Module 1 (weeks 1-3)').

If you decide not to include a contextual title with the week/module name, you can instead give the week/module a meaningful subheading. See Headings and text for more details.

Example

The topic format is set to 'weekly format', so each module has a date only (unformattable). You want to add the subheading 'Introduction to the topic and psychology' (formattable). See Change the name of a module for instructions.


Resources

Content

As well as text, images, tables and other sense-making features, the content of your FLO site may include labels, files, hyperlinks (URLs) and videos (resources), and activities (assignments, quizzes etc). 

This section looks at set-up and styling for these features, focusing on making usable and consistent content.


HTML toolbar

You are advised to use the HTML (text editor) toolbar to format text content, add images etc:

html text editor

It will save you time and make your site look consistent and professional. This toolbar is available in:

  • books (resource in FLO) 
  • pages (resource in FLO)
  • labels (resource in FLO) 
  • activities (Description field in any activity)

Resources

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.

Labels

Resource > LabelA label (Add an activity or resource > Label) is most useful as a heading in a week/module to help the student navigate the site (eg draw attention to activities). You can also add text, links, images, videos etc under, or as part of, a label. Labels can be moved around (eg to another module) and duplicated.

Pages, URLs, forums and other FLO activities/resources have their own Description option which can be displayed on the topic homepage if you choose, so they don't necessarily require a separate label.

  • If working in a section (week/module) and your label requires a heading, start with a heading (large) or heading (medium), as this heading fits best (appearance-wise) under the week/module heading (depending on how you structure your site).
  • If you have a subheading under a heading (large) label, it will most logically be a heading (medium); if a heading (medium) label, the subheading will most logically be a heading (small). See also Headings and text.

When creating an activity or resource, if you provide a Description (this may be a required field), this will move with the activity/resource should you then decide to place it in another module. If you provide a label for an activity/resource, you will have to move it separately when you move the activity/resource.


Resources

Files

Examples of file formats are Word, PDF and PPT (PowerPoint). Which file type to use?

  • Word Word icon: Only upload/link to a Word file if it is a template for students to download and edit. If the formatting is not stable, the file might not display as intended on the student’s monitor. Also they may not be able to open Word files for various reasons.  

  • PDF PPT icon: This file format is ideal if the user wants to print the content (eg the Statement of assessment methods) and is also more readily adaptable to devices.

  • PPT PPT icon: This file format allows students to make their own notes so has the potential to be interactive (eg students could open this file, save it to their device, and note a lecture recording provided in the FLO site). PPT files containing images can get quite large, so consider converting to a PDF if it doesn't need to be interactive.


Copyright

If uploading PDF or other files to a FLO site, be careful about copyright.

  • To avoid copyright infringement, link to PDFs or other files in their original source (eg an external webpage) rather than uploading to FLO as files.
  • If a document is internal to Flinders or permission has been granted to use the document, it is OK to upload as a file to FLO but make sure you acknowledge the source (eg name of author, location) and provide proof of permission (eg 'courtesy of name here').

See also Copyright information for teaching.


Name

  • Give files meaningful names – this tells the user what they will view when they click on the file. Naming files meaningfully will also make collecting user activity data (learning analytics) easier. If you store a file you use often in My Private Files (Navigation > My Profile) or on your computer, it will make the file easier to find when you want to add it to your topic/s. 
  • Use minimal capitalisation after the first capital for usability (easier to read), unless the text is a proper name (eg Department of State Development).
  • Use spaces rather than underscores for file link names (eg ‘Guidelines for web practice’ rather than ‘Guidelines_for_web_practice’) for usability (easier to read) and a better visual appearance.


Description

It is good practice to provide a description and/or instruction so that users can decide whether to open the file. 

  • Through the Add an activity or resource method you can include/provide a description and make it visible by selecting 'Display description on topic page'.
  • If you add a file in a page/book chapter, you will need to manually create a meaningful link name and context. 
Example: homepage

file name, type etc – if uploading a file using the Add an activity or resource method, leave the defaults Show size and Show type and FLO automatically provides this information

Example: page/book chapter

Introduction to the heart and its functions (61.9kb PDF) [fake link] – if adding a file in a page/book chapter, you will need to manually give an indication of the file size and type  


Display (Open in a new window) 

Uploading a file in the topic homepage (Resources > File)
  • Follow the instructions for Upload a file (Steps for uploading a file to your topic's homepage)
  • In the Appearance tab, Display is defaulted to New window. Another option you might choose is Open (only the file is displayed in the browser window and you use the Back arrow to return to the previous screen)

Uploading a file in a FLO page/book chapter

If choosing this method of adding files, think about student usability – is it easy for them to re-find this file if they need to, given that it won’t be listed in the topic week/module but is embedded in text or a page/book chapter? An alternative is adding the file to the topic homepage (see above) and hyperlinking to the file in the page/book chapter.

  • Follow the instructions for Upload a file (steps for uploading a file to a page or book chapter)
  • In the Insert/edit link box, the default Target is Open in this window/frame. Choose Open in new window (_blank) from the drop-down menu 


Resources

Hyperlinks (URLs)

Adding a URL resourceMake sure you check all URLs for broken (hyper)links prior to your FLO site being made available to students.

It is important to follow link protocols (web usability standards) so that the user does not get ‘lost’ in the navigation. The following protocols can be applied to FLO.


Link naming

  • Make sure links accurately reflect the link destination (eg if the page you are linking to is titled ‘Current issues for nursing practice’ then the link name should be the same)
  • Do not use ‘click here’ or similar unhelpful link naming. This is an accessibility issue, and will also make collecting user activity data (learning analytics) difficult


Link appearance

Users are accustomed to looking for link 'signals' in the text, so avoid using 'naked' links – these can be long and ugly, and may also require horizontal scrolling as they don't wrap. 

Examples


Links to external sites

You will most likely link to sites that are outside of FLO (including the Flinders University website). 

  • You do not need to include ‘viewed/accessed date’ next to them. See Referencing and quoting for more details.
  • Links are defaulted to open in a new window in the 'Adding a new URL' screen (Add an activity or resource > URL). This is the best option – particularly, do not choose the Embed option as this opens the site within FLO and may give the impression that the site is hosted by Flinders University rather than an external host.

Resources

Images

Images can add value to your FLO site if they are:

  • meaningful (eg a chart, flow diagram)
  • contextual (eg image relates to content in the module where it is included)
  • consistent in style (eg cartoon-like, real-life, graphic representations, square edges)
  • consistent in size (eg 300 pixels width) and suitable for online (72 dpi1
  • consistent in location and layout (eg right-aligned, white space around the image)

Be careful about navigation/usability – if your images are too wide, users may need to scroll across the screen (horizontally). To avoid this, make sure images are no wider than 800 px2 width.


Resources

 

1. dpi = dots per inch (see Wikipedia for further explanation)
2. px = pixels (see Wikipedia for further explanation)

Tables

If you are using a table for layout rather than data, for accessibility reasons it is best to use 'divs' (an HTML tag for a section in a webpage), not an actual table with rows and columns.

For support in using divs (<div></div>), contact your eLearning support team. Alternatively, there may be another design option for your content layout that is more accessible.


Resources

Videos

However you set up the video to be viewed, there should be the ability to view it in full-screen mode for usability/accessibility reasons.

Linking to/embedding a video is not breaching copyright, but source attribution is required if embedding. (If a YouTube video, look for the contributor's name directly below the video screen.) Find out more about attribution (copyright) (Wikipedia). If referencing rather than attributing, follow your school/faculty guidelines. 


YouTube videos

FLO will automatically embed a video if you are linking to it in YouTube

If you make a video yourself, you could put it on YouTube and link to/embed it in your FLO site.


Other web-based videos

Videos that are not YouTube or Flinders-located should be linked to their original source (eg an external webpage) to avoid copyright infringement.


Video placement and size

Videos can take up a lot of space in your topic if linked/embedded in a week/module in your FLO site, so you may want to think about options for placement and/or resizing.

You could link/embed your video in a page (Add an activity or resource > Page). This also allows you to put a context around the video. If the video is critical to the topic, make sure it has a prominent place in the topic site (eg in the first or second module).


Resources

Referencing and quoting

Use whatever referencing style is appropriate for your school/area and apply this style consistently to referencing and quoting within your FLO site. This approach models good practice for users (eg students).


Referencing

  • Use whatever referencing style is appropriate for your school/area. For example, the School of Nursing and Midwifery uses the Harvard author-date reference system.
  • Direct hyperlinks to websites (eg Cancer Council of SA) do not require a reference that includes 'viewed/accessed date' (or whatever style you are using) as you are linking 'live' from a website (FLO) to a website (external).


Quoting

Use a consistent style: for example, indented, with the source at the bottom of quote (using the relevant referencing style). 


Indenting

You could use the Indent icon Increase indent icon to move the quote text in from the margin, separating it from other text. For example:

It’s not about the tools, it’s using the tools to facilitate learning. — Churches, Andrew, Bloom's digital taxonomy, educational origami wiki


Using a block quote

You could use the <blockquote></blockquote> tags to distinguish the quote from other text (to do this, click on the HTML icon Edit HTML source icon in the HTML toolbar, and type <blockquote>Text here</blockquote> where you want to place the quote). For example:

It’s not about the tools, it’s using the tools to facilitate learning. 

Churches, Andrew, Bloom's digital taxonomy, educational origami wiki

Resources

  • Quotes (Bootstrap styling guide) 

Consistency – style sheets

You may find it handy to use a style sheet for your FLO site/s. A FLO site is a bit like a large document in that it will have many sections (modules, pages, books, files etc) that use and reuse the same terminology and other text/layout options.

Style sheets make it easy to maintain consistency, as you cannot be expected to remember every detail of your site/s (especially if you don't revisit them for a semester/year).

A style sheet is simply a document you use to record terms and other text elements that you want to remember, so you can use it for quick reference. Students/other users will appreciate the professionalism of your site/s and you will be modelling a great example for professionalism in communication media!


Resources

Bootstrap styles in FLO

Bootstrap styles in FLO (site)
Click the image to open the topic site

A complement to this style guide is the demo FLO site Bootstrap styles in FLO. This site features selected additional Moodle styling options that use code – called 'bootstrap' styles. These 'extras' are not part of the normal editing options in FLO (eg table styling, alerts, wells, buttons). 

You can copy and paste the html code provided for styles in this site into your site. You will need to edit in the HTML version of your page/chapter (click on the HTML icon Edit html source) to work in code using bootstrap styles.


Features of the site
  • Examples of how bootstrap styles can be used in a topic site 
  • How-to book indicating level of difficulty and potential uses