Browser Test Report

Browser test report.

I used Safari Version 7.0.5 (9537.77.4) on MAC OS X 10.9.4 while I coding as my main browser. This is what he looks like for both JavaScript Enabled (left) and Disabled (right). I wanted to keep the JavaScript disabled (noscript) as simple as possible.

Screen Shot 2014-09-02 at 12.24.15 pm   Screen Shot 2014-09-02 at 12.24.49 pm

 

The second browser I tested my gallery on is Google Chrome Version 36.0.1985.125 again on MAC OS X 10.9.4. Same thing again with both enabled (left) and disabled (right) JAvaScript.

Screen Shot 2014-09-02 at 1.01.51 pm  Screen Shot 2014-09-02 at 1.02.42 pm

 

So the differences between both are very slight such as Chrome giving my colours more of orange/yellow tinge than Safari and the font being a tad heavier weight but other than that its very similar if not identical which is fantastic for me! 

I do have to note that for the fail gracefully in Chrome opening it up the page loaded and only the text was onscreen with the code for my fail gracefully. I didn’t have this problem in Safari BUT i tried opening a few pages like Google Play Store with JavaScript disabled in Chrome and it did the same thing but only the first time you open the page, once you refresh it the code disappears and the new fail gracefully layout shows up. If you keep refreshing it, the code won’t appear again. I’m going to assume this is just something Chrome does (since it happened to Google Play Store). 

 

Other than that my browser test was successful :)

 

Design

So Matt warned me off having an image in the background so I’m just going leave it a solid black or white for the moment and if I have time after I finish my javascript I’ll look at what else I can do with the background. 

Font I’m still not 100% sure which one I want to use but I have a couple that I’m going between so I’ll just add to this post which ever one I end up using.

 

Icons and typography

Social Media Icons
I want my social media to be responsive. Going to check out w3schools for how to do it and I found some stuff from that last assignment that would be helpful for responsive icons that I can use too.

Played with a few responsive live demos and thought that the square icons would be better for responsive, the circle responsive ones hurt my eyes.
icons

I don’t think I’m going to use a fancy font or anything like that. Because the images are so gorgeous I don’t want the text to standout. Just kind of be there for those actually wanting to know what villages the dancers are from and what they are performing i.e Ura Pou, Imene Tuki etc. I’m thinking just Arial at this point but I’m still playing around with the fonts.

Images cleared

So I got written clearance for my images yesterday from Cook Islands News Ltd that I’ll save in my cyberduck file. I was going to use my uncles pixs but he didn’t end up working the event so I asked my ex-coworkers for theirs. Phew!

I’ll have a work in progress post tomorrow with some of the changes recommended by my lovely peers. I also started my css on Monday and what a bitch its being! Having trouble with stopping the low opacity of the main  box from affecting the images inside it (even though they are in different containers/have different Ids).

Java scripting should be fun -_-

Edit to post:

Here’s a snippet of permission to use images by CI News for my assignment.

Photo Rights

Mock Up 1

So this is my first mock-up. I wasn’t sure about the boxed look but its grown on me (unsure if thats because I’ve been staring at it for so long or if it actually looks good) so I’m going to stick with it for now. Adding in the arrows, captions and social media share buttons next.

MU 1

Colour Palette

Used some online colour palette generators and I was a little surprised with some of the combinations.

Cssdrive.com recommended this palette:

http://www.cssdrive.com/imagepalette/index.php
http://www.cssdrive.com/imagepalette/index.php

The medium and dark palettes are gross but the light palette I may be able to work with with some adjustments. Maybe use the bright versions of the colours it suggested instead.

Used the same scheme generator site but a different image to see how different the palette would be from the first and its not too different which is good. Still ugly though.
palette 2
The first scheme has more pinkish tones while this one has more browns and greens.

These are the images i used in the generators.
Te Maeva Nui

1517428_663690677041913_8147297771186606042_n

http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF Good site. It has the css and html coding for the colours. Useful

Gallery research

I like the idea of this one having a large image in the background, the option to make the gallery go full screen (icon top right hand), the quick share links beneath the box and the gallery in the center foreground. I don’t like the image quick preview bar being on the bottom, the arrows being so small and on the left side of preview box and hate the color scheme.

http://www.simonalfredjackson.com/#/gallery/21/0
http://www.simonalfredjackson.com/#/gallery/21/0

This one was designed by the same people as the above but it’s got a couple more things I like. The quick preview bar moves left or right when you hover towards the end of previewed images, the images are darkened so that the one you’re hovering over is bright and stands out (easy to keep up with the images when they slide).
Aside from that it’s the same as the first gallery just more ugly.

http://www.klukerphotography.com.au/#/gallery/181/0
http://www.klukerphotography.com.au/#/gallery/181/0

Had a quick look at National Geographic’s gallery for Tiger Subspecies and it’s grown on me. I love the layout, it’s clean, simple and easy to navigate. But I don’t think this layout and so much white would be good for my images, wouldn’t do them justice but having the quick preview bar on top of the main image with little descriptions on the bottom with the quick share links.

http://animals.nationalgeographic.com/animals/photos/big-cat-cubs/
http://animals.nationalgeographic.com/animals/photos/big-cat-cubs/

Might be getting ahead of myself but I’m curious how we’d give the ability on our gallery’s for people to comment. I’ll have to have another look on the assignment sheet to see if I can do this and then check w3school to see if I can realistically do that. Hopefully it’s similar to how we coded stuff on the ‘contact us’ page for last semesters assignment. We’ll see.

reirei

Research post

Java script why you hate me.

Ok so I have my theme set – Te Maeva Nui 2014. Te Manea o te Kuki Airani – and I’ve chosen all my images.
I’ve been going through gallery’s of my favourite sites for inspiration and I may have an idea that I can move forward with now. I’ll do a mock up in Photoshop now and post it up with screen shots of some of the gallery’s I liked.

The color scheme is proving to be a bit of female dog though. It’ll definitely have to be bright colors but which ones exactly is up in the air at this point.