Perfect web page

This is a piece of text content that should be placed in the top row when you're in layout view. To create the look we've created on this page:

1. Create a piece of text content and assign a thumbnail image.
2. Add your heading into the 'headline' of the text content
3. Style this piece of text content using 'Barts - banner default (warm or page style)'

Other options available to you

If you are creating a hospital page, children's page or recruitment page, you will also need to attribute a page style.

Create the page style by choosing style > style at the page level (the first screen you see when choosing a page). There is a style for each hospital, recruitment and children's.

Always think about accessibility

• One in 30 people live with sight loss in the UK
• Screen readers, magnifiers and recognition software can help people access online content
• This demo shows how screen readers work (skip to 6 min 30)

Top tips

• Avoid ‘click here’, ‘on the website’, ‘read more’ hyperlinks. A good test is to see if you can understand what the link is about when read in isolation. If the hyperlinks were read out in a list would they make any sense?
• Reading age is important to consider. There are lots of online platforms to check it for you: Microsoft can rate your readability in Word and Outlook or try the Hemingway Editor
• Colour contrast and font size can make a big difference
• Avoid italics, underlined copy, CAPS and justified text – all make information harder to read (and look a bit dated)

Readability, readability, readability

• People read more slowly and less accurately online than in print
• Most people don't read every word and instead skim through the text
• Don't waffle - get the who, what, why, when, where in at the start. Website heat maps show that most people don't scroll down.
• Subheadings (headings 2, 3, 4, 5 and 6 in the CMS text editor) are your friend - using them will really help readers navigate your content. 
• Bullet points and numbered lists make it a lot easier to digest content, which is why the Buzzfeed format is so popular
• Use short sentences and short paragraphs – GOV.UK has a limit of 25 words per sentence
• Use words your readers use and remember the average reading age in the UK is 9

We are visual people. Photos, gifs and videos improve engagement. Formats like the Mail Online are so popular because they're very image-led. 

Writing your content

• Less is more. What do patients, potential employees and the public really need to know?
• Does it already exist? Other organisations may have already published it. Think about version control.
• Text – does it make sense? Is the language friendly? Are we using the word “we” instead of Barts Health etc. Is it using our communications style guide [pdf] 4MB? Is it “digital-friendly”?
• Have you incorporated key search terms?
• Links – are they working? Are they in the right place? Are we referencing documents in the media manager that need a link adding eg patient information? Can we help users by linking to other pages on the site? Are links embedded within appropriate text – eg no published URLs in full, email addresses or ‘click here’. Would it be better to style it as a call to action (eg the page links in borders on our work with us page)? 
• External links – need to open in a new window or tab. You do this in 'target' when you add your URL.
• Unless there is an excellent reason for doing so, content should be listed alphabetically. This enables everyone to understand the structure as it’s a common language.
• Consider what your page looks like for people with visual impariments. For more information on creating an accessible page, you can watch this film.

Managing the media manager on the CMS

• Does the document already exist? Other colleagues may have already uploaded the same document. Think about version control. Always replace the document with an updated version rather than add it as a separate document to keep the link active and the media manager tidy and up to date.
• Save documents in the appropriate folder for ease of access eg media > 02 External Barts Health website > 01 Our services > Patient information leaflets
• Ensure it is named appropriately so that it can be accessed via a search. This is particularly important for documents as the name is listed in full when someone uses the search function. You need to add a plain English description and keywords for search optimisation.

Text content naming structure

• Name of page: name of text content headline eg Perfect webpage: writing for the web tips. This makes it easier to find and keeps content areas together.

Use boxes and accordions for your pieces of text content

Use boxes and accordions to present supporting information for your page. Separate your information into logical sections so that people can quickly access the information they need.

This page uses two different box options: a St Bartholomew's box (at the top of the page) and a Newham 'split' box (second box from the top).

List accordions alphabetically by title unless there is an exceptional reason not to - this is because everyone understands an alphabetical list, whereas other ordering may be subjective to you as a publisher.

To style a box or accordion, there are specific style options for each hospital. If it is a general page, you can use a mixture of box colours but use Accordion - NHS Blue for accordions.

On hospital-specific pages, you can use:

• Barts - Accordion (hospital name)
• Barts - Blocks - text image left or right (hospital name)
• Barts - SPLIT - text image. You have both left and right options for each hospital.
• Maternity - text image right. This has a white background.

Use headings

Use headings to chunk text up so that it is easy to read; do not use bold. Formatting a heading correctly allows screenreaders to jump down the page and automatically assigns it the right spacing and colour. This doesn't happen when you just use bold. You can change the heading in the text editing area using the dropdown that defaults to the word 'normal'. 

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Normal

