How you structure your content will greatly influence the success of your web site. A well-formatted page will make it easy for your users to find the information they need. It will also help you to direct their attention to critical content.
- Please do not center align or right align anything. This includes images, table data, name of writer being quoited, etc. Everything on a page should be left aligned. This will ensure your page looks it's best on all devices from a desktop computer to a mobile phone.
- Do not use the heading attribute to emphasise passages of text.
The heading attribute should only be used to delineate structural and hierarchical elements on your page such as section and sub-section headings, they are not a design element. ie. Do not use a light blue heading because you like the colour in that area- only use it to denote a sub-heading of a prior section. The light blue heading is an H3 in the heading hierarchy and should only follow the use of an H2. The heading hierarchy order is: H2, H3, H4, paragraph.
- Do not use the H1 attribute; this is reserved for your page title.
- Do not link from a heading or sub-heading.
Always add a short paragraph of text following a heading and link from the text within. Remember the function of the 'heading' style is to add hierarchical and semantic structure not design.
- Do not use all capital letters for headings. This is shouting online and should be avoided at all times.
- Our branding guidelines stipulate we must only use sentence case, even for headings. ie. Only the first letter of the first word in a heading should be capitalised, not the first letter of every word.
- Please use the determiner 'the' before RCH. Please use a capital 'T' for The Royal Children's Hospital. 'The' is part of our name and thus must not be excluded when stating the name of the institution.
- Do not leave extra spaces in between headings and sentence or sections of information on your page. The space between a heading and a sentence, top and bottom, is already set and thus spaced as per our branding guidelines. Please do not alter this automatic behaviour.
- Please use the full word 'and' and never &
- Please use the word 'Telephone' (with no proceeding colon) and not ph:, phone:, tel, or an other derivative.
- Please use the word 'Facsimile' (with no proceeding colon) and not fax: or an other derivative.
- Please use the dot point list or numbered list functions in the editor. If you have copy and pasted from word the dot point and numbered lists will not be correct. please ensure they are- just highlight your list items and click the dot point or numbers button.
- Please only use tables to display tabular data such as items in the RCH Pharmacy formulary of medicines data. Please do not use tables to display staff details, department contact details or any other type of information. The tables will not view properly on small devices such as mobile phones and tablets.
Important things to remember when considering your page layout:
- Use the first portion of your page to give a clear indication of the page content
- Place your most important information near the top of the page
- Enhance the readability of your web page by adhering to the following:
- Use headings and sub-headings to create a visual hierarchy of your content
- Keep your heading titles brief and to the point
- Structure your text into short paragraphs
- Use bulleted lists for clear outlines of your information
- Do not use all uppercase in titles or chunks of text to add emphasis. Use only sentence case as it is easier to scan quickly on screen
- Use left alignment for all headings and text. Avoid centre alignment. Note: left alignment is the default for the CMS editor
- Use bold text sparingly. The 'bold' effect should be used to emphasise key words or phrases, not to highlight entire passages of text
- Graphics should be used to enhance or illustrate your information rather than as page decoration. See Using graphics and multimedia.
Tables are a useful way of presenting certain information on screen. However you should avoid putting overly complex tables on your web page. Complex tables can cause usability problems such as:
- increased page download time
- can force users to scroll across the screen
- are problematic for visual impaired users
Consider other delivery methods for complex tables, e.g. downloadable PDF document or graphic representation such as a flowchart. Consult the web team if in doubt.
Wherever possible you should avoid using tables to control layout. Often headings and bulleted lists or short paragraphs of text are far more effective ways of presenting information.
Some things to remember when formatting your table:
- Avoiding setting widths for your table or cells, allow the table content to determine the table width. If a visitor has a small monitor, a set table width may force them to scroll in order to view the contents of the screen
- In the CMS, do not left align your table; it will cause problems with the presentation of any text that follows the table. Your table will be left aligned by default and does not require you to define alignment
- Avoid using strong colours as backgrounds in your table cells. For readability it is best to keep background colours as neutral as possible. There are a set of web friendly shades in the styles palette of the CMS editor
- Avoid using background colour to convey meaning, e.g. pink through to red to convey intensity or severity of the information. If you are using appropriate column headings this should not be necessary.