Layout Options

After looking at other one page websites I have fond that the most common layouts are either a long vertical or horizontal page which you add sections into so that your navigation can simply slide through to the part you need. I am currently torn between layout options and will most likely have to draw up some sketches for both layout options and see which suits the designs better. For now I have drawn up some rough layout grids.

One page websites

For this project I need to produce an interesting but well structured one page site. Before I can start I need to have a look at other one page websites to see what is possible and what I feel would work best for me. Below I have looked at a few websites and written a brief overview of what I think is good and bad about them. 

http://www.fabmedia.com/

No navigation when moving down the page, because of this you need to go back up to the top to find next section, not good! This website looks too plain as I am moving down the page. There are some nice transitions but the site looks cluttered and boring. 

http://www.catalytic-design.com/#home

Nice transitions and layout. There is a good change of background between each section, this means that even when just scrolling you know where the sections start ands finish, this is helpful to the viewer. Interesting design and the navigation is always reachable which is a must!



























http://www.christianarth.de/

Vert clean smart transitions, simple and well put together website over all. There is a nice use of texture in the background mixed with the white space at the bottom making the site look clean cut and professional. The images have been very well placed so they do not look messy. All together a very well made site. 



























http://www.pusulaweb.com/default.html

I like the simple website layout and the large image at the top holding the navigation. The site then slides down to under the water which holds all of the content, and there is good use of a handy back button to bring you back above water. They have used nice transitions. The site looks simple but well designed.

Brief- portfolio site

We have just received our brief for this new project which is called “portfolio website”. This brief says “In this assignment, you will design and build a website containing your FdA work to date, plus any existing work you feel you should include in your portfolio and biography information such as an ‘about’ section and/or a CV. This will form the starting point to your portfolio website which you will keep up to date with new projects throughout the course.”. Having read this brief section I am very pleased with the idea of this project, I feel that not only is it going to let me be really creative and have some fun but it will also benefit me out of University.

The main thing that is going to make this website difficult is that we have been told that it has to be a one page site, meaning all my content will need to be broken down into sections of the page and I will need to use Javascript and Jquery to move around the page instead of linking my navigation to separate pages. Because of this I will need to be very careful with the structure of my site in my code as that will be its layout. The other thing which we have been told is that “text is text” and for this website we must do our best to avoid using images instead of text.

Overall I am very excited about this project, I think I will learn a lot about code and structure and I will also be able to have fun and be completely creative with the design.

The first thing I need to do it to have a look at single page sites to see my options on layout and to find out what makes them good and bad.

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.