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.

Contact Page Responsive

The Contact page is functioning quite similar to the home page for responsiveness, all the code is media queries and the layouts stay fairly the same.

Devices under 1200px:

The content is the same throughout just the with of the content in the header main body and footer is decreased.

iPad Landscape:

Same process as above just the numbers decreased.

iPad Portrait:

This time I removed the Google maps as I think the form is the most important content on the page. The basic info is made larger but moved to underneath. 

(Somewhat) Finished Discography Page

The discography page for the bands different albums and ep's is pretty much done:

I will probably need to change the font in both size and the padding below and beside it.

Finished Contact Page

The sites contact page is finished:

At the moment the google maps embed isn't working so instead I have temporarily replaced it with the image used in the psd. The form is using the mailto system and only links to the default email application. I also added a vertical nav bar to the header on all pages, I tried to get the dropdown nav to work but proved too difficult.

New nav:

Contact Page Plan

This is a psd mockup for the sites contact page:

The image kinda explains itself. All the fonts and colours are the same as the home page. There will be a google maps embed on the right side. 

Home Page Responsive Update

The Home page responsiveness is almost finished.

Here are some progress pics:

This is any device under 1200px width.

This is an iPad in landscape mode.

This is an iPad in Portrait (not finished).

Finally this is the site for smartphones, the width is set to max 600 (not finished).


A responsive changes are done using media queries.

Somewhat Finished Home Page

A 80% done version of the home page is finished.

At the moment the images don't have roll over effects and the logo at the top doesn't work as a drop down menu. Other than that the rest of the page is the final version (emitting any style changes).

Close up of the main body (having problems putting in rounded corners, not entirely sure if I will keep them in anyway).

Close up of footer:

The header, footer and main body backgrounds are all set to 100% but the content is set to 1020px.

CA2 Update

So under guidance I was told that my initial plan for the sites homepage would be too difficult to make so I have redesigned the home page into a much more manageable design. 

This is a much simpler design to start from. This is an image saved from a psd mockup. I started by using the grid template taken from 960.gs. 

The header is a simple 100px high 1020px wide white styled background. The font used (also throughout the whole site) Myriad Pro. In the previous CA's I used fonts from a downloaded font package but the fonts couldn't be viewed on any computer other than my own. 

Close up of the Header:

The background was taken from subtlepatterns.com. The logo was drawn in photoshop. The plan is to have the image act as a drop down menu for the nav, but i'm not sure how difficult drop down menus are at the moment.

The five images in the main body will all be links to the other 5 link pages in the site. The images will be black and white with no text and when hovered over the link page title will appear and the image will turn to colour. The design of the social networking icons was taken from premiumpixels.com, each of the icons link to the actual sites of the band.

CA2 Initial Ideas

I have an idea for the home page of the site. The bands logo (which they use everywhere) is quite distinctive and I'm hoping to use the shape for the home page.

Here's a mockup idea for the page:

The images will all be links to the pages for the site. Three more images will be on the right side. The plan is to have each of the images have css roll overs, particularly for the images not to have any text until the user hovers their mouse over the image. I'm not entirely sure how difficult this would be to do so i'll have to consult some people before I get started. I'm also not fully sure if I want the image of the white triangle logo in the background or rather have the images make up the shape of the logo.

CA 2

Six page responsive website.


For my second CA topic I'm making a website for my favourite Irish band. 

This is my proposal and plan for the site:

Proposal 2: A website for a local Irish band called And So I Watch You From Afar.

-          This band is one of my all-time personal favourites. A four piece post-rock band from Northern Ireland.

-          Personally would love to make a site as I am a huge fan of their music and use some really eye catching logos and album art.

-          Here’s the cover of their latest album:

-          Pages for the site would include:

o   Home

o   About

o   Contact/Bookings

o   News

o   Discography

o   Store

The site is going to be an official site for the band. The Home page will be a

root menu for navigating the site. About will include a small biography of the

band. Contact will have a form and basic contact information. News will

have updated information from the band including embedded feeds from

their twitter and facebook accounts (actual accounts from the band).

Discography will have a list of all their music and information about each

album/ep's. Finally the store will be a pseudo template for their merchandise.