Headings within a box

The boxes (for each hospital) have been designed to automatically apply a certain font style. This includes a coloured heading, a larger subhead and normal body text.

To apply the coloured heading, select your text and choose heading 2.

Your subhead should be written in a way that contains the most important information your patient needs. You don't need to apply any heading formatting to this text - it happens automatically as long as you've created a new paragraph.

Your normal body text will appear automatically from the third paragraph.

Split boxes are styled manually using appropriate headings.

Use a call to action

This page uses a call to action in the green box to signpost to the digital team. You should use this to signpost people to important webpages, emails or documents.

To create this, when you add this link, select advanced from the URL window. Under stylesheet classes, type the letters cta This will automatically apply the border to the text with the URL.

Use a pull-out quote

Is there a key message or quote you would like to pull out? Use a pull out quote by clicking on the quote marks in the text editor.

It pulls out the whole paragraph, so keep it restricted to a single quote or key message.

The most accessible way to present information is in plain web text format. However, there are still occasions when you need to upload a document.

These may be patient information leaflets or a form that people need to complete, but can't be made into an electronic form. For example:

Aminoglycoside antibiotics[pdf] 242KB

Making your forms searchable and accessible

Note the format of how this document appears: the name, extension and file size helps readers know what they will be downloading. Luckily, these are automatically added when you link a document into a piece of text content - so please don't remove them.

Follow our guide to uploading a document to the CMS

By helping people access the things you know they want quickly will make them very happy customers.

These boxes are signposts to other pages you may wish to link to. 

This is called a menu placement. To create one, follow these steps:

1. Under publishing in the left hand menu in the CMS, click on the plus next to menu placement
2. The name is what the menu placement is called in the back end. Please follow our naming structure by calling it the name of the page, colon, name of the menu placement (eg this one is called perfect webpage: page options).
3. The headline is what will appear on the front end - although you will normally hide this (more on this later)
4. Choose the site you want to publish to (in this case it would be Barts Health NHS Trust)
5. The type is manual
6. Choose the pages you want to add to the menu placement. There may be multiple pages with the same name, so make sure you choose the right one. To do this, click on the magnifying glass, type in the name of the page again and click filter. Click on the two overlapping boxes - this will give you the details of the page, such as the site it's linked to. When you have found the one you want to use, click on the name of the page. This will add the page to your menu placement.
7. Repeat for each of the pages you want to link to.
8. Click publish to site.
9. Add your menu placement to the page by clicking on the plus in article content on your page layout.
10. Click edit menu placement from the layout view. 
11. Select off for showing the headline.
12. Next to show image, select thumbnails. You may not have yet attributed a thumbnail to your page. To do this, go back to your menu placement and without clicking edit, click on each page name - this will direct you to the page you're linking to. You can then add a thmbnail and icon image to the page. You may wish to add the image to both to give you more options in the menu placement design. Click publish to site when you've added your images.
13. This particular menu placement style is a 'default' style, so you don't need to select a style option for this one.

Other menu placement style options you have available

• An icon menu, which is what we use on #Shapeyourstory in critical care. This style option is called 'Barts Health - icon menu', and you need to select icons for the menu placement image option (as opposed to thumbnails)
• A floating icon menu, which is what we use on the Cancer service page to direct people to the child pages. You will also need to attribute an image to the menu placement for this option. This style option is called 'Maternity floating icon menu'.
• An icon menu without a border, which is what we use on the Cancer service page to direct people to our hospital pages. This style option is called 'Maternity menu placement'.

You may wish to create a feature of something noteworthy, such as a slideshow of patient feedback from Twitter or heroes or the thank you forum.

To create a slideshow, you must start with creating your slides.

1. Go to slideshow > slides from the left hand CMS menu.
2. Press + next to slides
3. Add an image and text within 'image overlay text'. This should be short and can include a link (either as a call to action style or standard)
4. Repeat for as many slides as you wish, eg between 2-5 works well.

Then you can create your slideshow.

1. Go to slideshow > slideshows from the left hand CMS menu.
2. Press + next to slideshows
3. Click on slides
4. Click the + button and search for the slides you just created.
5. Publish to site
6. Choose the placement style "Barts WeShare slideshow".
7. Place in bottom row from layout view so that it stretches across the full width of the page.

Adding a news blog

You could also profile news stories from one of our blog feeds. To do this using an already existing blog:

1. In article content, click the plus sign and choose feedback > blogs mini list
2. Choose the blog from the drop down list
3. Add the page that the full blog sits on
4. Order by date posted (descending)
5. Choose the number of items to feature, eg 5-7
6. Choose the placement style: "Barts Health news slider (full width)
7. Save page placement