Tag Archives: writing for the web

How Meaningful Titles and Descriptions Engage Site Visitors

Posted on by

As we move into our responsive design (and T4), we’re introducing ways to make our content work better for mobile and tablet users.

This means that our editors are changing the way they write web ‘pages’.  In fact, let’s scrub that. The web page doesn’t exist anymore.

You are not writing for desktop.

The way the content looks on your computer, in your browser, is not the only way that it will look.

Writing for our new responsive design

Some of our new content types have different behaviour depending on where they are used.

You should always check your content on other devices (or use this handy responsive design emulator).

Titles and navigation

Titles as a style aren’t new, but are important when writing content for smaller screens. They might be the only thing your reader sees. They can also appear as navigation and part of search results.

It’s important that what you write makes sense out of context.

News items called ‘Congratulations’ and sections called ‘Additional Information’ aren’t going to encourage people to read more.

Teaser content

We’ve introduced teaser content into some of our new content types. It’s used here as the text overlay on the Masthead.

An example masthead style of content. Full width image with text overlay.

It’s important that it’s meaningful. It should summarise the page content as it displays in this order on mobile:

Masthead shown on mobile. Overlay text shows first on the page. the image flows second.

This content could be the difference between someone reading the page or going somewhere else.

Descriptions

We’ve used descriptions in news and events for years:

description-news-list

Adding a short description to the news content types doesn’t appear on the news article page. It does appear in all sorts of other places where news is syndicated:

  • News grids
  • News lists

This micro content acts to entice your site visitor to read more – it needs to work for you.

This example is vague:

  • Title: Call for Papers
  • Description: Submit now

This example gives some context, you know if it’s for you and if it is, you want to read more:

  • Title: Call for Papers: Environmental Planning
  • Description: Submissions close on 31 October. The School encourages researchers to read the submission requirements.

Introductions

We’re aiming to make sure all core pages to have an introduction. The intro style works well on mobile. It pulls out (and styles differently) the first piece of content.

We recommend a focused 50-word statement about what the page covers. It helps users decide whether to read more. (50 words sit well as a chunk of content viewed on most mobile screens.)

Expandable/mobile collapse

We’ve a new expandable content style that allows us to hide content. Users have to choose to select to read the content – they can’t see it at a glance.

This means that the heading you choose for the content is important:

Example expandable content - users have to click to see more.

We don’t want to see vague terms like ‘More information’, ‘Additional details’, ‘Other’.  If the content contains details about your facilities call it ‘Facilities’ or even better ‘Libraries and laboratories’.

Using terms that are more specific, help your readers find what they need.

Write chunks of content

We’ve had some comments about how it feels more complicated and takes longer to build up web content.

Writing for mobile forces you to think about the order of your message.

We could have slapped a responsive template on your desktop-focused content. If content was too long we could have hidden it in expandable boxes (or truncated lengthy titles).

The page would still look okay on desktop (it wouldn’t work very well on mobile).

Rewriting your content and thinking about how people read on mobile, makes sure your users don’t get a sub-standard experience.

Everyone who wants to read your message, can.

Get in touch

Let us know if you need help in reworking your content (University Login required) or post questions in the comments.

Share this post:
Share

Remove ‘Click Here’ for Better Link Text

Posted on by

How many of you have linked to a webpage or document using the phrase ‘click here’? We’ve got about 830 instances across the University site. We know where they are.

Why is it so bad to use ‘click here’ as a link?

You might argue that it’s a strong call to action. You know exactly what’s expected of you when you see one. See our related blog post: 5 Ways to Improve your Calls to Action.

I think the negatives of using click here outweigh the positives. These are our top reasons for not using click here as link text.

We aren’t all using a mouse

Click here isn’t true anymore. Your user could be tapping, touching, swiping, tabbing or speaking to activate the link.

Also, most people using a mouse know that you have to click to do something: don’t be Captain Obvious.

Accessibility

Users of screen readers will often get a summary list of hyperlinks to select from. This is to help them decide where to jump to within a site.

Imagine how unhelpful it is to hear ‘click here, click here, click here, click here’ as your options.

Unless the user decides to read the whole page – they won’t get the context.

Search engine optimisation

We always get asked about getting to the top of the search results. The hyperlinks you use can help you achieve this.

Let me ask you then, how many times have you searched for pages that say ‘click here’? Google serves up around 2.4 billion search results for it.

You will never be number one for this term. You would never want to be number one for this term. So don’t use it for links within your site.

Instead, make sure you use strong, descriptive terms to link your content. How do you want people to find you? What words will they use?

Bad example: Click here to find out more about our English Language degrees.

