Project Six: Web Portfolio

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

Making web pages

To make successful websites with working links you will need to thoroughly understand the folder system that structures your files. You will create a web project folder with your name and make folders within this that offer a sensible navigation structure.  These may be, css, images, scripts, working files.  Please note the index.html page MUST be loose at the top of the hierarchy not inside a folder.

You will use TextWrangler to create all HTML and CSS. The goal of this project is to further your understanding and abilities in hand coding HTML & CSS, therefore you will not be allowed to make any of this assignment in Adobe Dreamweaver or any other visual WYSIWYG editor.

Your site will be constructed as a single page with the different sections made visible using css positioning or by a hide/show or similar jQuery method. CSS3 animation or jQuery will give the smoothest and best results.

You will not use images of text in this assignment. All text elements must be live selectable text and styled using css. You will use either Google Fonts or @fontface for your text elements.

Images are restricted for content, header (masthead) decoration or sprites for use as background to navigation elements but all links must be text based.

Important: You will not use html tables for the purpose of creating layouts at all in this assignment.

Working with CSS

You will use Cascading Style Sheets (CSS) to format and style the elements of your page so that you can:

·      style and distinguish between navigational and content areas of your page,

·      format and control your text and any links,

·      you can create print- friendly versions of your page which restyle the content for print outcomes.

Working with real outcomes

You will also prepare and format your page with CSS for different browsers on different platforms. This will involve testing your pages on both Mac and PC computers.

In order to make sure that your pages work seamlessly in different browsers and on both Macs and PCs, you can use conditional HTML comments to direct Mac and PC browsers (including Internet Explorer and Safari to sets of CSS files).

Working with text and images

Text material in Word .doc format or created in any other word processing package must be converted to 'vanilla' plain text (txt) files before inserting into the web page.

You will use Photoshop or Illustrator to process images that will be optimised for web delivery using Save for Web and Devices as a gif, jpg or png, with care taken over pixel dimensions, file sizes and image qualities.  Video content should be displayed using the ‘Video for Everybody’ system.

All the images you make in Photoshop and Illustrator should be placed in the ‘images’ folder in your project folder and will be addressed with the correct routing through HTML. You will make these images accessible through the use of  <alt> and <title> tags.

For the typographic elements of your design you will use webfonts using either @fontface or Google Web Fonts.

Your design work

You should ensure that you take note of screen sizes and that your pages work effectively with current popular screen resolutions.

You should consider creating visually pleasing and legible designs where the design acts to make the content more appealing and readily readable with a standard web browser, rather than dominate or overpower the content.

Your designs must achieve consistency over the sections of your site: you must use common type styling, layout and structural elements between sections.

You need to consider usability and accessibility in the design of your interface and page layout.

You will need to demonstrate your approach to the creative process using methods that are standard to the digital media industries.  As well as your visual research, your sketchbook and blog should show sketches, ideas and experiments for the designs in development so the processes you used to reach decisions on such issues as wireframe layout, colour, typography and navigation are transparent.  Navigation must be planned using flow diagrams. 

 

Pitching your designs

You will pitch your designs to the group and tutors in a presentation.  You have to include your proposed content, layout, interface designs and look and feel in your pitch.  This can include:-

-       Wireframes

-       Flow diagrams

-       Graphics

-       Proposed content

-       Logo and heading designs

-       Interface designs

-       Page mock-ups

This pitch needs to be prepared as if you were selling your idea to a client.  Include technical research, particularly screen resolutions, browsers and platforms.  Show colours and fonts in mock ups rather than on their own – make visualisations rather than lists.


Sketch books must be produced for assessment at EVERY lesson!

Evaluation and Testing

Testing

Google Chrome

Internet Explorer

Safari

I tested my website in Internet Explorer, Safari and Google Chrome. Sadly my title didn't come up in Internet Explorer, so I will need to sort this out so that it does. I also found that some of the styling that I put in didn't really work in Internet Explorer, however on the other hand it was fine in the other two browsers. 

