Gloucestershire County Council CMS Training in Umbraco What
Gloucestershire County Council CMS Training in Umbraco
What are we going to do today? Have a quick tour of the new 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 • •
First let’s have a look at the new GCC website • http: //gloucestershire. gov. uk
Let’s get started Please enter the following URL into your web browser http: //gloucestershiretest. pcgprojects. co. uk/umbraco
• 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
Quick walk through • On the far left are the areas you have permissions for • Click one of the areas to see 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 the template types that can be created underneath • Right clicking on three dots will give you other options available with that item
Adding files to the Media Library
• Select the Media icon from the navigation menu on the left hand side
• 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).
• The following screen will appear • Use the “click here to choose files” where you can select from your desktop or network folder
Creating and adding content to a Generic Content Page
You can create a generic content page anywhere except as a (sub)site Homepage • Hover the page you want to create a content page under and left click on the 3 dots then select Generic Content
Naming your page Give your page a name. This will show in the tree so needs to relate to what is on the page. This name will not appear on the website navigation but will be in the web address (URL). We will add the name for the website navigation later.
Page Content Tab • This is where you enter the main content of the page • The body text box is also called the Standard RTE editor and it has standard formatting options below
Paragraphs • These are driven from the stylesheets taken from the GCC branding guidelines
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 choose from the site tree (and set the target to open in full body of the window) • •
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)
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
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 • •
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
Embedding a You. Tube video • • Click on the Embed icon (little screen) Add the You. Tube 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
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
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
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 – this can be the same as the Page name.
Related data • Here you can create groups of links or documents that will display on the right hand side. • Check the box to show the related data on the page. • Click + to add a new group • Name the group • Add links (external or internal) • Or add documents
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 section on Notices
Navigation Tab • If you wish to hide this page from the navigation menu then select this tick box
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
Properties Tab ALL pages have the properties tab • This screen shows 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 email 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.
• 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 your page click Save and publish to make it live. You can save it without publishing by clicking the arrow on the green button and selecting Save.
Adding and Editing a Landing Page This page will automatically list children created beneath it, you can also add links to pages that exist under different parents and external pages
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)
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
Notices
• 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
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
Exercise to look at what you have learnt today! • Create a secondary landing page under Training [date] • 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 You. Tube 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
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
How users read the web
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
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?
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? • 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 (H 1, H 2, H 3) • Have some intro text • Use short paragraphs
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 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 verify that a keyword is being used and we can check using our Google account
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
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
Accessibility Barriers include… • Visual • Auditory • Physical • Cognitive • Technological
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 W 3 C AA standards • W 3 C 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 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 • • •
How would you change this page?
What have we done? • Learnt how to add files and images 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
What happens next? • When you are ready to start using Umbraco to edit your pages for the live site email digital@gloucestershire. gov. uk • 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 or Cathy Steed for more information or support • For the really keen https: //our. umbraco. org/projects/websiteutilities/umbraco-7 -editors-manual/
- Slides: 54