Design for the web evaluation 

I enjoyed this project of creating a website with the content about the arctic taken from my ibook as it was useful to see how the same content would fit in another format from ibook to website. By using the same content this meant that it reduced the amount of time I had to spend on the project before actually creating the website then allowing me more time to design and build the site.

When designing and creating my site I tried to keep to the same simple layout as I had for my ibook as this is the main thing that will keep the same visual feel between the website and the ibook. The other main thing I am planning to keep the same is  the images as backgrounds and the low opacity as this gave a strong look that I could follow through to the site.

Some of the things I found difficult was when adding videos to my website as after getting the videos to work i then had the problem that the BBC had restricted viewing on some of their videos meaning i then had to find another way of including that video in my site. I also found it difficult when working out how the grid works as this made adding padding and margins to parts of my site confusing. 

Some of the things I liked most about my website is the Lightbox I used for my images and also the fixed background with a drop shadow on my content box which then made the appearance of my content box moving and the background staying in the same place. 

If I were to do this project again I would make sure to spend longer reasserting and designing my site to make sure I came across all the issues before I started making my site in order to create my website easier.

Checking my website is Accessible

I thought about how my website should meet basic accessibility needs and throughout my website I have made sure all my text is placed on an appropriate background that allows it to be easily readable. I then made sure that all of the text was text and not text on an image so that my site could be used with a screen reader if needed.  All of these are easy things to do but greatly improve how the website will be used and will help expand the audience that can use the site.

Adding Video

One of the things I found difficult was adding video to my website, at first I stated by using the embed code on youtube were I had sourced my videos from.

I found when I added all the videos to my site they worked well apart from one about polar bears which was restricted by the BBC who own the video. This is the message I received when trying to play the video.

This then meant that I had to find a way around the restrictions and ended up downloading the video to source from the website folder I had created. This then worked well as my video started working. as it was the only video that I had this problem with I left the others with the embed code taken from youtube and just added a class to set the size and boarders in css. 

Lightbox

I have decided to add a light box effect to all the photos on my Arctic website. By adding a light box effect I am able to keep my images at a decent size that they can be seen but would not take up to much of the space when reduced down to mobile version.  This is how images currently look on my website

Desktop 

Mobile 

This is after I added Lightbox and used it to maximise the size of my images making them stand out and adding galleries for the related images to be flicked through together.

Desktop

Mobile 

User testing 

I decided to test my website to make sure it would meet all the requirements that would make it work.  some of the things i looked in to were 

• navigation - is the site easy to navigate? were the relevant pages easy to find and access? 
• content relevance - was all the content text, images and videos relevant to the subject?
• responsive - did the website open as it should and did it work well at mobile and tablet size?
• enjoyable - was the website enjoyable and interesting?

Presenting to the class

This is how my site will look when opened as a desktop site . . .

This is how it will look when opened on a mobile device . . . . 

When I presented my website to the class I found that there was several things that they liked including the drop shadow and fixed background that makes the content box look as if it is sat on top of the background and is the only thing moving.  Feedback from presenting to the class also told me that the use of the images and changing the opacity of the content box and navigation because it is keeping in with the theme and visual style i started in my ibook. 

Some of the things they said I could improve on are images to open at the same size in each Lightbox and not keep changing size when going through a gallery.  They also said that I could improve the footer of the page to make it fit in with the rest of the visual style and not just look like links at the bottom of the page.

Changes to Navigation

when building my website I found it harder to add a fixed navigation to my site and I quickly found that it would be more of a problem than it would be benefit to add a fixed navigation and found that by adding a footer. 

I added simple links in to the footer of each page and separated them by adding a (|) at the start and end of each link for example the home page link would look like (|Home|).

This is what it looked like when i added it to my site. . .