Assignment: Create a website

After about 20+ hours of typing code, figuring out problems, researching solutions and experimenting, I have finally managed to finish my first website, and with only around 50kb used, I made sure that I didn't exceed the limit that was asked for. I couldn't remember the exact figure, I thought it was 100kb, but then looking through the powerpoint from last week it mentioned 60kb, so I ensured that I met both, as a single requirement is as important as any.

The website's development went through several stages. The first was the initial creation, which involved looking at codes from workshops, figuring out how I want the web pages to look, and checking it regularly in preview to ensure that I didn't encounter errors early on that weren't fixed. The design looked like this;

Version 1 of the website, initial layout and content.

As you can see (click the image for full resolution) there is a clear colour scheme going on, that is fluent throughout. The only problem with this layout was that it didn't look complete, and all of the content was pushed to the left of the screen. The colour scheme I liked so I kept it, but I decided to center the content, and center it, so that it looked neater and more professional.

Version 1.1, improved layout.

I then decided to experiment with other features. I was able to center the content, but I thought; if I have a footer, then surely I should include a header to help keep a concistent flow with the layout. As you can see above however, it doesn't look very good, as it merges in with the navigation area, and therefore makes the web page look like it was made in Microsoft Frontpage. The other problem is the background colour, how it is only a single colour which then takes up the whole area. I didn't like this as again it makes the website look unfinished, and emphasis on the empty space, which isn't what I want the user to be focusing on.

Version 2, div sections included for 2-colour background and experimentation of navigation area.

Now as you can see in the image above, I now have progressed alot more from having the content squashed into the left side of the page and looking unoganised, to now having a clean footer, a separated area for the content/body and a working navigation. The separate background colour was achieved through CSS by including another Div ID so that I had a separate area to include a background colour onto, as the body already had one assigned. This meant I could then designate a set area for the content to be placed into, by including a width a height property. The navigation area was still in the experimental stage, as ideally I was wanting a side navigation, but was halfway there to fullfilling my hopes. The focus at this moment of time was more on getting the layout for the content right, which I had achieved except from the navigation area, which was my next step.

Version 3, improved layout and added banner, with addition of the side navigation area.

This was a breakthrough for me, as I could now see the website taking shape and looking more professional and unique. I have added an image which is acting as a banner. It's purpose is to represent what this website is about, and to relate to myself also. The design is jsut to represent graphic design, and also typography as that is what the recent assignment with Gianni was related to. So the idea of the banner on my website is to keep up to date with events and projects that I may be working on.

As you can also see, I have fulfulled my initial intentions, as the side navigation area is now fully functional. The only problem I had was getting it aligned beside the content area rather than above it. This was achieved by assigning a 'positon' element to the CSS code, which was set to 'absolute'. This would mean that it would stay at the current position on the web page, and not stay to that position on the screen, as the option 'fixed' would do, as shown with the footer in place.

Upon the creation of this new and improved layout, I also decided to improve on the content, in terms of making it easier for the user to contact me and interact. I decided to include a reference to my blogs that i use for each module, but figured that if I didnt make it easy for them to get to each one, they wouldn't view them. So I decided to create a list of the modules which were separately hyperlinked to the allocated blog. They were assigned different colours to emphasis the difference and explained that they were links below.

Hyperlinked text to blogs and given different colours

Doing so helps users to interact with the web page and also to follow me, if they were interested in what I do and would like to keep upto date on my progress. Further contact has been included onto the contact page, such as my email and a link to my facebook profile, thus covering the web 2.0 and allowing users to easily contact me through various websites and media (email, profile comments, blog comments).

The navigation was also modified so that, when the user hovers over the desired navigation link, the text will appear larger, thus helping them to read which page they are pointing towards. To emphasis this, when the user clicks on the text and is redirected, the name of the page they are on changes colour and is underlined. This is just a simple change to help users navigate through the website.

Screenshot of navigation area changes explained above

The only problem I then had with this layout was that the navigation area seemed out of place, and did not match the current design of the website, so I decided to revert my idea for it and return to a horizontal navigation area.

Version 3.1, navigation reverted to horizontal for neater finish, problem with Div tag clash effecting footer.

