Evaluation

When I first received the brief for this project I was very excited about working with real clients and learning how to hand code a website. When we were handed the client briefs, my initial reaction was to stay away from PACES as they handed their in late and I was worried that that would be a sign of things to come and they were likely to be late with replying to emails and giving feedback, however Clive Arnold looked as if he was going to be a struggle as he didn't want much content and I know I struggle with white space, and Clive Bonny had a very difficult target audience combining students and employers. I was please when I was placed with PACES regardless of the lateness as I had some good ideas and felt I could really grow with the project and produce something I was proud of. 
The thing I was most worried about when starting the project was that the coding was going to be hard to understand and the website I build would suffer from this, but when I started learning about how to code, I found that I much prefer hand coding to using software such as Dreamweaver and actually understood it a lot better. 
Another problem I though I might have when I started this project was that the client might not reply in time or be particularly helpful in their responses, unfortunately I was not wrong about this and this caused a problem with the development of my website. Without feedback from my client I was unsure wether what I was designing was what they were after, however when I spoke to my tutor, they said I should continue regardless and the backing of positive comments from my class mates reassured me that my design was appropriate. However because of the lack of response from the client I was left without content and images, so I looked on similar sites and used their content to show the class what the final site would look like and how my text styles would be laid out.  
If I were to re-do this project, I might have tried harder to get a proper response from the client, however I am glad in this case that it has happened as it has taught me that I need a strong contract when working with clients that includes their response and feedback. 
Looking at how my website has turned out, I am very pleased. I feel that my logo idea is strong and eye catching while the site is friendly and inviting. I would like to think that my site is memorable and would help aid the viewer to consider PACES for their child. 
Here is a screen shot of each page of my finished website.

Testing

Now that i have finished my site it is time to test it in different browsers to double check that it works well in all of them.
The browsers I will be testing my site in are, Google Chrome, Safari, Firefox and Internet Explorer. 


Chrome:
Everything worked fine as this is the browser I used when building the site.

Safari:
The only change in Safari is that it has slightly magnified my site. The website is still fully functional.

Firefox:

My site looked just as I had built it to in Firefox

Internet Explorer:

My site also looked fine on Internet Explorer

After having tested my site on all the main browsers and finding no problems, I am extremely happy with the site and am confident that my client and target audience will be able to view the website with no problems.

Changes

After getting feedback from my crit, I have made a few changes to my website. The first thing I changed was getting rid of the scroll box, this was reasonably simple as I just needed to take out the overflow and tweak a few other bits, here is the final code I was left with for my content box.



.scrollbox{
margin-top:25px;
margin-bottom: 50px;
width:650px;
padding:10px 20px 0px 10px;
background: white;
opacity:0.7;
filter:alpha(opacity=70);
float:right;
}




The next thing I changed was the placing of my footer as this now needed to be at the bottom of the entire page not just the bottom of the screen, this was a little more tricky as I needed to clear the floated objects, this is the final code I used for my footer navigation.



#footer {
   width:100%;
   height:210px;
   background:url(../images/foot2.png);
   clear: both;
}


ul.bottom-nav{
margin: 0px auto 0px auto;
padding: 170px 0px 0px 170px;
list-style: none;
width: 600px;
}


ul.bottom-nav li{
float: left;
}


ul.bottom-nav a {
padding: 0px 20px;
text-decoration: none;
color: #fff;
}




The final thing I changed from crit was moving my logo into the header div, this again was very simple, all I did was create a div called header and placed it within the wrapper, then added an image inside, this is the final code.


HTML code:

<div id="header">
<img src="images/logoblocks.png" alt="PACES" height="120" width=420" />
</div><!--end of header-->


CSS code:

#header{
margin-top: 0px;
margin-left: 0px;
}

I also made a few extra changes which were not mentioned in the crit, I added some text styles using <p> <h3> and <span> tags, here you can see my css code for my text styles.

.caption, .first, .black{

font-weight:600;

}

p{

padding-bottom:20px;

}

h3{

padding-bottom:10px;

}

After making these changes my site now looks like this...

Crit Feedback

