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'.

Website Icon

When you save a web page to your favourites, or in newer versions of search engines, a small picture can be seen next to the URL or in your favourites/bookmarks page. This little image is called an icon, and can be assigned to your website with a small piece of code between the head tags.

I found out how to do this a while ago, so I decided to get this out of the way early this time.
Favicon is a website that generates a small icon for you from an image you have uploaded. I created a black box that was 500x500 pixels with a white 'Z' in. The website then shrunk it down to 32x32 pixels for me in an 'icon' format (favicon.ico).
I then have to put this icon straight into the root folder of my website, as well as adding the code "<link rel="shortcut icon" href="favicon.ico" >" between the head tags on all of my pages.

All this does is locate this icon and put it where it is supposed to be on the browser (bookmarks page, in the tab, next to the URL) by linking to the icon in your root directory.

It's very simple, but looks a lot more professional than having a blank square there...

Design Changes

I realised that as well as having a home page, I could also create a sort of 'welcome' page that is seen first when someone enters my website.

This page will have a completely different layout, as I said, just welcoming the user.
It will include my logo, possibly some sort of image and the navigation bar to get to other pages.

Below is an image of a rough mock-up in Dreamweaver:

I am trying to get rid of the white line opn the right-hand side of the headphones picture, and I will add the navigational bar after I make the rollover buttons in Fireworks.

I will build on this, but this design is generally how I want my website to look as the potential customer enters my website.

Change to Resolution

Although the most popular screen resolution by W3Schools standards was 1366x768, in reality a lot of my target audience have smaler screens.

This is just a quick post to say that to compensate for this, I have changed the resolution of my Dreamweaver files to 1280x768. This hasn't made too much of a dramatic change, but now more of the webpage will fit on computer screens for those with smaller resolutions as well as the pages still looking good on a big screen.

'Contact Us' Pages

As a business it is vital that your website has a well-designed contact page.
As a business you will generally want customers, so why would you hinder the way that your customers can contact you about your product or service?

Below are a couple of major websites' contact pages, which I will analyse in terms of usability.

BT

This website has a very goot contact page. As the list of complaints or queries that BT could get is so massive, they have broken them down so the user can pick a specific area to ask about.

This makes the contact page a lot more user-friendly and easy to use, with icons as well as text to show customers where to go.

Google

Google could be classed as an even bigger company than BT. However in my own opinion I think that the contact page for Google is a LOT worse.
Earlier on the blog, in the post about bad websites, I mentioned how there was too much text on the page. I think Google has pioneered this on their contact page.
They appear to have tried to separate the queries too, like BT, but haven't done it very well. The page looks very complicated and when I looked at it I wouldn't have known exactly where to look, forcing me to scan my eyes over the page in a struggle to find what I need.

I will have to keep these things in mind when creating my contact page, although I will make mine a lot simpler as I won't need to ask my customers what they are asking about.

ID's and Classes - What's the Difference?

ID's and classes are used with div tags to basically give the tags a name.

ID's are written with a hash at the beginning, so the code <div id="box"></div> would create a div tag with the ID 'box'. In the style, the ID would be written as #box.
Classes are written the same, but with a period instead of a hash, so it would be written in the style as .box

The major difference between them is that classes are used to group things together. For example, and ID can be used to define the size of a div tag on a single page, whereas a class could be used to choose the font style, or font size that will be used on every page.

You could just choose the font and font style etc. in every single ID of a box on every single page, but that adds unnecessary lines of code to each style, when only a single line of code could be used with a class.

When making my last website, I made the mistake of not using any classes, which made the file size of my CSS document a lot bigger than it could have been, which, in turn, will increase the loading time of the web page and driving away a potential customer.
This time, I will pioneer the use of classes to ensure I have a website that loads quickly, and is also a lot neater.

Search Engine Optimisation

Search Engine Optimisation (or SEO) is the way you design your website optimally for seach engines (sounds obvious now, right?).
It includes mainly things like keywords and other 'meta tags' that I will go on to explain.

When someone at home types some words into search engines like Google, Bing or Yahoo! the search engines' 'bots' as we like to call them, search through the meta tags in your website coding to check if any of the keywords match and prioritise the results accordingly, depending on how many keywords match.
Also, the description meta tag is displayed on a search result underneath the title. The picture below shows which part of a search result links to which type of meta tag:

Simple as that really. Choosing the right text to put in a description is key, not too long so it doesn't fit, but long enough to give a potential customer the right idea of the websites' aims.

