Transcript web writing and layout

Web awareness
and web writing
November 2011 v4.1
Web Awareness and Web Writing:
Course outline
•
•
•
•
•
•
•
•
Background: the University website and its changes – why and how
The Visual Identity and Web Standards
Improving web content: web writing and layout
Good page layout
Preparing and planning your content
Aspects of accessibility
Being aware of the legal bits
What’s next? What is a CMS and what does the next course cover?
The changing university website…
Why change?
The University website:
1. Inconsistent look and feel across the website
2. ‘Page not found’ was 6th most accessed page (2010)
3. ¼ million web pages: 25% of which hadn’t changed in last 5yrs. (2010)
4. 376 sub-websites (2010)
5. Pages were hard to find
6. Quality was continually suffering
What’s being changed?
Being phased out…
What’s being changed?
A new look and feel with a focus on the audience-facing website, first.
Three key areas:
1. User-centric: reflect user needs rather than the university structure.
•
Five ‘global’ headings:
‘Study’, ‘Research’, ‘Faculties and departments’, ‘Business’ and ‘About’
What’s being changed?
Three key areas:
2. Visual: a vibrant campus lifestyle and
world-class research:
- wanting a richer, more visual site to
reflect our key strengths.
3. Accurate and current: using our CMS
the site is being built using only regularly
maintained or new content.
This will ensure our users find the right
information quicker and easier.
What’s being changed?
Creating standards: Visual Identity and Web Standards
Why are these important?
A unified look and feel across the external website:
•
•
to rebrand the University and
to produce high quality, audience-focused web content
What do they contain?
•
Visual Identity: layout on web pages for videos, photos, quotes, tables and how to use the
header and footer, tone of voice and more.
•
Web Standards: web writing, headings, images, linking, file and folder names, calls to action and
more.
Improving web content
First impressions:
what does your web shop window say about you?
Improving web content: interactive exercise 1
The web users’ experience: finding and applying for student accommodation
1. Abertay Dundee: http://go.bath.ac.uk/7dtz
2. Warwick: http://go.bath.ac.uk/hzqc
3. Edinburgh: http://go.bath.ac.uk/24ct
4. UCL: http://go.bath.ac.uk/khgl
5. York: http://go.bath.ac.uk/3zwi
Improving web content: interactive exercise 2
Web behaviour: the screen page and printed page
•
Read the text on the screen and then on the printed sheet:
- is the experience the same or different for each?
- which did you prefer?
•
What of the content itself: poor, ok, useful?
•
Why is the type of medium important (i.e. screen versus print)?
Improving web content: web writing and layout
Web behaviour: they don’t read, they ‘scan’.
Eye tracking results produce mainly an
‘F’ or ‘E’ pattern on the web page.
In just a few seconds, they are scanning for:
• short, informative headings and sub-headings
• short, informative key words and sentences
• bulleted lists and other areas that stand out
Improving web content: web writing and layout
• Focus on what you know your audience wants
• Plan: prepare and organise content in advance
• Decide and place your conclusions first
• Place 'calls to action' at the top (submit, apply, visit)
• Should the content be kept, cut down or culled
• Look at other University web pages for duplication
• Use plain English and be brief, direct and clear
• Regularly review: relevant, up to date, engaging?
• For effect: don’t centre text in the web page and
don’t put headings in bold
Good page layout
2
1
8
Page header 1
Vital text
Image
Page header summarises vital text
3 Call to action
2
3
Vital text: ‘must have’ info, one idea…
Call to action: ‘apply’, ‘find out’, ‘browse’
7
Section header 4
l
4
Section header: readable, clear
l
5
9
l
5
Bulleted list: more ‘must have’ info
6
Important info: short, relevant, one idea…
7
White space: to rest the eye
8
Image placement: supporting, apparent
9
Inverted pyramid: ‘conclusion’ first
Important text
6
Least
important
Good page layout
(www.bath.ac.uk/study/ug/finance/)
8
Page header 1
2
Vital text
Image
3 Call to action
77
Section header 4
l
l
5
5
9
l
Important text
6
Least
important
9
Improving web content: web writing
Active/passive voice
1. “Books may be borrowed from the library.”
“You can borrow books from the library.”
2. “It is recommended that...”
“We recommend that...”
Plain English
“…subsequent approval of which will be a pre-requisite to the raising
of any internal order mechanism.”
“You will need approval before we can raise an internal order.”
Aspects of accessibility: one example…
Why we must not use ‘Click here’
1.
2.
3.
4.
5.
6.
7.
8.
9.
Click here for pneumonia information
You can access information on pneumonia by clicking here
More information on pneumonia is here.
See more information about Pneumonia.
More information on pneumonia is available by following this link.
More information on pneumonia is available by following this link.
Follow this link for more information on pneumonia
Pneumonia: www.bath.ac.uk/health/pneumonia.html
To book a place on this course click here
Being aware of the legal bits…
Copyright
www.bath.ac.uk/web/copyright/
• For example, don’t use photographic content without consent or paying for it
Equalities Act
• Use inclusive language (according to race, religion, culture, gender, age, disability and so on)
• Don’t create a two tier level of provision that discriminates. For example, deaf, hard
of hearing and blind students
Freedom of Information (FOI)
www.bath.ac.uk/foi/ - the publication scheme and right of access request
Data Protection and Privacy Statement
www.bath.ac.uk/internal/data-protection
www.bath.ac.uk/web/privacy
- gaining consent to use personal information. For example, using a model release form, permission to
use names and addresses…
Disclaimer
www.bath.ac.uk/web/disclaimer/
What’s next? Editing in the CMS (essentials) training
Course covers:
•
•
•
•
•
Using web awareness
and web writing principles
Using the CMS to make
simple page changes
Creating links to pages
Pasting content from
another source
Adding contact details from
Person Finder
Editable
regions are
indicated
by a yellow
pencil