Blog Div Tag Changes

After I made more posts on my Tumblr blog, I realised that the div tag for the homepage blog was getting very long.
A simple change had to be made in order to get a 'scroll' effect on he div tag, changing the overflow to scroll.
Although this is very useful it looks a lot better on the Safari browser, as the scroll bar is invisible until you mouse over the div tag. But all in all it makes everything much neater!

Feedback!

I decided that to get a good bank of feedback for my website, I should show it to people that sit right in my target audience. I started by posting my website on my facebook page, my artist page and my personal page, asking for feedback. Below are a list of pictures showing peoples comments.

The main conclusion is that the people that did comment seemed to like the website, as well as the people who liked the post. In terms of the changes that some people made, one person stated that they didn't like the blue 'glow' effect on some of the objects on my page. However after personally asking other people they proclaimed that it looked fine. If the majority of people suggested that I should change the colour of this glow to a different shade, then I would do so. However everyone apart from one person said they really liked it, so I won't change it.

One comment that I got in a private message was that they think it would look better if the 'smokey' background stretched across the whole screen instead of the blue/black gradient. I decided to go along with this idea to make my website look more interesting.

Changes to the Contact Page Using Sprys

I posted my website on my personal facebook so people could have a look at it and tell me what they think...
I then received some emails from my 'form to contact' boxes on my contact page, one said 'sdfsfdfsdfd' or something to that effect in the name, email and message box.
This put the thought process through my head of 'how do other websites design their website so you are required to give a valid email address?'. I went away to the internet to find out, and through this page on the adobe website I found that it can be done through sprys.

I have changed the email box so that you have to have something with an @ sign and a period (.), but without telling  the audience.
If I told the viewers that they only need something that includes an @ sign and a period, then they could still sent untraceable and un-replyable messages by just literally typing '@.'. By not telling them what characters are required, if they type something that isn't an email address (for example one of the emails I got from posting my site was apparently from 'bunion.com') then it won't let them send it, in turn making them think they need a proper email address.

All this is not for security reasons, more so that I can reply to those that send messages, and personalised ones at that - "Hey there Joe! Thanks for the message."

Finished Contact Page

After playing around in Dreamweaver for a bit I came across something called a form. Forms are basically what you associate them in reality: something that you fill out and send or give to someone.

In Dreamweaver it can consist of any number or boxes that a user types into and sends that information somewhere. I used this for my contact page and created a 'name', 'email' and 'message' box, which when filled in and sent, gets sent to my website email address.

This is very useful for both consumers and producers in terms of usability. For me, it is an easy way to get a users' questions or even employment opportunities (if they want to book me to mix a track or create a soundtrack for them) sent to my website email address. It is also a much easier way for users to send it without being diverted away from my website to copy and paste an email address into hotmail or google mail or something similar. It makes it feel like the message being sent is integrated within the website.

The only problem with this is that search engine robots can easily find my website, trawl through it, find my email address from this form and spam my email with junk mail.
After a bit of research about this, I found this website.
It talks about the different kinds of bots and how to prevent them in different ways from searching your website. You can order certain bots to leave your site alone, or all bots to not search a certain page of your website.

I will make one of these simple documents and direct all bots away from my contact page and my new sent page (a page telling viewers that their message has been sent. This page cannot be accessed unless a message is sent as it is not linked to from any other page). This should stop bots searching these pages and being able to find my email address.

Now that this page is finished, I believe I just need to add some more to my 'about me' page and the website will be finished! Hooray! :D

Link Testing

As my website is coming to a close, I decided to create a link test to make sure all of my links work.
This is simply just a table of sorts with different coloured boxes to give a formulated way of checking all your links work correctly, instead of spontaneously clicking everywhere on your website. Below is my result:

There are a couple of things I should explain here.
As a key, the grey boxes are just the name of the links, the green boxes are working links and the black boxes mean that there was no link created.

