CA2 Conclusion

The second CA site is finished. 

The site has the six link pages all working responsive. I encountered a few problems while working. I tried to use a number of css styles like drop down menus but they proved too time consuming for the project, it's a feature I would like to use next time. The responsive coding worked well but is currently a "jumpy" responsive site I would like to make it fluid next time.

While tough to implement the responsiveness to the site, it is a very current topic as mobile device usage is increasing. 

Last Page Responsive

The Store page responsive styling is finished, this is also the last page of the site to be made responsive. 

Under 1200px:

The only change here is to push the content to the middle for spacing.


Tablet Landscape:

Once again no changes to the content only it is pushed to the middle for spacing.


Tablet Portrait:

For tablets the images have all been resized from 300x300 to 250x250 to allow for the smaller screen size. Originally I tried to layout the tiles in 2 by 2 vertically but there was some problem and it wouldn't work, to avoid running out of time on the project I opted instead to simply resize the images and keep the 3 by 3 layout.

Smartphone:

For smartphones the tiles are reverted back to their original 300x300 size and are placed one by one on the screen.

Second Javascript

I've added the last piece of javascript to the site. It's a simple form validation for email addresses in the contact form.

Code Snippet: 

<script>

function validateForm()

{

var x=document.forms["contactForm"]["email"].value;

var atpos=x.indexOf("@");

var dotpos=x.lastIndexOf(".");

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)

  {

  alert("Not a valid e-mail address");

  return false;

  }

}

</script>

All the code is done through internal javascript in the header.

A tutorial was used from w3 schools.

Discography Page Changes and Responsive Styling

A few changes have been made to the layout of the discography page to allow the responsive styling to flow easier.

Original Page:

New Style (Under 1200px responsive):

The content is laid out in a vertical style instead of a horizontal style. This allows the content to be placed easier from device to device.


Tablet Landscape:

This size has all the content resized to fit the screen.


Tablet Portrait:

Once again the content is resized to squeeze closer together.


Smartphone:

For the smartphone version the Album title is placed above the description paragraph to keep the page narrow but not sacrifice text size for readability. 

News Page Responsive Update

The responsive styling is finished on the news page.

Under 1200px:

Tablet Landscape:

All the text is just squeezed closer together for a smaller fit.


Tablet Portrait:

The Gig dates div is floated to the left to put it inline with the other "blog posts".


Smartphone:

The layout is the same as the portrait tablet just everything is resized for a smaller screen.

Youtube Embed

Added an embedded youtube video to the news page. 

The video isn't mine but I feel it works well as a placeholder for now.

News Page Changes

I have added a bloggish update bar on the right of the news page to give the appearance of a constantly updating page of information. 

Close up of the update:

The side bar has upcoming tour dates for the band.

About Page Responsive

Finished using media queries

Under 1200px:

Tablet Landscape:

Tablet Portrait:

Smartphones:

Moblie Home Page

Just finished the mobile version of the home page:

The header is extended to fit in the moved nav menu. The images have also been aligned one by one to fit the smartphone screen.

Image Hover with JS

The images on the home page have been given image swap hover over styling with javascript.

The images are all black and white by default but when you hover your mouse over them they swap to colour versions of the pictures.

First I initialize the images and link their sources in a js file:


tile1a = new Image;
tile1b = new Image;

tile1a.src = "img/tile1.jpg";
tile1b.src = "img/tile1a.jpg";

Next I put the command code into the a link of the image:



<a href="about.html" onmouseover="document.tile1.src=tile1a.src" onmouseout="document.tile1.src=tile1b.src" target="_blank"id = "one"><img src="img/tile1a.jpg"  name="tile1" alt="About"></a>


The black and white image is the img src. The mouse over is the colour picture and the mouse out is also the black and white image. 

Nav Update

Ben gave me some feedback about my site and suggested that I change the nav to be a little bigger.

Original: 

Updated Nav:

The text is a lot bigger for better readability and is set much more horizontal to fit the header which is only 100px high. The order in which the pages are laid out has also been changed, another point of feedback from Ben. I have also added a selector which changes the colour of the link from the page you are on.

Remaining Link Pages

Here's an update on the remaining link pages About, Store and News:

About:

Simple layout, the image for the banner was taken from the band's tumblr.

Store:

Part 1:

The tiles act as pseudo links to individual pages. 

Part 2:

The blue used for the item information is the same as the selector colour for the navigation in the header and the same blue as the social network icons in the footer.

News:

Part 1:

Part 2:

The top image is my own, the rest of the content is taken from the bands record label, sargent house's, tumblr.