Website Training Manual

Website training manual
The guide to editing your local Age UK website
Version 2.1
Introduction Chapter 1 getting started Accessing the CMS and editing your website Navigating around Episerver Chapter 2 editing the homepage Saving and publishing Editing different elements of the homepage Headline promo box Editorial content 1 Promo boxes Editorial content 2 Useful information to assist the management of the homepage Full width boxes Change history Page settings and tabs Chapter 3 site and page settings Access settings Site settings Global data Global page header Donate today link Page footer Banner image and message Newsletter settings Disclaimers Admin site settings Site tracking 30 24 25 26 23 7 8 9 10 12 12 Logging in8
Start editing11
Version 2.1
Global header and footer Local directory information Page settings Page name in web address Display page in menus Information for public search engines File management Chapter 4 creating and editing content Creating a new page Formatting your page Save, preview and publish Save and preview Publishing your page Versions and undoing changes Deleting pages Editing an existing page Editing menu pages Editing different elements of a menu page Adding a half-width or full-width promo box Making menu pages visible Managing the news section Creating a news article Adding an image to a news article Archiving news Chapter 5 links and downloads Links Links to internal pages Links to external pages Anchor links 51 52 47 43 43 44 35 36 38 41 31
Version 2.1
Email links Downloads Document download link Useful information on document links Icons for links and downloads Chapter 6 images and multimedia Inserting images Adding images to content pages Adding images to menu pages Tips on images Image size gallery Image editing Using Flickr and Pictobrowser to create a photo gallery Adding video and audio Embedding a YouTube video Adding audio Chapter 7 forms and tables Forms Edit or create a form Form step-by-step Tables Chapter 8 advanced functionality Local directory Creating the local directory Creating subpage Calendar Creating the calendar Newsletter sign up page 105 103 94 96 97 82 83 79 73 63 65 66 Useful information to download, related pages and useful websites 59
Version 2.1
Creating the newsletter sign-up Data capture Donation page Creating the donation page iframes RSS feeds Blog functionality Setting up the blog landing page Adding posts to your blog Chapter 9 useful tips and common problems Pointing URLs Search engine optimisation (SEO) Using social media platforms to raise awareness and build community How to use Google Analytics Editorial policy Writing copy Key formatting points Accessibility and PDF documents Common questions Glossary Chapter 10 appendices Appendix 1 Google Analytics user manual 138 140 141 142 126 127 128 130 131 132 115 118 120 109
Version 2.1
Introduction
This training manual is intended for people who edit their Age UK partner website using the Episerver Content Management System.
The manual can be used by website editors of any level of experience. The manual contains instructions on how to edit all changeable elements of your website, including the homepage, content pages and site settings. You will also find guidance on picture editing, writing for the web, Google Analytics and search engine optimisation. If you have any questions or need additional support, please get in touch with the brand partners digital team at partners@ageuk.org.uk
Version 2.1 revisions

Our redesigned training manual includes some minor changes and the additional advanced functionality instructions listed below Editing the homepage Managing the news section Icons for links and downloads Tips on images PicMonkey instructions Local directory and events calendar Advanced functionality iframes, RSS feeds and blog functionality
Version 2.1
Getting started
Logging in Accessing the CMS and editing your website Navigating around Episerver
This chapter explains how to log in to Episerver and find your way around the system.
Version 2.1
Chapter 1
Getting started
Logging in
We recommend that you use Episerver in an Internet Explorer browser. To log in to the Episerver content management system (CMS) to edit your partner website, go to: http://bp-editorial.ageuk.org.uk/ui/edit/admin Enter your unique username (email address) and password. You have five chances to enter the correct password. If you get locked out, contact us at partners@ageuk.org.uk. We can also set up login details for additional editors, with a maximum of five for each partner. When you first log in we recommend that you change your password. Click on your username in the right hand corner of the screen. Click on my settings and follow the instructions to change your password.
Accessing the CMS and editing your website

To start editing your website, click on the CMS button over to the left of the page, then click on edit mode just below.
Version 2.1
Chapter 1
Getting started
Navigating around Episerver

Once you have logged on to Episerver, you will see the following screen:
Main pane
Select page to edit in left hand menu
The main pane on the right shows a preview of your websites homepage. The grey pane on the left shows the page tree, a menu with all of the pages on your website. Click on a page in the list to view it in the main pane. To view subpages in a section, for example in our services, click on the small + symbol next to the relevant page in the menu. Once youve selected a page from the left hand page tree, click on the edit tab in the main pane to start editing.
Version 2.1
Editing the homepage
Your homepage is the first page that most site visitors will see, so it is very important to keep this page up-to-date and fresh. The homepage is designed around a template; this creates a set style and means you can only edit certain aspects. Start editing Saving and publishing Editing different elements of the homepage Useful information to assist the management of the homepage
Version 2.1
10
Chapter 2
Start editing
Click on your partner name (the home page) at the top of the menu in the left hand pane. You will see a preview of your current homepage in the main pane. Click on the edit tab at the top of the main pane.
Click on the homepage
Click on the edit tab
The content tab will be automatically selected for the homepage. Scroll down within the content tab in the main pane to edit different elements of the homepage.
Content tab
Version 2.1
11
Chapter 2
Saving and publishing

To save your page, either click on the save and view or the save and publish button at the top of the page. Save and view will take you to a preview screen, where you can choose to publish.
Once youve published your page, it will appear this way on the live site, so make sure you are happy with the page before you publish.
To cancel any of your changes before saving, click on the cancel button, as in the image above.
Editing different elements of the homepage

Headline promo box
The headline promo box is a great place to bring attention to a service, event or particular section of your site. We recommend that you update it fairly frequently to keep your site looking fresh. 2. Box heading 1. Box background
3. Box text (optional)
4. Box more link text
5. Box more link
Version 2.1
12
Chapter 2
Edit the different parts of the headline promo box through the following section of the homepage content tab:
See numbers 1-5 for instructions on how to edit each element of the headline promo box. 1 Box background image upload a new image here. The image should be 630 pixels wide, with a height of around 345 pixels, with corners rounded to 5 pixels. (See chapter 6 for further instructions on adding and editing images.)
To upload a new image, click on the square button to the right of the box background image field. Y ou will see the following select image window will appear. Double click on the folder bearing your partner name in the left hand list, then click on the pics, pictures or images folder in the right hand list.
Images
Your folder

Version 2.1 13
Chapter 2
Once youre in the picture folder, click on the add new image icon in the toolbar. Add new image icon:
Add a new image
Click browse to search your computer for the image. Once youve selected an image, click save.
Browse Save NB. Add alt text the text that shows up when you hover over an image, and is used by screen readers by typing in the Background image alt text field. You should type something that describes the image, eg. women laughing, man on phone.
Version 2.1
14
Chapter 2
The image is now listed in your image folder. Click on your chosen image in the list, then click OK at the bottom of the select image window.
Click on your chosen image
2 Box heading this is the larger text heading. Type directly into this field to edit.
Click ok
3 Box text this is the smaller text appearing below the box heading. Type directly into this field to edit. This text is optional. NB. To change the colour of the text in the promo box, click on the dropdown list in the Headline promo text color, and choose a new colour. The default text colour is pink.
Version 2.1
15
Chapter 2
4 Box more link this link can be directed to any page on your website. To edit, click on the square button to the right of the Box more link field. You will see the following select page window.

Click on the page you would like the link to direct to. To find subpages within sections, click on the small + button next to the relevant section. Then click the select button at the bottom of the window. 5 Box more link text this describes the destination of the box more link. Use a short sentence, for example find out more about our handyperson service. Type directly into this field to edit.
Version 2.1
16
Chapter 2
Editorial content 1
The editorial content 1 box is the block-coloured box appearing under the headline promo box. This is a good place to include general information about your organisation, and link to other parts of the site. You could feature something specific, like an event, in the white half of the box. Edit the different parts of editorial content 1 through the following section of the homepage content tab:
Toolbar Header Image
Paragraph
Links
White panel Change the colour
Version 2.1
17
Chapter 2
Editing text - to edit any of the text elements in editorial content 1, click on the relevant field, highlight the text within the field, and type over. Do not delete any of the fields, as theyre very difficult to re-format.
Highlight and edit the content
Editing links to change the text in a link, click twice in the middle of the link and you will see a dashed border around the link. Then highlight and type over the text.
Click twice to see a dashed border
To change the destination of any of the links within editorial content 1, click on the link, then click on the hyperlink icon in the toolbar:
See chapter 5 for further instructions on adding and editing links.
Hyperlink icon:
Version 2.1
18
Chapter 2
Changing the image - the image in editorial content 1 should be 315 pixels wide, and the right height to suit the text in the box, with corners rounded to 5 pixels. Please note: It is important that the image in the editorial content 1 is the same height as the text in the box. The formatting of the button links will disappear if the image height is any smaller than this. Please email partners@ageuk.org.uk if you would like any assistance. To change the image, click on it once, then click on the image icon in the toolbar.
See chapter 6 for further instructions on adding and editing images.
Image icon:
Changing the colour of editorial content 1 - click on the drop down menu to select a colour:
Follow the same principles as above to edit the white panels of editorial content 1. White panels
You might like to add additional white panels to the editorial content 1 box on your homepage in order to add extra content or links to your twitter or facebook page. Please email partners@ageuk.org.uk if you would like us to insert these for you.
White panels
Version 2.1
19
Chapter 2
Promo boxes - The promo boxes are bright features towards the bottom of your home page. They can include an image, title, descriptive text and links.
Edit the promo boxes through the following section of the homepage content tab:
Select colour Add image
Add links
If there are no half-width boxes on your homepage, you will just see the large + rows button with the green + icon. Click this to add a new row of half-width boxes.
Version 2.1
20
Chapter 2
Select colour - select a colour for each half-width box using the drop-down box in the LeftBoxColour or RightBoxColour field. We recommend that you choose the colour relating to the content of the box, eg. service-related content should be green. Add an image - choose an image for either half-width box by clicking the small square button next to the LeftImage or RightImage field. Images in the homepage half-width boxes should be 295 pixels wide by 168 pixels high (this is different from half-width boxes on other pages), with corners rounded to 5 pixels. You can use an image of a different height if you would prefer one half-width box in portrait, and one in landscape. See chapter 6 for further instructions on adding and editing images. Text fields - type your chosen box heading in the LeftHeading or RightHeading field. You can include any further description in the LeftText(optional) or RightText(optional) fields. Type an image description into the ImageAltText field. This text will show up when you roll over an image, and is used by screen readers. Add links - to add links to your half-width box, click on the + add link button with the green + icon. See chapter 5 for further instructions on adding and editing links.
Version 2.1
21
Chapter 2
Editorial content 2
The editorial content 2 box will usually be blank when we hand over your site. This box is block-coloured in the same way as editorial content 1 on your homepage and so it is a good idea to format it in a similar way. It is worth considering whether you need to use this bottom box as it is best to keep your homepage short and concise. You can copy the formatting of editorial content 1 by copying and pasting the HTML of the box. You can then amend the text in editorial content 2 with your new content. We would be happy to do this for you so please email partners@ageuk.org.uk if you would like us to format editorial content 2.
Editorial content 1
Editorial content 2
Version 2.1
22
Chapter 2
Useful information to assist the management of the homepage

