A10 - iMe - Web Plan

Goals
To use some PHP 5 features that would benefit the client
To create the site using XHTML 1.0 Strict and CSS 2.1
To make sure that the site validates to XHTML 1.0 Strict and CSS 2.1
To use MySQL

Target Audience
James is a 15 year old school boy at Freeston High School. He regularly visits the shop to purchase a school special. He owns a PC with a 1.1MB broadband connection, and uses internet explorer 7. His monitor setting size is at 800px x 600px. He also uses Windows XP. He has average computer skills and wants to be a teacher when he grows up. He would use the site to keep an eye on the prices as he only gets so much money for food. Janis’ also do a mixture of desserts such as: flapjacks, cookies, tarts, etc. which he also likes to keep an eye on just incase something new comes out.

Molly is a 32 year old driving instructor. She often visits Janis’ shop as she doesn’t get much time for food. It will be her wedding in several week and she requires food to be made for the party. She would use the website to get in contact with Janis and look at the online menu to see what can be made. Molly uses a fairly new PC with 2 MB broadband connection and uses Internet Explorer 7. She has very low experience with the internet. She has resolution setting size of 1024px x 768px and uses Windows XP home edition.

John is a 58 year old web developer. He owns Heron Design in Normanton, and regularly visits Janis’ for his dinner. He would use the site before he visits the shop so he can take his staffs orders as well. He can use the menu list to make sure he has everyones orders. He has advanced computer skills and uses Firefox 2 to view the site. He also owns several computers at home eachh connected via a network and with 8MB broadband. He has resolution setting size set to 1024px x 768px. He uses a Mac OSX.

Delivery Requirements
PHP - PHP will be needed to create the Email feedback form. It will also be needed to create the online logbook/diary. The feedback form will be created so that viewers can get in contact with the client (Janis’). They will need to do this to arrange for private hire, or to simply give feedback on her food and store.

MySQL - MySQL will be needed in conjunction with PHP to create the login system and the diary/logbook. XHTML 1.0 Strict - I will be creating the website using this language. The code will also be validated to 1.0 strict and will contain other data such as PHP and CSS within it. Validating the site will make sure that it stays future proof and accessible. Employers are also looking for people that are capable of creating accessible sites. I feel that this practice will further increase my skills in doing this.

CSS 2.1 - The layout will be created using CSS. CSS will also be used for the creation of links and fonts. It will validate to 2.1 to make sure that it stays future proof and accessible.
Dreamweaver - I will be using Dreamweaver to type my code. I will also be using it to link my stylesheets and to preview my design in different browsers.

FTP - I will be using the Dreamweaver FTP to allow me to upload the website onto the internet. I am also more familiar with the Dreamweaver FTP.

Competitive Analysis
www.caferouge.co.uk
The site on first glance looks like it has had a lot of care and time spent upon it. The site looks professionally made. The flash animation is inviting, although seeing the bubbles over and over again may be annoying or distracting. The roll over links are also good for new internet users, as they allow the viewer to realize that they are links. It allows alt tags over the links, which can tell the user what can be found on that particular page. One thing that suprised me was the fact that the site fully validates to XHTML 1.0 strict. I expected with the roll over buttons and the flash that it would be possible. The company that created this site must believe in fully accessible sites. The style is quite unique and suitable for the type of company. Some of the font sizes are a little too small.

Features
The site includes a search for your nearest Cafe Rouge, which brings its results up and also the distance to it. The results also give a full address and phone number. You can also click on the selected cafe to view an image and more information about that one. There is also a print button that allows the viewer to easily print off the information they require. The search is a good feature and will increase the popularity of the site as viewers don’t have to look through the site to find this information. It is on the home page so it’s easily found.

The roll over buttons allow the viewers to easily notice that they are links. It also states which page you are currently visiting. This is good for users that are new to the internet. They can easily differentiate between these navigation links and the body text.

The flash videos can be annoying or repetitive, especially for return viewers. It does have a nice theme and is certainly welcoming, but very distracting. The video gives the feeling that your area is private. It also gives the impression that its a romantic place. I think they have tried to give this impression because it is close to valentines day.

The flash chalk I feel isn’t needed at all. It also only appears on the home page. This might confuse viewers as the chalk appears on every page but you can only use it on the home page.

