Quick Good Practice Checklist
Subheadings and quotes
- Use the correct subheading selection from the FORMAT drop-down menu, selecting H2 / H3 etc as appropriate. Do not add styles such as bold/italics to headings. This is important for accessibility as well as creating consistency with styling across the pages of our website.
- Write headings in sentence case. The CSS style will automatically create capitalisation. This is important for accessibility.
- Structure headings correctly. Do not skip headings, you can't have an H3 before you have had an H2 for example.
- While not compulsory to use it, we have a style for quotes found in the FORMAT menu. Apply the format “Blockquote” to the body of the quote removing the quotation marks from the copy in the editor as the CSS style adds its own. You can then apply the style, "Quote Source <p>" from the FORMAT menu to the line of copy holding the person's name who made the quote. It helps to give emphasis to this piece of copy and breaks up larger chunks of text making it easier to read. No other styling is required on the copy in the editor, the format styling does everything for you.
Spacing and layout
- Do not create empty spaces and line breaks by hitting the return key several times. The stylesheets create appropriate spacing that is consistent through all our websites. Doing this creates bad HTML which in turn gives our website pages a bad reputation with search engines robots and ultimately affects our ranking and ability for people to find our pages. When you look in the source code there should not be any lines of code with <p> </p> = empty paragraphs or <br /><br /> = double line breaks.
Links
- Links to external sites and PDF documents need to open in a new tab. This is achieved by ticking the “Target” box. We do this so people are not ending their journey with us.
- Links must have titles that describe in a few words what the link is pointing to. This is important for accessibility.
- Internal links, links to other pages within the same site, should use the site menu selection and not have a url pasted like you would for an external link. Media items within our sites, such as PDFs should use the media selection option found at the bottom of the list creation menu. This is important as it not only signifies an internal link which is good for Search Engine Optimisation but it also means if an internal website page is moved or renamed for any reason the link does not get broken.
- Links to Action/Donation pages (Engaging Networks pages) with exception of footer donation panels which are hardcoded, links should have the correct tracking formula applied. An example of how a tracked link should look: https://action.ciwf.org.uk/page/100367/action/1?ea.tracking.id=ciwf-homepage&supporter.appealCode=CATWE_UK0322. Use the "utm parameters are not required" option in the url generator and select homepage or webpage (any Umbraco page except the home page) for the tracking id.
- Ensure hyperlinks are placed on meaningful words so if taken out of context you would still know what it would be pointing to.
Images
- Images must have alt-tag descriptions applied. they should be within 125 characters and describe who, where, and what is happening in the image. Alt tags should also hold any wording which is on the image (which should be minimal). This is important for accessibility.
- Linking from an image should use the field titled "Image Link" by clicking on "ADD". Ignore other link options, they are redundant. Follow the link rules set out above.
- Illustrative mages should be uploaded as JPEGs. Logos which should be transparent PNG files at a max size of 100kb
Meta Info (SEO)
- Ensure ALL fields are filled in.