Full-width boxes Below the half-width boxes, there is an option to add full-width boxes. Do not use these on the homepage, as the formatting is incorrect and they will not display in the correct style. Change history To view a list of previous saved versions of your homepage, click on the change history tab at the top of the page.
Click on the green tick button with the green tick to display the version (you will then be able to decide to publish), or the thumbs up button to publish the page. Page settings and tabs There are a number of tabs in the edit page that control elements of the homepage, and of the site.
See chapter 3 for more information on site and page settings The publishing schedule tab gives you options for start and stop-publish dates for your homepage. Do not change these settings, as it can lead to your homepage being unpublished from the web. The left menu link behaviour and categories tabs are not functional.
Version 2.1
23
Site and page settings
This section gives guidance on how to edit settings that affects the whole site and settings that affect individual pages. You will also find guidelines on managing your documents and image files within Episerver. Access settings Site settings Admin site settings Page settings File management
Version 2.1
24
Chapter 3
Access settings
There are two tabs within the homepage that control elements of the whole site. These are the site settings and the admin site settings tabs. To access either of these tabs, click on your partner name (the home page) at the top of the menu in the left hand pane. Click on the edit tab at the top of the main pane.
Click on the edit tab Click on the homepage The tabs will appear across the top of the page, below the save and publish buttons.
Click on the site settings or admin site settings tab, then scroll within the main pane to edit its different elements.
Version 2.1
25
Chapter 3
Site settings
Through the site settings tab you can edit the contact details box at the left of each page, the donate today link, the site footer, the banner image and message, site disclaimers, and a few more things. Click on the site settings tab, and scroll down within the main pane to view the fields below.
Global data
The first field here holds your partner name used throughout the site, for example on the News page and in search results. You will not need to change this.
The second field lets you change the number of weeks news articles are kept in the latest news section on your news page.
Global page header

Untick the show rebranding message tick-box to remove the Age UK is the new name for Age Concern message at the top of the website.
Donate today link

Change the page linked to from the donate today button at the top of the website, through the donation form link field. We recommend linking to a page within the how you can help us section. To change the destination of the link, click on the small square button to the right of the field. See chapter 5 for further instructions on adding and editing links.
Version 2.1
26
Chapter 3
Global contact info box

The global left column key contact info box fields control the contact detail box on the left of each page of your website, below the main coloured navigation list.
Change the three text fields to change the text, phone number and link name. The link will automatically point towards your contact page.
You can untick the show key contact info box tick-box to make this information invisible on the live website (we wouldnt recommend this).
Page footer
Update the information in the footer of your website through the global page footer fields, for example your address and charity number. Type directly into the fields to edit.
Version 2.1
27
Chapter 3
Banner image and message

Banner images are optional, and appear in the wide rectangle across the top of your website. Upload a new banner image and change your banner heading through the Global banner fields.
Type directly into the banner heading field to update the text. There is a character limit to this field. Click on the small square button to the right of the banner background image field to change the banner image. Your banner image needs to be 851 pixels wide by 114 pixels high, with corners rounded to 5 pixels. Your image needs to be of a high enough resolution that it doesnt need to be enlarged to meet the 851 pixel width. See chapter 6 for further instructions on adding and editing images. We recommend using a picture that: reflects your local area doesnt have too much white, so the banner text is not obscured is fairly plain, again so the banner text is not obscured. Examples of good banner images:
Version 2.1
28
Chapter 3
Newsletter settings
These fields are relevant to you if you have the Newsletter sign-up functionality on your website. See chapter 8 for instructions on the newsletter sign-up functionality.
Disclaimers
Edit your website disclaimers through these fields.
The disclaimers apply to event page types, group pages types and general page types, all sub pages of your local directory. See chapter 8 for information on the local directory functionality. There is also a disclaimer text for external websites opening in a new window, so site visitors are aware they are leaving your site and you are not responsible for the external site. We may have populated your disclaimer fields (eg. if we set up your local directory), but if they are blank, you can add the following text: Event disclaimer - Whilst this events activities are aligned with, or contribute to, the charitys mission, it is not regulated by Age UK [brand partner] and we cannot accept responsibility for any actions taken by its members Group disclaimer - Whilst this groups activities are aligned with, or contribute to, the charitys mission, it is not regulated by Age UK [brand partner] and we cannot accept responsibility for any actions taken by its members General disclaimer - Whilst these activities are aligned with, or contribute to, the charitys mission, they are not regulated by Age UK [brand partner] and we cannot accept responsibility for any actions taken by their members Website link disclaimer - This website is not maintained by Age UK [brand partner]. Age UK [brand partner] cannot be held responsible for its contents
Version 2.1
29
Chapter 3
Admin site settings

The partners digital team have access to the admin site settings. Please contact us if you would like help with any of the below.
Google Analytics tracking code

We can enter your Google Analytics tracking code to enable analytics on your website. The code will be in this form: UA-xxxxxxxx-xx
See chapter 10 for further instructions on Google Analytics
Global header and footer

Certain elements of the websites header and footer are controlled from the admin site settings, for example the help links at the very bottom of the site, and the icons at the very top.
Local directory information

If you set up the local directory functionality or event calendar we will need to insert the number of map items and events that will appear on the page.
See chapter 8 for more information on local directory functionality
Version 2.1
30
Chapter 3
Page settings
Each page on the website has a settings tab containing metadata (behind-the-scenes information), including the pages URL (website address), and information for search engines like Google and Yahoo.
Page name in web address

This is the unique URL for the webpage, and will appear after www.ageuk.org.uk/yourtown, e.g. www.ageuk.org.uk/brighton/our-services/
This field will automatically populate from the page name, but it is possible to change it. Ensure there are no spaces, numbers or special characters in your page name, with a dash between each word.
Version 2.1
31
Chapter 3
Display page in menus

Un-tick this box if you do not want this page to list in the left hand navigation on your live site (either as a menu page, or a sub page within a section). You might want to un-tick this box for a particular page (and also remove any links to the page from other places on your site), if for example a service has stopped running, but may start running again in the future.
Information for public search engines

It is very important for you to complete these fields for every page, to ensure your pages are catalogued and listed by search engines. See chapter 9 for further information on search engine optimisation. Page name for Google - in the page name for Google etc field, type your partner name, and the name of the page, following this convention: Age UK [brand partner] | page name Eg. Age UK Andover & District | Handyperson Service Page description - in the page description for Google etc field, type a short description of the page, up to about 50 words and less than 150 characters. This should include the type of words that you expect people to type in to search engines to find your services (keywords). In page keywords for Google etc, type keywords or phrases relating to the page. The tick-box next to allow Google to catalogue this page should be left ticked, unless it is the kind of page you do not want people to search for, eg. the thank you page for your contact form.
Version 2.1
32
Chapter 3
File management
Manage your folders containing images and documents through the file management system. The folders in this section contain all of the images and documents you have uploaded to the site. You can keep files here that you wish to use on the website later. To access file management, click on the yellow filing cabinet icon in the top right hand corner of Episerver.
You will see the following action window. Double click on your partner folder in the left hand list to access your files.
Double click on your partner folder
Version 2.1
33
Chapter 3
The other folders in the list, page files, Age UK shared image library and Age UK shared image documents do not contain any images or documents that will function on your website. Double click on a folder in the central list to view its contents. Use the icons in the toolbar above to edit files; the icons in order are: Up: go up a level in the folder navigation Search for files Create a new folder Add new file Change access rights (you cannot click this icon) Rename selected file or folder Delete selected file or folder
Toolbar icons
Version 2.1
34
Creating and editing content

This section gives guidance on creating, saving, reviewing and deleting pages. Creating a new page Formatting your page Save, preview and publish Deleting pages Editing an existing page Editing menu pages Managing the news section
Version 2.1
35
Chapter 4
Creating a new page

The first thing to consider when creating a new page for your website is which pre-existing page youd like your page to sit under in the websites structure. The location of a page is important as it will determine the section your new page appears in. Once you have decided which page you would like your new page to sit under, find it in the left-hand menu in Episerver, right click on it and select Create New from the options. Select the ContentPageType page template from the create new page list by clicking on the Create button next to it.
Right-click
Version 2.1
36
Chapter 4
Within the content tab, give your page a short and meaningful name, and enter your content (ie text, images, links, etc) in all fields you wish to use.
For most pages it is best to use: The Intro Text box for a short introduction Editorial content 1 box for your main content Relevant Contact Details field towards the bottom of the page for contact details In the settings tab it is important to enter the relevant metadata (eg. page title, description and key words) that will help your listings in search engines. See chapter 3 for further information on page settings.
Version 2.1
37
Chapter 4
Formatting your page

Do not copy and paste text directly from Microsoft Word into Episerver. This will import a lot of unwanted code and formatting from Word, which will create technical problems in how the content displays. It is best to paste your content from Word into a plain text application like Notepad. This will remove all unwanted formatting. In Windows, Notepad can be found by clicking on Start menu > All programs > Accessories:
Copy and paste your text into Notepad, then copy and paste the text from Notepad into the relevant field in Episerver. You should then recreate your desired formatting using the formatting toolbar in Episerver. When creating a list, you should remove all the numbers in the list or bullet points, and then manually recreate this using the formatting toolbar in Episerver. With tables, youll also need to create these in Episerver rather than copying and pasting them from Word. (Its not possible to copy and paste tables from Word to Notepad and then Episerver.) See chapter 7 for further instructions on tables.
Version 2.1
38
Chapter 4
Episerver uses a formatting toolbar similar to that used in Microsoft Word:
Formatting toolbar
Move your cursor above a button to reveal its function. As they appear from left to right on the toolbar these are: Format menu Bold Bulleted list Numbered list Styles menu Insert image Insert hyperlink Insert anchor Insert table Show/hide HTML code
Version 2.1
39
Chapter 4
Format menu
Headings are used to break up your content page. Make sure that you use them in descending order on the page (eg H2 at the top of the page through to H4 at the bottom of the page) and do not to use too many different heading styles on the same page. Here are the heading options in edit mode:
This is how the headings will appear on your live website:
Styles menu
See chapter 5 for information on link icons and the styles menu.
Version 2.1
40
Chapter 4
Save, preview and publish
Publishing buttons
Save and preview

Click on Save when you are in the Edit tab to save changes. You will remain in the Edit tab to continue editing the page. If you click on Save and View, your changes will be saved and you will be taken to the Preview tab where you can preview your page before releasing it for publication.
Publishing your page

When you are happy with how your page looks in the Preview tab, click the Ready to publish button to release the page for publication. Changes made to your website should go live instantly, but can take up to 24 hours to update to the live site. This is due to cache resetting and publishing. If you have important information to publish you will need to plan ahead and make sure it is published on the day you need it.
Version 2.1
41
Chapter 4
Versions and undoing changes

