Writing for the Web

Good writing principles that apply to print, apply equally to websites. If information does not meet user expectations it will not be successful.

Readability

Research has shown that reading from a computer screen is 25% slower than from print. You can help your users to efficiently locate the information they are looking for by adhering to the following principles:

  • avoid jargon and provide explanations for terms used
  • be consistent in language and style
  • make page and content headings meaningful  - if it is not what users are seeking, they can move on without reading further
  • highlight key information with bold or bulleted and numbered lists
  • limit each paragraph to one idea and state what it is in the first sentence
  • don’t mix second and third person, or the impersonal: you/they
  • avoid passive phrases, eg. 'The University requires that .....", rather than "Students are required by the University to ..."
  • where substantial content is required, precede this with a summary
  • organise information into multiple pages with an index, rather than one long page and avoid large tables of data
  • avoid repetition, excess verbiage, superlatives and vague claims
  • many users access sites directly from search engines bypassing your website structure. Pages in this context should be meaningful and stand-alone.

There is more information about structuring page content in the Site Editor Course.

Web Addresses – why do they matter?

  • Good web addresses help users understand where they are in a website and see where they can go.
  • Good web addresses improve search rankings
  • Users looking at search results spend 24% of their time looking at the URLs to decide if they’ll visit a page
  • Users will assess the credibility of a site and its content based on the URL
  • Good web addresses are easier for users to remember and recognise
  • Good web addresses are more useful and effective in print, email, social media and other channels
  • Broken links, multiple URLs and changing URLs are bad for business—they lead to confusing user experiences and damage our search rankings.
Accessibility

The Disability Discrimination Act 1992 makes it unlawful to discriminate against people with disabilities and promotes equal rights, equal opportunity and equal access for people with disabilities.

There are accessibility standards for buildings, requiring things like wheelchair access. Similarly, there are accessibility standards for websites, which ensure that websites can be accessed by people with disabilities. The current standard is called the Web Content Accessibility Guidelines v2.0, or WCAG 2.0, and the Australian Government requires that we comply with it.

When we talking about web accessibility for people with disabilities, we usually need to consider four types of disabilities: visual, auditory, motor and cognitive, as well as seizure disorders.

People with visual disabilities including blindness, low vision and colour blindness

How they use the web

  • They may use screen readers, which read web pages out loud, or braille readers, which can form braille characters
  • They may set their computer or their browser to use large text and high contrast colours
  • They may not use a mouse if they can’t see the pointer

How we ensure accessibility

  • When we put an image or video on a web page, we also provide the same information as text. This includes alternate text for images and multimedia, and transcripts or captions on video.
  • We use proper headings in our web pages, to enable screen reader users to get an overview of a page and jump to the relevant section
  • We use link text that makes clear where the link goes, and avoid generic links like “click here”
  • We provide content as web pages rather than Word documents or PDFs, as this is the most usable and accessible format for screen readers
  • We avoid using colour alone for meaning (e.g. red for warning or green for good)
  • We ensure all content and functionality can be used without a mouse

More information: http://webaim.org/articles/visual/

People with auditory disabilities

How we ensure accessibility:

If we give information by audio, we also provide that information as text. This could be a transcript of an audio recording or captions on a video.

More information: http://webaim.org/articles/auditory/

People with motor disabilities

This can include conditions where movement is reduced or impaired, such as quadriplegia, arthritis and multiple sclerosis, and where there is involuntary movement or tremors, such as cerebral palsy and Parkinsons disease.

How they use the web:

  • They may use just a keyboard and not a mouse
  • They may use a mouse but with difficulty
  • They may use other technologies such as a joystick, or mouth control, or voice control.

How we ensure accessibility:

  • We make sure a website works with just with a keyboard
  • If there is something on the page that moves or animates, such as dropdown menus or rotating banners, we make sure it works without a mouse or with poor mouse control
  • We make it easy for people to jump to different parts of a page

More information: http://webaim.org/articles/motor/

People with cognitive disabilities

This includes disabilities which affect memory, problem solving, attention and comprehension. Some important examples in a university setting are dyslexia, which affects how written information is processed, and ADHD, which affects focus and attention.

How we ensure accessibility:

We make our content straightforward and consistent.

  • We avoid long blocks of text on web pages, and instead use headings, bullets and numbers to make the page easier to read
  • We provide content as web pages rather than Word documents or PDFs, to ensure people with cognitive disabilities can access our content in a way that suits them. For example, people with dyslexia may want to change the text colour and background colour, or use a screen reader to read out text.

More information: http://webaim.org/articles/cognitive/

People with seizure disorders

Some people have disorders where seizures, migraines, nausea or dizziness can be triggered by flashing, flickering and strobing content.

How we ensure accessibility:

  • We don’t publish any content which flashes, flickers or strobes
  • If there is a good reason to publish such content (for example, as part of a research project) there is a clear warning displayed before the content is shown

Making your content accessible

Most of the work is done for you in the UQ templates. For content editors, most accessibility requirements will be met by:

  • keeping our content clear and consistent
  • writing for the web, with good headings, bullets and numbers, and descriptive link text
  • including good text alternatives for any images, audio, video and multimedia
  • putting information into web pages rather than PDFs or Word documents

