Browser Test Report

In this post, I’ll be using two browsers, Safari and Chrome to test my JavaScript and jQuery galleries. The point of this is to look for any inconsistencies across two main browsers.

Google Chrome:
v 37.0.2062.94 (up to date as at 29/08/2014 @9:35pm) Screen Shot 2014-08-29 at 9.34.02 pm


v 7.0.6 (up to date as at 29/08/2014 @9:35pm)

Screen Shot 2014-08-29 at 9.37.25 pm

JavaScript Gallery

Tested in Google Chrome

Screen Shot 2014-08-29 at 9.43.23 pm


Tested in Safari

Screen Shot 2014-08-29 at 9.46.37 pm


The two are strikingly similar, something I find different is the way that the images are rendered. The images seem a little ‘out of focus’ and they almost seem a different size. I feel like I’ve been staring at the screen for so long and I could be losing my mind. Something just doesn’t seem right with Safari. Chrome renders the images more nicely.
(Side note) I’ve just noticed my divs for the thumbnails have moved slightly I will fix these before submission.

Whether they’re rendered different or exactly the same, I still prefer Chrome. However, if I’m honest, I cannot spot any obvious difference.

jQuery Gallery

Tested in Chrome

Screen Shot 2014-08-29 at 9.58.49 pm

Tested in Safari

Screen Shot 2014-08-29 at 9.57.06 pm


The differences are small again. Here there is a slight deviation color/saturation of the main image, and the thumbnails are once again rendered slightly differently. Also, if I line the top of the webpages up, Safari is about 20px lower than Chrome. I am really unsure of why this is but it is.  The fonts render pretty much exactly the same in both galleries. The effects seem to all run exactly the same (if clicked in sync).

Other than these aspects. I can’t see any obvious difference in the JavaScript Gallery or the jQuery gallery.


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

Work in Progress, Week 6

I spent all of yesterday coding and working on 3D only to attempt to drive home and crash my car. It was a good day all round! But I’m still breathing (and smiling) so the show must go on.

45ob5YVexcept my car.

Right now I’m backing up all 13.9 gigs of my university work, so I’ve got a little bit of time to talk about how I’m finding the assignment so far:

I feel like not a lot of emphasis was put on the actual layout of the websites we are making. In essence the layouts are the most important part of our webpage and the point of creating a nice, yet functional layout was sort of breezed over. I understand that we all should have taken Visual Communications to get into Web Media but I feel layouts are something you never really get right and if we are building a house on unstable foundations then we probably shouldn’t be building the house at all. I guess I’m making a point of this because I really enjoy the Photoshop side of this degree and feel as if not everyone does due to a lack of understanding of the programme. Yes, we took Visual Communications, no it didn’t teach us anything (may I point out the first lesson titled ‘Introduction to Photoshop’ in Visual Communications was a 2 hour long PowerPoint presentation followed by an hour of showing the class how to open Photoshop in Windows and Mac, then close without saving).

I understand it wouldn’t make much sense for a ‘Web Media’ class to teach Photoshopping, however I do feel as if a lot of students ran into snags from the get-go with their layouts which could have been a tad bit better if they knew a bit more about Photoshop. Anyone can code, (not a l of people can code correctly [me]), but not everyone can create a visually pleasing identity for a website.


On the upside, I’ve never had more fun failing at something before in my life. This has to be the most rewarding paper I think I have ever encountered. Regardless of the marks, there is something like a quite victory every time you refresh and that one div is exactly where you want it to be – the time spent is a small price to pay.


Okay, now to the actual assignment: Hows it going? Good. Okay. Average. I’m currently working on my third webpage which seems to be coming along nicely. I’m hearing of some people just starting their HTML now .. and I’m like



I just finished embedding my Youtube videos, if anyone is stuck on this check out this link:
The only issue is you might need to add HTTP: before the website in the source (SRC) section. When you copy the embed link from Youtube it doesn’t give you the full http://—– link, just make sure you’ve got that bit or it wont work ^^

So yeah, this is what it looks like (I’ve had a lot of people ask for help with this so I thought I would post my HTML, just don’t copy it exctly ^^)





Yeah, so it’s 10:13pm and my mouse has stopped working – which is great.
Alt Tab all day.


Thursday 12th June, 27 hours till hand in

I made some thermonuclear garlic bread for lunch. Thats how you know this is getting real, crap food. Anyway, I made a bit of progress last night but I’m still not finished. I left the two most similar pages till last so I can make one and then change all of the links and such for the second one so it shouldn’t take me days. I still need to do my write ups but that is okay, I’ll leave them and my browser test reports till tomorrow. Unfortunately I’m starting a little bit later today because I had to sort out my car this morning from my assignment-stress accident (thats right university, I blame you) haha! But hopefully I can get it finished today. The hardest part about this assignment so far has been how slow my computer is when adjusting photoshop documents, but its still better than the crash-city-computers on level 5 (PNGs watch out).


I went on a little coding tangent and didn’t actually post anything about my progress, but I can now say it is all over (coding at least). I think I’ll do my Browser Test Reports tonight and then go to bed. I have an issue where I changed something from my mock ups to my final output (I changed by header image) and I am worried that it is too different – I may need to re-address my layouts, or perhaps just leave it to show that there was a creative process while coding and I was always thinking about my layout and how I could make it better.

So, this is where it ends – this is my final work in progress report as there is no more work to progress on. Till semester 2, goodbye WordPress.


