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.