When a search engine trawls through your website, it picks out certain elements. One of the main things are 'header' tags. In HTML code, they are seen as <h1> or <h2> up to <h6>. These are ultimately different priority levels of headings, that affects the font size to start with (although this can be changed with CSS styling).
When a search engine sees a 'h1' tag, it sees this as, basically, a keyword. So when someone types something in to be searched, if something in your 'h1' tag matches, your website could potentially appear high up in the results. This is why it is important to use heading tags to outline certain words or titles on your website.

A meta keyword tag does the same job, however this defines a general set of keywords for the page you add them to.

This link should take you to a PDF document by Google outlining good SEO techniques. I will use this to my advantage when creating my website.

Colour Schemes

Imagine you are redecorating your living room, but you just want a new coat of paint and no wallpaper. Obviously you will want it to look appealing and easy on the eye.
Well websites are the same. People will be browsing your websites just as they would be looking around when they walk through your lounge.
If they look at it and their eyes start hurting through bad choice of colours, you know you've gone wrong somewhere.

For this reason, a good website to use when designing is Kuler, by Adobe.
Kuler is a way of finding a set of different colours that mathematically work well with each other. You can pick a single colour and Kuler will arrange the rest of the set for you, to work with that colour, or you can ask it to create a whole new one for you.
Another interesting thing about Kuler is that if you have a picture or logo that you have already created, or that someone has created for you, you can take that image, upload it through Kuler and a new colour scheme will be created around that image.

When making these colour schemes, Kuler gives you the colours' 'hex values', which is a line of numbers following a hash (#) that is individual to a colour. So the advantage of this is that you can use these colours again by just copying the numbers into Dreamweaver. Especially useful if someone has sent you an image but not the colour hex values.

Below is a video that shows how the website works, basicallt putting everything explained above into practise. This video is showing images of my already existing website, not the logos and colours of the website I will be creating for this module. However if you click here you can see the colour scheme that Kuler has picked for my logo.

Ideas and Logos

I started by mocking up some ideas and logos in Adobe InDesign, trying different effects and styles.

First of all, I came up with this design for the website banner:

I believed that this showed that the website will deal with music business, due to the mixing desks behind the word. I carried out a small dose of primary research to see who thought the logo looked good, where only 3 out of 10 people said it did.

I didn't really like the font style either, so I quickly decided to change the logo and think of something else.

Below is the second idea for my logo:

I think that the yellow stands out a lot more than the purple, and also the 'Impact' font is very bold, so it stands out vividly, but is still very easy to read.
The first logo above has a purple colour that does stand out to a certain extent, and the font would make you go "that's interesting, I wonder what it's about!". However as the font is very flamboyant and curly, it's hard to read from a distance, whereas the bottom logo is a lot easier to read, especially from a distance as it is the type of logo that can be made huge while still looking good.

The one downside I can think about the bottom logo is that it is a little bit plain. Although in defence, that is why I added the vertical 'studio and live sound engineers' above it. This acts as a short description, sort of looks like a sound level meter (which links with what the website will be about), and generally makes the logo more interesting.

UPDATE: I saved this post as a draft so I could go and ask the same people, plus others, what they thought of my new logo.
All of the people I showed before said this one looked much more professional, and all but one of the others I asked said that they really liked it.
The one that didn't brought up and interesting point, which was already on my mind. I will explain that now.

It's not a major point, but I may be caught out on it. In the vertical text I have written 'engineers'. I was advised, and already had in my mind, to change this to 'engineering'. This is because 'engineering' advertises the business, whereas 'engineers' advertises the people themselves. I want to advertise as a business service, possible trademarking the logo in the future, not advertising as a person.

Meta Tags

'Meta' means 'something about something'. In a meta tag we are entering metadata - which is data (or information) about data.
The reason for this is to give the page a description and keywords. They won't be visible on your page, but they will be readable by search engines and other robots.

As this is vital data, but we don't want to see the code, we need to put the tags inside the 'head' tag of our document.

Meta tags can do some interesting things, like define how your page actually functions.
While reading W3Schools page on meta tags, I learnt that you can make the page refresh itself over a defined amount of time. The page can be seen here.

Meta tags are important to every webpage in order for it to be found in a web search. Due to this, I will definitely add these tags to my web site.

Also, in HTML meta tags don't need to be closed, which is why I haven't done so in my website, just incase you were wondering.

Creative Style Sheets

