Sumo

This is an outline of a presentation I made recently as an introduction to online marketing. It covers the fundamentals of making your website fulfill its potential.

Before you start a project, either a new website or a review of an existing site, it is important to start from scratch and ask yourself key questions:

• What is our website for? Is there an offline equivalent?
• Who are we aiming at? Define user groups or construct profile
• What do they each want?
• And what do we want them to have achieved having been to the site?
• What are our competitors doing and what can we learn from it?
• What are partner organisations doing? Is there anything you should be joining in with or linking to?
• Set deadlines, budgets, responsibilities

Just as important is to establish your priorities: anything is possible online, depending on how much money and time you want to throw at it. It’s good to push the boundaries and exciting to take advantage of new technologies, but be practical: concentrate on what you and your users need, not what you want.

It’s important to plan ahead so that you have the structures in place for future developments but I would recommend dividing the work into two phases. Phase one should consist of all the essentials, for which you have definite sign off, a real budget and a set deadline. Once you have these online, you can move to phase two; a second, manageable chunk. ‘Phase three’ is a marvelous term in which you can smother any unfeasible or unnecessary suggestions presented to you without causing offence!

The planning process for a website may seem frustrating; a time-consuming delay to the activity of design and building but detailed planning will show in every stage of your website:

• Operating a site – day-to-day
• Adding features – weekly/monthly development process
• ‘Big’ projects – significant redesigns, yearly research

The planning process avoids scope creep (the process by which your website project gets incrementally bigger and more complex over time), which in turn keeps you within budget and avoids the negativity of a perpetual ‘coming soon’ message.

They are given different names but essentially there are three levels of website planning:

1. Site view
2. Page view
3. User view

The site view is represented by a site map on which you should show groupings, hierarchy and the flow of information. There are lots of ways to set out a site map and it doesn’t matter how you do it as long as it logically represents your information. At this stage you should confirm the page titles, nagivation headings and common elements. Don’t show all the links between pages on your site map or go into detail about content or functionality. Depending on how complex your structure is, use colour, positioning, shape etc. to distinguish different elements and include a key. There are specific programmes, like Microsoft Visio, for laying out diagrams like site maps but Word, Excel or PowerPoint are usually sufficient. Before setting out the site map digitally, the most efficient way to plan the structure is with post-it notes on a white board. Once it is drawn up, date it, be ready for further versions and then get it signed off.

Page view refers to the layout and content of individual pages. At this stage you should draw out wireframes denoting the content of each page in terms of the content, relative importance and basic functionality of each item. You should confirm grouping and separation of elements but not the design, positioning, colour etc.

The third level of planning is the user view; the functionality. This is the main area for scope creep and the only way to avoid it is to specify everything in detail. Your web developer should help you to do this and the specification should be linked to the site map and budget / estimate. To explain the level of detail, consider that if you were to plan a new house in the detail of a website, the specification would include:

Internal doors: hinged on one side, taller than wide, allow access through both ways, 1 handle on each side, no lock
And each function (searches, forms, filters, animation etc.) should be specified in this detail.

A general principle which you should apply to all levels of planning is that you are not your audience. Consider carrying out research with users or potential users and set them user journeys and scenarios, such as ‘looking at these wireframes, where would you click to find our annual report’ etc. It’s worth implementing this because little things can make a big difference to the user, naming conventions, or adding reassurances about how long a process will take or how you will use data.

At this point, you can carry out a content review, remembering that visitors interact with your site for the content, not the design. Your website is a specific communication tool so you should tailor your content both to your tone of voice and specifically for a website

Within each page, be clever with links – internal links, external links, anchor links and action links – a website is not the same as a book or brochure online. As a rule of thumb, keep pages to no more than 3 screens high; you can add more pages or downloads if you need to. Your information should be tailored to how people read websites:

• Skimmers – want a brief overview of everything
• Dunkers – will go straight for the specific piece of information they want and then leave
• Swimmers – are looking for detailed information

The design stage is usually the stage in which people are most keen to be involved and quick to add input. It’s worth bearing in mind some general principles, firstly that web design is different from print design in that it works at three levels:

• Interface design
• Visual design
• Content design

And that there’s a difference between being able to create a website and being able to design one.

When it comes to designing navigation, there are infinite ways of styling and functioning it but it should always be clear where you are and where you’re linking to, and all links should be a consistent style. The use of images within navigation and as navigation are becoming more common.

It impossible to teach design within a summary like this but I thought it would be useful to include some common mistakes:

• Lack of planning, or not not referring back to the core concept
• No focus, no hierarchy
• Images speak 1,000 words – but only good ones
• Don’t be afraid of white space

Possibly the easiest mistake to make is to add function for the sake of it: the best sites are complicated but look simple. If you consider an introductory animation – often added simply because it’s possible – it might be appropriate for a high end brand or a fashion brand to have on their site but otherwise it is unnecessary functionality (and therefore time and cost). I consider the offline equivalent to be inviting a new client for a meeting and doing a little dance before you start!

