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

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.

Evaluation

Overall, I feel that this project went well design-wise, as I have little experience with designing websites and judging by my feedback, I think that I created a fitting website for a nursery. However, there were some problems with this project, especially with the timing.
As many of us did not have much experience with code, and having a two week Easter Break, made it difficult to remember what we had learned beforehand, so I was rushed on the week before hand-in. I also did not get nearly enough info from the client, as I had sent three emails to them and did not receive a reply to any o them. In hindsight, I feel that I should have phoned them at some point to know I was going to get content from them, rather than having to wait to hear from James.
I did not have that much problems with coding myself, an I put in a lot of hours on my own trying to figure out how to get the site work. In that respect, I feel as if I have learned a lot from this project, and I find making websites easier now. Designing graphics for this site was also helpful, as I learned about how to optimize images for the web and how to make to look good on various browsers.
In conclusion, I think I have learned a lot from this project, even though deadlines were sometimes stressful, especially receiving little content from the client, although that is a learning experience in itself, as that can happen in real life situations. I like my website design, but I still think there is room for improvement on it. If I had more time to work on my site, I would have added a bit more imagery and maybe I would have written up some of my own content for the client.

Finished Site

The layout of my site is fully complete, and I have added some images to each page. However, as I had not received that much written content apart from the prospectus (which was mainly written in lists), I added as much content as I could, and then proceeded to add some filler text.

Homepage

About Us Page

Team Page

Helpful Info Page

Community Page

Site Testing

I have tested my site on several browsers to see if they are fully functional.

On Firefox, Safari, and Chrome, the site appears as it should. Two of these were tested on a PC where as one was on a Mac, so the font looks a little bit different on the Safari version, but other than that it is identical.

On Opera, the Helvetica font does not seem to work, so it went to the backup font, Verdana. Because of this, the words appear wider on Opera. I had a problem with the text on the navigation buttons overlapping because of the font, but I got over this problem by shortening the text indent and making the size of the font smaller.

The browser I am having the most problems with is Internet Explorer.  Without ActiveX on, no gradients show up on IE9. When it is turned on, the rounded edges of the site do not show up, but gradients are now working. The clouds also disappear in place of the gradient. To fix this, I shall have to try and get rid of the gradient functionality for the background in IE. Aside from this, the site is still fully functional.

Receiving Content

I have finally received some content from James, which was forwarded from another classmate doing the PACES Nursery site. Since we were waiting word from either the client themselves of James, we would have shared the content regardless.

With the images, I can create a new banner and add images to the pages on the site, as well as create a page for the staff working there.

Another Email Sent to the Client

I have had to send another email to the client, as they have still not replied to me to give me feedback or content. I have given them the most recent version of my site, and have asked straight out for content.

Here is a screenshot from my sent mail folder, showing the dates I sent my two recent emails.

Class Crit

The feedback on my wide was generally positive. The main positive points of my site were the visual style, so I am glad I changed these before crit. The clouds repeating were well received, as well as the grass footer.There was not much to say about the content as I have still not received any at this time, but the main thing to change was where I put the contact info.

The text for it was too small, and from the crit feedback, I was told I should move it to the footer to it filled the pace better.

Other than that I shall stick with my current design for the site, as it was given good feedback.

Coding - Button Transitions

For my buttons, I added a hover effect to them so they would change colour. This helps the end user see where they are clicking on the site.

I also added some CSS3 to make the transitions fade.

There are different versions of the code for it to work in different browsers. The ease-in time is the amount of time it takes for the colours to transition, in this case it is .3 seconds. The hover part is what happens with the roll over the button.

Changing My Visual Style

After creating the basic layout, I realised that my visual style was lacking. There wasn't enough imagery on the ste layout.

The background was only a simple gradient, and the footer looks bare. I also need an image on the banner, as this one is just a placeholder.

After this, I drew some of my own imagery, wich included clouds, and an image on the footer.

I drew a repeating image for the clouds, which takes up much less space than a full image and will fit on any browser size. I changed the colours slightly so they are more bold and colourful.

