Umbraco training for Gloucestershire County Council web editors

digital@gloucestershire.gov.uk

What we will cover• What is Umbraco?• How does it “manage” the county sites?• Templates• Using Umbraco

– Uploading media– Creating & editing web pages

• Writing for the web• Search engine optimisation (SEO)

What is Umbraco?• Content management system (CMS)• Web based – edit from anywhere on

(almost) anything from tablet size upwards• No code• Uses simple tools to manage text, links,

images and files

How to “manage” sites?• Login using www.gloucestershire.gov.uk/umbraco

orstaffnet.gloucestershire.gov.uk/umbraco

• Upload & organise “media”– Images– Files (.pdf, .docx, .xlsx, etc.)

• Edit text, place images & link to files

Templates• No code templates to layout content• Gloucestershire County Council site

– 2 levels of menus (‘Landing’ templates 1 & 2)– Various ‘content’ templates

• Generic - can be used anywhere• A-Z – for alphabetical lists of • Location – with maps & opening times• News• Blog• Events

Uploading media

• Using the “Media” menu• Opens a “tree“• Navigate with the • Click line item to select• Right click line item to take action• Open a folder and you can

“drag & drop” files (names used as titles)

Media: Images• Uploaded images can be manipulated• Pre-set images used in templates• Zoom & frame to suit• Use the blue dot and framing tool to avoid

headless problem

Media: Other files• PDF, Word, Excel, PowerPoint, etc. • Drag & drop use file name – change if odd• Can be updated as required– Switch to “Files” tab– Browse for new file

Creating & editing web pages

• Use the Content menu• Opens the “Site” tree• Navigate with the • Click line item to select• Right click line item to take action• Build & edit pages here

Landing pages• Based on www.gov.uk • Two levels• No text• Designed to show “child” articles• Related links adds to the bottom of the menu

Pages with text (eg ‘Generic’)• Tab: Page content for “Body text” - rich text– Text styles – Headings (1-6)– Text formats – buttons– Lists & indents– Links & bookmarks– Images & embedded video– Collapsible panels & tables – Other stuff

Tab: Page info• Page description – rich(ish) text

(fewer formatting options)• Landing image for pages linked from “home”• Page owner (change to you if it’s yours)• Page title can be blank (only for “crumb trail”)

Tab: Related data• Up to 3 groups• Group titles editable• Can mix content types in related– Internal links– External links– Links to files

• Groups and group content sortable

Tab: Notices• Notices are special articles

(Only visible as part of other pages)• Create Notice in special container• Keep content “short”• Choose on “Notices” tab in

Tab: SEO• Use to improve Google/Bing search results• Distil your content into “description” with user

keywords (50 – 250 characters)• Provide alternate keywords if necessary

Page should speak “human” include jargon here – eg page: ‘bins’ jargon: ‘receptacle’

Tab: Properties• Schedule publish/un-publish• Un-publish: switch off out of date content• Publish:– Set visible date for yet to be published pages– Edit published page & save (don’t publish)

Publish date controls when revisions visible

Other tabs• Timer – choose whether to show site timer• Search – exclude if necessary• Navigation– Hide from menus– Provide “hide this page” button (safeguarding)

Other page templates• Main content works like “Generic”• Will have extra tabs for things like– Address– Map location– Opening times– Price– Contact

Special systems• News – special layout for “slow” moving news• Bulletins – for faster shorter news• Events – time & place• Dialogue – Forums (not ready yet)• Blog – WordPress like capability

(Including editing outside Umbraco)Contact us if you want to use these

Writing for the web• Pages are for users (even on Staffnet) not us• Everything online must satisfy a user need

(Answer the question the user is asking)• How users read the web– On average read < 28% of the words on a page– Will scan pages looking at the title and intro, then

focus on headings

How users read the web

Tips on writing for the web• Put yourself in the position of someone scanning the page looking for the answer to a

question• Front load the page – start with the most important content – what you really want

the user to find on the page• Use short paragraphs with meaningful headings• One idea per paragraph• Include keywords• Use bulleted lists where possible• Do not use jargon or acronyms• Keep cutting the word count • Follow the GCC website style guide

Questions to ask yourself• Is your content easy to read and understandable to

someone approaching it for the first time?• Is your content original? Does a more authoritative

source exist elsewhere that you could link to?• If you have used images are they appropriate and

do they add something to the page?

Useful resources• GCC website style guide• GCC brand guidelines• LocalGov Digital content standards

Search Engine Optimisation (SEO)

Content is King!

Keywords are vital!• By keywords we mean the words and phrases

users will be entering into search engines as they try and find your content

How do search engines work?• Crawl the internet indexing content• When you search Google you use these indexes • If your page uses the keywords that users are entering into

search engines your page will perform better• Search ‘bots’ use page structure so

– Make sure your headings are in order (H1,H2, H3)– Have some intro text– Use short paragraphs

Making sure we are well ranked?• Keep putting yourself in the position of the user and use

keywords• Avoid jargon, ‘council speak’, and acronyms

users won’t know (or understand) them and won’t search for them

• Follow writing for the web guidelines and the GCC style guide• Contact the digital team if you want to find out what

keywords people use to find your pages

What about PDFs?• Search engines treat PDFs like web pages • Do not put scans of documents in PDFs• Make sure you have keywords in the title of

your document• Make sure you include keywords in the link to

your document from the website

AccessibilityBarriers include…• Visual• Auditory• Physical• Cognitive• Technological

It’s the law!• Equality Act 2010: make reasonable adjustments to ensure that

we do not discriminate• We are working towards compliance with the W3C AA standards • W3C are the web standards organisation and a good indicator of

what a court would consider in determining the accessibility of a site

• All procurements with a digital element should require compliance with W3C AA standards

What can we do?• A lot of it is taken care of by the CMS!• Colour contrast must be sufficient for users with colour blindness to read text• Do not add alternative text to images that are purely decorative• If understanding of an image is fundamental to understanding the page use simple alt-text• Structure your headings in order and use plenty of headings (one every 2-3 paragraphs)• Avoid tables unless for data• Use short sentences that can be easily understood• Use lists where possible• Do not use caps for entire words or sentences • Left align your text• Links should make sense if read independently – never use URLs as links, or links such as more and

click here• Do not add scans of PDFs

What happens next?• Email digital@gloucestershire.gov.uk for access to the CMS - tell

us what you will be editing• In the meantime you can use the training environment if you want

to practice • Get in touch with John Porter or Cathy Steed for more information

or support• For the really keen

https://our.umbraco.org/projects/website-utilities/umbraco-7-editors-manual/