Monday, 3 June 2013

Evaluation

Evaluation

1. My clients original idea was quite concise and he told me exactly wanted on the site, this meant that I had some very clear guidelines to work to.However, on the design front of the website I was given a lot of freedom, and I was told to do what I thought was best.  Due to this my website was in quite close relation to the clients original intentions, but the design was all my own work, but the client was happy with the way it turned out. 

2. My website was to work as a promotional and booking website, so that clients could easily access information about the DJ and book him without confusion. To make sure that it fit this purpose I made these pages easy to reach, with them in large buttons on top of every webpage. This made them easy to reach and was proven in the user tests.

3. A technical quality was the Google form that I embedded into the booking page to allow inquires to be directly emailed to the clients inbox.

4. Some aesthetic qualities I made was the images that I created for buttons on the navigation bar. This made a change from the usual plain text that are found on most websites. Also, I think that keeping the same layout for most of the pages kept the website simple and more visually pleasing. 

5. It has a style that connotes a party/exciting vibe. 

6. The content was all provided by the client and was spell checked by a computer and checked again by me.

7. The client provided the information so it was as the client wanted.

8. My production skills where good, as I had a clear idea of what I wanted the website to look like along side the guidelines the clients had given me. My presentation was good as I had followed a lot of online tutorials before I set out to create a complete website. I think that my creativity was limited as the I found that working with HTML was hard and some ideas I had not possible as doing them in HTML where far to complex for me. 

9. I think that I could have been better at documenting my work for my client. This was because my client was in close contact with my client at all time, so I communicated constantly and often forgot to note this down. This is one downfall I had in my production. 

10. If I was to change my project I think that I may have tried to create my website completely from scratch. This would mean that I would have more freedom and understand what had been coding more. However, we did have a very limited time to create this website so this method may not have worked. 

11. One way I could have improved my websites search engines optimization would be to accurately describe what content was on my page, for example I accidentally kept the name of my webpage at the name of the template I used, to use increase SEO the should have chosen one that accurately describes the page for example, 'DJ Luke Shires'.

Another way would be to use 'metatags' to my advantage. This would give a description to what  my website to Google that would mean that the page is likely to show up in more web searches. These tags can be a sentence or up to a whole paragraph. 

A final way would be to optimize the use of my images, this would mean the images would been seen on a Google image search, which would bring traffic in from another source.

Thursday, 30 May 2013

Task 3.2



Technical Testing





During the technical testing, I used a number of web browser to see if it work across platforms. I had the most trouble with 'Internet Explorer', where a number of images and pages took a while to load. 


The Favicon on every page doesn’t display, and the text in the tab is always ‘Basic 81’ which is the name of the template that I used.




Home Page:
Links
  • Home (Yes)
  • Why Me (Yes)
  • Radio (Yes)
  • Gallery (Yes)
  • Book Me (Yes)

Layout (Yes)

Images Loading (Yes)

Navigation Bar Placement (Yes)

Why Me:

Links
  • Home (Yes)
  • Why Me (Yes)
  • Radio (Yes)
  • Gallery (Yes)
  • Book Me (Yes)

Layout (Yes)

Images Loading (Yes)

Navigation Bar Placement (Yes)

Radio:

Links
  • Home (Yes)
  • Why Me (Yes)
  • Radio (Yes)
  • Gallery (Yes)
  • Book Me (Yes)

Layout (Yes)

Images Loading (Yes)

Navigation Bar Placement (Yes)

Gallery:

Links
  • Home (Yes)
  • Why Me (Yes)
  • Radio (Yes)
  • Gallery (Yes)
  • Book Me (Yes)

Layout (Yes)

Images Loading (Yes)
  • Enlargement of photos failed, webpage displays ‘404 Page Error’

Navigation Bar Placement (Yes)

Book Me:

Links
  • Home (Yes)
  • Why Me (Yes)
  • Radio (Yes)
  • Gallery (Yes)
  • Book Me (Yes)

Layout (Yes)

Google Booking Form (Yes - Email received)
  • Took a while to load on ‘Internet Explorer’

Navigation Bar Placement (Yes)

After running these technical tests I then decided to run it  through the W3C's code validator.  The information provided on the website says 'This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific content such as RSS/Atom feeds or CSS stylesheets,MobileOK content, or to find broken links, there are other validators and tools available', This basically means that the website runs through the the coding on my website to see if it is all correct and working properly.

User Testing

Too test my website properly I gathered a few users to try out my website for me, this would give me a good idea about what the customer response was, and how the customers experience could be enhanced. I set each user up with a laptop with the website running and also a iPad or iPhone. The users then had to fill in a response for which asked them to perform tasks, a give suggestions for improvement.

Here is the form I created: 


I then collected the responces in a spreadsheet, here are the results.









As you can see there testing showed similar results to mine, most of the complaints and troubles seemed to be from either the pages loading too slowly or the enlargement of the images not working correctly. 

However from these results I can see that users found my website easy to use most of the time, and after a few improvements involving the loading time and image enlargement the website will be working full and to a higher standard, making it better as a whole. 



Wireframes

Wireframes

In order to know how to design my webpage I had to create wireframes to work to. These frames show the basic layout of my website without any content in them. They basically give me something to work towards. These are the ones I made:

This is the wireframe for the home page. I have included a picture and possibly a video on this page. However, the elements on the page may change once I am in the creation process.



This is the wireframe I have chosen for the other pages of the website.  I have chosen to have them all similar because I think that a website is easier to read in this way, and keeps it clean and simplistic. Again the elements may change but I hope to keep them in the same place. 

Tuesday, 14 May 2013

Creating a Footer

On the bottom of every webpage I wanted to have a small footer that had links to the clients Facebook, Twitter and Book me pages. I did this by using this code:


This tag is usually used for addresses but it seemed to work well for this purpose, this is what the design looked like:


Creating a gallery table

For one of the pages on my website, I had to create a gallery to display a number of images. I had a look on the internet for a template to do this, but I discovered that they used a lot of Javascript, and I don't know how to use this language.

Instead of using one of these I decided to make a gallery page out of a HTML table. I would then be able to insert the images and display them in a suitable way.


This is the code I create for this:


This is what the design looked like: 


I made sure that all the images where the same size by specifying in the code what size i wanted them, this made sure that they looked good, and no images where too big or small.

Monday, 29 April 2013

Diary Post 1



This is the progress I have made today.
From the template, I changed the background and began to change the layout to see how I wanted it to be.

Monday, 15 April 2013

HTML Tutorials


Here is a tutorial that i followed on how to create a clickable picture page, here is the result:

Here is the code that i used: