1. Gloucestershire County Council CMS
Training in Umbraco

2. What are we going to do today?
Have a quick tour of the work done so far on the GCC website
Look at the terminology you may encounter in Umbraco (our new CMS)
Learn how to add files (images, PDFs) to the site
Learn how to create and add content to a generic content page
Learn how to create and add content to a landing page (level 2)
Learn how to create notices and add them to a page
Learn/revise some best practice around writing for the web, search engine optimisation and accessibility
Find out what is happening next and who to contact for future advice

3. First let’s have a look at the work in progress

4. What do these mean????
Umbraco: Our new Content Management System (CMS). We can use it to add, delete, manipulate and change content on the site
Node: a page on the site
Landing content (level 1): A page that lists sub- pages within a category on the site, if further listings are required we can use a Landing content (level 2)
Generic content: A content page on the site
Document type: The type of page (generic content, landing etc.)
Media library: The place in the CMS where we can save files (documents, images)
Rich text editor: The place to input content onto a page
Macro: A piece of additional functionality
Embed: Insert something from another website (typically a YouTube video)onto the page
Template A way of displaying content
Related data: The links that appear on the right hand side of a page
SEO: Search Engine Optimisation – making sure pages can be found on search engines such as Google
Accessibility: Making sure that online content can be accessed by everyone regardless of any disability or technology barriers

5. Let’s get started
Please enter the following URL into your web browser

6. You will be presented with the following screen
Please enter your User ID and Password and select login
After the new site launches when signing in from within GCC this step will not be necessary as you will already be signed in

7. Quick walk through
On the far left are the areas you have permissions for
Next to that is the site tree
Clicking the arrow next to an item in the tree will open what is beneath
Left clicking on the three dots next to an item in the tree will show you what can be created underneath
Right clicking on three dots will give you other options available with that item

8. Adding files to the Media Library

9. Select the Media icon from the navigation menu on the left hand side

10. You will now see a list of the folders that have been created in the library
Select the appropriate library for your image or document which you would like to add to the site (we will make sure you only see folders that are relevant to you).

11. The following screen will appear
Use the “drag and drop” to drop your image or document into the folder OR
Use the “click here to choose files” where you can select from your desktop or network folder
Click “Save” at the bottom right hand corner when you have finished

12. Exercise Go to the Media Library Find the file called Training 2016
Find the file with today’s date
Create a file underneath titled with your name (click the three dots next to the file you want the create underneath)
Try adding some PDF, word files or images

13. Creating and adding content to a Generic Content Page

14. You can create a generic content page anywhere except as a (sub)site Homepage
Hover over the page you want to create a content page under and click on the 3 dots then select create

15. Page Content Tab This is where you enter the main content of the page
Standard RTE editor with standard options

16. Paragraphs
These are driven from the stylesheets taken from the GCC branding guidelines

17. Creating links to pages
Write your link text (that should make sense out of context)
Highlight your link text
Click on the link button (looks like a chain)
If the link is to an external site copy and paste that into the Link to document field (and set target to open link in a new document or tab)
If the link is internal chose from the site tree (and set the target to open in full body of the window)

18. Creating links to documents
Write your link text (that should make sense out of context)
Highlight your link text
Click on the link button (looks like a chain)
Click on link to file at the bottom of the screen
The media library will open, find the file you need (click on the top of each icon to open it then click on select at the bottom of the icon when you have found the file you want)

19. Formats Changes links into button
Use the hyperlink option to add a link i.e.. to document, internal page, external page
Highlight the text
Use the format option to select a style button

20. Adding images Put your cursor where you would like the image
Click on the Media picker icon
Navigate to the appropriate section of the Media Library
Select the image you want from within the library or upload an image into the library
If the image is purely decorative do not add any alternative text, if the image needs to be understood to understand the page then add some Alternative text (this will be read out to those using assistive technology such as screen-readers)
You can change the size of image using the mouse
Avoid using images if they will distract from the point of the page itself - if you are in any doubt contact the Web Team

21. Adding tables
Tables should only be used with caution. They present problems for users accessing a page via assistive technology and are difficult to scan for quick information.
Only add a table when you have data that can only been shown via a table. Never use a table for layout purposes or a list. If you feel a bulleted list is going to be a better option then it probably is.
If you do need to add a table get in touch with the Web Team to discuss this and we will assist

22. Embedding a YouTube video
Click on the Embed icon (little screen)
Add the YouTube URL of the video you want to embed into the URL field
Click retrieve
Use the cursor to move the video to where you want it

23. Template
This allows you to add a collapsible panel which hides content until selected
Click on Insert Template then on OK on pop up screen

24. Title of collapsible panel
Enter content here to be hidden. You can enter bullet points, links and use the button format option in this section

25. Page Info Tab
Page description – give the page a description this should be a very brief description of what the page is about. It will by highlighted by a grey box at the top of the page.
Page title – add a title

26. Related data
Here you can create groups of links or documents that will display on the right hand side
Click next to New Group and name the group
Name the group
Add links (external or internal)
Or add documents

27. Navigation Tab
If you wish to hide this page from the navigation menu then select this tick box

28. Notice Tab
This is where you can place an emergency notice on the page and configure it to either appear on this page only or all child pages
To set up a notice, please see section on Notices