The black boxes that travel diagonally down and right are because there is no need to link a page to itself other than to refresh the page in a different manner. The group of black boxes to the right are because on my external sites like YouTube, Facebook and Soundcloud, I have only put something like "check out my website: http://www.beesonaudioproductions.co.uk" which would take you to the index page. I haven't linked from those websites directly to my 'about me' page for example.
However, I have linked to the other external sites. For example I have linked to my Facebook page from my YouTube page.

From this I can easily see that all of my links are working, which is good! :D

The Finished Flash Banner!

So as the title suggests, I finished it.
Despite it being such a small thing, it took me a long time to do. I was surprised at how well I could remember to use Flash with no prior training or experience. But with my skills in Logic already inside, I was able to create a nice little sound to go with my Flash Animation.

Here is where you can see the finished banner.
The reason for this is to try and make my website 'sticky' (yes, this is a proper term).
A sticky website makes customers or viewers stay on the website and this is exactly what I want to do. I don't want people looking at my website and going 'this is boring!' and leaving almost immediately. I created a flashing effect with the three words 'BeesonTheBeeson' on my index page, having them fade in and out fairly quickly one by one, followed by flashing with the blue glow effect. This is all accompanied by a dark sound clip intended to 'wow' the viewers as they enter my website.

I'm quite proud of this little animation to be honest :]

Flash!

After a lecture on how to use Adobe's Flash I decided I can now create a more interesting index page. I already had an idea for this before, but due to the fact that I didn't know how to use flash I was very reluctant to try it. However now I can have a go and I have a couple of weeks to perfect it.

In a future post I'll share how well or how badly this flash element is going!

Better Music Page

I recently changed my music page on my website to something a bit more concise and user-friendly.
Instead of having loads of separate tracks I found a way to group all of my sound cloud tracks to a single player.
It looks much better now, although there are some things I need to consider.
At the moment I don't have any albums out or any songs that go with each other, so if I create another song and want to upload it, I'll have to recreate the player again.
This kind of player is more suited for when I do have albums out, so I can group a whole album in a single player. But it is appropriate now for the purpose of this page, so it shall stay! :]

The Homepage Is Alive!

I finally found a way to be able to update my homepage in a blog-type manner, without having to create a new div tag, move the old one down, put the new one exactly where the old one was before and making sure all the posts were the same distance apart from each other blah blah blah..

I was surfing through my tumblr* account the other day and found something saying 'embed my blog', giving me a code to be able to embed it.
After finding this out I created a new tumblog (tumblr blog) for my website/artist name BeesonTheBeeson and embedded that blog onto my website in the 'main_image' div. This did not work, however and I quickly realised that the blog would need it's own div tag.
I quickly created one (I can do these pretty quickly now I've had a lot of practise!) and formatted the CSS for it to get it to sit where I wanted. I then embedded the blog into this div tag in the code editor and voila! A new blog on my homepage.

At last! My worries are over and I can now update my website quickly and easily.

The good thing about this is that I wanted to be able to update my website like a blog, so I have basically achieved what I wanted :]

Meta Tags, Description Text and Other HTML Tags

In a recent lecture the words 'meta tags' and 'metadata' were mentioned. I wasn't entirely sure what this was, so I decided to research about it, and here is what I found out.
Meta tags, or meta elements, are used to give metadata for a specific web page.
They are written in the form <meta ... > and are always placed in the <head> tag
This metadata can be read by browsers, to determine how to display or reload a webpage, search engines to find keywords and by other services.
You will mainly use meta tags to make sure your website is search engine ready when it goes online.
In order to do this, you need to use the following tag:

<meta name="description" content="insert description here" />