Whenever you edit a live web page and click save or save and view, you will create a new version of the page. If you continue to edit this page without clicking on ready to publish and without leaving the page and returning to it, and click save or save and view again, this will not create another successive version of the page, and you will continue to work on the same version of the page that you created initially. If, however, your version is published (or has been marked as Ready to publish), and you then edit this version and save your changes, once again a new version of the page will be created. Also, if you edit a page, and save these changes, and then leave this page without publishing, the next time you click on this page in the left-hand menu, the version you will see previewed in the main pane will be the live version of the page, not the version you were working on. To retrieve the version you were working that is yet to go live, click on the Change history tab to the right of the Edit tab, where youll see a list of all the versions of that page, starting with the oldest, and going to the newest right at the bottom of the list:
To find the version you were last working on, scroll down the list until you find your version. You can identify your version, as under the publish, it will have the time it was last saved under the Saved column, and your email address will appear under the By column. To select a version to work with, click on the green tick next to it in the select column. If you now click on the Preview tab or edit you will be working with your selected version. By using the versions list, you can roll back to an earlier version of your page, and undo changes. NB. When you are editing a page, its really important, if possible, to establish that no one else is editing the page at the same time as you. Under Episerver more than one person can edit a page simultaneously. This can create problems, where two versions of the same page are created, and the publication of one version overwrites any changes saved in the other version.
Version 2.1
42
Chapter 4
Deleting pages
Be very careful when deciding to delete a page; once it is deleted it will not come back. Select the page you want to delete in the left hand page tree. Right click on the page and select delete. You will be asked if you are sure you want to delete the page if yes, click delete. If you have made an error click cancel.
Editing an existing page

To edit an existing page, find the page in the left hand page tree in Episerver. Click on the page you want to edit. Click on the Edit tab in the main pane. Scroll down within the edit tab to find the relevant page element.
Click on the edit tab
Select your page in the left hand menu

Version 2.1 43
Chapter 4
Editing menu pages

Menu pages are header pages for different sections of your website. You can have up to seven menu pages in the main left hand navigation. You cannot add any more menu pages to your website. Each menu page, for example Our services, can have subpages, which appear in the left-hand navigation when the relevant menu page is clicked. Each menu page should give a summary, and links to, its subpages.
Intro
Editorial content box
Half width promo box
Full width promo box
Version 2.1
44
Chapter 4
Editing different elements of a menu page

To edit your menu page, select it from the left hand page tree in Episerver, then click edit in the main pane. Many aspects of menu pages, for example the intro and editorial content boxes, can be edited in the same way as a normal content page. Menu pages have one major difference they support full-width and half-width promo boxes, as labelled in the image above. They can include an image, title, descriptive text and links.
Adding a half-width or full-width promo box

Add a promo box to a menu page through the edit tab of your chosen page. Scroll down to the Group of Promo Boxes fields (see below). Click on the + Rows buttons to add a full-width or a pair of half-width boxes.
In order for promo boxes to appear on your live site you will need to fill in the LeftHeading and RightHeading fields and add a link.
Heading Description
Add an image
Add links to sub pages
Version 2.1
45
Chapter 4
Add an image - choose an image for your promo box by clicking the small square button next to the image field. Half-width box images: these should be 285 pixels by 168 pixels high, with corners rounded to 5 pixels. Full-width box images: these should be 182 pixels wide, with corners rounded to 5 pixels. The height depends on the amount of content in the box. See chapter 6 for further instructions on adding and editing images. Text fields - type your chosen box heading and description in the text fields. Type an image description into the ImageAltText field. This text will show up when you roll over an image, and is used by screen readers. Add links - to add links to your promo boxes, click on the + add link button with the green + icon. See chapter 5 for further instructions on adding and editing links. Deleting a promo box - if you would like to delete a promo box, click on the X to the right of the box. Making menu pages visible - All menu pages will be set up when you receive your website, although some of them may be hidden from the menu. To unhide a menu page, select and edit the menu page and click the Settings tab at the top. Tick the display page in menus box if you would like the page to be visible or. You can then go back to the content tab to continue editing the page.
Content tab
Settings tab Tick the box to display the page
Version 2.1
46
Chapter 4
Managing the news section

The news section is slightly more restricted than other menu pages as the top part of the page has a different template from other pages and will always show the latest news item, then a list of other news. You can add half-width and full-width promo boxes underneath this.
If your news section doesnt look as it should, please check you have: Included an intro sentence is in the Intro Text (optional) field for all news articles Saved the mood image in the Article folder and the file name contains one word
Creating a news article

News articles should only be created underneath the News & Campaigns section in the left-hand menu in Episerver. Creating a news article is slightly different to creating a normal content page. To create a news article page: Right click on News & Campaigns in the left hand page menu in Episerver. Select Create new. Select NewsArticlePageType from the list of new page types, by clicking on the Create button next to it. The instructions for editing news articles are the same as those for normal pages with the following exceptions: E very news article must have an opening paragraph or sentence in the Intro Text box at the top. The rest of the body content should be entered in the editorial content 1 box. A ll news pages require an Article date. This will automatically display the date of creating the article but can be entered manually if you wish to display a different date. You can use the Publishing schedule tab at the top of the page and will need to edit the date in the Start publish and Created field. Delete the stop publish date in the publishing schedule tab to make sure the story doesnt un-publish after a certain date. NB. You will need to manually archive each story instructions follow.
Version 2.1
47
Chapter 4
Adding an image to a news article

The most recent news article will always appear at the top of the main News & campaigns page with space for an image, and so it is important that a mood image is added to the news article:
Before uploading, the image should be resized to 183 pixels wide by 125 pixels high, and saved as a jpg, gif or PNG file. Image titles: The file name of all images for news articles can only be one word, with no special characters (e.g. &, ^, %, etc.) for example: sunshine. To upload the image into the news article, click on the small square button in the Mood Image field in edit mode:
Upload an image
Version 2.1
48
Chapter 4
Click on your Age UK name folder and then double click on the Article folder. All news article images must be uploaded to the article folder only.
Click on your Age UK name
Double click on the article folder
Click on Add new file icon: Add new file icon
Browse to find the correctly sized image file you wish to upload, and click Open. Give the image a one word name for example sunshine. For Description, write a short and meaningful phrase describing the content of the image (e.g. Two men chatting). Click Save you have now uploaded your image on to Episerver. Click OK you have now selected this image for use your news article.
Version 2.1
49
Chapter 4
Archiving news
The Archive section is a good place to store any news articles that are no longer relevant as they can still be viewed on your website. You can move a news story to the Archive section by dragging and dropping the page on top of the Archive page in the left hand page tree in Episerver:
Drag and drop
Version 2.1
50
Links and downloads

This section gives guidance on creating links within your site, to external webpages, internal pages and content, and to email addresses. You will also learn how to upload and create links to documents. Links Downloads (documents) Icons for links and downloads Useful information to download, related pages & useful websites
Version 2.1
51
Chapter 5
Links and downloads
Links
Links are clickable buttons or words that take a site user to different content, eg. a document or another webpage.
Links to internal pages

Its important to create links on your content pages to other pages on your site. This makes site navigation easy, and helps to keep people interested and on your site for as long as possible.
Standard internal link from a content page

Type some link text in any of the editorial content boxes within a content page. The text should be a meaningful phrase, for example find out more about our shops, rather than click here to assist people using screen readers. Highlight the text, and click on the insert hyperlink icon in the editing toolbar. Insert hyperlink icon:

Insert hyperlink
Version 2.1
52
Chapter 5
Links and downloads
You will see the following link properties window. You do not need to fill in the Link help text or link opens in fields. The link will automatically open in the same window if its an internal link. In the second half of the window, under link target, make sure the page on this website aerial button is selected. Then click on the small square button next to the address field.
Page on this website Click on the small square button
Version 2.1
53
Chapter 5
Links and downloads
You will see the following select page window. Choose which internal page you would like to link to. To see all pages within a section, click on the small + sign next to the section name.
Click on your chosen page, then click the select button at the bottom of the window. The link properties window will reappear. Click OK at the bottom right of the window. Your link is now in place, and your linked text will be highlighted in yellow.
Your link will need an icon to indicate to the site user whether it is an internal or external link. More information on link icons later on in this chapter.
Version 2.1
54
Chapter 5
Links and downloads
Links to external pages

You might need to link to another website on the internet, for example the Age UK website.
Standard external link from a content page

As with the internal link instructions, type some link text in any of the editorial content boxes within a content page. Your link text should be a meaningful phrase, for example visit the Age UK website, rather than click here. Highlight the text, and click on the insert hyperlink icon in the editing toolbar. Insert hyperlink icon:
The link properties window will appear. You do not need to fill in the Link help text or link opens in fields. The link will automatically open in a new window if its an external link.
Page on another website Type URL here
Under link target, make sure the page on another website aerial button is selected. Type the URL (website address) of the external website into the address field. Make sure you do not delete the http:// prefix. Click OK. Your link is now in place, and your linked text will be highlighted in yellow. You should now style the link with the relevant icon to indicate to the site user whether it is an internal or external link. More information on link icons later on in this chapter.
Version 2.1
55
Chapter 5
Links and downloads
Anchor links
Anchor links take a site visitor to another part of the page theyre already on. These can be useful if you have a particularly long page and want to make sure people see content further down. NB: you must create an anchor and related link in the same editorial content box, eg. editorial content 1. The anchor link is made of two parts, the destination and the link. Destination - to create an anchor destination, position your cursor (click) where you want your link destination to be, then click on the anchor icon in the toolbar: Anchor icon:

Click on the anchor icon
Position cursor
You will see the following insert/edit anchor window. Type a memorable name (eg. who can use help at home) into the anchor name field, and click insert. Your anchor is now in place.
Version 2.1
56
Chapter 5
Links and downloads
Link - next, to create the link, type something meaningful where you want the link to appear. Highlight the text, and click on the insert hyperlink icon.
Insert hyperlink
The link properties window will appear. Select the Anchor (bookmark) on this page radio button, and choose your anchor from the drop-down menu. Click OK.
Your anchor link is now in place, and your linked text will be highlighted in yellow. You should now style the link with the relevant icon. More information on link icons later on in this chapter.
Version 2.1
57
Chapter 5
Links and downloads
Email links
You may want to link to an email address to encourage site visitors to contact you via email. If you type an email address directly into an editorial content box, it will automatically become a link. To create an email link from text that isnt an email address, type some meaningful text, eg. Email our information team in an editorial content box. Highlight the text and click on the insert hyperlink button in the editing toolbar. You will see the following link properties window; choose the email tab.
Email tab
Type your destination email address in the email address field, and click OK. Your link is now in place, and your linked text will be highlighted in yellow. You do not need to add a link icon for an email address link.
Version 2.1
58
Chapter 5
Links and downloads
Downloads
You may want site visitors to be able to download documents from your website, for example annual reports and factsheets. Creating a download document link follows a similar process to creating other kinds of links.
Document download link

Type the text for the link in any of the editorial content boxes within a content page. Your text should be a meaningful phrase, for example Download our annual report, rather than click here. Highlight the text, and click on the insert hyperlink icon in the editing toolbar:
Insert hyperlink
The link properties window will appear. Click on the document tab and then click on the small square button next to the path field.
Document tab
Click on the small square button
Version 2.1
59
Chapter 5
Links and downloads
You will see the following select file window. Double-click on your partner name in the left hand list of folders.
Double click on your partner name
A list of your folders will appear down the centre of the window. Double-click on the docs or documents folder. In the next window, either click on an existing file from the list, or upload a new document. Click on the add new file icon in the toolbar to upload a new document: Add new file icon:
Click on the add new file icon
Version 2.1
60
Chapter 5
Links and downloads
Click on the browse button. Browse
A new window will open asking you to choose a file to upload. Choose your file and click open. In the next window click save. The original select file window will reappear. Click on your file in the list of documents and click OK.
The link properties window will reappear. Click OK.
Your document is now uploaded, and a link created. The link text will be highlighted in yellow. Your link will need an icon to show site users that this is a download document link. More information on link icons later on in this chapter.
Version 2.1
61
Chapter 5
Links and downloads
Useful information on document links

Document naming When naming your document to be uploaded to your website, make sure there are no spaces in the file name. This will help Episerver to create a simple URL for the document, and help Google to search your site. For example: leap-leaflet or fit-as-a-fiddle-2011 File types We recommend only including pdf file types for documents on your website. Site users should not be able to edit files from your site, eg word documents. Any file types such as .xls or .pub shouldnt be used as a site user may not have the appropriate programme to open the files, and they are likely to be large so difficult to download.
Version 2.1
62
Chapter 5
Links and downloads
Icons for links and downloads

Links on your website should have icons to indicate to the site user what kind of link it is, and what will happen if they click it. For example, an external site link will open in a new page, and the external icon indicates this. Exceptions are links within paragraphs, and email address links. The following link icons are used on the partner websites:
To add an icon to a link, place your cursor and click to the left of your link, which should be highlighted yellow. Click on the styles dropdown menu in the editorial box toolbar. Scroll down in the menu to choose your icon.
Place your cursor to the left of your link
Click on the styles dropdown menu
Scroll down in the menu and choose your icon
For internal links, choose ico-internal For external links, choose ico-external For download links, choose ico-download
Please note: Episerver doesnt like it if you press Enter next to a link with an icon in editorial content boxes; it upsets the CMS and freezes the page. If you are creating a list of links with icons, create some line breaks after your link but BEFORE you insert the icon. This should hopefully avoid having to press the enter key.
Version 2.1
63
Chapter 5
Links and downloads
Useful information to download, related pages and useful websites

This is an optional section at the bottom of content, menu and news article page types, where you can display links to relevant content.
To add these links, select a page in the left hand page tree in Episerver, and click edit. Scroll to the bottom of the edit tab and you will see the related links section of fields:
Click to edit the link
To add a downloadable file, click on the + add link button next to the Downloadable files link list. A new link will start a list just below. Click on the green pencil icon to edit the link, then follow the process in the downloads (documents) section. You can also add one or more related internal pages, and one or more links to external sites. Click on the +add link button next to the relevant text.
Version 2.1
64
Images and multimedia
This section shows how to add images and multimedia to different sections of your site. You will also learn how to edit images, and the conventions for style on the brand partner websites. Inserting images Tips on images Adding video and audio
Version 2.1
65
Chapter 6
Inserting images
Adding images to content pages
On all content pages, you can add a mood image to the right of the intro text, or insert images in the main editorial content boxes:
Mood image 232x132 pixels Editorial content box image
In edit mode:
Insert mood image Insert image button
Version 2.1
66
Chapter 6
Mood images
Mood images should be 232 pixels wide, by approximately 132 pixels high. To add a mood image, click on the small square button next to the mood image (optional) field, below the intro text field. Click on your Age UK name folder (1) and then double click on the images, pics or pictures folder (2):
1. Click on your Age UK name
2. Double click on the images, pics or pictures folder
Click on Add new file icon: Add new file
Browse to find the correctly sized image file you wish to upload, and click Open. Click Save and then OK you have now uploaded your mood image to Episerver. NB. Type an image description into the Mood image alt text field, below the intro text field. This text will show up when you roll over an image, and is used by screen readers.
Version 2.1
67
Chapter 6
Adding images to the editorial content box

Click on the Insert image button in the editorial content toolbar:
Insert image button
You will see the following insert/edit image window. Click on the browse images button.
Browse images
Version 2.1
68
Chapter 6
You will see the following select image window. Click on your Age UK name folder (1) and then double click on the Images folder (2):
1. Click on your Age UK name
2. Double click on the images pics or pictures folder
Click on the add new file icon:
Add new file icon
Browse to find the correctly sized image file you wish to upload, and click Open. Click Save and then OK.
Version 2.1
69
Chapter 6
You will see the insert/edit image window again. In the image alt text and image help text fields, write a short and meaningful phrase describing the content of the image (e.g. Two men chatting). This is for the purpose of screen readers, used by visitors to the website with impaired vision.
Image alt text and help text
On the appearance tab (shown below) you can choose where the image sits on the page and you need to enter vertical and horizontal spacing for the image. Vertical and horizontal spacing is the space between the image and text. Use 10 for both as shown below. Appearance tab
Vertical and horizontal space (both 10)
Click update this image will now appear on your page.
Version 2.1
70
Chapter 6
Adding images to menu pages

Menu pages support half-width and full-width promo boxes. See chapter 4 for instructions on adding promo boxes. Promo boxes require particular image sizes:
Half width promo box image 285x168 pixels
Full width promo box image 182xH pixels
To add a picture to a half-width or full-width promo box in edit mode, select the menu page you would like to edit and scroll down within the content tab to the Group of promo boxes field. You will then be presented with fields below where you can add and align an image to the LeftImage or RightImage field for half-width boxes. For full-width promo boxes, the image field is called BoxImage. In order for half-width boxes to appear on your live site you will need to fill in the LeftHeading and RightHeading fields and add a link.
Version 2.1
71
Chapter 6
To add an image click on the small square button by the relevant field. Half-width promo box:
Add a half width image 285x168 pixels
Full-width promo box: Add a full width image 182 pixels wide
Click on your Age UK name folder and then double click on the Images folder. Click on the Add new file icon. Browse to find the correctly sized image file you wish to upload, and click Open. Click Save and then OK. With full width promo boxes you can align the image to the right or left. NB. Type an image description into the BoxImageAltText field. This text will show up when you roll over an image, and is used by screen readers.
Version 2.1
72
Chapter 6
Tips on images
All images on your website should have rounded corners to 5 pixels to fit with brand guidelines. The gallery below has information about the different sized images to use on the pages on your website.
Image size gallery

All image sizes are in this format: W x H pixels W = width, H = height. If there is no upper limit on a height or width, you will see +, if there is no specific height/width (for example on images for full-width boxes) you will see H.
Homepage images
Promo box 630x346 pixels
Editorial box 315x220+ pixels
Half width homepage boxes 295x168+ pixels
Version 2.1
73
Chapter 6
Half-width boxes on a menu page
Half width boxes 285x168 pixels
Full-width boxes on a menu page
Full width boxes 182xH pixels
Version 2.1
74
Chapter 6
Mood image for news articles
News mood image 182x123 pixels
Image editing
A good website to use for resizing and adding rounded corners to your image is a free tool called PicMonkey: http://www.picmonkey.com How to use PicMonkey Click the Edit your photo button and select the photo you wish to edit Select Crop from the options on the left hand side Select the Scale photo checkbox and type in the dimensions you wish the image to be in the boxes above For most general content pages use approximately 232 x 168 but if its for the homepage, you can size them accordingly. Drag the sliders in the corners of the image box out to select where you would like the image to be cropped Corner sliders in each corner
Version 2.1
75
Chapter 6
Click Apply when you are happy with the image On the left hand side of the page select the Frames button and then select Rounded Corners Slide the corner radius slider down to 5 and select the Transparent Corners checkbox Click apply You can now click on the Save button to save your image.
Using Flickr and Pictobrowser to create a photo gallery

A Pictobrowser photo gallery will look like this on your website:
Flickr
First you will need to set up an account on the Flickr website at http://www.flickr.com/ To upload a new set of photos, go to the homepage and click the large upload photos & videos link on the right of the page. Follow the steps to upload. Ensure you either create a new set for your photos, or add the an existing set. Flickr gives you instructions as you go along on how to do this. In order to create a Pictobrowser gallery from your photos, you will need to leave the viewing permission for each set as public. There are other online photo sharing websites capable of similar things to Flickr, for example picasa: www.picasa.google.com/
Version 2.1
76
Chapter 6
Pictobrowser gallery
Once you have uploaded your photos to Flickr, you will be able to create a slideshow gallery in Pictobroser: http://pictobrowser.com/ I n edit mode on your website, create a new page for your gallery, or make space on an existing page. We recommend placing galleries on subpages rather than header pages. In another internet tab, open the Pictobrowser website: http://pictobrowser.com/ Click on the Pictobuilder tab in the top, right hand side of the page. On the next page, enter your Flickr screenname, and click continue. Choose the set you wish to appear in your gallery. Y ou will then be given some HTML code as shown below. Its best to select all of this, then copy and paste it into notepad. NB. Your screenname may be different from your Flickr username. It will be the name that appears at the top of your Flickr page when youve signed in.
HTML code for your gallery
Now go back to the edit mode of the page you want the gallery to appear on in Episerver. I n editorial content 1, or any other editorial content box, click the HTML button in the formatting bar to bring up the HTML Source Editor box.
Version 2.1
77
Chapter 6
HTML button:
Copy and paste the HTML from Pictobrowser or your notepad into the HTML editor, and click update. The gallery will not appear in edit mode but when you click save and view or save and publish, you will have a fully-functional pictobrowser gallery.
Version 2.1
78
Chapter 6
Adding video and audio

Embedding a YouTube video
We recommend that you upload your video to YouTube (or Vimeo) first this makes embedding the video into your site easier, and quicker to stream than if you include the video as a file. Visit the YouTube website at http://www.youtube.com/ to create and account and upload your videos. To add a video to your website, click on the insert media button on your chosen page. Insert media button:
Insert media button
You will see the following media box. For YouTube videos, select Flash in the Type field.
Select flash type
Version 2.1
79
Chapter 6
You can then put the link to your YouTube video in the File URL field. YouTube will give you a long link URL through the share button below your video.
Share button
Copy the URL
Click long link
The bottom field, entitled Dimensions relates to the size of the video on your page. A good size for videos on content pages is 325 x 250. Click update. You will be able to see the video on the content page after clicking save and view or save and publish. In edit mode:
Your video in edit mode
Version 2.1
80
Chapter 6
On your site: Your video on your website
Adding audio
This is slightly different from adding a video. Ensure you have an MP3 file of the audio content. Click on the insert media button as in the instructions for embedding a YouTube video. In the Type field, select windows media. Click on the browse button next to the File/URL field. Upload your MP3 file. Save and publish your page, and you will see a small Windows Media MP3 player on your page.
Version 2.1
81
Forms and tables
This section gives guidance on creating contact forms and more complex forms for site visitors to submit information to you. You will also learn how to create content tables. Forms Tables
Version 2.1
82
Chapter 7
Forms and tables
Forms
Standard contact form
When we created your site, we set up a simple form on the contact us page. This form includes a comment field, title drop down menu, fields for name, phone number and email address, and a submit button which sends the form to a designated email address.
Version 2.1
83
Chapter 7
Forms and tables
Edit or create a form

You can create a simple or more complex form on any content page of the site, for example a volunteer application form, using the X-forms functionality. Select the page in the left hand page tree that you wish to add a form to, and click on the edit tab in the main pane. Scroll down within the editing screen, until you reach the following enquiry email form section.
Click to add more fields
The enquiry form heading and data protection message fields will have some holding text; you should delete this. The data protection field should include some description on how you will treat the data you receive. Our standard message is:
Required fields are marked with *. Your details will be kept secure and not used for marketing purposes. Untick the four check boxes if you wish to remove the default form fields. To create more fields for your form, click on the small square button next to the create form with custom fields field.
Version 2.1
84
Chapter 7
Forms and tables
You will see the following select form window, listing existing X-forms. You can create a new form from scratch, edit an existing form, or simply select an existing form to use on another page.
Click to create a new form
Click to edit a form
Edit an existing form
If you would just like the simple contact form to appear on another page, click the green tick select button next to the contact us / partner name form, and click the use button at the bottom of the window. Any forms submitted will be sent to the same email address as the form on the contact us page. Click on the green pencil edit button to edit an existing form, or click on the + create button at the top of the grid to create a new form.
Version 2.1
85
Chapter 7
Forms and tables
Make a new form