Personally, the website now looks really professional, due to the neat layout, how it all goes down the page in a straight line, how both the text and images have a separate Div ID to give them a separate area to the content area, and how the footer fits to we.. wait no it doesnt't! I had an annoying problem with the footer's positioning on ONLY the portfolio web page. The problem for this (I think) is because I had too many DIV tags within the HTML, which then concluded in them clashing with eachother, causing the footer to appear wrongly positioned in comparison to the other web pages. I think this was the problem, as upon removing the footer there were no other mis-alignments with the layout and it was the only part of the web page which was not showing as intended. After the time I took to try and fix the problem, I decided that the footer didn't suit the new layout due to the sudden change of colour scheme and positioning, so I removed it from the code.

The last problem that I had to overcome was the file size limit. When I calculated the overall filesize of every document used for the website (.html pages, .css file, .javascript file, images) I had accumulated about 150kb, which was alot larger than the file size which I was intending. Because of the files being saved as normal GIF's, the file size was not greatly reduced. I did then have two options, to continue saving as a GIF but lower quality, or save as a JPEG. The JPEG format when saved with a quality number of 7 was 40kb, so GIF was only option, lowering quality to save filesize down to an average of 5kb for the images, with the exception of the banner which was 10kb(with quality of 2 colours) due to it's resolution. The resolution was 1000x300 so that it would be perfectly aligned with the body of the website with the content. This was unfortunate as I was not able to present the full quality of the banner's image, due to myself trying to ensure that I kept to 60kb, as shown in the presentation last week. The image now compressed at a glance looks pretty bad, but I guess it can also look artistic given that it was done on purpose with good intention (of course it was!).

Here's an image of the compression window, and also a comparison to show the difference of the two versions of the banner, to help understand and represent why it is such a smaller file size;

File size - GIF compression example

You can see (view full size) how the image becomes very dot-like/pixelated  through the gif compression. But if you look in the box underneath the image, the filesize is now 5.49kb instead of around 20kb, so it is definitely worth doing if you have a requirement to not exceed a size limit.

Compression comparison

 You can see how the compression has made a huge difference to the image and how it looks, but it is obvious that it would when it is compressed from 256 colours to only 4. It may be a downgrade in my opinion, but the main importance was to meet the requirements, and by lowering the filesize I am helping to meet them. It isn't entirely bad however, As upon adding the new banner image to the website, It does look quite good, as it gives an originality and uniqueness to it as it looks pixelated it also looks like it has been done on purpose and gives an art themed touch to the web pages. This therefore helps to link the web page to the course's theme, of graphic design and digital art, and also to link to myself and the work I have done and are currently doing.

As a last minute touch to the website I decided to give it a customised icon, as you usually see next to the address bar showing the URL. The reason for this was to give it a uniqueness for personal preference but also to make it look like a proper website. I had to create an image in Adobe Photoshop with a size of 24x24 as it is the icon size for the website icon image, and to then convert it into an .ico file. I used a programme called Axialis which made it easy to convert the image into an .ico file format. The design is just the letter 'k' as it then makes it unique to me. Here's a screenshot of the outcome;

Screenshot of the website icon created in action

So here is a final image of the web page;

Screenshot of the final web page design with content

Now that the website was done I decided to see if it would validate. The w3 validation service website successfully validated my webpages, but when I included their code as it suggested, to include an image to show others that my web pages passed, validating it again failed with six errors and nine warnings. This was very unexpected, having the outcome that after everything, it is the validation website's own code that creates errors onto my webpages. I removed the code and checked the validation again to ensure that no errors were of my own this time, and luckily it passed.

Proof?
Index: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.karlhammett.co.uk%2Fidat102%2Findex.html

Bio: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.karlhammett.co.uk%2Fidat102%2Fbiography.html

Form: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.karlhammett.co.uk%2Fidat102%2Fform.html

Contact: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.karlhammett.co.uk%2Fidat102%2Fportfolio.html

CSS: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.karlhammett.co.uk%2Fidat102%2Fbiography.html&profile=css21&usermedium=all&warning=1

Upon using the cynthia portal tester, I realised that it would fully pass if i only removed the bit of text which said 'image' for the alt of my image code links. That was the only problem that was shown from testing my web pages within the cynthia content quality test, which was again another relief as I would find the process of editing the webpages and re-uploading several times to be very tedious and time consuming.

So overall, am I happy with the final outcome of my website? Yes I feel that although my design changed drastically from the original concept of the web pages, it was bound to happen as a concept is rarely the exact of the final outcome. I feel that the layout has represented a very professional image due to the banner and content having the same width, and giving the text and image separate columns next to eachother, thus helping the web page to flow and make content placed on the web pages easier to read or view.