---------------------------------------------------------

Evaluation

I think, overall I have struggled with this project the most out of the ones I have so far done. Even though it has been a struggle there have been parts of the project that I have enjoyed and learnt a lot from. Initially coming up with an idea was hard, however I think the client that I had was really helpful and I was able to contact him with questions about content and the feedback he had, which I felt make the project less stressful because I didn't have to wait ages for content or input.

For me making the website was a real challenge. I have never had experience of making a website using html and css, so I wasn't really in my comfort zone when it came to making my site independently. There was quite a few lessons with tutorials that I found really useful in getting me used to the code and how to go about the styling. Although these tutorials were useful, I felt by the time I came to doing it on my own over the Easter holidays I was completely lost and I wasn't sure how to go about starting with the basic structure. After Easter we had a lesson which helped us to get started with the structure, for me this was really good and was the sort of thing that would have beneficial to me before the holidays. However once I got started I managed to get the hang of the code I was able to complete 12 page website, which I thought was a good achievement as I had never made a website in this way before. 

Working with the client was really good experience and I have been lucky with the way I have been able to email him with my questions and mocks and him being quick in responding and helping with good feedback. I was able to get on and make my design/ mock up pretty easily as I had plenty of content sent to me quite early on in the project, which was really positive.

I feel I have really learnt a lot with this project and I think I can really apply with what has gone on with this project with future ones. My time management hasn't been particularly great, however I think the time off for the Easter really slowed me down as I was really struggling and couldn't find tutorials online to follow easily. I also think that I didn't really use my sketch book as effectively I should have done, but I think that I should try and use the book more effectively in the next project. 

Lastly, I feel that my overall website turned out fairly well. I am not completely happy with it as I think there is a lot I can do to improve and make it better. Saying this though, the fact a couple of weeks ago I wasn't able to make one page of my website I think ending up with a 12 page website is a real achievement for me and I feel proud of this.


My Final Website

Changes to My Website

The first change that I made was the styling of headings and navigation, it was also suggested that I used a handwritten type font so I thought that I would use this style for the navigation and headings. To find the right type of font I went on Google Web Fonts, which had quite a selection especially of hand written style.

After looking at through Google Web Fonts, I narrowed it down to these five. I really liked the look of the 'Happy Monkey' font, which is at the bottom. I thought that it looked hand written and at the same time looked clear and easy to read.

I decided to try out the 'Happy Monkey' font. The image above is of the title. I wasn't sure whether to change it from how I originally had it, however I think this works really well and looks clear and easy to read. Instead of having the letters cut out on the paper like before I decided to have a crinkled paper texture on the white box and denim for the letters.

I have also used this font for the navigation. Again I think it works really well and is also clear to look at and read on the page.

I have also changed the font of the headings in the content boxes and the links on the 'Press Reports' page to 'Happy Monkey' and I am pleased with how it has turned out. I did try having the paragraphs with this font as well but I found it quite hard to read and decided to stick with the simple body text. Below is the html and css code that I need in order for the font to work.

HTML:

<link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>

CSS:

font-family: 'Happy Monkey', Helvetica Neue, Helvetica, Arial, Sans;

The next thing that I need to look at and change was the post it note.

I went on to make the post it note slightly bigger and a lighter shade of yellow, I also made the images of the logos slightly bigger as well. It was also suggested that I move the logos from the header, so I decided to move it so that it was on the right hand side next to the content and underneath the navigation, this means that it will be still be clear and easily visible when people come on to the website.

The next thing that I did was finish and change the gallery page. I struggled to do my original idea of the rollover, so I instead changed it and used a simple lightbox code that is just as effective.

This is now what the gallery page looks like. When you click on an image it will come up in a box in the middle of the screen. The code for this was pretty simple and it meant that I need two versions of each, one small and one big. 