Accessibility is an important topic for modern websites. The key principle is to separate structure, presentation and behaviour. That means that each page is built with one file of code listing the content of the page; each piece of text and whether that text is a header, sub-header, body copy, link etc. There should also be one file known as the stylesheet which states the styling (text size, colour, font etc.) for headers, sub-headers, body copy etc. When these two files are combined with images from the server and any functionality scripts, they display in your browser as a web page.

Separating these two files allows users to switch to a different style sheet if they need enlarged type or different colours, or they can turn off the images or style sheets and use a screen reader which will read the site aloud.

Ensuring your site is accessible will keep you compliant with equality legislation. Separating the content like this will also make the site more compatible with mobiles and handhelds, it facilitates quicker site-wide changes, it enables the transfer of information to different formats (like PDF versions, print templates etc.) and makes the site more search engine compatible.

There are other issues governing the level of accessibility of your site, such as design, links, language, nomenclature etc. Here are some links to further information:

www.w3.org/WAI
www.rnib.org.uk See It Right guidelines
www.abilitynet.org.uk/webdda
www.webcredible.co.uk/user-friendly-resources/webaccessibility/uk-website-legal-requirements.shtml

Search Engine Optimisation is highly connected with accessibility along with:

• External links to your site, and their ranking
• Internal links within the site. Some experts suggest linking to and from every page.
• -Keywords within text
• Search-engine friendly page titles and URLs (i.e. they use keywords, they describe what is on the page, and they are consistent with each other).

When considering SEO, think site-wide, not just your homepage.

It shouldn’t usually be necessary to pay for additional SEO; these practices should be standard for your web developer and, although you can tweak a site infinitely, general good practice is usually sufficient for good results (given time).

A note about browsers: these are current statistics for browser usage in the UK:

• IE 7 27%
• IE 6 20%
• Chrome 3%
• Firefox 44%
• Mozilla 1%
• Safari 3%
• Opera 2%

(Source: www.w3schools.com)

This shows that around half of all users are using Internet Explorer (either 6 or 7) and nearly half are using Firefox. Each browser interprets the code in which websites are written slightly differently so developers need to write their code for general browsers and then add work-arounds for each browser or the page may not display properly, such as images out of place or text on top of other items. The only way to avoid this is through a combination of working knowledge and testing because the differences are complex and the results can be unpredictable. IE6, which it was generally considered was rushed to release, is particularly prone to ‘bugs’ and exceptions. As more users upgrade to IE7, or move to new computers with IE7 as their default browser, IE6, and the extra work it requires, can be left behind.

You have probably heard the term ‘Web 2.0’. This isn’t a new launch of the internet, it’s an evolution over time. The term covers the trends of increased media sharing and mass involvement. It includes concepts which couldn’t exist away from the internet, like Facebook and Twitter and has spawned ‘Generation C’ – those who want to create their own content. The ease of sharing between sites and formats will continue to improve, including feeds, data conversion and streaming.

You may be considering including Web 2.0 technology in your site, perhaps in the form of a blog. I would recommend returning to your aims, audience and priorities before embarking. They can be a useful tool:
 

• An additional, two-way communication channel with your audience
• Short bursts of permission marketing
• Great for conveying opinions and establishing personalities
• Useful for behind-the-scenes, informal or disconnected content
• Can be used to revive topics which aren’t still news
• May encourage team spirit
• But only if you have appropriate content, a suitable brand and an interested audience.

You may also be considering a social network, but, again, consider ‘who?’ and ‘why?’ They are a good platform for viral marketing, if that is relevant to you. Social networks are a good example of when it might not be best to go it alone; it may be more profitable to be an active participant in a larger group than an owner of a small group. In general, I would not recommend building your own and instead customise an existing system, like ning.com.

Once you have your site established, you need to promote it. e-newsletters are a useful, economical tool because they contain direct links to the website. To get uptake, relevance is key so consider segmenting your mailing list with different messages for different audiences, and make use of e-flyers and e-bulletins with one or two messages each. Also make use of external content to increase the relevancy of your information. Define the frequency of mailings by your audience, not you. Like with social networks, we wouldn’t recommend creating your own tools, instead sign up to an online management tool such as Campaign Monitor.

When creating your e-newsletters, be clever with headings (short), language (calls to action), images (eye-catching and relevant) etc. because, although they are permission marketing, you are unlikely to be the only communication in someone’s in box and the audience has a very short attention span.

You should include a sign-up function for your e-newsletter on every page of your website, in which you should always tell users why they should sign up and show an example e-newsletter. Also reassure them about frequency and ease of cancellation. This is advice we first followed with a client last year and their subscriber numbers doubled in the first month.

This is a general guide to some of the key issues in optimising your website as a marketing tool. We would be happy to discuss the issues further or provide a view on your site in particular if you would like more information.