Work in Progress Report, Week 5

Friday, 30th May

I love Fridays! Means I can begin a new post and leave my last messy one behind.
So I started coding and I have run into a few snags. I ended up cleaning up my obviously messy HTML so that my CSS wouldn’t be as cray but it seems now that my fonts aren’t working and my images wont load which makes me think perhaps I’m not references the files correctly, bugger. I’ve decided to spend the day at home because I’m a little under the weather so I’m drinking tea and coding.. I really couldn’t think of a better way to spend my afternoon (sorry I’m babbling, I am waiting for the Dreamweaver trial to install but it doesn’t seem to be working).




I have to admit, I really don’t understand why my images and fonts are not loading, they’re referenced correctly as far as online tutorials seem to show me and I’ve swapped to Dreamweaver to make sure I am using the correct rules and I’ve even looked over my last assignment trying to figure this out. I can’t go any further because nothing will be the right size.. I guess I can try to code around the issue and just wait for an answer, but I feel like I’m just sitting here staring at this page thinking “why the heck are you not working?”

Another issue, I’ve never wanted to go out and purchase another screen so badly as I do right now. So hard to code on one screen -.-



Okay, the fonts still aren’t working and neither are the images. I don’t know what I’m forgetting but I’m going to punch someone when I realise. For the time being (until I can cry to Matt), I’ll just bump things around.






After having a chat to Matt, I decided I am completely stupid. I’ll tell you all what I did so you don’t make the same mistake. I didn’t path my images like they were coming from the CSS, but from the HTML.. All I needed to add was the ‘../’ before images.

Well shit



We back now though ^ ^
Lets open up this code.


So, it’s 6:50pm, I think I’ve been bumping shit around since about 1pm.. and this is how it is looking. ^ ^


As you can see, I changed the dotted border because Photoshop was clipping the image. I was told this was to do with not using the correct version of Photoshop (32 as opposed to 64) – but I am using 64, and the issue has persisted though both my personal laptop and the university computers so I just gave up and just took it out. Looks better and means I can play around with the menu on the homepage however the menu bar will go back to its normal positioning on the other pages.

4th June, 2014

Feels like an episode of 24, except why am I still awake? I think my homepage is done, but I still need to make a few changes to it… Like I think my header needs a background.. & my footer actually needs to say something (I guess)
Wtf do you normally write on a footer?









Thursday, 5th June

On a side note, “Matt, I am sorry.. I did the thing again when I made 1 mistake and I coded my whole page around it” .. I’ve spent the morning fixing my massive screw up last night. I think I pushed myself too far.. I was waaaaaayy to tired to code but yeah ^ ^
But I fixed it.. I had to change all my positioning from absolute to relative (again) and well I don’t wana brag but it totally worked.


Week 4 Work in Progress


Monday, 26th May:

Web Media is one of those classes that could make you eat a whole pizza. Another solid 9 hours on this website. Here is how it looks: Homepage     Page_1   1024px-S1e2_finn_angry_at_lsp1

This post will probably just be pictures, I’m so done.



Tuesday, 27th May:

10409528_689927501056015_2798697242815380745_n   Page_4   The computers in level 5 quit unexpectedly about 5-6 times an hour. So I tried to keep my cool but I ended up making this final page about 4 times because the computer hates me. GLEE_ANGRY


So I felt my assignment was getting a bit repetitive so I decided to make a different list for the last page out my layouts to show my variety of ‘skills’ at coding.



I am so flipping ready to consume some food.
What day is it?

Wednesday, 28th May

I bought donuts and started coding today, just the HTML.
Because it is something that we have never really tried before I’m finding it difficult to differentiate between what I should have as a P or a header, as well as what to tag each paragraph (p1, p2, p3…) I think it will become clear when I start the CSS document but I can’t help but think I am doing this the long way. Obviously I could set a few as p1 and define rules that make them all the same size but for the time being I totally cannot think that way. I’m thinking I might actually make a guide line for myself before I get stuck into the HTML because I only wrote the homepage HTML this morning and it’s pretty straight forward.

There is also this little line under most of the example HTML documents that Matt has given us that looks something like this:

<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=9″ />

What is this? Someone please explain.

Also as a side note, I’m using C++ to code as I prefer it and think Dreamweaver is lazy, and you should only be lazy when you actually know what you’re doing. Which I don’t.



Go me! There is still a lot more I need to work on. I think I’m going to be here all day again..
I don’t think I’ve ever put this many hours into one assignment.

Layout Refinements & Junk



^^ Ignore that big space at the bottom, if I crop it Photoshop crashes so I gave up trying.

Thursday, 29th May



What week are we in? Am I still writing in the correct WIP report? Who knows. So I think I finished my html… All of the pages seem to be working correctly now I just need to style them. I can’t help but think I am doing this the totally ineffective ‘long’ way. I guess I’ll move on to the CSS now? I’m not really sure if I’m ready but hey, will I ever really be? I guess first I’ll save everything out for web? The obvious move -.-




There is no time like CSS time!

heeeere we go

Step 1: Complete your HTML

CaptureStep 2: Have a tea break

200_s (1)Step 3: Actually start the CSS document.
I decided to being by loading in my fonts … it seemed the most logical thing to do.

cssStep 4: Cry

Step 5: Pull yourself together and make sure your HTML references your CSS correctly.. -.-