Website Style Guide - Using EPHOX
Some notes on using the Ephox WYSIWYG editor in the CMS, this is the main content editor for pages the one with the toolbar. This is Not intended as an instructions on how to use the editor just as a guide to how the available styles can be used.
When producing content within the Ephox editor it is important to concentrate on the structure of the content and not the design, the CMS separates design from content so all the graphical styling is applied using CSS style sheets. When you are producing your page think about which of the structures to use to represent your content Paragraphs, Lists or Headings
This approach makes it easy to change the design of the site by changing a very few files on the server and means that we don't have to go back and alter the actual page content. It also means that the pages are accessible by assistive technologies such as screen readers. This is why the Ephox editor has only a few formatting options.
All of the formatting are available from the toolbar. But just because you can select a combination of option from the toolbar doesn't mean they should be used, some options should only be used in certain situations, for example you can use the indent button on paragraphs but this is not a style that we support for use on the site. The indent button should only be used with Bullet lists and then should only be indent one level.
Using Styles
- Never mix styles. If you use bold to highlight something in a sentence then do not make it italic as well.
- Never make a whole sentences italic
- Headings should not have bold or italic styles applied to them, the style sheets will take care of the formatting
Headings
- Heading should be used in order.
- Heading 1 if you only have one level of headings on the page
- Heading 2 for sub headings
- Heading 3 for sub sub headings
- Never use heading to highlight text they should be used to divide the page into logical sections
Lists
Always use bullet or number lists for list of items. And lists should only be indented 1 level if you need to indent more then split the content in to separate section with heading.
Tables
Tables should only be used for data and not for layout.
A good rule of thumb is if you can label the heading of each column then you can use a table. Avoid tables that would need cells that span multiple columns
If you do use a table make sure to set the first row as a header row
Links
You can create 2 types of links Hyperlinks and CMS Links
In general when creating links always make sure that the text you use for a the link would make sense taken out of the context of the page. This is to make them accessible to screen readers, if only the link was read out and the text is click here it doesn't tell you where it links to and makes the site hard to navigate.
Examples of what not to use as link text
- Click Here
- Here
- Page
- Website
Hyperlinks
These are used to link to sites outside of the CMS. The are created using the Insert Hyperlink Button on the toolbar
- They should never be used to link to a page with an address staring www.soas.ac.uk
- Always use all or part of the URL as the link text so that it is obvious for a user where they are linking to
- BBC news page -> news.bbc.co.uk
- BBC News Subpage -> news.bbc.co.uk/sport1/hi/
- A deep linked page in HEFCE funding www.hefce.ac.uk/pubs/hefce/2009/09_37/ -> hefce.ac.uk/.../09_37/
White Space
You shouldn't add extra paragraph or line breaks between blocks of text, the system will space paragraphs correctly.
In the Ephox editing field it may look like some of the text is cramped (especially below bullet point or numbered lists) but it will be OK on the published page. Always remember to check the page you have edited in the preview before submitting it for publication.