Once youve clicked the + create button, you will see the following edit form window. Give an appropriate name to your form in the name of form field and tick the Same person can send the form several times checkbox to the right. Select a thank you page that you would like people to be directed to once the form has been submitted. You can use the thank you page within your Contact us section if you wish, or create a new one.
Select a thank you page Form fields tab to edit your row Click on the table layout tab to add new rows
Click to add a row
T o insert new form fields, click insert row in the table layout tab. You dont need to insert columns for partner website forms. After inserting a row, click on the form fields tab to add content to your row.
Version 2.1
86
Chapter 7
Forms and tables
There are eight field options to choose from: text box, text area, drop-down list, radio button, check box, button, heading and horizontal rule. Click on the option youd like in your selected row, and fill in the form fields in the right hand column.
Name - each row of the form needs a name; only alphanumeric and underscore characters are allowed. If two words are needed here, they will need to be written first_second. The text in the name field is important as when you receive a submitted form, this text will be the description for each field. Therefore you should type something here that clearly indicates the field it belongs to. Heading - the heading text will be visible to site users viewing the form, so should describe what the user should type in this field. For example if you want them to provide their email address, type Email: in this field. Go back to the table layout tab and click add row to add more elements to your form. Required fields For a required field, ie. has a * next to it indicating that form users must complete this field, type <em>*</em> after the heading of your field: Email address <em>*</em>
Headings
To make a heading into a coloured title, add h4 tags around the heading: <h4>Your heading</h4>
Version 2.1
87
Chapter 7
Forms and tables
Form step-by-step
This is an example of a form with all of the available features. The following guidelines will explain how to recreate this.
Drop down list Headings Text box Text field
Radio buttons
Check boxes Button
First, follow the instructions above in the edit or create a form section, until you reach the edit form window. Within the table layout tab, click add row several times, then click the form fields tab to add content to your rows.
Form fields Table layout tab Add rows
Version 2.1
88
Chapter 7
Forms and tables
You will see the following field options in the form fields tab.
Heading - Click on the first row on the left. Click on the heading button, above. Type your preferred text into the text field, in the properties section to the right. To turn your text into a coloured heading, add h4 tags around the text, ie. <h4> your heading </h4>. Click save. Drop-down list - click on the next row, and choose drop-down list from the buttons above. In the right hand fields under properties, fill in the name (this will not be visible), and the heading (this will be visible on your form). If this is a required field, type <em>*</em> next to the heading to insert an asterisk.
Add values for the drop-down list in the options area on the right hand side, under properties. Type the same value in the name field and the value field, and click add. Click save when you are finished.
Version 2.1
89
Chapter 7
Forms and tables
Text box - click on the next row, and choose text box from the buttons above. In the right hand fields under properties, fill in the name and heading. The heading will be visible on your form, as a descriptor for the field. Click save.
Text field - follow the same instructions as for text box above.
Another heading - the next element in the form is another heading, reading how did you hear about us?, You could type this as the heading for the radio buttons that appear below, which will make the text appear closer to the radio buttons.
Radio buttons - this is similar to adding a drop-down list. Select your row and click on the radio button button above. In options on the right hand side, under properties add a new row for every radio button youd like to appear. Radio buttons are useful when you want only one option to be selected by the form user, for example in yes/no questions.
To display the buttons vertically, select the vertical option next to placement on the right hand side. Click save when you are finished.
Version 2.1
90
Chapter 7
Forms and tables
Check boxes this process is similar to adding a drop-down list or radio buttons. Select your row on the left hand side, and click on the check box button above. In options on the right hand side, under properties, add a new row for every radio button youd like to appear. Check boxes are useful when you want the form user to be able to select more than one option. To display the check boxes vertically, select the vertical option next to placement on the right hand side. Click save when you are finished.

Version 2.1 91
Chapter 7
Forms and tables
Submit button - select your row on the left hand side, and click on the button button above. Type some text in the button text field on the right hand side, under properties. In the drop-down list next to result from sending, select send e-mail. In the two fields below, enter the email address you would like to receive and form submissions. We recommend using a general inbox rather than a personal address. Type some text into the email subject field, and click save.
Version 2.1
92
Chapter 7
Forms and tables
When youre happy with the form, click on the save and close button at the top of the edit form window.
Make sure your new form is selected in the select form window, and click the use button at the bottom right. Then save and view or save and publish your page, as normal.
Version 2.1
93
Chapter 7
Forms and tables
Tables
Tables should be created in Episerver; if theyre copied over from Word or another programme, they wont display in the right format for your site. You can add a table into any editorial content box within a content, menu or news article page.
Select the page where you want to see your table from the left-hand menu on Episerver. Click edit. Click on the insert table icon in the toolbar above an editorial content box. Insert table icon:
Insert table
Version 2.1
94
Chapter 7
Forms and tables
In the insert/modify table window type your preferred number of columns and rows in the cols and rows fields. You can add more later. Click insert
A greyed out table will appear in your editorial content box. You will be able to see the table formatting options across the top of the toolbar, which include adding and deleting rows and columns. Table formatting options
Click within a field of the table to type. Once youve typed into a field, you can highlight the text and apply formatting, for example a header style from the format drop-down menu in the toolbar. To go on to an extra line within a field, DO NOT press enter, as this will upset the formatting. Instead, hold down the shift key on your keyboard, and press enter.
Version 2.1 95
Advanced functionality
This section gives guidance on adding advanced functionality to your site, including a local directory map, events calendar, custom donation page and newsletter sign up tool. Local directory Calendar Newsletter sign up page Donation page iframes RSS feeds Blog functionality
Version 2.1
96
Chapter 8
Local directory
The local directory has an interactive map feature and subpages for events, activities, groups, shops and general information. Your local directory will look like this:
Your events, activities and groups etc will be listed at the top of the page. If you have more than 6, the listings will go on to further pages. Each listing can have a location attached to it, which will appear as a blue pin in the map below. The map is interactive, meaning you can zoom in and out, and select one of the blue pins to pull up more information on the featured item.
Version 2.1
97
Chapter 8
Events, activities, groups etc:
Click here Page type
Title
To open a subpage like:
Address and contact details
Each item links to an individual sub page, with a map snapshot:
Title
Address and contact details
Description
Version 2.1
98
Chapter 8
Creating the local directory

The new local directory with map and calendar feature is intended to replace your existing local directory so you only have a maximum of seven menu tabs. This is the dark blue menu page tab in the left hand navigation you may have renamed it. If you would prefer the local directory to be a sub-page of another section, for example About us or Contact us, that is fine. If you wish to replace your existing local directory page, you will need to unpublish your existing local directory page first. Edit your existing local directory page C lick the Settings tab. Un-check the Display page in menus and Allow Google etc to catalogue this page? boxes Save and publish your page You will then be able to create your new local directory page. Right-click on your chosen section in the left hand page tree, and click create new. From the list of page types, choose LocalDirectoryHomePageType. Populate the name title and postcode fields, then save and publish. Populating the local directory with information There are five types of subpages you can add to the local directory. These are: Service page Event page Shop page Group page General page Once you create a subpage, some of its content will be pulled into the local directory front page, onto the map (if you have included a location), and also into the calendar (if you have included a date). More information on creating a calendar later on in this chapter.
Version 2.1
99
Chapter 8
Creating subpages
Service page
In the left hand page tree in Episerver, right click on local directory and select create new. Select create LocalDirectoryServicePageType from the list of page types in the main pane. T he following new page will open. Add a name, title and description for your service. (Name and title can be the same).
Name Title Description Add an address and contact information for the service. The minimum information you need to add here is the first line of the address and a postcode, so the local directory map can pick up on the location.
Add page information for Google in the settings tab. See chapter 3 for more information on site and page settings. Save and publish your page.
Version 2.1
100
Chapter 8
Event page
Create a new subpage under the local directory as you would for the service page, but choose LocalDirectoryEventPageType from the new page list. This page follows a similar process to the service page, with a few extra fields.
Event start date
Event disclaimer tick-box
Complete the name, title and description fields as described in the service page instructions above. Click on the small square button to the right of the event start date field and select the date of your event. NB: if your event is recurring or lasts for more than one day, and you wish for all of this information to appear on the events calendar, you will need to create a new event subpage for every recurrence or day of the event. If your event is associated with you as a local Age UK partner, tick the box next to Hide event disclaimer for this event. Note: there are a set of disclaimers for subpages of the local directory. These should be used if your event / group / general item is external to you as an Age UK partner. See chapter 3 for information on disclaimers. Complete the address and contact information as described in the service page instructions. Save and publish your page.
Version 2.1
101
Chapter 8
General page
Populate this page in the same way as the service page (see instructions above), with an added disclaimer tick-box. See chapter 3 for information on disclaimers.
Group page
Populate this page in the same way as the service page (see instructions above), with an added disclaimer tick-box. See chapter 3 for information on disclaimers.
Shop page
Populate this page in the same way as the service page (see instructions above).
Version 2.1
102
Chapter 8
Calendar
The calendar will display events from your local directory subpages in a clickable calendar format. Your calendar page will look like this:
Events on your selected day
Version 2.1
103
Chapter 8
Creating the calendar

Right-click on the Local directory in the left hand page tree, and click create new. Choose CalendarPageType from the new page list. Complete the name and title (these can be the same, we recommend Calendar or Events calendar). In the description field, you may want to add instructions or a description of what appears in the calendar below, something like: Instructions Click on the calendar below to see what events and activities are happening on a particular day. Scroll back and forward through the months of the year by using the month links on the top left and top right of the calendar.
Link back to your local dirctory page
C lick on the button next to the field called Local directory home page to source calendar events and select your local directory page in the page tree. The events calendar will then pull in details from the events subpages in your local directory or you can create new events. Add page information for Google in the settings tab, then save and publish the page. See chapter 3 for more information on site and page settings.
Version 2.1
104
Chapter 8
Newsletter sign up page

A newsletter sign up page will invite users to sign up for an electronic version of your newsletter. They will input details to a simple form, and these details will be stored on a database within Episerver. The newsletter sign up page looks like this:
Title and instructions
Sign up form and keep in touch text
Unsubscribe link
Version 2.1
105
Chapter 8
Creating the newsletter sign-up page

Right click on the News & campaigns page in the left hand page tree and select create new from the menu. (You can create the newsletter page under a different parent page if you wish). Choose NewsletterPageType from the list of new page options. Give your newsletter sign up page a name in the name field, for example newsletter sign up.

If you wish to add instructions on the sign up page, you could add something like this in the introduction or information editorial boxes: Fill in your details below to sign up for our monthly email newsletter. Our newsletter is a great way to keep up to date with upcoming events and news from Age UK xxxx. Save and view the page. You will then need to create a thank you page for people to be directed to once they have signed up to your newsletter. Right click on your newsletter sign up page and click create new Create a new ContentPageType Click on the Settings tab and un-tick display page in menus C lick on the Content tab and insert some content for your thank you page. Feel free to use our example text below. Name: Thank you Editorial content 1: Thank you for signing up to our newsletter. We will be in touch soon!
Version 2.1
106
Chapter 8
Sign up today form and keep in touch

