The Footer

Although this section isn't seen as the most important part of any website it is a detail that I think can make or break a website. It is a standard area of a website that people expect to be there and hold additional details. In the case of charities they are usually social widgets or some type, charity details, address and contact details.

My original problem with the footer is that it doesn't seem to go with the design of the rest of the page. It seems separated by the line created by the div box. The client wants the footer to include the charity details-contact, legal details (charity number etc). Also through talking to ibrow media, the website designer has recommended that putting a second navigation in the footer is good practice as it means people don't have to scroll to find where they are therefore making it easily to navigate.

When you wish upon a star have requested that their Twitter account and Facebook account be added to the footer to make the charity have a stronger online presence. This will give the target audience more options to keep updated with what the charity does.

Original Mock-up=small footer can't fit all of the charity information in.

Footer 2= bigger to fit in all of the information in, green to integrate it into the colour scheme of the rest of the website. Facebook icon needs the CSS altering to move it into the middle.

Final Footer

I have used the hand drawn line from the hills illustration to integrate the footer with the main website. Centralized the widgets to give the footer some symmetry. Changed the colour of the footer from green to a mid blue to give the website some balance with the colour scheme and so it goes with the sky and charity colours. Overall I am very happy with the footer design I think that it brings the website together. It makes a simple block of information interesting to look for a wide range of people.

To create a footer with an uneven line presented me with a few problems so I had to create an extra div to provide me with the space to add padding so that the green line would overlap the faded white background instead of being covered by it.

Within Modx I created a div id called widgets and set the width and height to 50 along with setting the image to source to the hand drawn facebook logo. I made sure the border was 0 aswell.