Thursday 26 April 2012

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.










Tuesday 24 April 2012

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.


Monday 23 April 2012

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...









Friday 20 April 2012

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.