Browser Test Report



Google Chrome on Windows


Page 1 Homepage

homepage chrome

Page 2 Beautiful Places

beaitifulplaces Chrome


Page 3 Internet

internet chrome


Page 4 Productivity

productivity chrome


Page 5 Photo and Video

photo chrome





Page 1 Homepage

homepage MF


Page 2 Beautiful Places

beautiful places MF


Page 3 Internet

internet MF



Page 4 Productivity

productivity mf


Page 5 Photo and Video

photo mf



Differences: Upon loading for the first time, Firefox loaded substantially quicker than Chrome. There are apparent difference is viewing the same page on different browsers. 

Firstly, the search bar button changes from ‘Submit’ in Google Chrome, to ‘Submit Query’ in Firefox. This is because I did not change the button from its default settings which differ from browser to browser. 

The second thing I noticed is that my hover states in Firefox do not all work, whereas in Chrome they do. I am unsure of why this is and I have gone through my CSS and added the !important tag to my hover states but it still does not work. I am unsure of what is over them even after inspecting elements so I feel as if this is a problem I cannot fix. 

In Firefox, the underlining bars for my anchor tags are about half the size that they are in Chrome, I would assume this is a browser defined rule and I don’t think I need to change it.

The in-line height seems to be different also, this can be seen in my homepage paragraph under ‘Welcome Reader’, the line-height seems to be larger in Firefox than in Chrome.  

For some reason, I have to resize my browsers to get them looking right, this is rather annoying and I am assuming I have not set up the body correctly. If I’m honest I am not sure how to fix this so I will just have to leave it. 

I also have an issue with large empty spaces at the end of my webpages, this is because of positioning and I cannot fix this, this error persists between both browsers.




























Concept Statement, Assignment 2


The Client

‘Top List’ is a feature list-based website, bringing readers informative lists in an ‘at-a-glance’ way.

‘Top List’ wanted to define themselves as an viable alternative to its messier counterparts and other list based websites. The client wanted a simple yet sophisticated website design that would appeal to its target audience in both look and usability/functionality. The client has asked that the information be given to the viewer in bite-size portions and that the focus should lay in eye catching images and that the overall design of the website should not take away from the images portrayed on the website.

The client has also asked that their website is based off of their logo.
For this to work, the website must be heavy handed with thick borders and contrasted fonts with heavily sectioned portions of information so that the reader can differentiate between what sections they are looking at.

The Target Audience

The website is targeted at people whom use sites such as Buzzfeed and Facebook. The hope for Top List is that it would become a known source of list-based topics on social networking. Therefore, the target audience is widely anyone who uses Facebook – narrower, 14 to 34 years of age, particularly women. This target audience does not bring about any usability limitations as it is so broad. The website will be basic, and usability will depend on appeal generated by style and content.

Site Branding

The site has been branded in a very specific way. The sites layout is more straightforward and less cluttered than other list-based websites to maximise usability and appeal. The website is styled with only two fonts, a light san serif font and a heavier cursive, serif counterpart to balance each other out. The fonts are often backed by a thick black banner shape, this is repeated through the whole website to create a sense of unity between the webpages, but to also add to the ‘contrasted’ appeal of the website. The website uses thick ‘weighted’ borders throughout its entirety as another form of tying together the websites overall design. The website is also made of an ‘off-white’/beige colour, contrasted with a much darker counterpart ‘almost’ black. This is very different to the standard bring, almost-neon ‘interest generating’ colours normally associated with list based websites. The clients website has kept away from such colours as an attempt to stand out as well as appear to appeal to a more ‘sophisticated’ audience.

Words :410

APA Referencing


Brenn, M. (n.d.). Budapest. Flickr. Retrieved May 19, 2014, from

Brenn, M. (2011, March 10). Rome. Flickr. Retrieved May 19, 2014, from

Bruneke, M. (2014, January 21). mystery man. Flickr. Retrieved May 19, 2014, from

Efx, V. (2008, November 19). Furby.Flickr. Retrieved May 19, 2014, from

Photography. (2014, June 4). Trading stocks on a computer. Flickr. Retrieved May 19, 2014, from

Pal, A. (2013, August 29). iPhone Photography. Flickr. Retrieved May 19, 2014, from

Pavlosky, O. (n.d.). Home. Flickr. Retrieved May 19, 2014, from

Revilla, R. (2009, November 10). Teenage Mutant Baby Turtle. Flickr. Retrieved May 19, 2014, from

Schmidt, M. (2014, January 10). ‘Dita’ Gown . Flickr. Retrieved May 19, 2014, from

Unknown, A. (n.d.). Working. Flickr. Retrieved May 19, 2014, from

Unknown, A. (2012, February 19). Hiroshima City. Flickr. Retrieved May 19, 2014, from

Unknown, M. (n.d.). Facebook. Flickr. Retrieved May 19, 2014, from



Draw a Stickman: Episode 2. (n.d.). Draw a Stickman. Retrieved May 19, 2014, from

Pewdiepie. (n.d.). Happy Wheels.YouTube. Retrieved May 19, 2014, from

RoosterTeeth. (n.d.). Rage Quit Happy Wheels. YouTube. Retrieved May 19, 2014, from

Smoosh. (n.d.). Smoosh Plays Happy Wheels. YouTube. Retrieved May 19, 2014, from

TAKE ME. (n.d.). The Useless Web. Retrieved May 19, 2014, from – Home Of Happy Wheels – Happy Wheels. (n.d.) – Home Of Happy Wheels – Happy Wheels. Retrieved May 19, 2014, from