For the footer I added a grass-like pattern. I made this blend in with the background gradient by cutting the grass out of a white picture and made the grass transparent to show the gradient behind.

Overcoming Layout Problems

To overcome the problems I was having with my navigation bar colours, I simply had to get rid of all of my existing gradients and add a gradient colour to the wrapper. As the wrapper didn't have rounded edges I also had to give those to the wrapper as well. After that, I found it was much easier to edit my website as I didn't not have to line up the gradient in the banner image with my background image as I could just make the banner background transparent. I also did not have to line up the footer gradient with the navigation gradient.

Thoughts on How My Site Looks So Far

After giving my website more gradients and a temporary banner, this is how my website looks:

Although all main parts of the site work, there are still a lot of problems with it in my opinion. I feel that the website is missing a lot of visual style, as the background for the site at the moment is a simple gradient. I said in my colour scheme proposal that I was going to use a grey background as some of the other websites used it to a good effect, however I feel as if it doesn't work on my site layout. The footer also looks very plain, and I should think of adding something like an image or text to it.

Design thoughts aside, I am also having troubles with my code, because if I add too much content to my main content box, the navigation bar does not go down with it. I need to look up how to fix this.

Search Engine Optimisation

"Search engine optimization (SEO) is the process of improving the visibility of a website or a web page in search engines' "natural," or un-paid ("organic" or "algorithmic"),search results."
http://en.wikipedia.org/wiki/Search_engine_optimization


Search Engine Optimisation allows more popular and frequently visited sites to appear at the top of the page, allowing them to be seen by more people. They can also be targeted by the different types of search engines, such as image search.


"As an Internet marketing strategy, SEO considers how search engines work, what people search for, the actual search terms or keywords typed into search engines and which search engines are preferred by their targeted audience."
http://en.wikipedia.org/wiki/Search_engine_optimization


In my own words, people trying to make profits and gain popularity will look at how the search engines work and adapt theirs sites to get them near the top of the search engine list. This can help them gain their target audience by looking at what sites they go on and what search engines they use.


"Many SEOs and other agencies and consultants provide useful services for website owners, including:

• Review of your site content or structure
• Technical advice on website development: for example, hosting, redirects, error pages, use of JavaScript
• Content development
• Management of online business development campaigns
• Keyword research
• SEO training
• Expertise in specific markets and geographies."

http://support.google.com/webmasters/bin/answer.py?hl=en&answer=35291

These tools can help website owners get their website noticed.

Coding - Drop Shadow

I added a drop shadow to my news bar to make it stand out and give it some depth.

In my first version of the code, it worked on my Firefox browser at home, but not on anything else, so I had to change the coding.

This is the fixed code. The 0.6 is the opacity of the gradient, and the 50 is the border radius.

Research - Internet Speed, Browsers, Fonts

When building websites, designers must take into account who is going to use their site. Although a site will have a main target audience, you will not know what they are browsing their site on, aside from making assumptions and maybe taking a survey of a group of people, but even then it will not be a guaranteed overview of the userbase. This means that the designers must work to make everything functional for even older browsers or slower connection speeds.

Internet Speed
Although almost everyone has moved from dial-up to broadband over the past decade, there are still people with slower connections that should be taken into account. Many people are starting to use their phones to browse sites, which means that their connection will be slower than a computer. Slow internet speeds must be taken into account when using lots of images on a site. Having a large background image is not usually a good idea, unless it is a compressed JPEG file. Repeating images are a better idea for sites as it uses up less bandwidth.

Browsers
Some people rarely update browsers, or do not switch from their default browser.

As seen by this usage share graph for the site W3, Internet Explorer is still the most popular browser, as it is the default on Windows computers. As people are still using older versions of Internet Explorer, it makes it hader for website designers to use newer coding without it looking bad on older browsers. Even recent version of Internet Explorer do not work with come CSS3 properly, so some sites may look different in Internet Explorer.

Fonts
Fonts are another problem because of the amount of people using different computers and even mobiles and tablets. Ways around this are to add different backup fonts for sites, so if one computer does not have the main font, it does to the next one instead. Fonts can also be uploaded onto the server to stop this from happening.