Creative Style Sheets, more commonly known as its abbreviation - CSS - is a more convenient way of styling div tags and layouts than using styles inside the html.

Say for example that you wanted a box on every page of your website that has a red background. You could use the style option in the html to put that red background on every page you need it on.
Another way would be to give that box the class name 'red' (in reality, you would have a much more recognisable name), and write out that style a single time in the CSS style sheet.

This way, you save memory on your file transfer server, normally on your hosting provider (one.com for me).
Although you have one extra file to upload to the server, instead of writing out that red background style many times, you only write it once. This will reduce the file size of every page significantly, especially when you have a nearly completed website, with lots of different styles.

As the file sizes are smaller, this ultimately means a shorter loading time for your website. This is important because if your website takes ages to load, it could drive potential customers away.

'Div' Tags

This will be a short post, as div tags are simple and easy to explain.

A div tag on it's own does nothing. It shows up transparent on a web page and you can't see anything. What it does is make a box on a web page that you can then edit using styles or using CSS, which will be on the next post.
You can't actually do anything with the div tag itself except type into it. Even then, the font is a bog standard 'Times New Roman' and in black. This is useless if you want a black background for your website!

This is why they need to be styled. Briefly, as CSS will be covered in the next post, you can change the div's background colour, font style, font weight, size of the box, define any borders and lots of other things. But most importantly (in my opinion anyway) it lets you change the position of the box on a web page. This is key when creating a layout for a website, as you get lots of flexibility for your creativity to run wild!

Next is CSS.

'Head' and 'Body' Tags

In any form of web code, there is always a head tag and a body tag.
These are fundamental parts of HTML code, and without them the code cannot be read.

The head tag basically houses all the bits of code that aren't going to be seen on a page, like meta tags, page titles, and some pieces of script. Styles are also put into the head tag when a CSS is not used.

The body tag includes all of the div tags, links, images, rollover button functions...
Basically everything that the website is.

W3Schools has some good pages on all the different types of tags, although I have covered the main information that they mentioned, so I won't link to the pages.

Dreamweaver Wire Frame

Below is a rough wire frame I created in Dreamweaver, just to get the initial picture of the website across.

If you click on the picture, it should enlarge.

The colours are not accurate either, (or this would be a horrible website to look at!), they are just there to vividly outline the various different boxes on the page.

As I have a basic understanding of web design already, I was able to create a series of div tags and align them in a rough position of where I will want these attributes.

The main container div tag (in the lighter blue colour) was set to a 1366x768px height and width to get a feel for the size.

 Also, the black div tag, which would be the box with all of the content, was set to 1024x768px. This was done so that those with a very large monitor resolution can see the whole background as well, but those with a smaller, but almost equally as popular, resolution (1024x768px), they will still be able to see all of the content without scrolling anywhere.

The next post will cover colour schemes.

Browsers and Resolutions

Before I get ahead of myself, however, I need to work out how big I should make my website.
w3schools is a website all about the internet.
Through this website I can find the most popular web browsers and resolutions, which is good information for my own website.

First of all, browsers. There are many different browsers: Safari, Internet Explorer, Firefox, Google Chrome and Opera. All of these browsers are used across the globe, as different people have their preferences, but as a website developer, it is wise to design your websites towards the majority.

On the browser section of w3schools (found here) it can be seen that in February of this year, Firefox is in the lead, only just beating Google Chrome.

Screen resolutions are more important, however, as it affects how the website actually looks on someones computer.

From this, 1024x768 is the most popular 'normal' resolution.
But as the website says, most people are using browsers higher than 1024x768.

Here is the list of all the resolutions higher than 1024x768. From this, 1366x768 is the most popular, probably because of more modern wide-screen monitors.

Rough Wire Frame and Site Map

Below is a scan of a wire frame that I drew out. This is only an initial design and it is almost inevitable that it will change when it comes to making the website itself.
Here it is:

This is a fairly simple layout, and I plan to have something more interesting than this, but I drew out a simple wire frame in order to get an initial idea as to how my website will look.

Next, I plan to create this wire frame in Dreamweaver, so I can get an idea of actually how big the images need to be that I will use on my website.

Below is a site map of the website I have in my head. I plan to follow this map and make the same about of pages on the actual website. There might be more, however, but I don't want there to be any less.

All of the pages will have a navigation bar at the top, so all pages will be able to link to each other. The reason why the external sites have '(All)' next to them, is because they will also be linked from every page.