Where I have written 'insert description here' is obviously where you write a description of the website. Meta tags generally go in between the head tags (Between <head> and </head>. This is done so that people who find a link to your website on google results they can instantly see whether they have found what they are looking for.

Another way to insert meta tags if you are unsure where meta tags go in the code is to, in the design view of Dreamweaver, go to insert > HTML > Head Tags > descriptionA little text box field pops up and here is where you write a description for your website. This creates a meta tag for you and places it where it needs to go in the code. To create a title meta tag you can just type it in the 'title' box at the top of the design view. In this description tag you can put a lot more detail, from a couple of sentences to a short paragraph, to describe your website better. Below are two pictures that show what the title and description do to a website.

The first bit in the blue writing is the pages title. Which is why this part should be short but descriptive.


Underneath in the black writing we have the meta tag description. This describes the website in more detail, but still without being too long.

Gradient

I decided while in the last lecture that having a plain black background was a bit boring, so I decided on having a gradient, made in paint, to spice up the background very subtly.
I straight away decided to have a black fading into the blue that surrounds most aspects of my pages, and I designed this gradient in pain:

Normally you would draw a line in one of the colours from the top-left corner to the bottom-right corner. I did try this at first but the blue lasted a little bit too long for my liking, so I thought that by moving the line further to the top-right, it would decrease the amount of blue in the gradient. Much to my surprise, it worked! You can see the gradient in action by visiting my website. Unless I change it, of course, in which case I shall mention it in a later post.

A big change!

I was thinking about my very first site map of my website, with the index page including the flashing 'click start' thing... After looking at this website here, which is a website for the band Enter Shikari, I noticed that their index page consists of the banner and links to pre-order their new album (as of 21st November 2011).
So by merging my idea and this idea together, I decided to make a main page to start with that will serve as a sort of portal page for the rest of my website. Since I don't have any albums to advertise (yet) I thought I should make a page with links to the normal home page, about me page and the rest.
Although it may seem pretty pointless, it will serve me better in the future when I have really important things to share with my audience. At the moment, it just links people to the rest of my website in an interesting way, however if I did have an album coming out or a gig coming up or something similar, I could change this page only to show this, keeping the rest of my website intact.
Below is the first idea that I had:

I quite liked this at first glance, and thought it worked well with the rest of my website. However, with the line in the middle, it looks like the page is separated out and because the links don't need to be separated I thought I should move it to the bottom so all the links can be together.




Below is the second version of this page:

I liked this one better everything was a lot more formally laid out. I also moved the 'contact' link to the bottom left of the page as a hyperlink instead of having it with the others. This is just to follow the conventions that other websites seem to follow.

Colour Schemes

After a lecture about colour schemes, I thought I thought think about them for my website.
A good place to start would be with the specialised colour scheme website by Adobe, called Kuler.
http://kuler.adobe.com/
Kuler is good as it will allow you pick a colour scheme that other people have made, look at it and eventually let you copy the hex values (basically a colours' identity number).

The only problem with this, however, is that I had already made my banner by now, and I didn't want to go changing colours from something that I liked.
This brings me on nicely to another cool feature in Kuler, where you can upload a picture and it will work a colour scheme out for you. This then lets you change the shades of colours using some sort of mathematics to a brighter or darker feel, for example.
Clicking here should send you to the colour scheme that I created by uploading the PNG image of my banner.
Below is also a tutorial video on how to use Kuler and the steps I took to create my colour scheme:

Facebook Like Box

After making a page for my artist name 'BeesonTheBeeson', I decided that as an innovative way to guide people to my facebook page from my website would be to add a 'like box' to my website.
From the facebook page of my group while logged in I had the option to choose the colour of the box, colour of the outline and other attributes. After choosing how I wanted the box to look, I got the code for it and added it to my code in Dreamweaver.

This like box will be present on every page of my website.

Changes to the Banner and Image Mapping!

To link people to my other websites, such as YouTube or Soundcloud, I planned to have links to them in my contact, music and videos pages. However I thought that a more intuitive way of linking them, using the 'F' layout, would be to place buttons for these websites onto my banner.

To start with, I didn't know how to do this but after a bit of research using my favourite tool 'Google', I found something called an 'image map'.
This is a way of drawing a shape around a part of an image in Dreamweaver and linking that map of the image to a certain place. Below is an image of my new banner with a YouTube and Soundcloud image on them:

As you can see I now have a YouTube and Soundcloud logo at the bottom right of my banner. I also added a handwritten font saying 'Find me here!', pointing to these logos with a hand-drawn arrow shape. This is just to give my website a hand-made kind of feel for my viewers.


Image Maps!


Using image maps I dragged a square/rectangle box around my YouTube and Soundcloud logos to link to my pages on those websites. I also used the custom shape image map and drew around the words 'BeesonTheBeeson', as that is my logo, and linked it back to the homepage. This way, my logo will link back to the homepage from every other page.

Target Audience

Although it's a bit late I decided to make a post about target audiences for my website. I did have my target audience in my head, but never logged it on my blog.

Ideally I want fans of the music that I make to be my major target audience, between the ages of around 13-30. But obviously I'm not going to complain if I have fans outside of that range.
Similarly, other musicians will be my target audience, so if my music gets big one day I can do collaborations with bigger musicians to get my name out there. These two kinds of audiences are factors in the design of my website, and how I want my image to come across to other people.

In my eyes, I want my website to be more based on my music artists side of things, as opposed to the professional audio engineering. That way, if my music gets big I have a website to point my audience to, but it can also serve the purpose of showing a potential employer my work without it looking unprofessional.

Problems with my page

After adding the buttons in by using div tags, the main image seemed to disappear when viewing on the internet. For help I went to my lecturer to find out how to fix this problem. First of all, we noticed that the div container for my banner was not closed. Anoher thing that was mentioned was the z-index of the image.

The z-index is how far forward or backward a picture or other element is on a web page. Similar to the arrangement tool in word.

When I got home I tried out these two methods. Closing the div tag didn't do anything, but the z-index did make the image reappear. Although this method worked, using the new navigational bar mentioned in an earlier post stopped the problem anyway, so I shall carry on working with that.

The reason for this post is to show that a couple of small things can make a big difference. The z-index value of an object can be very important on a web page, and although it didn't work it is always good practise to make sure you close every div tag.

Navigation (cont.)

Inside Dreamweaver there is a navigational bar tool. I used this to insert my newly created buttons, seen below. The first image is the 'up image', the second is the 'over image' and the third is used as an 'over image' when the corresponding page is being viewed. For example, when the user is on the 'home' page, the home button will have a constant grey background. When the buttons are hovered over with the cursor, the background turns grey, however when on the homepage and the background is constantly grey, this third button is used as an over image. A screencast video is underneath these three images to audibly explain the button system:

Home Up

Home Over

Home 3

Navigation

I now needed to think about how the buttons would look.
To start off with I used Adobe Fireworks to create two GIF images to act as inserted rollover buttons in Dreamweaver. Below is the first design I had:

<-- To be used as an 'up image', when the button is in its normal state.

                                 To be used when the cursor is over the button. -->

To insert these buttons I created separate 'div' tags for each button, and inserted them as rollover images in Dreamweaver.
The only problem I had with these buttons was the fact that the font inside them didn't really fit with the page. That and the fact that they seemed to ruin the layout of the page, making the main image disappear.

My next goal would be to make the buttons more interesting and find a new way of making them work.

Main Image

I needed to get a main image as the background for my website. I thought that with the way my banner looked, I should go with a ghostly kind of feel.
I found a royalty free image from the internet that had a smoky background and I edited the picture to make it seem more eerie:

This is the final image. I am quite happy with this: it's simple and doesn't distract the viewer from the actual content of the page.

Now for a navigation element!

Getting Rid of Ideas

After thinking more about how I want the website to look, I decided to scrap the idea of the video game-style 'click start' idea. So from the earlier post with the spider diagram showing a site map, I can now disregard the first index page.

Website Banner

I finished a design for the banner of my website, which will be shown at the top of all my pages. Below is what I have:

This is something I created in Photoshop, using a variety of tools. The next post will be a screencasted video showing roughly how I made the banner.

I think this is good, and I like it. I don't think I will change the design of the banner dramatically anymore, although I may change smaller things when I need to change them.

Layout of a Website

Before I start thinking in more detail about layouts for my web page I need to think about a certain aspect of the viewers perspective: where do people look on a web page?

Jakob Nielsen of www.useit.com carried out a 232 person study, which can be found here, that tracked peoples' eye movements across a webpage by bouncing harmless lasers off of their eyes. A pattern occurred between all of these people that created a kind of 'F' shape on the page. There are pictures to illustrate this on the website.

Therefore, when designing my web pages I need to think of this 'F' model and put the most important things within this shape.

Site Map

Below is a site map of what should be on my website:

The very first index page is a new idea I had recently. Since the video game industry is of interest to me, and I enjoy video games in my spare time, I thought it would be quite cool to have my banner at the top and then a flashing image saying "click start" prompting the user to click it to go to the home/blog page of my website.
The only draw-back to this is that it may cause confusion to people who don't know video games, and it may just be an inconvenience. I will have to equate the pros and cons of a page like this to see whether it is worth the extra time.

Search Engine Optimisation

Search Engine Optimisation (SEO) is in other words designing your website to work well with search engines like Google, Yahoo! and Bing.

Briefly, things like giving a short but descriptive title for your page helps, so does including a good paragraph for the meta descriptive tag (which will be explained much later in the blog).

The link here should take you to a PDF by Google giving detailed instructions on how to, for lack of a better word, optimise your website for search engines.

CSS Anyone?

CSS (or Cascading Style Sheets) is a language used to describe the presentation semantics of HTML, XHTML or any other kind of XML document.

It's primary use is to separate document content from document presentation. This uncludes things like fonts, colours and layouts.

Before CSS was introduced, almost all of the HTML presentational attributes were contained inside the HTML markup. All of the fonts, font colours, background styles, borders and styles all had to be explained specifically within the HTML. CSS would allow you to to move a lot of that information to a separate, external style sheet, making HTML markup a lot easier.

So in summary, use CSS a lot.

A New Way To Make Pages

After reading through that Adobe tutorial and after learning some new techniques in one of my lectures, I discovered that instead of just making a page and dragging it into dreamweaver, I should be making each section of the page (banner, main image, buttons etc.) separately and placing them into 'div' tags or containers in Dreamweaver.

'Div' tags are the most important thing in HTML coding to create a layout for your website. Although, on their own, they don't do much or look like anything in particular, they create boxes that you can modify in any way to make a specific layout on your page.
From now on I will be trying to make my web pages using 'div' tags, along with something called 'external CSS' to make my web pages. The next post will be some more detail about CSS and what it does.

First Homepage Draft

Below is a picture of a first draft of my homepage.

I don't like this page. I made this in photoshop, but in my opinion, it looks unprofessional and poorly made.
I don't think I'll use this page, so I'll start again and try making some other pages.

Starting the Home Page

After some troubling thoughts about starting the front page of my website, I decided to look around on the internet for ideas or tutorials on the best way to start.
On the Adobe website itself there is a good tutorial on how to start a website from scratch, explaining very simply things like how to insert div tags and even how to set up a Dreamweaver site folder.
Here is the tutorial:
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

I will follow this website through, following it exactly to get to grips with the whole thing, then go through it again but changing things to make it my own website, and then maybe try the steps myself, without actually reading the tutorial, to check if the knowledge has sunk in. This will be a good way to test myself and my knowledge of Dreamweaver and web design in general.

OS and Screen Resolution Statistics with Usability

There will just be a couple of images here, but to carry on with the browser statistics of the last post, here are the figures for operating systems and screen resolutions:

OS systems:

Screen resolutions:

The screen resolution is more important here as obviously different people use different sized screens.
In terms of usability, a well-designed website should have all the information of a page fitting into a single screen size, without having to scroll down to see the rest of the information.
If the website has a blog-type layout, then it will be more fitting to have a scrolling page. On most webpages nowadays you do have to scroll to see information and people are probably used to that.

Linking to the book Don't Make Me Think by Steve Krug, the title itself is very useful on its own. You shouldn't be making your audience think to have to carry out a task on your website. Which basically means that your pages should be simple and clearly laid out.

Browser Compatibility

Before I start making my pages I need to think about compatibility of different browsers.
Let's start off by saying that if you view the same web page on the same browser but one on a PC and one on a mac. They should look the same right? Not necessarily.
According to w3schools operating system statistics, 8.9% of computer users are macintosh based. There are some quite obvious differences between these two operating systems. One of them being the font used. Windows' primary font is Times New Roman, and a Mac uses Arial. The problem with this is that you may be trying to use a font that isn't available on both computers, so the font will change.

Your web browser is simply a translation device that takes HTML code and translates it into a formatted web page. Different browsers translate this code different to others and this is how we get browser compatibility issues with different browsers.
In order to avoid problems with this, website developers try to market websites to certain users based on statistics to show which kind of computer setup is most commonly used.
The website mentioned above, w3schools, shows which website browser it the most common.

As you can see from the picture above Firefox is used the most as of October 2011. This therefore means that website designers will majorly design their site around firefox users, although not completely ignoring Internet Explorer, Safari, Google Chrome and any other browsers.

Initial Ideas

Below is a picture that I scanned showing a couple of basic ideas for pages.

The left picture shows a draft for the music page. On this idea I had in my head the idea to have a background image that stays static on the page, with a box on top that scrolls when the user scrolls up or down. I planned to have a black background, with the backgrounds for the box in the middle a dark grey, to make it stand out. On my music page I plan to have a list of the songs I have created with a 20 or 30 second clip of the song to listen to, and then a chance to buy or download the song.

On the right is another design idea. On this one I chose to just have a normal page that all scrolls, with the navigation links on the left instead. The heading background and the button background would be black, however the box in the middle with the content on would be a grey colour, along with the navigational button that the content corresponds to.

These are just some basic ideas and I will build on these to eventually make something great!

Initial Thoughts

After a couple of nights of relaxation to clear my head, I started to think of some ideas for the design of my website. I'll draw them on some paper as rough sketches and post them in the next post.

So What's the Website About?

I suppose I better explain what my website will be about and the kind of links that will be on it.

I plan to have my homepage as a kind of blog format. Websites of artists such as Ronald Jenkees (http://www.ronaldjenkees.com/) have inspired me to do this. This will let me update my viewers with ease in an informal, modern way.

I also want to have other pages such as 'about me', 'music', 'videos' and a 'contact' tab.

The 'about me' tab is kind of self-explanatory. It will be a page telling my audience about me, the steps I have taken through life and why I have chosen them. This is the kind of aspect that I like to see from bands, artists or producers that I look up to. I like to be able to find out how other successful people got as big as they are.

The 'music' page will contain previews of music that I have made and links to ways of downloading them. I will probably link people to my SoundCloud page at this point for the full tracks and download/buy links.

'Videos' will be a page to show a couple of teaser trailers that I have designed, along with soundtracks that I have composed for films.

Finally, the 'contact' tab will allow my viewers to email me with questions or to 'book' me to mix a track for them, making my image look more professional.

The Beginnings of a University-Level Blog

So, I just made the blog... I'll start by explaining the kind of things that will be posted onto this blog.

This is a production blog for my website that will advertise myself and get my name out there in the big world. Therefore I need to sell myself on this website and make myself sound amazing.

On this blog I will frequently post updates to what I have been doing with the design for my website. Whether that is a change of background design, or a slight rotation in a picture. All of these changes, whether large or small, will be posted on this blog.

:]