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: 

Form

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. 

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.