Improvements
There is a bug which concurs when you highlight a link and then move off the link onto the flash animation. The alt tag still appears and the link still shows as it is being pointed over. This could just be a consequence for having flash applications running on the computer.
There are some consistency issues with the links. Some links are roll overs, some links are underlined and some links just look like body text. There needs to be a clear difference between links and body text. I would get rid of the underlined links and the body text links and give them the same style so they are easily noticed.

The contrast between the reds isn’t very high. They need to be more different. The font inside the search box needs to be enlarged. I found it difficult to read until I zoomed in.
The links at the top of the page aren’t noticed at first glance. They need to be placed in a better location.

There is a black spot which is blocking some of the text on the white area of the home page. this makes it hard for the viewer to read. The spot should be removed or placed elsewhere. A blue and yellow spot also appears on the main navigation link. This needs to be removed as their is no reason with it should appear.

Overall I would give it an 8/10

www.therivercafe.co.uk
The first put off for this site was the immediate flash page. It looks unprofessional, and makes viewers want to click back straight away. They might also need to install the flash plug-in, which they may not want to do. It also has a slow loading time, which may also turn off some viewers. The logo looks cheap and too obvious. It needs a redesign. The quality of the site images are good and the site has a clean view and a consistent alignment. One thing that I do enjoy is the colour scheme of the fonts change for every page. Not exactly consistant, but the style is consistant. I think it works well on this site.

I think the site needs a new logo, as the one created looks like it’s been created by a child. The rotating images on one of the pages is rotating too fast and can be distracting.

Features
One of the benifits of this site is the menu system on the links. It is an easy way to arrive at what you need without having to click through masses of links. The menu also appears at the bottom of the site rather than the top. This is good as it will stop the menu overlapping the text, but can be bad as users may have to scroll to find the navigation. It may put viewers off and could make them leave.

The search on the wines menu is quite good as it allows viewers to see what stock of wines are available. The results also tell you which places store the wine, how old the wine is and how much it costs.

The map of italy is also good as it requires users to interact with it. I did notice that one of the areas didn’t work however. There is also a map that tells you how to get to the place on foot, by train and by bus.

Improvements
The flash introduction needs to be removed. It will more likely make viewers click back as soon as they see it loading. The good thing is that it only lasts a few seconds, which some users may be willing to wait.

The logo could also be redesigned. I think it is too childish and basic for a logo. There also needs to be more information on the home page like a welcome note or something. Links could do with a roll over feature to allow viewers to clearly see that they are hyperlinks. The flash image rotations need to be slowed down, or created into a slide show version, as the current method is very distracting.

The logo could be inserted onto each page and can act as a link back to the home page.

I give this site 7/10

www.cafedeli.net
This site also uses flash in a good way. The site is also structuraly unique by the way that only the selected item changes and not the whole site. I think this is quite clever as loading times are really short and theres no navigation through masses of pages. The black background colour is off putting, and the navigation could be better. The alignment of the site is quite good, although there are some errors in Firefox where the text stretches out too far and onto the black background. The main background colour is grey, which also gives the site a very dark and dreary feel. I also think that the text scrolls too much over the page, thus making it harder to read. The ideal amount of characters should be between 45 - 65 and this site has well over 80 characters.

I was surprised to find that this site doesn’t validate at all. I would have thought that a professionally created website would have validated to atleast transitional.

Features
The site is quite limited. The main feature is the flash banner, which gives a nice smoothe feeling and welcomes the viewers. The second feature is that the site has absolutely no loading time at all.

Improvements
The first improvement would be to validate the site to 1.0 Strict. This should keep the site future proof.

The colour scheme really needs to be something more than just black and grey. I admit that black can liven up sites but I think it is over used in this example. I would use the grey as the main background and have a white background behind it. The navigation could also be aligned better, as it looks uneven with the different amount of links under each header.

The alignment of the title text when an item is selected could be improved by either shrinking the text size or making the coloured bar longer. This will stop any text from running onto the background colour in Firefox.

The black and white contrast makes the text really hard to read. I think that making the text slightly larger and by removing the black background in exchange for a more subtle colour should solve this.

I give this site a 6/10