29. SEO (Search Engine Optimisation) Tab
Description – this will be the description that will appear in search engines (i.e.. Google)
Keywords – enter keywords for the search engine to look for i.e., if you are on a schools page, add education

30. Properties Tab ALL pages have the properties tab
This screen show details of the page
When it was created and by whom
Date last edited
Document type (i.e. homepage, landing page levels 1 & 2 or generic content page)
Template – allows you to change the template of the page. NOTE you can not change the homepage template, only landing pages levels 1 & 2 and the generic content page
Publish At and Unpublish At allow you to state a date when the page should be published and unpublished. Particularly useful if you are wanting to publish schools admission pages that you only want visible between certain dates.
We will be able to set the system up to whoever created the page at a set period following publication to alert them to look at the page and check the content is still valid.

31. To see a preview of the page before it is published, click on
This will open the preview in a new tab in your browser
When you have finished, to see the changes on the front end click on

32. Adding and Editing a Landing Page Level 2
This page will automatically list children created beneath it, you can also add links to pages that exist under different parents and external pages

33. Page Info Tab
Page description – this will appear on the secondary level of the navigation
Page title – give the page a title
Page Owner – choose an owner of the page (this will automatically default to whoever is signed in)

34. Related Data Tab
This screen allows you to add links to pages that relate but are not child pages – such as a page that lives under Health and Social Care but might also be relevant under Education and learning
For each page add in a caption (how the page will be listed)
Remember to click save after you have added/edited a link

35. Notices

36. Every template has a tab for notices.
This is to put an emergency notice on that page, and, if set, all child pages
To create a notice

37. Enter a name
Details of the message you want to be displayed
Enter a title (this appears above the body text)
Add a link i.e.. to Met Office is message is about weather warning
Choose a colour for the background
Once this details have been entered then select

38. Exercise to look at what you have learnt today!
Create a secondary landing page under Training xx November
Create a generic content page and add
A description
A heading 2 and a heading 3
A link to the BBC
Make your link a button
Find the image you uploaded earlier insert it under the heading 3
Add a link to the PDF you uploaded earlier
Embed a YouTube video
Add a collapsible panel
Add a Related Documents group under Related Data and put a link in it to the PDF you uploaded earlier
Save your page
Create a notice
Add it to your page
Preview your page
Publish your page

39. Writing for the web
We are building pages for users, even on Staffnet, not ourselves
Everything we put online must be there to satisfy a user need – answer the question that the user came to the site with.
It’s important to remember how users read the web
On average users read no more than 28% of the words on a page
Users will scan pages looking at the title and intro, then focusing in on headings

40. How users read the web

41. Tips on writing for the web
Always put yourself in the position of someone scanning the page looking for the answer to a question
Have short paragraphs with meaningful headings
One idea per paragraph
Include keywords
Use bulleted lists where possible
Front load the page – start with the most important content – what you really want the user to find on the page
Do not use jargon or acronyms
Keep cutting the word count
Follow the GCC website style guide

42. 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?
Is your content answering a question that users are asking?
If you have used images are they appropriate and do they add something to the page?

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

44. Search Engine Optimisation (SEO)
Content is King!

45. 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

46. How do search engines work?
Search engine bots crawl around the internet looking for keywords and indexing content
When you search Google you are in fact consulting Google’s indexes
If you have the keywords that users are entering into search engines at key points in your content then the page will perform better
Search bots will make assumptions based on structure so
Make sure your headings are in order (H1,H2, H3)
Have some intro text
Use short paragraphs

47. How can we make sure we are well ranked?
Keep putting yourself in the position of the user and use as many keywords as possible
Avoid jargon or GCC specific terms and acronyms as users won’t understand than 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 verify that a keyword is being used and we can check using our Google account

48. What about PDFs? Search engines treat PDFs as they do web pages
Do not put scans of documents on the web
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

49. Top tips for SEO Use keywords in your content
Structure your page according to writing for the web principles
Make sure headings use keywords and are properly ordered
Include a brief description in the SEO field within Umbraco – this is what will appear beneath the page title in the search engine
Include keywords in the SEO field within Umbraco, these will not carry the weight of keywords in your content but will help
Name your links using keywords
Try to include keywords in your PDFs

50. Accessibility Barriers include… Visual Auditory Physical Speech
Cognitive
Technological

51. It’s the law!
Under the Equality Act 2010 we are duty bound to make reasonable adjustments to ensure that we do not discriminate by not providing a particular service to a disabled person
To do this we are working towards compliance with the W3C AA standards
W3C are an international organisation concerned with providing standards for the web and are a good indicator of what a court would look to in determining the accessibility of a site
All procurements with a digital element should reference the need for compliance with the W3C AA standards

52. 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 you 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

53. How would you change this page?

54. What have we done? Had a look at how the new GCC website will look
Learnt some of the terminology used in Umbraco
Learnt how to add files to Umbraco
Learnt how to create generic content pages, landing pages (level 2) and notices
Looked at some writing for the web, search engine optimisation and accessibility principles

55. What happens next?
We are adding content to the site (both the website and Staffnet) at the moment
We will be in touch when your content is on the site so that you can review it
At that point we will give you access to the CMS for the content which you will be editing
In the meantime you can use the training environment if you want to practice
Get in touch with John Porter for more information
For the really keen utilities/umbraco-7-editors-manual/