With this in mind, I plan to make the index page in its infant stage first, then copy that design as many times as there are page ideas. This means I don't have to make each page from scratch and that all pages will have the same basic layout, creating a theme throughout the website.

How to design the website

When making a website, the sole aim is to please those that will use it. For all of the many websites on the internet, the aim will be different for different target audiences. However there is one rule that should be present on every website: good usability.

Steve Krug has written a book titles 'Don't Make Me Think!: A Common Sense Approach to Web Usability' which helps to design websites with the user in mind.
Every website should be easy to use and if it is, the consumers will love you as a web designer. If they have to search forever to find something on your website, you have failed in making a website with good usability.

I will have to keep this in mind when designing my website to make sure people of nearly all ages will be able to use it with ease.

Bad Websites

It would be logical to search for websites that I find interesting and influential so I can base my ideas around that, however the search would never have an ending. You could be searching for hours on end finding websites you like.
For this reason I decided to look at very bad and unappealing websites so I can know what to avoid. Below are some screenshots of horrible websites that I need to steer clear of.

As you can see, the horrible array of colours, highlighting and badly created text boxes detract from the quality of this website. It may be the easiest website to use in the world, but in a usability point of view, if a potential customer finds your website and find their eyes burning from all the colours, then it will steer them away from the website, and possibly the whole business. This can be found here.

The next website should literally make you say "what on Earth!?". You'll see what I mean when you look at it. As a question, can you tell me how to get to the politics section? You probably can't very easily.

To cut this page some slack, the 'web pages that suck' pasted across the background was not part of the original website, that was added on by the website this was posted on. Havem Works is an independant American new website. As you can see, it is not nice to look at. There isn't an easily recognisable navigation system and the page has a lot of block text, which users do not want to read, even if it is a news website. This is probably about one tenth of the whole page too. On the actual website, you can scroll down for a good 30 seconds before you hit the bottom. This also just contains more boring text to read. At the top of this site there seems to be too many colours, however further down the page the website seemed to desaturate, making it dull and text-heavy. This website is (thankfully) no longer up and running. Probably due to it being voted the worst website in the world... But the full size screen capture can be found here.

That's about all my eyes can handle in terms of bad websites. I looked at a lot more than this, but these two particularly caught my attention and were helpful in explaining my points.

Now I know what to avoid, I can start to draw and plan a wire frame and designs for my website.

What is it about?

This will be a relatively small post outlining what my website will be about.

As I take music technology, I already planned to create a website based around that subject.
While in a lecture I came up with the idea of a business that specialises in managing the sound for live performances, while recording them and doing some studio work as well - covering the main areas that I want to get into in the future. I teamed up with someone else from my course, forming a partnership. It is this business that I plan to make my website about - Zone Audio.

For a more detailed explanation, Zone Audio is there to provide live sound services, just managing the sound or even recording bands while they play live. Also, we will perform studio work, taking bands to a studio (firstly our home studio, then in the long run a separate flat/building/room that will house a studio) and recording them, mixing, mastering and selling the music online for all bands or artists through the website.
We will also manage or set up all of the social media advertisement for bands or artists that work with us, if they wish to stay affiliated with us, which means less pressure on them and more business for us.

The website will just be a way of advertising ourselves as well as somewhere to store our recordings in the same website.

There we have it! Now I need to start researching other websites to give me an idea of how it should look.

Name Ideas and my Plan to Win

I plan to create my website as a sub-domain for my already up-and-running website; Beeson Audio Productions.

The website I have already designed was intended to advertise the composition part of my career. The side that I haven't covered is the business and production part. That is what I intend this sub-category to be about.
The original webiste was also created in Dreamweaver using a lot of 'drag and drop' kind of methods. With the new coding skills I will learn in this Add+Vantage module I hope to create a more sophisticated website advertising my business side.

For this reason, I thought of some sub-domain names for my website. These are my ideas:
          - www.beesonaudioproductions.co.uk/business
          - .../recording
          - .../audio-technology
          - .../zone-audio

Recently, I have joined forces with someone else on my course and created a live sound and studio engineering business called Zone Audio. This is why my last idea was ".../zone-audio".
For this reason, I plan to create a sub-domain for this business and use it as a reference point for potential employers to direct them to all the work I have done with this group as my business side.

The next post on the blog will be about good or bad websites that I have looked at for research.

The Blog!

This is just an introduction post to my blog for A104MC.
The blog itself will contain all the production stages of my website as well as ideas and designs I plan to create or try out.

I hope you enjoy reading and for future reference, I hope you like my website!