Creating web content

1. 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 texttexttexttexttexttexttexttexttexttexttexttexttexttextText text texttexttexttexttexttextTexttexttexttexttexttexttexttexttexttext text text texttexttext text texttexttexttexttextTexttexttexttexttexttexttexttexttexttexttexttexttexttext text Texttexttext text texttexttext text texttexttexttexttexttextTexttexttexttexttexttexttexttexttexttexttexttexttext text textTexttexttexttexttexttexttexttexttexttexttext text texttextTexttexttexttexttexttexttexttexttexttexttexttext text texttext Images: Video An example of multimedia used on the Kent University website - www.kent.ac.uk/architecture There are two types of images used on the web – photos or graphics.

2. 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.

3. 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/

4. 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.

5. Creating web content You can see the grid layout on the websites on the University of Kent website: www.kent.ac.uk/arts

6. 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.

7. 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

8. 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 contentWhen 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.

9. 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.

10. 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. 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. Use lists instead of paragraphs where appropriate 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.

11. 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.)

12. Creating web content

13. 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.]

14. 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

15. Creating web content

16. 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.

17. 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.

18. 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.

19. Creating web content Formatting your page HTML (HyperTextMarkup 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.

20. 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/accommodation/canterbury/off-campus/index.html

21. 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/

22. 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.