The newsletter sign up page has form fields under the title sign up today, and a disclaimer text under a title keep in touch with us. The form fields will be automatically populated. The text under Keep in touch with us is default text that cant be edited. The unsubscribe link links through to a page determined by your newsletter settings, see below. We recommend linking this to your terms & conditions page, and adding extra relevant wording to the page. Contact us on partners@ageuk.org.uk if you require extra wording for your terms and conditions page.
Newsletter settings
Newsletter settings can be found in the Site settings tab within the homepage on Episerver. See chapter 3 for instructions on editing your site settings. Click on the small square button next to the unsubscribe page field to choose where the unsubscribe link points to.
Version 2.1
107
Chapter 8
Data capture
The newsletter sign up form captures data from the user and stores it in a database within Episerver. To access this data: Click on the open action window icon in the top right of the Episerver screen. In the action window, choose the Newsletter Management option. Open action window icon:
Open action window Newsletter management
The action window will display details on everyone who has signed up to your newsletter. To extract the data into spreadsheet form, click on the download CSV button.
Download CSV
Version 2.1
108
Chapter 8
Donation page
We have created a new template for a donations page, with a prominent coloured box and donate now button at the top, and feature boxes for donation options. The template layout looks like this:
Name and editorial content 1 box
Ways to donate
Other ways to donate
Gift aid full width boxes
Version 2.1
109
Chapter 8
Creating the donation page

Create a new sub-page under your How you can help us section. Right click on the how you can help us page in the left hand page tree, and select create new from the drop down menu that appears. Select DonationPageType from the list of page types. Name the page in the name field, for example make a donation.
Editorial content 1 box
Name
Image size 291x185 pixels Left hand link Donate now link
Type a title, eg. Help us ensure services remain available. Highlight the title, and select Heading 2 from the Paragraph drop down menu. Below the title, add your desired text. Make sure paragraph is selected from the Paragraph drop down menu.
Version 2.1
110
Chapter 8
Add an image - click to place your cursor at the beginning of the paragraph of text. Upload your chosen image. See chapter 6 for further instructions on adding and editing images. Align the image to the right, with alt text, and a vertical and horizontal space of 10pixels. Add the left hand link - type your desired text, eg Find out about funding and finance, underneath the paragraphs you have just written. Highlight the text and link it to your desired page. See chapter 5 for further instructions on adding and editing links Click to place cursor anywhere on the link, and select arrow-link from drop down menu Donate now link - this link is intended to point towards your online donations page, on an external website such as Just Giving, or Virgin Online donations. This link is optional. Click underneath the left hand link and type your desired text, eg. Donate now. Highlight the text and select btn-big from the styles drop down menu.
Click on the new button, and click on the insert/edit link button in the toolbar to link to your desired external site. See chapter 5 for further instructions on adding and editing links.
Version 2.1
111
Chapter 8
Ways to donate section

This is a good place to feature your main options for donating, eg. online donation and cheque donation. Create a new set of half-width boxes by clicking the + Rows button.
Complete fields including LeftHeading, LeftText, RightHeading and RightText. Create the Donate now link for the left hand full width box by selecting the Add link button, typing Donate now in the clickable text field, and pasting the URL of your online donations provider in the page on another website field. This link will appear as a large orange coloured link.
Version 2.1
112
Chapter 8
Other ways to donate section
Heading field + add link button
Button to upload image
Type Other ways to donate into the Heading field. Upload an image by selecting the button next to the Image URL field. This image should be 295 pixels wide by 180 pixels high, with 5 pixel rounded corners. Select left in the dropdown menu for Image Alignment. Add links and description text by clicking the +Add Link button. We recommend only linking to internal pages in this section, eg Leave a legacy and Donate through your salary content pages, as any links to external pages will create a larger external page link icon, rather than the small internal page link icon.
Version 2.1
113
Chapter 8
Gift Aid full-width box

Create a full-width promo box by clicking on the + Rows button under the Gift Aid section.
+ rows button
Type a heading in the BoxHeading field, eg. Gift Aid make your donation go further. Type your desired text in the BoxText field. This box has a minimum height, so this box will need about two paragraphs of text. Add any desired links in the BoxLinkList. Add your desired image by clicking the button next to the BoxImage field. We recommend that this image is a logo on a plain background. The box will automatically leave a white image above any image, which looks best with a white-background image. The image dimensions should be 182 x 200 pixels. Follow the same instructions to make any further full width boxes, eg. a Helping older people everywhere box linking to the Age UK national site. Linking to the Age UK site is optional the template is set up to include something like this but you can use the box for any content you would like to add.
Version 2.1
114
Chapter 8
iframes
You might want to use an iframe to add a Just Giving donation form or e-activist campaign widget to your website. You can add an iframe to Editorial content box 1, Editorial content box 2 or Editorial content box 3 of any page apart from the main News template page. Select the page where you want to insert your iframe from the left-hand page tree in Episerver. Click edit. Click on the dynamic content button above the editorial content box. Dynamic content icon:

Dynamic content button
In the window that appears, select iframe control from the drop-down list and a number of additional fields will appear.
Your iframe will be an embed code that looks similar to the sample e-activist code below, you will need to pick out the relevant information from the code to put in these fields. I have colour-coded the relevant information which I will match up to the fields you need to fill in. <iframe title=Care in Crisis src=https://e-activist.com/ea-action/widget?widgetId=XXX&ea. tracking.id=XXXxxxX frameborder=0 width=480 height=790 scrolling=no></iframe>
Version 2.1
115
Chapter 8
Fields in Episerver
title enter an appropriate title for your iframe. In the code above, this is colour-coded blue.
src in this field you need to insert the URL for the iframe which is the web address you want to add to your page. In the code above, this is colour-coded pink. frameborder put 0 in this field. width insert the width of your iframe. In the code above this is colour-coded green. However, this will need to be amended if it is any greater than 618 as it will not fit on the page. If the width in your code is larger than this, put 618 in the width field. height insert the height of your iframe. This is colour-coded red in the code above. If you have set the width of your iframe to 618, we would recommend setting the height to 466. iframescrolling Select no from the drop-down list. cssclass leave this field blank unless you have a css class to bind the iframe. style leave this field blank.
Scroll down in the dynamic content box and click ok.
Y ou will be taken back to your editorial content box and there will be a yellow box which contains your iframe. You will be able to see your iframe on the page after clicking save and view or save and publish.
Version 2.1
116
Chapter 8
In edit mode:
Your iframe in edit mode
On your website:
Your iframe on your website
Version 2.1
117
Chapter 8
RSS feeds
You can now add an RSS feed to your website which allows your audience to subscribe to your news page updates.
RSS feed icon
To enable your RSS feed, you first need to check that the latest news page field is set up on your homepage. Edit your homepage and click on the Site Settings tab.
Site settings tab
Scroll down to the News page heading and see if the Latest news page field is connected up to your news and campaigns page. If the field is blank, click on the button with the three dots and select your news and campaigns page from the page tree. Select your news and campaings page
Save and publish your homepage.
Version 2.1
118
Chapter 8
Next, to activate the RSS feed on your website you need to edit your main news page. Edit your news page and click on the RSS Settings tab.
RSS settings tab
RSS Settings fields
RSS Enabled check this box to activate your RSS feed. You can uncheck this box if you wish to disable the RSS feed.
RSS Channel Title this will be displayed on your feed page. Put you local Age UK name in this field, for example, Age UK Bristol RSS Channel Link click the button with three dots and select your news and campaigns page in the page tree. RSS Channel Description insert a description for your RSS feed, for example, Keep up to date with the latest news and events from Age UK XXXXXX. RSS Channel Item Text Length put 300 in this field. RSS Channel Disabled Message in this field add the following message and it will display if you decide to disable your RSS feed: Unfortunately there is no RSS feed available on this site. If there is a particular news article you dont want to appear in the RSS feed, edit the news article page and tick the ExcludeFromFeed check box. Please note news articles in your Archive section will not appear on your RSS feed.
Version 2.1
119
Exclude from RSS feed
Chapter 8
Blog functionality
Our blog functionality allows you to add a personal or team blog to your website. There might be a member of your Information & Advice team who would like to start a personal blog, or you could start a central blog that can be updated by different people in your charity. The only difference between the two blog types is that a personal blog will show an image and About me section on all posts you create.
Personal blog landing page
Image
Blog summaries
Short description Archive posts Tags so people can find related posts
Team blog landing page
Short description Archive posts Tags so people can find related posts Blog summaries

Version 2.1 120
Chapter 8
Setting up the blog landing page

If you are not currently using all seven menu pages, you can create your blog as a top-level page. You can then contact us and we will format the page so it uses one of the brand colours not yet being used on your website. If you are already using all seven menu pages you will need to decide which section you would like your blog to sit in. Select the section where you would like your blog to sit. Right click on this page in your page tree and select Create new. Select to create a new [Blog]personal start or [Blog]team start page type. Next, fill in the fields on the page to relate to your personal or team blog.
Personal blog
Name Enter the name of your personal blog.
Writer Enter the name of the person who will be writing blog posts. Image Upload an image for your personal blog. The size of your image needs to be 170 x 205 pixels. Details Insert a short About me description about the person who will be writing the blog. This will appear on every post you create for your blog so keep it short and simple. Summary Text Length This relates to the amount of text from each post you create that will be shown on your blog landing page. This is defaulted to 500 characters so you can leave this field blank. Max Count This field relates to the amount of blog posts that will appear on the blog landing page. This is defaulted to 50 posts so you can also leave this field blank. Disable Anonymous Comments You can disable anonymous comments on your blog posts if you wish. Show Print/Email/Sharing links Tick this check box so people are able to share your blog on Facebook and Twitter easily.
Version 2.1
121
Chapter 8
Team blog
Name Enter the title of your team blog.
Main body Insert a short description about your blog and who will be posting. This will only appear on your main team blog page. Summary Text Length This relates to the amount of text from each post you create that will be shown on your blog landing page. This is defaulted to 500 characters so you can leave this field blank. Max Count This field relates to the amount of blog posts that will appear on the blog landing page. This is defaulted to 50 posts so you can also leave this field blank. History Length This relates to the number of days your posts will appear on the main blog page and is defaulted to 30 days from the date you publish your post. To determine this it is worth considering how often you plan to post on your blog. For example, if you plan on posting once a fortnight you might want to set the history length to 60 so there will always be four posts on the main page. Or if you plan to post every day you could lower the history length to 10 days. Show Print/Email/Sharing links Tick this check box so people are able to share your blog on Facebook and Twitter easily. Click on the Settings tab and fill in your meta data for search engines. See chapter 3 for more information about page settings. Save and publish your blog page. You will notice that two pages called Dates and Tags automatically generate under your blog page in your page tree. You can find all blog entries underneath the relevant month in Dates and all tags you create will be underneath Tags.
Version 2.1
122
Chapter 8
Adding posts to your blog