Good example: Find out about studying our English Language degrees.

Get rid of click here using Siteimprove

Many of you use Siteimprove to keep on top of broken links and misspellings. But did you know that it also has a policy feature that allows you to target unwanted content?

We have a click here policy set up to show where it’s used in your website. We know that there are 830 instances of click here across the University’s website.

Let’s aim for zero! * 

* Siteimprove have been known to reward sites that achieve zero broken links/misspellings/policy scores with doughnuts.

Read our blog post on the Siteimprove policy feature.

Why not get access to Siteimprove (University Login required) so you can start fixing your content now?

Share this post:
Share

5 ways to improve your Calls to Action

Posted on by

A Call To Action (CTA) is a way to get your reader to complete a task or reach a business goal on your website.

It might be as simple as a hyperlink or it could be an embedded form that you want them to fill in.

The words you use and the placement of the content will all influence whether you get the results you want.

Here are our top 5 tips to make sure a CTA works for you.

1.     Think about where you place your link text

We recommend adding links to further content at the end of a page, paragraph or sentence.

That way your reader has understood what you had to say and can make a decision whether to follow your link or not.

If you embed the link at the start of a section they don’t know whether to click first and come back or read first then go back to follow the link. Either way, you’re making them work harder.

Bad example: We have a Conference Team who provides help with managing and planning conferences.

Good example: We provide help with managing and planning conferences: contact the Conference Team.

2.     Make your call to action stand out

You could also use a different style or design for CTAs. We use buttons to help highlight them on the University website:

Example red call to action button from the responsive design

If you are using something that’s designed like this, be consistent with its placement. Our link buttons could become intrusive if we used them everywhere.

3.     Make sure your call to action is relevant to the page

Don’t include lots of links ‘just in case’ someone might find them useful. Think about what you want your reader to do next.

If you have a clear next step in mind and you add lots of extra links – you are reducing the effectiveness of your CTAs.

For example, on a page about booking to attend an event, imagine if you included all these links:

  • Book your place (essential)
  • Watch a video (a distraction at best – they might forget to sign up)
  • Find out more about the event (this link should be further up the page)
  • Contact us (why? The aim is to get them to book at this point)

4.     Be active and descriptive

Make sure the language you use encourages people to complete the action.  Use words they’ll be familiar with and include a verb if possible.

Examples:

  • Call us now: 000000000 (a call to action might not be a hyperlink)
  • Fill in our application form
  • Watch our student services video

You should also make sure that the text you hyperlink is descriptive. This helps with Search Engine Optimisation. Google will rank your content according to the words you hyperlink. I’m guessing you don’t want to be top for the word ‘more’:

Bad example: Learn more about research opportunities at Newcastle.

Good example: Learn more about research opportunities at Newcastle.

Click Here for… and Click Here for… are particular pet hates of mine. Don’t do it! We’ve a blog post coming up on why click here is the worst call to action you could use.

5. Measure success

Decide how you will measure the success of your CTAs. Did your carefully crafted words work? Did your readers pick up the phone, book their place or fill in your form?

The University uses Google Analytics to track use of the University website. We assess where people went after reading our content. How many people left straight away without following our links?  How many people completed an action?

You can also try out different combinations of words to see which ones are most effective. Why not try a link called “Fill in our application form” for part of the week and then swap it to be: “Apply now” later? Which one has the highest completion rate?

Get in touch

Do you write your Calls To Action like this? What sort of success have you had? Let us know in the comments – we’d love to hear your thoughts.

Read more

You might like to read about how micro content (often used on our CTAs) can improve your website.

Share this post:
Share

Six Articles that will Help you Improve your Content

Posted on by

I read. A lot. And I love to share what I’m reading when I find something that will prove interesting or helpful to others.

Here are six articles that provide further information on some of the concepts we cover in our training for web editors. They offer practical tips on improving your content, from adding structure to enhancing search optimisation. Many also include reminders of the essential elements of writing for the web.

1. Writing great page titles and headings

A great practical guide to writing page titles and headings. Learn how you can write headings to engage and inform your users, and improve the search optimisation of your page. All examples included are from university websites.

“three guidelines that will help you create titles and headings that rock: 1) describe, 2) contextualize and 3) simplify and clarify.”

Read the full article on the Meet Content blog: Introducing Your Content – Page Titles and Headings

2. The importance of an introduction

This article by Jakob Nielsen from 2007 is still relevant today. It highlights the importance of introductory text on a web page… but only when done well.

“short intros can increase usability by explaining the remaining content’s purpose”

