Process Guide for developing websites in the cms

Process guide for developing websites in the Contensis Content Management System
1 2 3 4 5 Introduction ..................................................................................................................................... 2 Planning a site development .......................................................................................................... 2 2.1 Know your audience. ............................................................................................................... 3 Review existing content .................................................................................................................. 3 Site architecture.............................................................................................................................. 4 4.1 5.1 Navigation and labelling. ......................................................................................................... 5 Site templates.......................................................................................................................... 6 Backgrounds ................................................................................................................... 6 Icons ................................................................................................................................ 7 Use of colour ................................................................................................................... 7 Text styles ....................................................................................................................... 7 Page templates ............................................................................................................... 9 Mini templates ................................................................................................................. 9 HTML snippets .............................................................................................................. 10 Site Build ....................................................................................................................... 10 Sourcing imagery .......................................................................................................... 11 Copyright ....................................................................................................................... 11 File format ..................................................................................................................... 11 Optimisation .................................................................................................................. 11 Suitability ....................................................................................................................... 11 Design, layout and imagery ............................................................................................................ 5 5.1.1 5.1.2 5.1.3 5.1.4 5.2 5.2.1 5.2.2 5.2.3 5.2.4 5.3 5.3.1 5.3.2 5.3.3 5.3.4 5.3.5 5.4 6 7

Page layout ............................................................................................................................. 8

Imagery ................................................................................... Error! Bookmark not defined.

Multimedia ............................................................................................................................. 12

Quality checking ........................................................................................................................... 12 Useful information......................................................................................................................... 13

Introduction

The development of a website within Contensis CMS is an opportunity to improve the quality of the University website as a whole. Before work starts on a new site, all content should be reviewed and any redundant, out of date or duplicated content removed. The remaining content should then be evaluated and, if necessary re-written, to ensure that it is effective both for the medium of the web and for the site's intended audience. Only once you have done this can you think about your page layouts and site structure. This guide is designed to help you through this process, explaining how you should approach the development of a site in Contensis. 2 Planning a site development

Planning is essential for any web project irrespective of its size. The amount of planning required can vary greatly depending on the size of site, but there is never a situation where a site should be built without being planned to some extent. It makes things easier if one person acts as the main point of contact for each website development. This person can effectively act as project manager, with responsibility for purchasing imagery, liaising with the web team, checking content, monitoring project timelines and ensuring cross site style consistency. Often small web sites can be managed by a single point of contact. For larger sites which have to meet the interests of a number of stakeholders, a small team may be required. This can be useful for brainstorming ideas and dividing workload. However, it is worth bearing in mind that the larger the team, the more difficult it can be to come to a quick decision. If the site is large enough to need a project team, then an initial meeting should be arranged to agree on priorities, timescales and delegate tasks. If necessary, this initial meeting can be used to raise and discuss some or all of the following questions.

Why do we need a web site? What is its purpose? What is it trying to achieve? By what criteria can we measure its success? Who is its intended audience? What are the time scales? Do we have enough resource (manpower or budget) available to complete this project to these timescales? Is there a budget for imagery, video or content writing? Do we have the skills, knowledge, expertise and time to carry out all of the work ourselves? Who is doing which task? Do we need additional resources to get the job done?

If the site is small and managed by only one or two people, then it is probably still worth spending time addressing the questions above. 2.1 Know your audience.

Who are my audience? What is their degree of web literacy? What is the speed of their internet connection?

Your site is likely to have multiple audience groups, including: Prospective undergraduate students Prospective postgraduate students, current students, Staff, Parents, Researchers, Businesses, etc.

It may be difficult to say which is your primary focus, but it is probably safe to assume that your audience is increasingly accessing your site from laptops, mobile or handheld devices and is used to social interaction online, viewing videos and listening to audio. Think about producing content for this audience. Consider the use of blog and forums, or rich media content on your site. For example, instead of doing students profiles with text and a photo, get some of your students to talk to camera. However, always remember that visitors from other counties may not have broadband. Ensure that lower resolution versions of video and audio are available and always supply the same or similar information in text form. 3 Review existing content

When migrating from an old site to a new one, site content needs to be carefully reviewed and considered.

