Website

You can view my website here http://www.simeson.artdesignhull.ac.uk

Validation

Once I had finished my site I checked them using the W3C validator. I first validated the html (Below). At first there were 23 errors but I worked on my site and changed things and I eventually got it to display no errors.

I then validated the CSS and this showed up with no errors.

This is important for search engine optimization because search engines can not read code that is wrong.

Robot.txt File

Whilst I was working on my Humber Mouth site I used a robot.txt file so search engines would not find my site.

User-agent:*
Disallow:/

* - this means that it applies to all search engines
/ - this means it is all the pages of my site.

Off Site Pages

I have added links to other websites that are related to Humber Mouth. These are Twitter and Facebook. This is a good idea because more people will hear about Humber Mouth because they use these sites and if they are interested they will visit the Humber Mouth website so it is a great way of getting users to visit your site.

Search Engine Optimization

I have search engine optimized my Humber Mouth website and I did this by doing research and then doing the things I had learnt. First of all I signed up to Google Analytics and put the provided code at the bottom of the pages of my website. Google Analytics is good because it records how users are getting to my website and the keywords they use in their searches. From the videos I looked at on You Tube and from the pages I read in 'Get to the top on Google by David Viney' I learned that using meta tags can help so I added meta description and metakeyword tags to my web pages. The keywords I used were:

humber, mouth, literature festival, literature, festival, books, readers, read, authors, hull, yorkshire, events, speakers, artists, language.

I also used ALT Tags on images. This is important because search engines can not read images so adding ALT Tags helps search engines by knowing what the image is. ALT Tags are also good for accessibility for people who use screen readers. (The image on the left shows an example of the use of ALT Tags on my site).

The content management system that I created will be good for search engines because the site can be updated quite often refreshing the information so this is keep it up near the top in search engines.

Content Management System

As well as the search engine optimization we were to create a content managment system so the administrator could log into the website and add events, edit events and delete events and this was done using PHP. The first thing I did was an admin log in. The page that was created looks like this:

Once the user has entered their username and password they will be logged in as long as this information is in the database. Once they are logged in the next page looks like this:

From this page the user can add, edit and delete events. When they click on 'add event' the following page is displayed:

When the user clicks on the edit event link the following page is displayed:

The user then has to click on the event they want to edit and then the next page is displayed:

When the user clicks on the delete event button the following page is displayed:

After the user has clicked on an event, the next page lets the user know that the event has been deleted.

Google Analytics

I signed up for Google Analytics after I had created my web pages so I could add the code onto my web pages. The code that was given to me after I signed up was placed at the bottom of each of my web pages right before the end body tag.

The screen shot above shows the first page that is displayed when you log in to Google Analytics and it is an overview of the websites you have added to it.

The screenshot above is what is diplayed when you click on 'view report'. From this page you can choose to view a number of reports including content reports, visitors report, map report, traffic sources report.

The screen is above is an example of a report from the dashboard.

Research

The next thing I did was research Search Engine Optimization and Google Analytics and the websites and books I used are :

http://www.youtube.com/watch?v=3KK7i084W2w
http://www.mahalo.com/how-to-use-google-analytics-for-beginners
http://www.youtube.com/watch?v=I-0FIH7a7Do
http://www.youtube.com/watch?v=sa_jUlFYd7M&feature=related
http://www.youtube.com/watch?v=AuodxWU4Neg&feature=related
http://www.youtube.com/watch?v=TDZEoDtNYx8&feature=related
http://www.youtube.com/watch?v=WirXesPXT1o&feature=related
http://www.youtube.com/watch?v=eSyGDlYf-H8

from these websites I learnt what can be done to search engine optimize your website and I found them helpful.

Prototypes

From the colour scheme I have chosen I have created two prototypes:



In the colour scheme I have chosen there are 5 colours. For the first prototype I used the bright colours, pink, light blue, green and white. In the second prototype I just used dark blue, green and white. I am going to work on the second prototype for my website because of the bright colours it does make it look young and fun but I think the first prototype used too many bright colours.

Site Map

This is a site map to show what pages will be on my site.

Logo Ideas

Next I went on to trying to create with a new logo for the website:

The logo I have decided to use is the second one because it is quite abstract so it looks like an open book but also could represent a bridge.

Wireframes

I created some wireframes for my Humber Mouth site so I could plan what the layout of the site would look like. I have created two wireframes, one for the homepage and one for the other web pages because all the other pages will have the same layout but just with different content.

Home Page Wireframe:

This is the layout for the home page. The header at the top will contain the name of the site and the site logo and the navigation bar will be underneath this. The image box will either contain an image of the Humber Bridge or an image of books. The text underneath the image container will be the welcome text. The side bar within the main body will contain the latest events and a link to the appropriate pages.

Other Page Layout:

This is the layout for the whole website except the home page. The header and navigation bar will stay the same as the home page but the main body will just have two containers instead of three. The main container is on the left and will contain the main content for the particular page and the sidebar will contain links, text or images.

Mood Board

I created a mood board so I could get a feel for the site I wanted to created. From this you can tell the website will be young and bright.

Colour Scheme

Because I didn't like the colour scheme the original website used I decided to mess about with colours using Adobe Kuler. I knew I wanted the website to be bright, colourful and young so these are the colours I looked for. The colour scheme I decided I was going to use was the bottom one. These colours were dark blue, bright pink, bright blue, bright green and white. I chose these colours because I wanted to use a dark background (dark blue) and then I could use the other bright colours for the header, navigation bar and main body.

Humber Mouth- Original Website

This is a screenshot of the original Humber Mouth website. Things I need to start working on includes mood boards, colour schemes, logo designs, wireframing.