Feedback

I asked people to go on my website to give me any feedback they thought was necessary.

I mainly used Facebook for this feedback, as it's an easy way to get a lot of people to have a look at your website, with another easy way to comment with your opinion. Below is a screenshot of the feedback I received:

If you click on the picture, it should be made bigger.

The main problem I have had with the website according to the feedback is the size of the text. This is an easy fix, I just went into the CSS and changed the font size to 13 as opposed to 16, which it was on before. Now it has changed, I can agree that it needed to be a bit smaller. This is what I love about feedback!

A major point that was said to me many times outside of these comments, one that I noticed myself too, is that although I went by resolution statistics, the web page doesn't fit on some peoples' screens. Although I down-sized the resolution to 1280x768, the page still didn't fit on the screen for some people.

After a bit of research I found out about 'liquid layouts'. Liquid layouts make it possible for a webpage to scale in size depending on the resolution. This means that the whole page would fit on the screen whether you have a small or a larger screen, or even when viewing on a phone.

To do this, you need to write out a layout before even touching the computer, and then design everything in percentages instead of pixels or anything else.

It is too late for me to do this now, but in the future, this is how I will improve my webpages dramatically.

Other than that, no major things were pointed out, which means the usability for my website is good and the ultimate goal has been fulfilled!

Link Test

I have now added all the pages and external links to the website, so the next step is to test the functioning of the site, to make sure I haven't missed out any links or anything..

Below is an image of a link test I carried out:

The black squares are those where a link is not present. For example, home to home. Green squares are where links have worked and red squares are errors.

The reason why a lot of the right hand side is black, is because the 'thanks' page can only be legitimately found by filling out a contact form, so it's only available from the contact page. However you can get back to all the other pages from the 'thanks' page. This is the same with the YouTube, Soundcloud and the other websites, as well as the 'Tom' and 'Shelley' pages, as they can only be found on the engineers page.

The red box is due to me forgetting to add the link on the music page. After doing the link test, I added the link in and now everything works.

I added the picture on with the red box to show my process for dealing with this error, but all the links on the website work now.

How to return to the index page

The index page is the first page that appears when someone enters your website in the address bar. This is why the page that you want to be seen first should be named index.html

I used this to my advantage and turned my index page into a 'welcome' page of sorts, and added another page called 'home.html' to act as the homepage.

Even though the index page for me is just to welcome potential customers, it is still a good idea to give them a link to get back to that page.
I didn't, however, want a button in the navigation bar called 'index', so I needed to think of a different way.

Most websites I have looked at use their logo to return to the index page, which is an excellent idea.
In Dreamweaver you can create a 'hotspot' over an image so that when your mouse hovers over the defined area, it acts as a button to link to wherever you want.
To stop people from being able to right-click and save my logo as an image from my website, I placed the logo in the background of the div container. This meant that I couldn't create a hotspot, as it wasn't an inserted image.

There was an easy way around this problem though. Using Fireworks I made a new document which was 1 pixel by 1 pixel. I made the background transparent and saved the image as a GIF. When I then inserted this 'blank image' as an image in the div container with the logo, it was transparent - as if nothing was there.

To the eye, nothing is there, but as there IS an image there, I could then create a hotspot over it.
I used the polygon hotspot to draw around the words 'Zone Audio', making this the link back to my index page.

Clever, eh?

I also plan to do this with the links to YouTube and Soundcloud, but I won't make a separate post for this.

It's getting there...

I have all of my pages up and running on my web server.

However the one thing that isn't on there and working at the moment is my contact page. If you went on the website right now, you would find a blank page template, looking like all the other pages.

I decided to leave this page until last to finish, because it is vital I get this page designed correctly.

After looking at lots of other contact pages, such as BT and Google, I wanted to have my contact page as simple as possible.
With this in mind, I plan to create my contact page similar to how the text on all the other pages are set out. This way, the form is not too complicated and can be easily filled in without any hassle or brain ache.

Steve Krug has written a book called 'Don't make me think!: A Common Sense Approach to Web Usability', which outlines that for a good website, the user shouldn't have to think at all. If they need to get somewhere on the website, the path should be right there in front of them.

This is how I have tried to design my whole website, not just the contact form.
I will finish the contact form now, making sure it is very simple and straightforward.

Target Audience

Although this post should have been earlier, I feel it's better late than never, especially as I am now building the design for my website.

As a company offering music services, my target audience should be those that would want to use these services, not necessarily defined by age.
The only age restriction is that as a professional music business, the prices are set appropriately and younger bands may not be able to afford them. This doesn't mean that I should change the prices to suit them, as there is more of a market for recording music in the older generation as opposed to younger bands.

Due to this, I will need to design my website to be more sophisticated to suit the 21-40+ age range, while still keeping it simple and down to Earth.

I think already the website shows this, as the logo isn't written in childish crayon writing for example. It is a plain font that stands out. Same with the colour scheme: white, black and yellow.

I will need to keep this approach when designing other pages and their content to make sure I keep visitors on the site and not drive them away.

Navigation Bar

There are two main ways to create a navigation bar.

The first is to make a div tag and insert rollover images (if you want rollovers), just the same as you would a normal image in Dreamweaver.

Another way is by using a 'spry' to make an editable navigation bar with drop down menus.

I had a go using a spry navigation bar, but I felt it was too confusing to edit using CSS. Also, I didn't need to make use of the drop down menu in a spry, so I went with the conventional rollover image.

I created these buttons in Fireworks, making a black box with white writing in as the 'up' state, then changing the font colour to the yellow seen everywhere else on the website as the 'over' state, then adding a yellow line on the left as the 'on' state. Below is the set of home buttons for the website:

The first is the 'over' state, when the mouse is hovered over the button. The second is when the button has been clicked on to follow the link, so this is the new 'up' state, called the 'on' state.
Thirdly, this is both. When the home page is being viewed, the 'on' state is seen. Now when the mouse is hovered over again, this is the 'on' and 'over' state seen together.
Lastly, the simple 'up' state, when you are not on the home page and are not hovering the mouse over.

These buttons will be the same for the other pages too, I just need to think how to link back to the index page relatively discreetly.

First Draft

I created all of the pages that I think I'll use by copying the template of the index page, shown earlier.
The pages I created after the index page were:

Home - to give an outline of the website and prices for the services
Engineers - as the website is about sound engineering I created a page to give a bio of myself and my course mate.
Music - obviously as a music website I need some sort of music page. I will probably include a setlist from sound cloud here.
Gallery - Here I'll include a slideshow of any live pictures taken. There are no pictures at the moment, so I may just have to include some text explaining that.
Contact - This speaks for itself really. A way to contact me (or the company in general) to book services.

There will also be a thank you page that will be seen after a viewer has sent a form, although this will be called 'FormtoEmail'.