The quality of Content

Ensuring content in the main pages of the site is of quality is important in helping the optimization of the site. I amended the homepage content to include important keywords and phrases such as the ones highlighted below. Search engines pick up these keywords.

Robot Exclusion Standard

Whilst I was designing the humber mouth website, I did not want anybody viewing it until it was complete. To stop search engines picking up the site on their searches I used what is called a robot exclusion standard. It is a piece of code which sits at the root of the site in a txt file.

The code included in robot.txt:

User-agent: *
Disallow: /

* = select all search engines
/ = disallows access to all parts of the site

Using Google Analytics

Google Analytics is a free service offered by Google that generates detailed statistics about the visitors to a website. It is the most widely used website statistics service, currently in use at around 40% of the 10,000 most popular websites.

Traffic Sources Overview

The Traffic Sources Overview pie chart shows that 80% of traffic came from direct traffic, which is when the URL is entered into the browser and the visitor arrives directly at the website.

20% of traffic came from visitors who had searched for the website via search engines.

Trough further research on the traffic sources overview, I found what keywords users where searching for in google:

All these keywords are available on the website in form of page titles, keywords and phrases.

Map Overlay

The map overlay tool lets you know where your visitors are viewing the website from. This can be broken down into cities, countries, sub-continent region and continents.


After further research I found the visitors accessing my site where located in the Hull, Beverley, Sheffield, Cambridge, Rotherham, London, Sale and Manchester. Although some of these visitors did not stay on the site.


Bounce Rate

This bounce rate represents the percentage of initial visitors to a site who "bounce" away to a different site, rather than continue on to other pages within the same site.

Improving My S.E.O

To improve the SEO of the site:

- Keywords where inserted into each of the pages (not including login required pages) the keywords where styled so that they were invisible within the design of the site.

Keywords added: literature, books, reading, authors, festival, poetry, speakers, art, library, poets, novel, humber, mouth



- ALT tags were added to images within the site. Aswell as being good for accessibility, ALT tags filled with keywords can also be used to boost keyword frequency and help achieve better rankings in search engines.

- Off site SEO was used to help improve site optimization, by including links to my website in this blog and also on my portfolio site. It would help if the sites linking to the humber mouth site were more highly ranked and popular.

Search Engine Optimization

Search Engine Optimization

Search Engine Optmiazation (S.E.O) is the process of improving the volume or quality of traffic to a website from search engines.

There is two types of S.E.O:

On site S.E.O

- Clear precise validated code
- Ensuring content in user and search engine relevent
- Metatags - using keywords which are important in relation to the criteria of the site

Off Site S.E.O

- Links from other sites into my site. The key to this is to make sure the cites that are linking to your site are well known website and are highly ranked themselves.

Social Networks

Part of our brief was to incorporate social networks into the site. On all pages I have included facebook and flickr buttons for users to access the humber mouth social networking sites.

PHP CMS

I have designed and coded a content management system for administration of humber mouth. They are able to add, edit and delete events on the website. I could further improve the site by adding an option to edit the homepage content. By continually changing content on the site this helps market the site and its position in the google search engine.

Final Design

This is a print screen of my final design, I decided not to put the gallery of images in the website homepage like I had planned. In the future there would be room for improvement by adding a gallery of images on either a seperate page or the homepage.


Ease of navigation
- I have used breadcrumbs througout the website to ensure the user does not have to use the back button on the browser.

Mailing List
- I have included a mailing list within the site so that users can be updated on recent news and events without them having to visit the site.

Homepage Design

Not quite finished but on its way to completion

Final Layout

Layout Ideas

I chose a vintage wallpaper background and picked colours that complimented it. I like the feel of this design.

colour scheme with layout

Colour Consideration 01

Using Adobe Kuler I searched for contemporary and warm colour schemes. I would really like to make this website contemporary and trendy but also with a warm feel to it.

Content background

Highlighted elements

Background

Header Background

Colours

Warm Colors

• Red: Red is one of the most powerful and attention-getting colors. Red symbolizes passion and fire, love and lust. It has been proven to raise blood pressure and cause perspiration. Red reflects energy and can motivate an individual to take action. It can also symbolize war, violence, blood, and aggression. Pink, however, is the softer side of red. Pink is romantic, calming and feminine.
• Orange: Vibrant and warm, orange is associated with autumn, pumpkins and Halloween. It inherits many of the traits of red, but is less passionate. Orange has been known to stimulate the appetite. As a citrus color, it can also symbolize health.
• Yellow: Yellow symbolizes sunshine and warmth. It can mean hope, light and energy. On the other hand, it can mean weakness or illness, or symbolize cowardice.

Neutral Colors

• Black: Black can represent power, elegance, and sophistication, but it can also represent death (Western culture), evil, anger and sadness.
• White: White represents cleanliness, purity, and spirituality. It represents life and marriage in Western cultures, but it represents death in Eastern cultures.
• Grey: Grey is the combination of black and white. It is a conservative color. Grey can symbolize security, maturity and reliability, but it can also signify gloominess and sadness.
• Brown: We like to classify brown as a "special" color. Sometimes brown can be used as a neutral and sometimes as a warm color. Either way, brown represents credibility and stability, the hearth, home and the earth.

Taken from: http://newark1.com/color/000055.html

Logo Revisited

How does the website make you feel?

By looking at my mood board the feelings that I get are...

• Warm
• Cosy
• Retro feel
• Contemporary

After speaking to Sally Bell, she advised me to research some websites that also provoked these feelings.

I decided coffee shop websites would be a good place to start:

• Costa Coffee

Feelings: warm, cosy, posh

I think they have managed to achieve this feeling by using the right imagery and the use of warm colours. Although I think the layout is a bit boring.

• Starbucks

Feelings: trendy, retro, contemporary, clean

By using this black and white image of an old starbucks shop, which looks like it is in New York it instantly makes me feel a a bit retro and as if I am part of something trendy. The colours are kept neutral and cool and with a plain background, small things such as the WISH star in red stands out.

• Irving Farm Coffe Company

Feelings: Rustic, warm, retro, country

The fonts used on free shipping and coffee company instantly make the website look retro, but my first instinct is that it is quite rustic as the imagery suggests this. Colours are neutral and add to the rustic feel using shades of browns.

Summary

• To create a warm cosy feeling I must use the right colours and imagery
• To create a retro feeling I must use the right typeface and imagery
• To create a contemporary feeling I must keep the website clean and slightly neutral in colour

Logo Prototypes

Wireframes

First wireframe Mock up:

Site Map

Taking everything that I plan to incorporate into the site I designed a simple site map

Going Forward

From researching my competitors I got some ideas which I could implement in the design of the Humber Mouth website.

- Search bar on homepage - this would be useful for regular and new visitors finding their way around the site

- More visual elements such as photos and graphics related to the festival

- News and features section on the homepage for regular vistitors wanting a quick update of up and coming events

- Encourage users to facebook and flickr page with buttons on the homepage

- Mailing list so users can be updated without having to visit the site