Browser Test Report

chrome

 

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

 

firefox

 

 

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.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Advertisements

Concept Statement, Assignment 2

largelogo

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 Buzzfeed.com 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

Images

Brenn, M. (n.d.). Budapest. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/aigle_dore/8130461936/in/photolist-djcFWu-djcHTx-djcHNi-dosD44-djcHQP-djcJcZ-dosAV4-dosJH5-dosK5d-djcG1A-dosDTt-dosBEx-dosE4H-3QsUBG-dosBmM-djcJ3i-dosMvh-dosKFo-dosBzM-dosJLA-djcJ76-dosDeD-idiMi7-dosMMo-xaKhe-5WsZWS-8fqtSy-ne

Brenn, M. (2011, March 10). Rome. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/aigle_dore/5481288261/in/photolist-8Yx1PF-8sPThK-9mn332-5eRhwN-e7M5Qx-7cSb1j-5eLRAK-9DE7Sn-5eRdQA-ee4Pqm-dX3pfa-gxKEJV-edY8X6-5eRhi9-5eRid5-dFK7Vx-bZ2vcS-8KsL9i-kFTMex-861rbE-8YVbRy-gPVeu1-9mq7C3-amq7nN-fBUc8V-gxGmX9-euuZX-6Z

Bruneke, M. (2014, January 21). mystery man. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/93852381@N08/12066570465/in/photolist-uU4BA-e2psYa-bSjsAi-5mseya-6Y7nup-johk1n-bsVy1g-2wf3x5-7at1vt-3ftCoJ-61kJEg-6wsao-k4UCmP-g4d3hC-4tiBJ8-fp63wn-6U3Myp-diPXPQ-61kJDv-95XVLe-gPcEH-n5nx4H-coadFo-j4rWHb-6tsDhH-dARB6Y-6eU5Uy-5

Efx, V. (2008, November 19). Furby.Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/vox_efx/3043682336

Photography. (2014, June 4). Trading stocks on a computer. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/101332430@N03/9681097378/in/photolist-fKu9Y3-6fmpu1-4iNNn5-LmwLk-5uTdu3-8GyC7d-6Hir3z-4pXePq-atujdm-y3jK-5myRok-aD3qS5-5CvT2b-6KShDQ-89NEv7-eeVhCf-dRc9NR-bBgSvi-5XEL3A-9ZA2Jx-9czfc7-9iPxQL-7M6Jvx-xKQMn-729b4-jNznTt-c19Fuo-29d

Pal, A. (2013, August 29). iPhone Photography. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/ashtonpal/9624479689

Pavlosky, O. (n.d.). Home. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/olenkaolja/1156694752

Revilla, R. (2009, November 10). Teenage Mutant Baby Turtle. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/rafastarix/4094202426/in/photolist-7eMRK1-dsWMwB-6vw4uC-99nr9S-fkcA9e-nhrwzd-ntDt2T-ftzmhy-agfszm-6Ap7Dd-f7V6W-mutdJj-nyWQPu-dsWYch-daRjsV-dsrNx2-6f5m4C-dQUAsj-8nQC6D-edF4dA-nyWPNS-66wjN3-59NHJd-cDuZLs-aPkVqT-ddN3ir-e6MULj-e6

Schmidt, M. (2014, January 10). ‘Dita’ Gown . Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/51579195@N02/8539902776/in/photolist-e1Dez3-5y22Eq-jZebkb-95hFtg-7KczMG-j6phyC-aiJwLB-fzcYbq-bn4dCe-95k9Ry-dWAB8j-dHaFzA-edSjhL-edSjro-iRa9NY-8eTTwq-7UmvrX-edSjd1-edSjdY-85Asza-dhEnFg-jZ8RGP-95kLmd-edSjeQ-edSjbE-j6hdhV-LDdyo-

Unknown, A. (n.d.). Working. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/v-neck/5712https://www.flickr.com/photos/a1ex/3316800986010773

Unknown, A. (2012, February 19). Hiroshima City. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/freedomiiphotography/6203111667/in/photolist-as9yZa-dQmXH4-drS9D-9NcPYb-b7TCV2-hFAK3t-h8FX3R-jxHGNz-bWaTyN-rKbAM-c6o7ad-4aBY2-hoUzcc-6fjzqc-bv32cX-dLqpUe-dyD2F2-vZufX-a2gsdU-fmQazK-7W6HUJ-fGwBwm-aiPHZs-dRHg3L-8m6HNR-jzkXhs-e5

Unknown, M. (n.d.). Facebook. Flickr. Retrieved May 19, 2014, from https://www.flickr.com/photos/melenita/9386166498

 

Websites

Draw a Stickman: Episode 2. (n.d.). Draw a Stickman. Retrieved May 19, 2014, from http://www.drawastickman.com

Pewdiepie. (n.d.). Happy Wheels.YouTube. Retrieved May 19, 2014, from http://www.youtube.com/embed/tNwFexjnbyM

RoosterTeeth. (n.d.). Rage Quit Happy Wheels. YouTube. Retrieved May 19, 2014, from http://www.youtube.com/embed/GsSya4K95jk

Smoosh. (n.d.). Smoosh Plays Happy Wheels. YouTube. Retrieved May 19, 2014, from http://www.youtube.com/embed/4H_oB3VArBg

TAKE ME. (n.d.). The Useless Web. Retrieved May 19, 2014, from http://www.theuselessweb.com

Totaljerkface.com – Home Of Happy Wheels – Happy Wheels. (n.d.).Totaljerkface.com – Home Of Happy Wheels – Happy Wheels. Retrieved May 19, 2014, from http://www.totaljerkface.com/happy_wheels.tjf