hints and tips for good web content
DESCRIPTION
Hints and tips for good web content. The University’s web presence. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/1.jpg)
Hints and tips forgood web content
![Page 2: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/2.jpg)
The University’s web presence• To clearly inform prospective students, their
influencers, researchers, potential members of staff, and other stakeholders about the activities of the University of Bradford with the aim of them choosing to study, research, work or engage with the University.
![Page 3: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/3.jpg)
A University website?• We don’t have one website – we have many, so need to make
the journey as easy for users as possible as they won’t know how we are structured or where things ‘live’
• The journey can start anywhere – external home, School home, random page etc
• User oriented not internally structured• Has to be useful and usable
![Page 4: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/4.jpg)
How people ‘use’ websites• People ‘scan’ web pages! – “Am I there yet?”• Aid ‘scannability’ by using correct formatting and
content
Source: Nielsen, Useit.com, http://www.useit.com/alertbox/reading_pattern.html
![Page 5: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/5.jpg)
![Page 6: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/6.jpg)
Why Users ‘Scan’ web pages• Computer screen reading 25% slower
than paper• The web is a ‘user driven’ medium• Information foraging – users want information
quickly– Large, dense paragraphs off-putting – too much
work!
![Page 7: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/7.jpg)
Define a clear purpose for the content1. What is the business goal?2. What action do you want from the user?3. What are you trying to communicate, and who with?4. How will you know when you have achieved the site
objectives?
• If you can’t define a clear purpose - the content is probably not needed
• Demonstrate, don’t preach
![Page 8: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/8.jpg)
Good content – is your content…•It
communicates, gets the message across, has clear call to action
Clear
•Get to the point at the start, use plain English, reduce ‘fluff’
Concise
•Consistent language and style so it’s easier to understand and looks professional
Consistent
![Page 9: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/9.jpg)
Could be improved
http://www.brad.ac.uk/health/dementia/DementiaCareMapping/WorkingwiththeBritishStandardsInstitute/
![Page 10: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/10.jpg)
Good examples
http://www.bradford.ac.uk/study/request-course-information/
![Page 12: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/12.jpg)
Before
http://www.bradford.ac.uk/management/
![Page 13: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/13.jpg)
After
![Page 14: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/14.jpg)
What’s the best place for the content?• Imagine you’re the user – think where you’d
look for the information• Easy to find, navigable• Information architecture
![Page 15: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/15.jpg)
Avoid duplicate content• Bad for SEO, accessibility and content
management• Put the content in the right place in the first
place• Use links within content to refer back to pages
(50% of clicks normally within content area not navigation) Source: Nielsen useit.com
![Page 16: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/16.jpg)
Examples of avoiding duplication
![Page 17: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/17.jpg)
Tips for writing for the web• Most important information first! ‘Above the fold’• Get to the point and keep it simple• Take time to write a good page title and headings (keyword
rich)• Keep paragraphs and sentences short• Use sub-headings and lists to break up content• Use links within content (half of users navigate using links
within content copy)• Write in Plain English and avoid ‘fluff’ or marketing speak
![Page 18: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/18.jpg)
Avoid• Jargon and slang• Use of italics, underlining, • Dialect • Pompous words and clichés• Justified text• Exclamation marks
![Page 19: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/19.jpg)
Images• Image dimensions• Image placement• Padding, margins and float• Using the media library (include the file type
and file size for all media)
![Page 20: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/20.jpg)
Media library
![Page 21: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/21.jpg)
Formatting Content • Headings• Lists• Paragraph length• Text formatting• 3 and 2 column template layouts available
![Page 22: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/22.jpg)
Formatting - Text• Never underline text for emphasis
– Use headings and bold instead– Underlined text is for links only, and is automatic– Bad for usability
• Italics should be seldom used:– Difficult to read on a screen– Use bold to emphasise instead
![Page 23: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/23.jpg)
Headings• Define structure of
webpage• Separate content and
assist ‘scannability’
• Heading 1• Heading 2
• Heading 3• Heading 3
• Heading 2• Heading 3
• Heading 2• Heading 3• Heading 3
![Page 24: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/24.jpg)
Heading 1Main Content Title• Important for Search
Engines!
http://www.bradford.ac.uk/fees-and-financial-support/tuition-fees/
Heading 2Important Sub-heading
Heading 3Less Important Sub-heading
![Page 25: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/25.jpg)
Headings• Important for:
• Accessibility (e.g. screen readers)• Search engine optimisation (SEO)• Separating content • Legibility and scannability• Document structure
![Page 26: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/26.jpg)
Before
![Page 27: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/27.jpg)
After
http://www.bradford.ac.uk/sled/what-we-do/access-widening-participation/awp-reports/
![Page 28: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/28.jpg)
Preview and proof• Always use the ‘Preview’ function in T4• Don’t forget to proof read• Edit, edit and edit again!• Get others to proof read• Think back to the purpose of the content and
the audience – is the content achieving it?
• Manually check that pages are clear and easy to read. Check that large blocks of text are not presented as capitals or italics.
![Page 29: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/29.jpg)
Ongoing content management• Credible websites are up-to-date• Add expiry dates to time sensitive content
![Page 30: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/30.jpg)
• Always add URIs (important for Search engines - SEO)– Lower case with hyphens between words e.g.:
• access-and-widening-participation• what-we-do
Some T4 reminders
www.bradford.ac.uk/sled/what-we-do
![Page 31: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/31.jpg)
Some T4 reminders• Changing page names and URIs affects links (for e.g. forms, thank you
pages). Any previous links to the page will be broken – so avoid changing page names and URIs unless absolutely necessary.
• Use the Review Date, Expiry Date and Publish date functions in the Options section when modifying content (see below).
![Page 32: Hints and tips for good web content](https://reader035.vdocument.in/reader035/viewer/2022062722/56813adf550346895da32e7a/html5/thumbnails/32.jpg)
T4 template training • New web page for guides from web team• For example News & Events see:
– http://www.bradford.ac.uk/marketing-and-communications/web-team/tutorials-and-guides/