Right click on your blog in the page tree and select Create new. This will automatically bring up a new blog post page which is the same for personal and team blog entries:
Fill in the name and writer fields for your post. The main body field is for your blog entry. You can style the content in this box in the same way as a normal content page with sub-headings, links and images.
In the Tags field you can insert relevant tags for your post. Once you have published your first post your tags will be saved in the existing tags list. You can then select tags from this list in future.
Select tags from the existing tags list Type in the relevant tags for your post
T ick the Show Print/Email/Sharing links check box so people viewing your blog post are able to share it easily. Save and publish your page to add it to the blog.
Version 2.1
123
Chapter 8
Tag cloud
When you add tags to a post they will be saved in the tag cloud. The tags you select for individual posts will be displayed on the page. All of the tags you use will be displayed on your personal or team blog landing page and you will need to change the size of these tags manually so the more important tags are larger.
In your page tree you can view all of the tags youve used under the tags page. You can enter a font size for your tag between 1 (largest) and 5 (smallest). Tags are automatically defaulted to be size 2.
All blog tags sit underneath here
Click on the relevant tag in your page tree and click edit. Save and publish the tag.
In the Tag Cloud Field enter a font size between 1 (largest) and 5 (smallest).
Version 2.1
124
Chapter 8
Comments on posts
Blogs are a great way to encourage interaction on your website as your audience can read your posts and respond by leaving a comment at the bottom of the page. Its important to manage the comments posted on your blog so you can reply and interact with anyone asking questions and remove any inappropriate comments. If you need any help with this, you can email us at partners@ageuk.org.uk
Comment on your live website
Please note: You must ensure that your terms & conditions are up-to-date with the following point. Please check that the sentence below is included in your terms and conditions page it should be point 15 Age UK [BRAND PARTNER] has the right to remove any material or posting you make on this Site at its discretion. You can view any comments on your posts by expanding your blog name, Dates and then the relevent post in your page tree.
Comment on the welcome to my blog post If you need to delete a comment that has been posted, you can do so by right clicking on the comment and selecting Delete.
Version 2.1
125
Useful tips and common problems

Pointing URLs Search engine optimisation (SEO) Using social media platforms to raise awareness and build community How to use Google Analytics Editorial policy Common questions Glossary
Version 2.1
126
Chapter 9
Pointing URLs
URLs are website addresses, for example www.ageukanytown.org.uk If you have a URL still pointing at your old website, then this means people can still find your old website through a search engine. This is confusing as there is then a choice of two websites for your organisation one up-to-date, and one with old information. If your old website is no longer online and you havent yet pointed an existing URL to the new website, then the URL will effectively be pointing nowhere. This will negatively affect your search engine results, and will be off-putting for people who might still be using this URL.
How to point your URLs to your new website

You will need to update the IP address that your URL is pointing to, through your URL provider. The IP address is the unique code which directs a computer towards the right website. Your URL provider will be an internet company such as www.123-reg.co.uk, or www.1and1.co.uk. They will allow you to log in to their website in order to change URL details such as the IP address. This will be slightly different for each URL provider, but their customer support should always be able to help you find what you need. The IP address you need to point to is: 195.3.185.90 This is the same for each partner site, and also for the national Age UK website. Our server can recognise which URL a visitor has come in from, and will point them on to the relevant partner website.
If you dont know your URL details

If you dont know where or when your URLs were purchased, you can look this up via the nominet website, at http://www.nominet.org.uk/other/whois/detailedinstruct/ Simply type your URL, without the www. at the beginning, into the WHOIS field on the right hand side of the page.
You will be given details including registrar which will tell you who your URL provider is.
You should then be able to go to your URL providers website, and ask them if you can access the settings for your URL. Then point the IP address as described above.
Version 2.1
127
Chapter 9
Search engine optimisation (SEO)

Over 70% of online user journeys start with a search, and most users dont look past the first page of results. A high ranking on a Search Engine Results Page (SERP) is a very important factor in driving high volumes of relevant traffic to your website.
Content optimisation
Your websites content is a key element of a search engines algorithm for ranking pages. It helps the search engine determine how relevant and useful a page will be to users. It is important to develop your content so that it is relevant, useful and SEO friendly. When users search for something on the internet they type a keyword or series of keywords into a search engine. It is essential that the content and copy that you use in your site is written with these likely keywords in mind, so that your site appears in the users search engine listings.
Three main things to keep in mind when developing your keywords:

Relevancy Make your keywords relevant to your site and its content Localise as much as possible and take advantage of geographical specifics Eg. you may wish to optimise for the phrase toenail cutting service. This will produce search results, but users in your areas will probably be looking for local services, so they may search for toenail cutting service Cumbria or something similar.
What keywords should you use?

Choose keywords that people will actually use to search for your services. Think carefully about terminology and phrases people actually use and make sure your keywords are geared towards these. Jargon and unfamiliar words should be avoided. Always think of alternatives, eg. toenail cutting service could be referred to as chiropody, podiatry or footcare for users searching for the same thing.
Competition considerations
There will be competition for keywords in certain sectors, and this can make it very difficult to achieve good optimisation. Stand out from the crowd by using terms that will differentiate you as a local organisation and provider of local services.
Version 2.1
128
Chapter 9
Other ways to improve your search rankings

Encourage trusted sites to link back to you, eg. local government and education websites. This will improve your reputation on the web, and your search rankings. Make sure your site is easy to navigate, so users spend time on your site and are encouraged to stay and to click through to more pages. Implement keywords and phrases into page content and into the metadata for each page. Edit metadata through the settings tab of each page:
See chapter 3 for more information on site and page settings.
Version 2.1
129
Chapter 9
Using social media platforms to raise awareness and build community

Here are a few hints and tips to get you started with using Facebook and Twitter to build an online community of support for your organisation. B e human think less like a brand and more like yourself. Youll be much more engaging this way, more authentic and therefore more trusted. Speak in an authentic human voice: your own. Keep it conversational dont think of broadcasting to an audience, think of having a conversation with a small group of people and they will join in. Dont even try to answer all the questions you raise the internet is a place for ongoing discussion. Loose ends encourage this. Be generous; link out point at other stuff you think is good. This is how networks of trust are formed. This not only serves you well, it also serves those who follow you or visit your pages. They are interested in what you are interested in thats how they found you. Only share things with your community if you genuinely think they will find them useful if it feels like spam, dont do it. Comment on other peoples blogs/twitter streams etc youll create stronger ties and allow their readers/followers to discover you and your content. Be useful dont just link to your own stuff or sites you plan to promote, do it because its relevant or useful. Think about the people you are intending to serve. Respond to comments as fast as you can and with humility the conversation is not owned by any one source or point of view, it belongs to us all. Further guidelines and support materials to help you use social media and other digital marketing tools are in development. In the mean time if you would like assistance with any particular questions that you have please email partners@ageuk.org.uk
Version 2.1
130
Chapter 9
How to use Google Analytics

Google Analytics is a free, powerful reporting tool. It will show you traffic reports to and from your website and can help you to understand what is working and not working for your website. For Google Analytics to track your website, the Google tracking code needs to go into your site. You need the part of the tracking code that looks like this: UA-xxxxxxxxxx-xx The code goes into the Google analytics tracking code field within the admin site settings tab of the homepage. See chapter 3 for more information on admin site settings
Google tracking code goes here
See chapter 10, appendix 1 for a more detailed guide on using Google Analytics.
Version 2.1
131
Chapter 9
Editorial policy
Writing copy
Writing for the web is slightly different from writing for print. The basic guidelines for most copy apply, ie. write as clearly as possible and make any factual content clear and precise. Before you start, consider who your main audience is. This may affect your tone of voice and levels of explanation. Decide on what you want to say and achieve.
Tone of voice
Simplicity avoid using 20 words when half a dozen will do. The message will be more direct and easy to understand. Get to the point quickly to keep the readers attention. Clarity for longer text, use section headings and subheadings. Break up text into paragraphs with a main point each. Use a bullet or numbered list if you have three or more short points, or a list.
Write for your audience

Older people, visually impaired users and people with learning or cognitive difficulties have different online reading styles to other groups. Users in these groups read word-for-word rather than at a glance, and spend considerable time understanding multi-syllabic words. As they focus more closely on words, they can have a narrower field of view so can miss things going on around the main body of text. Consequently, one should write for these users with a simple style, and keep navigation and signposting clear and straightforward. Prioritise information, and try to minimise the risk of users losing their place after scrolling down.
Further information
For more information on tone, style, correct use of images, the Age UK brand etc, please see the Digital guidelines for local Age UKs document. If you dont have a copy of this, please email partners@ageuk.org.uk
Use of capitals
All titles of publications (books, reports, etc) and films have the first letter capitalised. All subsequent letters take lower case. This is for accessibility reasons (capital letters are more difficult to read).
Version 2.1
132
Chapter 9
Editorial policy cont.

Headings and sub-headings
Headings within your work should be lower case except for the initial capital. However, if a capital letter is needed to be grammatically correct such as a proper noun use it. For example: How much will your pension be? Applying for Income Support Why we hate Mr Bean Do not use full stops at the end of headings, and avoid brackets and dashes. Keep headings short and to the point.
Sub-headings
Only the first letter of each sub-heading should be capitalised except where a capital is needed to be grammatically correct such as with proper nouns. For example: The quick brown fox jumped over the lazy dog How to get out of Ipswich in a hurry
Spacing
There should be a single space between a full stop and the first letter of the next sentence.
Abbreviations
Omit full stops in abbreviations and contractions, such as: Eg, ie, etc ed, p, pp, ch kg, mm, am pm, mph Dr, Mrs Eg, ie, etc: these abbreviations should be preceded with a comma, ie like this. If they come at the end of a sentence they should be followed with a colon. Avoid abbreviations such as dept, for department. Abbreviations that are not well known should be spelt out in full on their first appearance, giving the abbreviated form in brackets afterwards. The abbreviation may then be used throughout the text. For example: The Commission for Social Care Inspection (CSCI) You do not need to spell out well-known abbreviations, such as NHS, VAT or BBC.
Version 2.1 133
Chapter 9

Apostrophes
Do not use apostrophes with standard contractions such as flu, phone. Do not use apostrophes for plurals. For example: 1980s (not 1980s) MPs (not MPs) He was in his 60s (not He was in his 60s) CDs (not CDs)
Contact details
Wherever possible write out all address with a new line for each part, and without punctuation. For example: Tavis House 1-6 Tavistock Square London WC1H 9NA Within text, where punctuation will be required, use comma to delimit an address. For example: Submit form to Campaigns team, Tavis House, 1-6 Tavistock Square, London, WC1H 9NA
Dates
The day comes first, then the date in figures, then the month and the year. Use the following styles: 9 October 9 October 2006 Monday 9 October 2006 October 2006 Exception: Where a date is written out in full within the copy i.e. Join us on the 9th of July, rather than Join us on 9 July - a date suffix eg 1st, 2nd, 3rd, etc can be used when it makes the paragraph sound more natural.
Version 2.1
134
Chapter 9