<link rel="stylesheet" type="text/css" href="javascript/lightbox/themes/default/jquery.lightbox.css" />

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="javascript/lightbox/themes/default/jquery.lightbox.ie6.css" /><![endif]-->

<script type="text/javascript" src="javascript/lightbox/jquery.lightbox.min.js"></script>

<link rel="stylesheet" href="css/styles.css">

I needed to place the bit of code, which is above at the top my html code for the page and then in my main content section I was able to put in my images. 

<a href="images/3L.png" class="lightbox" rel="group1"><img src="images/3.png" width="200" height="97" /></a>

   <a href="images/L2.png" class="lightbox" rel="group1"><img src="images/2.png" width="200" height="150" /></a>

  <a href="images/L4.png" class="lightbox" rel="group1"><img src="images/4.png" width="200" height="104" /></a>

  <a href="images/L7.png" class="lightbox" rel="group1"><img src="images/7.png" width="200" height="114" /></a>

  <a href="images/L5.png" class="lightbox" rel="group1"><img src="images/5.png" width="200" height="223" /></a>

  <a href="images/L6.png" class="lightbox" rel="group1"><img src="images/6.png" width="200" height="293" /></a>

  <a href="images/L8.png" class="lightbox" rel="group1"><img src="images/8.png" width="200" height="139" /></a>

Above is the main bit of code for the lightbox. I have highlighted in blue where I need to place the larger image. In red I have highlighted where the smaller images goes and in green where I needed to put the height and width of the smaller image. Underneath that bit of code I need to put this bit in:

<script type="text/javascript">

  $(document).ready(function(){

    $('.lightbox').lightbox();

  });

</script>

This is what the images look like when you click on them. I am pleased with this outcome even though it is not what I originally planned.

I then went on to get all my content to be fixed in one position. The screen shots below show what it looks like when the page is adjusted.

Crit

After finishing what I could of my website, I then presented it to the class for crit. I thought that this would be a good chance for me to get some feedback on what I could improve or change.


These were some of the points that I received:


- Change the styling on the headings
- Change the styling on the navigation
- Could add some drop shadows on the images and navigation
- Perhaps change the title to have clothes cut out
- Make the post it note a lighter yellow and the logos bigger
- Finish the gallery, contact and entrepreneurship page
- Sort out the gallery page
- Try and balance the layout
- Change the background on the white text boxes
- Maybe include more imagery like sketches
- Maybe change some of the text so that it is handwritten, perhaps for the headings and tagline
- Sort out the code so that the content is fixed and the content doesn't move when the page is adjusted
- Like the title
- Like the cork board idea


With the comments that I received there is a lot that I can work with in order to improve my website, however there a some points that I am going to focus on and complete and I have some I will go back an go through the rest of the points. The points below are what I am going to focus on first: 

- Change the styling on the headings

- Change the styling on the navigation

- Make the post it note a lighter yellow and the logos bigger

- Finish the gallery, contact and entrepreneurship page

- Sort out the gallery page

- Try and balance the layout

- Maybe change some of the text so that it is handwritten, perhaps for the headings and tagline

- Sort out the code so that the content is fixed and the content doesn't move when the page is adjusted

2. Making My Website

Gallery

This is what the 'Gallery' page currently looks like. It isn't how I planned it, my idea was to have the piece of paper on the left hand side and the images scattered on the right. I am going to leave it for crit and then after that I will come back and sort out the problem or perhaps even change my initial idea. I wanted the images to be a rollover, so when you go over an image it would come up bigger on the left hand, however as I am struggling with doing this I am going to have to look up some tutorials on how to do it.

Entrepreneurship and Contact

I haven't managed to finish these pages yet, but I think that I have enough from the other pages to get a good enough crit from the lesson.

Making My Website

Basic Layout


In lesson we made a basic layout structure, this was helpful with getting started and meant it was just a case of adding some styling and the relevant content.

The screen shot above shows the basic structure that I made, which helped me to get started.

