Umbraco training for Gloucestershire County Council web editors

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 or staffnet. 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, Power. Point, 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 – Word. Press 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 • Local. Gov 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 (H 1, H 2, H 3) – 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

Accessibility Barriers 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 W 3 C AA standards • W 3 C 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 W 3 C 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/websiteutilities/umbraco-7 -editors-manual/