Transcript Creating web content

Creating web content
What types of content do you use on your websites? Websites use multimedia content – images (photos or graphics), text and
video.
Text:
Text text text text text text text text text text text text text text text Text text text text text text text text Text text text text text text text text text text
text text text text text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text
text text text text text text text Text text text text text text text text text text text text text text text Text text text text text text text text text text text
text text text Text text text text text text text text text text text text text text text
Images:
There are two types of images used on the web – photos or graphics.
Video
An example of multimedia used on the Kent University website - www.kent.ac.uk/architecture
Creating web content
Web page layout
Everyone likes nicely designed websites. An essential part of getting the design of websites right involves working with web
content to get the layout looking right.
Creating web content
Some websites that I like the design of include:
http://www.ted.com/
http://www.livehopelove.com/#/home/
http://www.moma.org/interactives/exhibitions/2008/colorchart/flashsite/index.html
http://www.conservation.org/act/get_involved/protect_forests/Pages/deforestation.
aspx
http://www.loveisrespect.org/
Creating web content
Presenting content on web pages
When laying out content on web pages it is a good idea to use standard web layout practices. A lot of websites
are designed on block/grid based designs.
Creating web content
You can see the grid layout on the websites on the University of Kent website:
www.kent.ac.uk/arts
Creating web content
Writing on the web
is not the same as writing for print. People do not read the web the same way as they read a book. They are usually looking for
specific information. Web authors need to make it easy for them to find what they want. Effective content involves keeping
information simple, consistent, focused and concise. Content on websites should not be too long and to the point. You don’t want
long web pages with lots of text content where the user has to scroll down the page.
http://www.kent.ac.uk/amst/degrees/index.html
How do people read web pages?
Reading from computer screens is about 25% slower than
reading from paper. A recent survey found that users on
average will read about 20% of the text on the average page.
Rather than read the page users tend to scan text and pick out
keywords, sentences and paragraphs of interest. Skimming
instead of reading is a fact of the web and has been confirmed
by countless usability studies. In general when reading online
people tend to scan the page till they find the information they
need rather than actively read. As a result people don’t want
to read lots of information online and your content should
therefore be and written with scannability in mind.
Creating web content
Make your content scannable:
•
•
•
•
•
•
•
•
Edit your content by at least 50%
Don't require users to read long continuous blocks of text.
Use headings and subheadings to grab readers’ attention and
engage them with your content.
Headings must be meaningful
Avoid long pages
Pull out quotes can be effective in drawing readers to the text.
Use bulleted lists to break up the content
Use hyperlinks to connect content up
If you have a lot of content then consider:
•
Tabs http://www.kent.ac.uk/studying/where/canterbury/region.html
•
Split information onto multiple pages
Creating web content
Write for your audience
Think about who you are creating the pages and what information
they will be looking for. Are you providing them with the information
they need?
Put important information at the top of the page
The reader needs to know at a glance what the page is about. Make
sure your heading and first paragraph make this clear.
Use hyperlinks to structure your content
When writing content you should use hyperlinks to structure the
content .
Be relevant
Is there any content on the page that is not useful or relevant? If so get rid of it.
Be consistent
Make the look and feel of your pages consistent
Be concise: http://www.bbc.co.uk/radio1
• Make your sentences short and to the point
• Start with clear information on what the page is about. Once a user has established that a page contains information
that interests them, they are more likely to read the text properly.
• Because people read slower on screen, they want to read less text. If you can pare down your language without
sacrificing your content, you should do so.
• Avoid unnecessary content. Most web users will not bother reading marketing blurb, detailed information or welcome
messages
• Use one idea per paragraph only.
Creating web content
Provide context
Consider that any web page can be accessed out of context. For example a user may come directly to your page through a search
engine rather from the home page of a site. Keep this in mind when writing content for the pages. Ensure that each page carries
enough information to let the user know where they are and what the topic is.
Ensure that your content is up to date
Ensure that your contact details are easy to find and up to date
Users should be able to easily find contacts to ask any questions about your website, or to inform of any problems or errors.
Do not replicate information if it exists elsewhere within the university
A lot of key information is already published on the University’s main website, such as Programme Specifications, Prospectus
pages etc. Place links to this information on your site, rather than creating new pages in your own site for the same information.
Don’t capitalise headers
To fit in with the defined style, headers should not be capitalised. Use sentence case.
Write objectively
Avoid promotional hyperbole. Consider your target audience and use your common sense. Avoid using the passive tense if
possible keeping the content in the present tense makes it more engaging.
Provide a call to action for each page
All useful web content drives an action – such as links to information, relevant information, phone numbers, a form etc. After
reading a good piece of web content the reader should have found out something they did not know before or be able to do
something they could do not before.
Creating web content
Structuring web content
Each page should be structured according to the inverse
pyramid principle - telling the reader the conclusion
follow by the most important supporting information
and end by giving the background.
Use PDF’s
If you are offering a file for download, make sure you
first convert it to PDF. PDF is a more open standard and
is viewable by most users on the Kent website.
Use lists instead of paragraphs where appropriate
Credibility
Credibility is important for web users since it is unclear
who is behind the information on the Web and whether
a page can be trusted. Credibility can be increased by
using high quality graphics, good writing and use of
outbound hypertext links. Avoid using a promotional
writing style, web users are busy they want to get to
the straight facts.
Write short sentences
Sentences should be as concise as possible and only use words you need to get the information across.
Proofread your work
Typos and spelling errors send people away from web pages. Make sure you proofread everything you post to the
web.
Creating web content
Measuring the effect of improved web writing
To measure the effect of improved web writing a study developed five versions of the same website and then had users perform
the same tasks with different sites. As shown in the table, measured usability was dramatically higher for the concise version (58%
better) and for the scannable version (47% better). And when the study combined the three ideas for improving writing style into
a single site, the result was truly stellar (124% better usability.)
Creating web content
Creating web content
An important part of creating good content is creating effective
hyperlinks.
How to create good links:
•
You should try to keep all links to open in the same window
•
Make links have context, avoid ‘Click here’ and ‘Read More’
Instead try to give the links context and relevance.
Here is an example of what not to write:
Following a recent article in the student magazine ‘inquire’, the students
protested. Click here to read more.”
The above example should look more like this:
“Following a recent article in the student magazine ‘inquire’, the students protested.”
•
When linking to PDF, WORD, EXCEL and POWERPOINT files always warn the user that the
link points to a file.
For example: Lecture One [Word file] or Exam Schedule [PDF file, requires Adobe
Acrobat.]
Creating web content
Images
Using images is an important part of creating web content. You should use images to break up the content on the page
and to create attractive looking content.
Do not though overload the web page with images and when using images associate the images with the text.
When using images on your pages make sure the images are relevant and are compressed correctly. Your image files need
to be in .jpeg / .gif file formats (compressed).
Example of web pages on the University of Kent website with good image sizes include –
http://www.kent.ac.uk/english
Creating web content
Creating web content
Ensure you place alt tags on all images
This is one of the primary accessibility guidelines for web pages.
The alternative text attribute (ALT) of the image tag (IMG) exists
to provide a textual representation of the image for people
accessing the page in a non graphic way (e.g. in a text only speech
Or Braille browser). This is important where a page header for
example has been constructed out of an image. Alternative text
must be given to describe what the header says. To ensure that
you have done this for all images, when later testing your pages,
Try turning off images in your browser and check whether
appropriate text for the images is available.
To edit/compress/resize images you can use Picasa – http://picasa.google.co.uk/thanks.html (free download)
To place the images you can use the callout snippet.
Where can I get images for use on the Web at Kent?
There are many stock sites on the Internet that allow free use of images. You should always check the license before use.
A few of these sites are:
Stock Exchange
www.morguefile.com
Your department will also have a database of images they use for marketing.
Creating web content
Site structure and navigation
Websites are structured around menus. People tend to navigate around your site using the menu and also the links you put on
the pages.
Reach your target audience
When structuring your menu, you should think about what the key areas of
information you want to reach your key audience with are and then group pages
together under relevant menu sections.
Most people on the web are looking to find particular information out and they want
to find it quickly and easily. Having a good information structure in your site is
essential to help your users find the information quickly and easily.
You should also structure your menu in order of importance. Your key pages need to
be listed high on your menu, as these will be the items which users will first see.
Try to keep the left hand menu relatively short . If the user has to scroll down the
page to read all your menu items it is too long. Also keep your menu item text short.
Long menu item names which wrap over two lines make the menu look untidy.
Creating web content
When structuring your site, it is a good idea to create a mental model of your pages and build your menu around this model.
These models are called site maps.
Creating web content
Formatting your page
HTML (HyperText Markup Language) is the language web pages are written in. It is for describing the content of your page in
terms of its contextual meaning e.g. this is a heading, this is a list, this is a paragraph etc.
Traditionally If you wanted to make the basic text look nicer, you had to add more HTML like font and color etc. This led to pages
that were very high maintenance as if you wanted to change what your content looked like you had to edit every page.
Nowadays, we use style sheets to format the page –
•
•
•
•
Fonts
Colours
Layout
Size
If you are using a university template you generally wont need to add any stylesheet information. The templates come with
prebuilt style sheets which have been written specifically to the University of Kent brand, look and feel. You should stick with the
default colours that have come with your site in terms of colours of headers and fonts.
Creating web content
Using the snippets
The snippets are good tools to help you organise and highlight content and also present any multimedia content.
Nice example of a callout:
http://www.kent.ac.uk/accom
modation/canterbury/offcampus/index.html
Creating web content
Blogs and forums:
Web 2.0 is the new term for the latest developments on the internet. Web 2.0 describes the recent developments on the
Internet which involve social networking such as Facebook, blogs and online forums.
Kent university has both blogs and forums where you can read people’s blogs or request to have your own blog.
http://blogs.kent.ac.uk/
http://www.kent.ac.uk/forums/english/
Creating web content
General tips:
•
Check your pages for broken links. Ensure that internal and external links within your pages are working fully. A web site with
broken links does not look good to your users. This should be checked for regularly.
•
Don't use department/section space to publish personal web pages
•
Test your website on others. Ask people within your department to check the website and give their feedback on the
content. After working on a website for a long period of time, it is hard to see it freshly anymore, so a fresh pair of eyes can
become useful. Additionally, not everyone thinks in the same way, so it is useful to see how others react to using the
website.
•
Follow the University of Kent publications style guide
www.kent.ac.uk/cdo/guidelines/
A useful reference detailing basic guidelines and house styles at the University of Kent.