Numbers
All numbers representing important factual information should be written numerically. However, if a number from one to nine forms part of a narrative, spell it out. For example: Only 5% of men can spell. Two of our campaigners finished in the top 100 in the national egg and spoon championships. People in their 20s and 30s are unlikely to be thinking about retirement. Write out fractions like two-thirds, three-quarters. The percentage sign should be used with numerals, but if a number is spelt out per cent (two words) should be used.
Phone numbers
Phone numbers should take the form of the dialling code followed by a space and the rest of the number split into three and separated by single spaces.
Quotation marks
Use single quotation marks when reporting speech, for example: Older people should be respected, said the minister. You can also use single quote marks to express incredulity, for example: Five banks offer this so-called low-interest loan to older customers Use double quotation marks for quotes within quotes, for example: Keith said, My holiday was not as relaxing as the brochure claimed. Do not put quotes in italics.
Times
Use am and pm without full stops or spaces, and always include minutes, for example: 8.00am, 10.45 - 11.00am, the office closes at 5.30pm.
Titles
Use an initial capital for the first word of the title and an initial capital for the first word of the subtitle, but the rest lower case (except where capitals are grammatically required).
Paragraphs
The website is a visual medium. People see the content before they read it, so help them by keeping your paragraphs short. Paragraphs should be between 20 and 35 words.
Version 2.1 135
Chapter 9

Ampersands and other special characters
Do not use ampersands or other special characters for anything other than where they appear in proper nouns such as foreign or organisations names. For example: Marks & Spencer Antoine Dnriaz
Italics
To comply with accessibility requirements, italics should never be used. In Episerver this font style is not available!
Downloadable files/resources
These should take the form of a descriptive link followed by the file type and size in brackets. For example: Please read the attendance allowance advice leaflet (PDF 145 KB). As the abbreviations for file sizes are ambiguous use only KB and MB for them.
Links
Links should be descriptive and not be followed by a full stop. For example: To find out more visit the sponsor a grandparent page of the Age UK Dudley website Never use non-descriptive phrases such as click here to indicate links.
Version 2.1
136
Chapter 9
Accessibility and PDF documents

Accessibility refers to the process whereby information on the web is adapted so that as many people can access it as possible. Part of this applies to technology, so that a website is tested across a range of browsers (e.g. Internet Explorer or Firefox) and operating systems (e.g. Mac or Windows). Another important part of accessibility, is about ensuring people with impaired vision and motor function can still access the information on our websites. People with impaired vision can use a screen reader to read the information on their computer screen back to them. With text, this is a relatively straightforward process, but for images, less so. This is where alternate text or alt text, for short, comes in. Alt text is added to an image to describe what the image shows so that when a screen reader comes to the image, it will read the description set out in the alt text to convey the contents of the image to the partially sighted person using it. This is why alt text is really important on the Age UK website, to ensure we achieve high accessibility standards. PDF documents should generally be avoided as they are less accessible. Download documents such as PDFs and Word documents are however permissible, when its not possible to recreate the information in the download document in the form of a web page and/or that isnt appropriate, as the website is being used just to distribute printed materials (NB people tend not to read pdfs online).
Version 2.1
137
Chapter 9
Common questions
I cant log in to Episerver
The log in again button does not work once you have logged and so if you wish to open Episerver again, you will need to do this in a new window. Your login details are case sensitive and it is important that the details are typed in exactly as provided. If the details are typed in incorrectly more than three times, the account will lock. Please make sure you are using the correct login URL which is: http://bp-editorial.ageuk.org.uk/ui/edit/admin If you are still unable to login or have locked your account, please email partners@ageuk.org.uk to have your password reset.
When I add an extra tab to the left hand page tree, it doesnt display properly
The template only allows you to have seven menu pages. Adding any more menu pages will cause the page to display black and blank out when clicked on. The seven menu pages will be set up when your new website launches, any that are not being used will be hidden from the menu. You can make a menu page display in the left hand page tree by editing the page and clicking on the settings tab. You will then need to click the Display page in menus box.
Tick the display page in menus box
Version 2.1
138
Chapter 9
How do I archive news articles?

To archive a news story, you can drag and drop the page into the Archive section. You can do this in the left hand tree when in edit mode.
Drag and drop into Archive
Who should I contact for help with my website?

For any help with your website, email partners@ageuk.org.uk
How do I point a URL (website address)?

To point a URL to your new website, you should log in to the website of your URL provide. There will be a dashboard for you to edit settings and you will need to change the DNS settings section, there will be a field named IP address. This is what you change to the IP address which is 195.3.185.90.
Version 2.1
139
Chapter 9
Glossary
URL
A URL is your website address. We will be providing you with a URL for your website such as: www.ageuk.org.uk/yourtown You will be able to set redirects up for your old website address and any others that you own. This means that anyone who types or searches for these will be redirected to your new website.
Episerver
The system you will use to edit and update your new website. You can access Episerver using your login details at this address (best opened in Internet Explorer): http://bp-editorial.ageuk.org.uk/ui/edit/admin
CMS
A CMS (Content Management System) is the system used to manage the content of a website. Episerver is the CMS you will use to edit and update your website.
Accessibility
Local Age UK websites have been designed to ensure that they are usable by people of all abilities and disabilities.
Screen reader
A screen reader is an application often used by people who have limited vision and attempts to identify and interpret what is being displayed on the screen. It is important that alt tags are added when inserting images to your website in order for screen readers to interpret them.
Version 2.1
140
10
Appendices
Google Analytics user manual
Version 2.1
141
Chapter 10
Appendices
Appendix 1 - Google Analytics user manual

A step by step guide to setting up a Google Analytics account for your local Age UK website
What is Google Analytics?

Google Analytics is a free, powerful reporting tool. It will show you traffic reports to and from your website and can help you to understand what is working and not working for your website.
Creating a Google account

Go to www.google.com In the top right hand corner click the sign in button. Just a bit further down the page is a box with Dont have a Google Account? Create an account now.
Version 2.1
142
Chapter 10
Appendices
Logging in
Visit http://www.google.com/analytics and login with your username and password. In the first instance you will need to sign up for analytics on your account. To do this click on sign up for Google Analytics The new account signup screen will appear. In the websites URL field, type the URL we gave you, which will be: www.ageuk.org.uk/yourtown Its very important to use this URL rather than any other you purchased, as analytics results from this URL will track traffic coming in from all sources and URLs. Complete your account name, and click continue.
Read and accept the terms and conditions on the next screen, then click create new account. The following tracking instructions will appear. Leave the default a single domain option selected. Step two will ask you to paste this code on your site you DO NOT need to do this. Click save and finish.
Version 2.1
143
Chapter 10
Appendices
You will then see the following overview screen. The required tracking code, which needs to be inputted onto your site, is circled.
This short code needs to go into the Google analytics tracking code field in the admin site settings tab on your website. See chapter 3 for more information on admin site settings.
Version 2.1
144
Chapter 10
Appendices
Google Analytics reports

Once you log in youll see the dashboard, which contains snapshots of several reports generated by Google Analytics.
These reports may include visitors, traffic sources, map overlay and content. You can move them around, add new reports to the dashboard, or remove ones you dont like.
Version 2.1
145
Chapter 10
Appendices
Near the top youll see a section called Site Usage. It includes the following metrics:
Site usage
Visits: The number of visits to your site during a given time period. Page views: The number of pages these visitors viewed. Pages/visit: The average visit in terms of page views.
Bounce rate: The percentage of people who only visited one page on your site before they bounced somewhere else. (This can often seem deceptively high, but many people will get to your site and realize that it wasnt what they were looking for, or you may have a popular image indexed by Googles Image Search that generates a lot of drive-by traffic. Avg. time on site: The average amount of time a visitor spends at your site. % of new visits: The percentage of new visitors to your site as compared to all visitors. You might want lots of new traffic, or you might want to generate repeat visits, driving down this percentage. By default, Google shows you the last 30 days of activity. You can change this setting, or even compare two different date ranges, for example August 2008 versus August 2007.
Version 2.1
146
Chapter 10
Appendices
Click on the date range box found in the upper right corner and change the Comparison dropdown from Site to Date Range and entering the appropriate dates. To go back to a singular date range just reverse the process.
Google Analytics will overlay the reports for your viewing pleasure. This helps you get a quick comparison of whether your traffic is trending up or down.
Version 2.1
147
Chapter 10
Appendices
Top seven reports

There are dozens of reports and hundreds of ways to slice and dice them; here we outline five that might also be useful to your organisation. They can be found by navigation the left hand page tree. Please note that you can also use the date comparison on any of these reports as well. Note: on every page theres an About this Report link in the left hand column that will give specific information about the report youre viewing. Report 1 - Visitors overview This is an essential report that tells you how much traffic you have had to your site, how many page views, the average length of visit and your bounce rate. You can also find out how much new traffic youre getting, what size monitors your visitors have, whether they use broadband or dial-up, and much more.
Report 2 - Traffic sources overview Where did your visitors come from? Search engines, other Web sites or did they type your URL into their address bar? This report breaks it down and tells you your best traffic sources. It may also show you where you need to put more energy into developing more traffic.

Version 2.1 148
Chapter 10
Appendices
Report 3 - Referring sites (under traffic sources) These are the sites visitors were at before they arrived at your site, not including search engines
Report 4 Keywords
What words did visitors use at Google and the other search engines to find your site? This report will tell you, and give you detailed info on how valuable each keyword is in terms of how long visitors spend at your site, how many pages they view, and even whether they convert by filling out a contact form, signing up for an email newsletter or buying something from your store.
Version 2.1
149
Chapter 10
Appendices
Report 5 - Top content These are the sites visitors were at before they arrived at your site, not including search engines
Report 6 - Map overlay
Found under the visitors tab, this map of the world will show you where your traffic is coming from. By clicking on any country you can further drill down. In the US you can drill down to the state, and also by city.
Version 2.1
150
Chapter 10
Appendices
Report 7 - Site overlay This tool allows you to see what percentage of visitors clicked on which links on any given page on your site. You might be surprised to discover that no one is clicking on your free download, or that people are jumping right to the contact form from your home page. By clicking on any of the percentage bars you can get additional information if youve set up Google Analytic goals. Visit http://www.google.com/support/analytics/?hl=en for more information.
Version 2.1
151

Website Training Manual

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Website Training Manual

Uploaded by

Copyright:

Available Formats

Website training manual

The guide to editing your local Age UK website

Version 2.1 revisions

Accessing the CMS and editing your website

Navigating around Episerver

Select page to edit in left hand menu

Editing the homepage

Editing the homepage

Click on the homepage

Click on the edit tab

Editing the homepage

Saving and publishing

Editing different elements of the homepage

3. Box text (optional)

4. Box more link text

5. Box more link

Editing the homepage

Editing the homepage

Add a new image

Editing the homepage

Click on your chosen image

Editing the homepage

Editing the homepage

Toolbar Header Image

White panel Change the colour

Editing the homepage

Highlight and edit the content

Click twice to see a dashed border

See chapter 5 for further instructions on adding and editing links.

Editing the homepage

See chapter 6 for further instructions on adding and editing images.

Editing the homepage

Select colour Add image

Editing the homepage

Editing the homepage

Editing the homepage

Useful information to assist the management of the homepage

Site and page settings

Site and page settings

Site and page settings

Global page header

Donate today link

Site and page settings

Global contact info box

Site and page settings

Banner image and message

Site and page settings

Site and page settings

Admin site settings

Google Analytics tracking code

See chapter 10 for further instructions on Google Analytics

Global header and footer

Local directory information

See chapter 8 for more information on local directory functionality

Site and page settings

Page name in web address

Site and page settings

Display page in menus

Information for public search engines

Site and page settings

Double click on your partner folder

Site and page settings

Creating and editing content

Creating and editing content