Making your content accessible has many benefits:

  • Search engines don’t have eyes or ears – accessible content is better for search optimisation
  • Accessible content is nicer to use for everybody – we all prefer websites which are consistent, straightforward, easy to read and easy to use
  • Accessible content is better for people from non-English speaking backgrounds - it works better with automatic translation tools, and captions and transcripts support comprehension of audio and video
  • Accessible content works better on the many different devices, like phones and tablets, that are used to access the web.

Making your content accessible is easier if you plan for it in advance. For example:

  • If there is information to be published, ask for it in Word format so you can turn it into a web page.
  • If a video is being planned, make sure there will be a transcript created.
  • If a recording of a public lecture needs to go online, ask the speaker to supply their notes.
  • If planning a new website, list accessibility as one of the requirements.

A good guide to accessibility for content editors is available here: http://www.4syllables.com.au/resources/accessibility/

Images for the web
Images should Images should not
  • Support and break up copy.
  • Illustrate a point and add interest to a page.
  • Replace text or be the only source of important information. Visually impaired users will not be able to use your site if the content is in images.

File format

Save images as either .jpg .gif or .png format when using on the web. These are compressed formats so the file size isn't too large and are commonly accessible so users don't need special software to view them. .jpg images need to be in the RGB colour format to display in a web browser. If you use the Save for Web option in Photoshop then your images will be RGB. The CYMK colour format is only for Print and will not display in a web browser such as Internet Explorer or Firefox.

File size

Despite fast broadband speeds, images should still be lightweight. Mobile devices have slower internet speeds and charge a premium for downloads. No one likes to wait for a web page to load and images are usually the largest files on a page.

You should also ensure that the file size is not too large. This is the amount of data that makes up the file is measured in kilobytes (kb) or megabytes (mb), 1000kb = 1mb. Taking an image directly off a digital camera will be far too large to put on a web page.

The Image Browser has a maximum upload limit of 18MB per image, despite this we recommend your images be kept under 300kb each, where possible.

Image dimensions

To create images for the web you need to make sure they are the are the optimal height and width dimensions for how the image will be displayed on the page. These dimensions are measured in pixels.

There are image styles designed for different purposes in a website. Commonly, the biggest use would be a Tall Banner on the home page. If you intend to upload an image for Tall Banners, it should be at least the width AND height for Tall Banner; 1140px wide AND 439px high.

If you are uploading images that you know will only be used as thumbnails, the appropriate thumbnail size is 120px by 120px.

For a list of all the available image sizes, see Image Styles.

If you upload an images that is too small, and apply an image style that is bigger than the original uploaded image, the image will be stretched and may have a poor grainy appearance. It is far better that the original is big enough for the software to scale it down.

Software to edit images

You can prepare your images to have the appropriate file size and dimension by using software such as Adobe Photoshop (available through ITS) or GIMP (free).

In Adobe Photoshop

There is a video tutorial by Adobe on Save for Web

The typical settings you would need to change are:

  • File type (GIF, JPG, PNG)
  • Quality (as low as you go before it begins to appear grainy)
  • Image size
Search Engine Optimisation

Search Engine Optimisation or SEO as it is commonly referred is the process of making a website highly indexable and appealing to a search engine; such as Google, Yahoo, or Bing. There are SEO components relating to how a website is coded which make the website more navigatable and prominent to a search engine, but the most important part of SEO is the content on the site.

Content is king

Website content is what users go to the site for. It is what attracts them there, keeps them there and ensures they come back again. The business model of all search engines is to make sure users get the most relevant and up-to-date results for their searches. To do this they crawl websites frequently using software called 'bots'. The bots read content and follow links in order to index a website and add it to the search engine's database. The more often your site updates and the more links coming to your site from other sites, the more often the bots will crawl it and update the search engine database.

UQ templates

The UQ website templates are already designed with SEO in mind and cover the main things search engines look for on a site beside the content. To improve the SEO of your website you just need to focus on the content.

How to optimise content for search engines

Content primarily means text as search engines can't view an image the same way people do. Copy on the web needs to be easy to read for the end user, but also filled with the kinds of terms that people would search for to find your information. When writing copy for the web put yourself in the shoes of the visitor to your site. Terms that make sense to you might not make sense to an external user or student. A good technique is to go to a search engine and type in the terms you would use to find your website (but not the name of your site because as a user you won't know it until you find it). Then work those terms into the copy on your page. Work in some variations as well.

For instance if you had heard about SEO and you were wondering how you actually go about implementing it, you might search for something along the lines of "How to optimise my content for search engines".

Use links in your copy. Don't rely on menus so get people around the site, people will read text that interests them and click links within that text that go to information they think is relevant. These are called contextual links. See the above example where the words "writing copy for the web" are linked to a page with a guide about how to write copy for the web.

Things NOT to do:

Waste copy with redundant pleasantries such as "Welcome to the School of X homepage". People won't search for that and they don't want to read it when they get to your site.

Don't use acronyms only you know. Or if you do, put the full version on the page with it.

Don't put important textual information in an image. Search engines don't read text that is part of an image.

Linking with other websites

Search engines follow links in order to index web pages. The more links coming to a page, especially from other websites, will increase that page's ranking in the search engine. It's great to have others link to your content, but you also have to link to other sites as well to show that your site is relevant to other things as well.