Is content redundant or out of date? If so, it should be deleted and not copied over to the new site. Is the same content repeated at more than one location on the site? If so deleted the repeated content and link across to it. This can avoid penalisation by search engines and makes the content easier to maintain. Does anybody read the content? Check visitor statistics for your pages. If pages attract little traffic or people spend very little time on them, then the content may not be worth migrating. Is content well written and easy to read? What is the tone of voice? Is it consistent across the site? Is the content concise, easy to understand and written for the web, e.g. through use of headings, bullet points, short sentences and paragraphs, etc? Is there a need for additional content?

Knowing why the site is being built and who your audience is, enables you to determine your content requirements. Try to be objective. Dont think about what YOU want to say and what content YOU want on the site. Instead consider what content needs to be on the site in order for it to fulfil its objectives and satisfy the requirements of it users. For more information on writing for the web please refer to the pre-migration content check sheet (http://www.nottingham.ac.uk/cms/documents/pre-migration-content-checksheet.pdf ) and writing for the Web Style Manual. (http://cmslive01.nottingham.ac.uk/cms/documents/uonwebstylemanual.pdf ) 4 Site architecture

Once you have reviewed your site content, then you should consider your site structure. This process can involve card sorting exercises, creation of user personas, usability testing and competitor research. However, most units will not have the time or resource to do this and will need to rely on the advice and expertise of the web team. The information architecture of the site should be discussed with representatives of the web team. This allows us to see whether there is any duplication or need for cross-linking with other sites within the University website. We will also offer advice on how your site should be structured. You can put forward your own site structure, which will be considered by the web team. If you choose to do this, then ensure that you think about your users and what will make sense to them. The key is to allow your users the ability to access the information they are looking for in a way that is intuitive to them. Always try to put yourself in the shoes of the user.

What information are they trying to find? Where is it natural for them to look for it? How will they look for it? (browse, search, site map, A-Z, quick links)

Create an information hierarchy by placing related information into logical groupings and sub groupings. Avoid designing your site structure and navigation around the administrative structure or physical arrangement of your unit. Users arent always privy to this information and it is often irrelevant to them. 4.1 Navigation and labelling.

When labelling navigation, avoid using terms that may only be understood internally, e.g. PG students. Create a navigation system that allows users to access this information using navigational labels that convey what type of content lies beneath them. Keep the labels short, meaningful and memorable Do not use acronyms in navigation labels as it excludes anyone who is unaware of their meaning from using the navigation effectively. Use sentence case when labelling navigation items, e.g. Study with us rather than Study With Us, unless the item refers to an official name such as University Park (refer to the Web Writing Style Guide for more on this). Keep the number of navigation labels for each level of hierarchy between 5 & 9. Users navigate by storing label names in their short term memory before making a decision. If the number exceeds 9 it becomes difficult to do this and thus impedes navigation. 5 Design, layout and imagery

Once the structure of the site has been planned out, you can start to think about the visual layout of your site. Sites built using the CMS have to conform to the standard templates already used within the system. There is currently no facility for building sites with a bespoke or non-standard design. However, you will need to make decisions about which page layouts you are going to use. Depending on the nature of your site or unit, you may also have to make decisions about the site colour scheme and site wide imagery (i.e. icon and background image). When considering your page layouts, look at existing sites or standard layouts as described below. Consider how each type of content (video, text, image, etc) relates to each other visually, and how they impact on the design of the page and the site as a whole.

5.1

Site templates

There are two main variations on the standard University of Nottingham corporate template; the central services template and the school template. The School template is used by Faculty, School, Department, Division and Institute sites. The professional services template is available for use by all other units needing a University of Nottingham branded corporate web presence. Examples of template designs

5.1.1

Backgrounds

Each sub site within the university of Nottingham web site can choose a background image, showing scenes from the various University campuses, to run along the footer of each of its pages. These images are 1280 pixels by 250/350 pixels panoramic high quality images taken by professional photographers. They generally feature a combination of people, architecture, landscape and water features. These images do not necessarily directly relate the content of the site, but rather act to tie together the various sub sites within the University of Nottingham domain. Over time the number of backgrounds featured will be expanded to give sites more choice, and reduce duplication. Backgrounds can be selected from those shown at: http://www.nottingham.ac.uk/CMS/StyleGuidelines/Choosingapagebackground.aspx

5.1.2

Icons

Title icons are only available for Faculty, School, Department, Division and Institute sites. Title icons are to provide a small amount of visual distinction between these otherwise visually similar sites. Professional Service and most corporate sites will not have title icons associated with them. For more information on site icons see: http://www.nottingham.ac.uk/CMS/SchoolStyleGuidelines/Schoolbrandingguidelines/Schoolh eader.aspx 5.1.3 Use of colour

The colour scheme for all sites using the University of Nottingham corporate template is blue, grey and white and their gradients. Corporate blue (#003366) and charcoal grey (#333333) are used for headers. Each site has a coloured content header and footer, navigation trim and coloured blocks associated with H2s. For corporate sites these elements are all blue with a navigation trim of #336699. School sites replace the navigation trim blue of blue #336699, with their faculty colours Faculty of Arts Faculty of business, law and social sciences Faculty of Engineering Faculty of medicine and health Faculty of Science 5.1.4 Text styles Orange Purple Grey Turquoise Blue #F47920 #9461A8 #839CB2 #0095A1 #006FBA

The style of text is fixed in both School and Central service templates H1 and H2: Century Gothic, 18 pt, 1.8em, #333333 H3: Verdana, 11pt, 1.1em, #333333 Content: Verdana, 11pt, 1.1em, #000000 Hyperlinks: Verdana, 11pt, 1.1em, #336699

5.2

Page layout

Once you have a web site structure showing where each page of content sits, it is time to start thinking about how that content is structured within the page.

What is the best way to format the content on the page? What imagery relates to the subject matter? How can the text and imagery be balanced to create a visually interesting design that breaks up the content into chunks making it easier to read and draws attention to the most important information? Is there any other related content that should also be included on the page? Is there any aspect of the content that could be explained more easily with the use of video? What is the optimum way to link from page content to other relevant information?

Page layouts are based on a grid structure. The layout of content, whether it be text, images, or multimedia, should be determined by a number of factors. Make sure that there is enough whitespace on the page to break the content into manageable chunks. This allows the eye, and thus the brain, to rest for a moment, between moving from one chunk of information to another. This makes the page easier to read and less mentally demanding. Make sure that there is a balance between blocks of content and areas of white space. In the same way that an overly dark image can be distracting and pull the eye away from reading adjacent content, so can large blocks of whitespace. Consider what information on the page is most important, then, use the design of that page to give that information visual priority. Organise the page in such a way to draw the eye firstly to the most important content and then follow a path to each subsequent piece of information in order of importance. It is not only the position of imagery that impacts on how the eye moves around the page, but which images are used, how big they are, and how they are cropped. Remember when selecting imagery for use within a particular page, it should be relevant to that page and facilitate the required eye flow, but must also fit with the overall design of the site. Image selection and placement requires subtlety and balance. Decide what the visual priority is and stick to it. There should never be two images of equal visual impact both vying for attention, as this just confuses the user as to where they should focus.

The school template has a fixed homepage layout which includes a 464px by 234px image top right (static or moving). This is to provide internal consistency between these types of sites. Professional Services sites do not necessarily have to adhere to this layout and can refer to other examples of page layouts as shown at the end of this section.

Examples of school subpage layouts

5.2.1 Page templates The vast majority of sites within the CMS will be using the standard school template or professional services template. This design has a left hand navigation and content area that can be divided up in many different ways using mini templates. Occasionally, sites may require other template variations such as a full page template without the left hand navigation. However from a resource and maintenance point of view it makes sense to try and keep the number of different templates being used to a minimum. 5.2.2 Mini templates

Mini templates come in two types; content layout and image layouts Content layouts are for arranging content on the page. 1, 2, 3 and 4 column layouts are available. These can be stacked vertically or nested within each other to create interesting and engaging magazine style layouts. Image layouts, as the name suggests, give you control over positioning images with text. They determine whether images are left or right aligned, whether the text wraps around the image and whether the image has a semi transparent border or not.

Examples of possible page formats

If you require a layout that cannot be built using the current mini templates, custom mini templates can be developed by the web team. 5.2.3 HTML snippets

Snippets are a way of pulling in commonly occurring content to your site without having to duplicate it. The advantage of using snippets is that all occurrences of the content can be edited and updated in one go. Snippets are useful for things such as campus directions, social bookmarking, IT helpline details etc. For more details of HTML snippets, go to www.nottingham.ac.uk/cms. 5.2.4 Site Build

Once you have decided on your page layouts, members of the web team can set your site up in the CMS, deciding on what combination of templates and mini templates are best suited to give your required page layouts. Before populating this site with content individuals are required to attend two half day training sessions. One of these deals with how to use the cms and the other with content and good practice. Contact the web team to book a place. All imagery used on a University of Nottingham web site should be of high quality. Avoid the use of low quality clip art and animated .gifs

10

5.2.5

Sourcing imagery

Use of well-placed, high quality imagery gives a site a professional feel. There are a number of ways to source such material: Imagery from the University of Nottingham imagebank http://www.nottingham.ac.uk/imagebank/login.php previously purchased royalty free images (on CD or via download) professionally shot photographic imagery stock image databases such as: http://www.gettyimages.com/ and http://www.corbisimages.com/ Microstock image databases which tend to be cheaper but can be of lower quality as they use amateur and semi-professional images. http://www.istockphoto.com/index.php , http://en.fotolia.com/ and http://www.shutterstock.com/ http://office.microsoft.com/en-gb/clipart/ Copyright

5.2.6

Before subscribing to or paying for images from any image database, make sure you have read and met the usage agreements and terms and conditions of the site. 5.2.7 File format Photographic images for the web should be downloaded as jpgs at a resolution of 72dpi. Required physical size will vary from icons at 60 pixels wide right up to images that span a full page at 719 pixels wide. 5.2.8 Optimisation Imagery, once downloaded, may need to be cropped to fill the available space. Make sure all images used on the web have had their file size optimised As a rough guide icon images should be roughly 2-5 kb, Page content images ideally 25-35 kb but no larger than 60kb. 5.2.9 Suitability

All photographic imagery used on the web site should be of: High quality and of a professional standard Visually interesting, considering page eye flow and focal points Fit in with the overall site design and page formatting Relevant, identifiable and original.

More information can be found at http://www.nottingham.ac.uk/cms/documents/what-makessuitable-web-imagery.pdf for more advice on use of imagery, contact the web team

11

5.3

Multimedia

Video is used increasingly on the web and units are encouraged to create and upload them. However, you still need to think carefully about the purpose of video content before commissioning videos. They should be used to convey particular kinds of information, for example when trying to show context or emotions. Student profiles are a good example where real enthusiasm for a course can come across much better on video than just a photograph and text alone could relay. Videos should be kept short with a running time of less than 5 minutes. Short snippets of 2 or 3 minutes are also recommended. Recommended file formats are Flash (compatible with version six and above) and MP4 (using the H264 encode and AAC audio, bit rate 512k)

Quality checking

Before going live, the site needs to be checked to make sure it is ready. Here is a list of common things that often get missed. Check that all pages have content and that all content is complete Make sure news and events sections have content to pull in Avoid the use of greyed out links and use of work in progress Check that content hasnt been pasted into the CMS from Microsoft Word, bringing with it Words styling code (all content from Word should be pasted in using Paste as Text) If there are too many gaps in your page content then check the code view to see if redundant tags are causing the problem ( <br />, <p>&nbsp;<p> etc) Avoid the use of click here. Check for dead links or links going to the wrong location Make sure all links to .pdfs or .docs are indicated as such Check that all image place holders contain images Make sure images are the correct size for the placeholders you are using and have been optimised for web. Give images, documents, audio files and PowerPoint slides meaningful descriptive names i.e. avoid using image1etc Check for correct document structure, e.g. use headings appropriately with Heading 1 for the main title of the page, then Heading 2 for secondary headings and Heading 3 for less important headers. Make sure images have meaningful alt text (alternative text), or a null value where they are purely decorative. This is helpful for anyone using a screen reader. Make sure large blocks of text are broken up into smaller chunks using paragraphs, lists and imagery Make sure each site has the same page background selected for each page of the site Make sure that you have copyright for all images used Check for grammar and spelling mistakes Make sure all the content on the site is concise, easy to read, engaging and has been specifically written for the web, rather than just cut and pasted from a variety of sources.

For a more information regarding these points please refer to the Web Style Manual (http://cmslive01.nottingham.ac.uk/cms/documents/uonwebstylemanual.pdf )

12

Useful information Search engine optimisation - http://www.nottingham.ac.uk/cms/documents/a-briefintroduction-to-seo.pdf Pre migration content check sheet http://cmslive01.nottingham.ac.uk/cms/documents/pre-migration-contentchecksheet.pdf What makes suitable web imagery http://cmslive01.nottingham.ac.uk/cms/documents/what-makes-suitable-webimagery.pdf Web Style Manual (http://cmslive01.nottingham.ac.uk/cms/documents/uonwebstylemanual.pdf ) School Style guides http://www.nottingham.ac.uk/CMS/SchoolStyleGuidelines/index.aspx

13