Process guide for developing websites in the Contensis Content Management System

tiredbeginnerInternet και Εφαρμογές Web

8 Δεκ 2013 (πριν από 3 χρόνια και 8 μήνες)

70 εμφανίσεις


1

Process Guide for developing websites in the cms



Process guide for developing
websites in the Contensis
Content Management System





1 Introduction ..................................................................................................................................... 2
2 Planning a site development .......................................................................................................... 2
2.1 Know your audience. ............................................................................................................... 3
3 Review existing content .................................................................................................................. 3
4 Site architecture .............................................................................................................................. 4
4.1 Navigation and labelling. ......................................................................................................... 5
5 Design, layout and imagery ............................................................................................................ 5
5.1 Site templates.......................................................................................................................... 6
5.1.1 Backgrounds ................................................................................................................... 6
5.1.2 Icons ................................................................................................................................ 7
5.1.3 Use of colour ................................................................................................................... 7
5.1.4 Text styles ....................................................................................................................... 7
5.2 Page layout ............................................................................................................................. 8
5.2.1 Page templates ............................................................................................................... 9
5.2.2 Mini templates ................................................................................................................. 9
5.2.3 HTML snippets .............................................................................................................. 10
5.2.4 Site Build ....................................................................................................................... 10
5.3 Imagery ................................................................................... Error! Bookmark not defined.
5.3.1 Sourcing imagery .......................................................................................................... 11
5.3.2 Copyright ....................................................................................................................... 11
5.3.3 File format ..................................................................................................................... 11
5.3.4 Optimisation .................................................................................................................. 11
5.3.5 Suitability ....................................................................................................................... 11
5.4 Multimedia ............................................................................................................................. 12
6 Quality checking ........................................................................................................................... 12
7 Useful information......................................................................................................................... 13





2

1 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?



3


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.














4


 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. Don’t 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)



5

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 aren’t 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.







6

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






7

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 H2’s. 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

Orange

#F47920

Faculty of
business, law and social sciences

P
urple

#9461A8

Faculty of Engineering

Grey

#839CB2

Faculty of medicine and
health


T
urquoise


#
0095A1

Faculty of Science

Blue

#006FBA


5.1.4 Text styles

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













8

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.

9

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.



10

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


11

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/


5.2.6 Copyright

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-makes-
suitable-web-imagery.pdf
for more advice on use of imagery, contact the web team


12

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)


6 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 hasn’t been pasted into the CMS from Microsoft Word, bringing with it
Word’s 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
)

13

7 Useful information

• Search engine optimisation -
http://www.nottingham.ac.uk/cms/documents/a-brief-
introduction-to-seo.pdf

• Pre migration content check sheet -
http://cmslive01.nottingham.ac.uk/cms/documents/pre-migration-content-
checksheet.pdf

• What makes suitable web imagery -
http://cmslive01.nottingham.ac.uk/cms/documents/what-makes-suitable-web-
imagery.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