After showing my work to the class, I have been given some feedback which is very helpful. I had made my site to fit my screen and didn't take into consideration different screen shapes and sizes. To solve this problem I have been told to get rid of the scroll box, to let the content stretch as wide as it needs to and have my footer at the bottom in a permanent place, even though this might ruin the effect of having a full image as a background all the time, it will sort the problem of screen sizes which is more important. This is the only real change I have been told to make other than to change my logo from a background image to being in the header which I was already in the process of doing. I am very pleased with how my crit when and the changes I need to make are valid and manageable. 

Making the site

Now that I have finished my code and all of my pages, here is an example of what my pages look like. Unfortunately I have still not received any content or images for the site so it is still filled with holding text off of another site. This is the only page that accurately shows what PACES final page layout will be, as I have all the information needed to fill this page. The other pages will have to be a rough guide for what the content could look like.
 Here is a screen show of my website ready for crit, and the code that goes with it. 

Making the site

Once I had all of my elements made in Illustrator and exported so that they could be faster on the web, I started building my site. The first thing I did was created my folders, I made a css folder with a document called styles.css inside, I made an image folder called images and then I created a document in TextWrangler called "index.html". In index.html, I started by making my basic structure consisting of a head, body, wrapper, navigation, scrollbox and a footer navigation.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PACES</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />


</head>
<body>
<div id="wrapper">

<div class="navigation">
<ul class="nav">
<li><a class="home" href="index.html">Home</a></li>
<li><a class="events" href="events.html">Events</a></li>
<li><a class="team" href="team.html">Team</a></li>
<li><a class="prices" href="prices.html">Prices</a></li>
<li><a class="contact" href="contact.html">Contact</a></li>
       </ul>
</div><!-- end navigation-->


<div class="scrollbox">


</div><!-- end scrollbox-->

          </div><!-- end wrapper-->

<div id="footer">


                <ul class="bottom-nav">
<li><a class="home" href="index.html">Home</a></li>
<li><a class="events" href="events.html">Events</a></li>
<li><a class="team" href="team.html">Team</a></li>
<li><a class="prices" href="prices.html">Prices</a></li>
<li><a class="contact" href="contact.html">Contact</a></li>
       </ul>

</div> <!--end footer-->




</body>


</html>


It was in my CSS where these things started to come together in the shape of a website. As you can see my navigation has been made up of unordered lists, this is the CSS, I used to get them to sit on the page and look as they did in my mock ups.



ul.nav {
display:block;
list-style-type: none; (this is to get rid of bullet points on my list)
-moz-border-radius: 30px; (this is part of the code to get the corners of my box to curve in firefox)
border-radius: 30px; (this is part of the code to get the corners of my box to curve in other browsers) 
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
    margin: 110px 0px 0px 0px; (here I have used margins to make sure the box is in the right place on the page)
    width: 70px;
padding: 10px 10px 10px 30px;
float:left; (here you can see the div is floated left to make it sit against my content box)
height: 170px;
line-height: 32px;
opacity:0.7; (this is here to drop the opacity of my box to 70% on most browsers)
filter:alpha(opacity=70); (this is here to drop the opacity of my box to 70% on internet explorer)
}


ul.nav li a{
text-decoration: none; (this is to get rid of the blue link colour and underline)
color: #fff; (here I have set the colour of the font to white)




Below you can see the code I used to make each link have a rollover of a different colour

ul a.home:hover {
color: #e94445;
}


ul a.events:hover {
color: #f0e753;
}


ul a.team:hover {
color: #68b657;
}


ul a.prices:hover {
color: #5a6eb3;
}


ul a.contact:hover {
color: #ad68a8;
}

Idea development

Once I had heard the feedback from my pitch, I realised that I needed to make my idea more gender neutral, so I set about drawing a background that kept elements of the original image but transformed it from being a pattered background to being more of a scene. Here you can see the original image I used in my mock ups.

I decided I really liked the style of grass and flowers so in Illustrator, I started creating my own version of this but making it have a blue sky instead of a pattern, making it more like a garden and less like a wallpaper. Here you can see my design starting to come together.

I added objects along the bottom and clouds along the top to make the scene complete and then added my scroll box, logo, navigation and footer to get a real idea of what the site would end up looking like.