Read the full article on the Nielsen Norman Group website: Blah-Blah Text: Keep, Cut, or Kill?

3. Bold benefits your readers and search ranking

This article makes it on to the list simply for having a reference to Star Trek.

Ok, not really. The idea of using bold to aid search engine optimisation was something that participants in our first training session found useful. Here’s an article that outlines it in more detail.

“the head of Google’s webspam team, Matt Cutts, has hinted that the search engine might look favourably on bolded phrases.”

Read the full article on the Sticky Content blog: To boldly go – how bolding words can give you SEO lift-off

4. How to improve information-rich websites

We’ve all got pages on our sites where there’s a lot of information to cover. Sometimes it’s hard to see how we can make this less dense and more engaging. This article provides some solutions for how to present complex information without overwhelming your users.

“When there’s a blizzard of information users can struggle to complete the task they came to your site for.”

Read the full article on the Sticky Content blog: 3 problems with information-rich websites and how to solve them

5. The problem with duplicate content

This post presents three reasons why duplicate content is bad for your website. Find out how it affects your users, search engines and you.

“duplicate web content can impact findability, usability and user comprehension.”

Read the full article on the Meet Content blog: Why Duplicate Content Is Bad for the Web

6. Why you need an editorial calendar

Richard Prowse, our counterpart in the digital team at the University of Bath, offers an introduction to editorial calendars. He covers why they’re useful and what you need to consider when creating one.

“you can use an editorial calendar to plan which content you’ll need and by when”

Read the full article on Richard’s Content Bear blog: How to Create an Editorial Calendar

Help us build the ultimate reading list for web editors

Are there any articles that you’ve found helpful in explaining a concept relating to planning or writing web content? Share them in the comments.

Share this post:
Share

How to Improve your Website Images and Videos

Posted on by

Images and video are used as supporting content on the University’s websites.
People don’t tend to prioritize our websites specifically for images or videos – they visit for information; your content.

That said, content can be greatly enhanced by using images or video to support your messages if they are used in the right context. So what is the right way to use them?

Choosing an image/video

High Quality

Use only high quality images. Images should not be blurry, stretched or pixelated. There is a range of University photography you can use in the photo library. Always preview your image to check the quality before publishing.

Videos should be selected from an official University YouTube channel and embedded in your site. Don’t upload the original video file directly to your website.

Support the content

Images and videos are supporting messages. They should always make sense to the user, their job is to help to enhance the meaning of your page. Your content should provide the context for the image/video.

It’s important your images and video is relevant to the content on the page. User testing increasingly shows that people are feeling more and more negative towards the use of generic stock images.

Less is more

If you have too many images or videos on a page, you can compromise the effectiveness of your content. They can:

  • slow page load times
  • interrupt the reading experience
  • make pages disjointed and harder to read

Images of text and complex images, like flowcharts or graphs, can also present a barrier for users accessing your content, and should be avoided.

This content in the image is effectively invisible to users of screen readers and anyone viewing the text only version of your site, for example a mobile user with images turned off. It is also impossible for search engines to index this content – so if you want people to find this information, use content!

If you must include a complex image in your site then a text alternative of the essential information contained in the image is required.

Image size and orientation

For sites edited via Contribute the standard image size is 320 x 180 pixels. We recommend that you use landscape images. Specific templates may have alternative sized images for banners and grid layouts.

Sites edited in T4 have many image options. For these size requirements you can view the image guide on our demo site (University login required).

Keep an eye out for a future post on editing images.

As videos are embedded onto your webpage, your website template should automatically provide you with the right size and a preview image for the box. Just look at our support pages to find out how to embed a video (University login required).

Alt text

Alt text provides alternative, textual content when an image cannot be displayed or for users of screen readers. It should be descriptive, but not necessarily a literal description of the image. Think about describing what the image represents.

Linking images

Many of our websites contain pages with grids of images, for example the Open Day landing page. Linking the image used here increases the area a user can ‘click’ or ‘tap’.

This is useful for mobile users who may be trying to select links using their finger or a stylus. Image links should always be supported by links in the text of your page.

Social media

Individual posts and campaigns run on social media are ideal for hosting video content. These channels tend to be seen as more engaging for people, as they can so easily share content – but more importantly, they enable people to talk directly to us.

Consider using social media alongside your website in this way to help your messaging. Social media can help direct people to your website, and your website should connect people to your social media.

Find out more about using social media in this way from the University’s Social Media Team.

Final thoughts

So that’s your whistle stop tour of improving images and videos for your website. These assets should always be used to enhance your pages, to enable people to better engage with your content. Find out more from our guide to images (University login required).

Share this post:
Share