The screen shot above shows some of the html code and some of the css code for the basic structure. 

Homepage

Above is what the homepage looks like and to the left is some of the html code for it that I did in TextWrangler. I am pleased with this outcome, especially as it has been a bit of a struggle to get to grips with the code. In the navigation bar there are links to each of the other pages on the site. I found linking the pages tricky at first, but I got the hang of it with this bit of code: 


<div id="nav">

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="abouttheproject.html">About the Project</a></li>
<li><a href="pressreports.html">Press Reports</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="testimonial.html">Testimonials</a></li>
<li><a href="entrepreneurship.html">Entrepreneurship</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!--end nav-->




I also got the hang of adding images as well, again once I got the hang of it I found the bit of code for it fairly simple. On the other hand adding a video was a bit of struggle and the bit of code that I found was a little hard to understand but with a bit of help I managed to get to grips with it get the video to work.



<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<div id="video"><video width="380" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="video/SMPORBP.mp4" type="video/mp4" /><!-- Safari / iOS video    -->
<source src="video/SMPORBP.ogg" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
<!-- fallback to Flash: -->
<object width="380" height="360" type="application/x-shockwave-flash" data="mediaplayer-5.9-viral/player.swf">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="mediaplayer-5.9-viral/player.swf" />
<param name="flashvars" value="controlbar=over&amp;image=video/SMPORBP.jpg&amp;file=video/SMPORBP.mp4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="video/SMPORBP.jpg" width="380" height="360" alt="__TITLE__"
    title="No video playback capabilities, please download the video below" />
</object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p> <strong>Download Video:</strong>
Closed Format: <a href="video/SMPORBP.mp4">"MP4"</a>
Open Format: <a href="video/SMPORBP.ogg">"Ogg"</a>
</p></div>

I was quite daunted when I first saw this bit of code, however after being talked through I found that it wasn't as confusing as I first thought and it turned out I didn't need to change that much of it. I have highlighted in black the parts of the code that I needed to change in order to insert my video. After doing that I placed an image for the footer and title and included a background image for the navigation. Lastly in the header I inserted the image of the post it note, the code for that was:

HTML CODE:

<div id="header">

<img src="images/title.gif" alt="" />

</div><!--end header-->

<div id="logo">

<img src="images/postitnote.png" alt="" />

</div><!--end of logo-->

CSS CODE:

#header {

width: 810px;

height: 140px;

/*background: #5d1351;*/

/*position: absolute;*/

padding: 10px;

margin: 0 auto;

}

About the Project

This is what the 'About the Project' page looks like. For this the code was pretty much the same as the homepage, however I just needed to change the images on the right hand side and the content on the left. To rotate the images, though I needed this piece of code:



transform:rotate(2deg);
-ms-transform:rotate(2deg);
-o-transform:rotate(2deg);
-webkit-transform:rotate(2deg);
-moz-transform:rotate(2deg);



I experimented with the angles, however I found that I didn't really need to change the angle that much because otherwise it wouldn't have look right.




Press Reports

This is what the 'Press Reports' page looks like. While building this page, I changed the design of the page. Instead of having the links on individual pages, I changed it so that it was on one piece of paper with a sketch on the left hand side.

The screen shot above shows the what I changed it to. I think that it works better and I thought that the sketch fitted in with the idea of designing clothing and fashion. To make the links in the middle links, I used the same piece of code as I did for the navigation but I changed the titles.

<ul id="argus">

<li><a href="press_reports1.html">Record PomPom</a></li>

<li><a href="press_reports2.html">Argus PomPom</a></li>

<li><a href="press_reports3.html">PACA Portslade</a></li>

<li><a href="press_reports4.html">BACA Want to Work</a></li>

<li><a href="press_reports5.html">Brighton and Hove Entreprises</a></li>

<li><a href="press_reports6.html">Images</a></li>

</ul>

This is the code for the links in the centre of the page.


Press Reports Pages