The 'Style' attribute is applied to ensure the website complies with webstandards. Anything outwith a 'Style' attribute cannot be used
Read more about why we use the Style attributes. Use the quick page checklist before publishing. Learn how to write for the web
Correct Use:
Use the Style attribute for all formatting of headings, text, images and downloads. If you cant' find a Style to suit then contact the webteam to discuss adding a new Style
Incorrect use:
Don't use the align buttons or font type buttons to format the page. This will make the pages inconsistent across web browsers and unreadable with screenreaders
Website Style Guide for Web Editors:
Denotes correct usage with examples
Denotes the 'technical' way to apply the style within Contribute
First: view the page layout for correct descriptions of features
- Page Properties - used by Search engines to find us
- PageTitle
- MainbodyContent - the main part of your page - 'landing page' or content
- Blockquotes - to highlight a quote from someone
- Callout Boxes - to emphasise important information or announcement
- Email links
- File-naming conventions
- Hyperlinks - to other pages
- Anchors - to same page but further down
- Images and Alt Text - image style and description
- Legislation
- Lists - Bulleted Lists and Numbered Lists
- PDF's, there's also PDF Help for more detailed information
- Related and External Links - on your pages
- Return to Top icon - blue triangle
- Tables
- Do’s and Don’ts
- Accessibility Reminders
- Contact Us
Page Properties
This is the blue title bar in the web browser and the description that is quoted in search engines. Always prefix with 'Aberdeenshire Council - mypagetitle' .
In Edit mode, click the top-right icon 'Page Properties' and add in the correct page description, with the 'Aberdeenshire Council - ' prefix
PageTitle
Add a short, descriptive page title. You have no editing rights to change font type or size.
MainbodyContent
- You can’t format the font type or size
- The Style menu allows you to use Heading2 and Heading3
- Body text starts using the headings in sequential order
A set of information will have a heading and sub-headings eg:
Newsletters (heading = h2)
Public Sector Newsletter (sub-category = h3)
These newsletters are produced quarterly and include information on blah blah blah....
Government Newsletter (sub-category = h3)
From Scottish Executive and published annually blah, blah, blah ...
A.N.Other Newsletter (sub-category = h3)
This is another example blah blah blah .....
NB: There is no third level navigation (left-hand side menu structure) in the website; the website has been built allowing users to reach their required page within four ‘clicks’.
If you can’t achieve this then you should review the structure and layout of your information; you may need to reduce the amount of words, add more headings or sub-categories or re-write the information in a different structure.
If you still can’t find a solution then please contact the Webteam for help and advice.
Long Lists of Information
Bulleted Lists
For long lists of information use bullets:
- To break down into manageable chunks
- To make content more readable
- To separate various points of content
- To avoid long, exhaustive pages of text (that are very off-putting for Internet readers)
Bulleted lists should be ordered either:
- by date eg: Local Plan Information (progress)
- by alphabetical order eg: Swimming Pool timetables (by region)
with no commas or full stops at the end of the sentence
- Never use dashes or lines
- Always use bulleted or numbered/alphabetic points
Numbered Lists
Are used for step-by-step information, with no commas or full stops at the end of the sentence eg:
Making a Health and Safety Plan:
- Appoint a competent person
- Prepare a general Health and Safety Policy Statement
- Determine hazards which exist .........
Legislation
The first time legislation is mentioned it should be highlighted in bold:
Under the Consumer Credit Act 1974 it is a requirement blah blah blah.....
Hyperlinks
- Must be descriptive of the content they represent
- Never use click here - the hyperlink must be readable outwith the context of the sentence or paragraph to meet Accessibility requirements
Correct: You can pay at any of the Collection Offices
Incorrect: To pay at any of the Collection Offices click here
To insert a hyperlink:
- Highlight the relevant text
- From the editing toolbar select Link - Browse to Web page
- either browse to the page or enter the full URL of the webpage
- click OK
Anchors
Are used to link within the same page or a specific part in another page (eg the bulleted list at the top of the page uses anchors).
First you must place an Anchor at the end-destination of the link:
- From the toolbar select Insert - Section Anchor
- enter a descriptive name for the Anchor. Names must have no spaces and cannot begin with a number eg' 2ndtable'
- click OK
Then you must make the link to the Anchor, (the link that the user clicks to get to the destination):
- Highlight the text that will be the hyperlink
- From the toolbar select Insert - Link - Browse to Webpage
- Browse to the page and click OK
- At the bottom of the Insert Link window click the Advanced button and you will see more options
- Select the Section Anchor from the drop-down menu and click OK
To remove hyperlinks and anchors:
- select text, right click mouse and select Remove Link
'Return to Top' icon
This is a blue triangle (see right) and is automatically programmed by the webteam to sit at the right hand side of page and when clicked return to the very top of the page. You cannot edit this icon in any way. To insert the icon:
- Place cursor at left of the row where you want the blue triangle to go.
- From the main toolbar select Insert - Shared Asset. All images and library items should now be visible
- Select 'top of page' and it will automatically be added at the right hand side of your selection.
- this Shared Asset cannot be accessed using the shortcut icons
If there is also an anchor at this point then place the cursor before the anchor to ensure the icon is in the same line.
Email Links
Email links should be generic addresses eg foodsafety@aberdeenshire.gov.uk or ICTWebPub, with several people receiving the email, not specifically one person's name. This is to avoid spam, unanswered emails due to holidays and from past experience the public often 'grab' a staff members name and reference them on any correspondence.
To add an email link:
- Write email address and highlight text
- From the editing toolbar select Link - Email Address
- enter the email address into the box. Contribute will automatically add the 'mailto:' into the second box
- Click OK
Images
Are used throughout the site as a visual aid to page content and come in three different sizes. These images are often duplicated throughout the site for Featured Articles, thumbnails and adverts. View the Image Gallery
Small images
are used as thumbnails to another page or set of content. Their filename ends in _50 or _tn
Medium sized images
are often used as the main, descriptive picture. Their filename ends in _163
Large images
are primarily not used in content pages and mainly for Featured Articles ie homepage and 'landing pages'. Their filename ends in _280
Images are given a Style of either ‘imageleft’ or ‘ imageright’. Please don’t edit images using Contribute’s drawing tools. Contact the Webteam if you require changes to images.
- Click on Image – From Shared Assets, select your image then click OK
- A Style must then be applied; either imageleft or imageright
Alt Text:
The webteam have already applied the Alt Text to the images for you eg "Banchory Library" (see right)
You can make the Image’s Alt Text more specific to the page eg "view the latest new books available this month at Banchory Library" (see right)
To edit the Alt Text:
- Select the image, click Image Properties icon (spanner) from the editing toolbar (or Format – Image Properties from main toolbar).
- Add in the required Alt Text
- Leave all other settings
- click OK
Don't copy an image from a page for use elsewhere as it has specific information related to that page. Instead, select the image from the editing toolbar
Tables
Try, as far as possible, to avoid using tables to display information; they are not very accessible to disabled users and those using screen-readers.
Tables should not be used for decorative purposes and should only be used if the content is very data heavy. Instead use sub-headings, bulleted lists or review the content again. Contact the Webteam if you have problems.
To insert a table:
- Select Insert - Table
- Add the number of rows and columns required
- Ignore the Options menu
- Choose which Header layout you require
- then click OK
| ICTWebPub | Internet Project Leader | Applications Analyst | Internet Content Manager |
|---|---|---|---|
| Name | Chris Clelland | Jamie Ross | Paul Brown |
| Style = | odd | odd | odd |
| Age | > 30 | < 30 | 28 |
If your information does require a table then improve appearance and readability by adding the Style - odd to every second row (see above). Don't adjust the size of the table as it will auto-fit which helps to make it readable in different browsers
NB: The table example above could be avoided and instead written as:
ICTWebPub are:
- Internet Project Leader - Chris Clelland, aged >30 years
- Applications Analyst - Jamie Ross, aged <30 years
- Internet Content Manager - Paul Brown, aged 28 years :)
Once you have completed your table please contact the Webteam to have Summary information added, which is an Accessibility requirement
Blockquotes
Blockquotes are used to emphasise speech or quotes from someone eg
The earth does not belong to man; man belongs to the earth
American Indian proverb
To add a blockquote:
-
Highlight the required text and select the Indent icon
(I know buttons are something we said not to use but it's a quirk of Contribute and an exeption to the rule)
Unfortunately Contribute can’t complete the end quote. Once completed contact Webteam to have the end quote added
Callout Boxes
Callout Boxes are used to emphasise important information eg policy statement, payment deadline, closing dates etc
The e-government Webteam relaunched the website on 1st July 2005
To add a callout box:
-
Highlight the required text and select Style - Callout
Filenaming Conventions
Files and webpages must be named in a specific manner to reach accessibility standards.
- a space in the filename (editors page.asp) adds extra characters into the html, so use an underscore or dash instead - editors_page.asp
- capital letters (Workflow.pdf) increase the likelihood of errors and incorrect naming across the website, therefore only use small letters - workflow.pdf
- if files are updated regularly then you can add in the date at the end to reference changes - swim_aug05.pdf - which will then make it easier to identify out of date files
- try not to have names too long as this can often make them inaccessible at the users end due to long file directory (C://Web/resources/editors/style_guide/instructions/..)
- a mix of the above can be applied, as long as you have a consistent naming convention which will be remembered - 9th-sep_m_bw.asp and 9th-sep_f_bw.asp
cycle-june_kids.pdf and cycle-june_adults.pdf
Document Downloads - PDF's
We only use PDF's and no longer require Word and RTF file formats. If you need a document converted to PDF then just email it to the webteam first who will convert it for you. Read more about PDF Help. Remember to follow the correct filenaming conventions. Below is how the PDF should be laid out on the webpage
To insert a pdf:
- Insert a bullet point and write a descriptive title for document including (pdf and xx kb) see example above.
Please note: the name of the hyperlink (Aboyne swimming classes) and filename (aboyne_classes.pdf) can be different - To add in the red icon, highlight all the text and apply Style - pdf_list_item.
- To link to the document, highlight text again and from Editing toolbar select Link – File on My Computer
- ***PLEASE NOTE***Contribute automatically 'grabs' the file from its source and uploads to the website when you Publish/Send for Review Only if the pdf's are made or named that same day.
Related and External Links
- Are added onto the right-hand side of each page and are made as specific to the page as possible
- Related link to other sections of the website. These can be found in the complete Site Directory
- Try to link as 'deep' into the section as possible
- External link to other website. Make sure these are specific links
- Keep both Related and External links to around 5 or 6 maximum - anymore than that clutters the page.
Do's and Don'ts
- DO
- remember to enter your Page Description correctly
- try to enhance and emphasise specific, important information by using the Style Callout
- bring quotes to life and make the pages more personal by using the Style blockquote
- remember we have a duty to be Accessible
- ask the webteam for more Styles if you can't find what your'e looking for
- remember to add the correct Page Properties ie description of page in the top blue bar: 'Aberdeenshire Council – my page description'
- DON’T
- SHOUT at readers with capital letters. Its VERY RUDE
- use italics, if possible as they are very hard to read
- use underline, as it is very similar to a hyperlink - a reader would assume it is a broken hyperlink
- set the table borders and widths. Contribute will 'auto-fix'
- use the align or font type buttons as they make the page unreadable across web browsers and screenreaders - Use the resources on 'Writing for the Web'
Accessibility Reminders
Remember: making the website Accessible is a government requirement and not an option
Use the Style function to format:
- Titles formatted with Heading Text (h2, h3)
- Images aligned (imageleft, imageright)
- Quotes emphasised (blockquotes)
- Important data highlighted (callout)
- Pdfs labelled (pdf_list_item) aptly described, with filesize (?? kb)
- Tables are given the Style - odd to make them more readable. A summary of the table's contents is required for accessibility compliance so contact Webteam to have it added
- More Accessibility and Usability resources can be found on our Reference pages
Contact Us
you can either:
- email via Notes - ICTWebPub
- to send a Contribute page with changes to us:
send the page for review to Administrator, with description of changes and click the notify recipients by email box
