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

This is my pitch presentation. . . . 

Default style

Web browsers have their own basic default style for any code they are given. This is shown well when I created a basic html document without any styling. 

This is the code I used to create my test website. Although it has code to create imbedded styles for the website there is no code giving a style to the content. I have adde6 6 headings one at each heading level the web browser will automatically style. 

This shows how the web browsers would display each header without any added styling.

It makes header one the biggest and works its way down to header 6 which is the smallest. web browsers also have styling for other things like links, body text. 

default CSS styles 

http://www.iecss.com 

second mock up

This is the second mockup I made, it is also very simple but as I made it in illustrator I was able to show the difference that will between the desktop and mobile versions of the site.  On the left of the image it shows how the website would look on a phone and on the right it shows how the site would be different on desktop. 

The main changes I am looking to make between the different views of the site would be the navigation, on the desktop site I am planning to have navigation along the left of the site much like in my first mockup and how the navigation was placed in my ibook. On the mobile site I am planning for the navigation to be a drop down selection from the top of the site which will allow more of the screen space to be used for the content and then allowing me to add all the content to both versions of the website.

The second main change I am making between the desktop version of my website and the mobile version of the website is the main content.  On the desktop version of the website there is 1 main content area that takes up most of the page allowing some space on the left for the navigation. on the mobile version of the website there is one main content area but it is smaller so with the same amount of content displayed on each the audience would have to scroll down the page more.

I am also going to making the navigation a fixed navigation so that for someone navigating around the website they will always be able to switch between each chapter they are on without having to scroll back up to the top. This gives the user freedom to explore the site in the order they feel works best rather than sticking to the order it is presented in.

mock up

This is the first basic mock up I made. it is really simple and just shows the first ideas I had.

This it the first simple mock up I created it was taken from one of the pages in my ibook. I then added two white sections to the right of the page to show where the main content would be if this were a website and not a page in the ibook I created.  The navigation between ibook pages would create the navigation between each page in my responsive website. It shows how my idea is simple and as close to the design of the ibook as possible, this helps make the design between the two stay consistent and also the layout making it easy for the audience to use both without a struggle to learn a new layout when switching between the ibook and website.

Fonts

I have also chosen to use the font I used for the headings in my ibook as this is another factor I will be using to keep the visual style from my ibook to the website the same the font is called snow which I got from www.dafont.com and I will be using www.fontsquirrel.com to create the code to add to my website.

by using font squirrel I can upload a font and then save the code that allows me to use it in my website. by doing this I am not restricted to the fonts that are currently available to use on websites.

I feel the font snow worked well for headings  but I have decides to change the main body font from my ibook to my website as most of the websites I looked at used a san-serif font making it easier to read on a computer phone or tablet screen.

colours

I have chosen to use the same colours that I used in my ibook being mostly light blue and white with some black, this works well as it will help keep the theme and visual style between my ibook and my responsive website. I am planning to use the same images as backgrounds for each section as I found they worked well in my ibook and provided a large part of my visual style that I can keep the same. Another reason why they would work well is because they are photos and give the realistic and believable feel to the website, unlike drawings or a graphic style that could become less  believable and realistic. These are the images i have chosen to use.

WWF

After looking at responsive websites I then started looking at websites that were about a similar subject as mine would be. By looking at similar websites this gives me the advantage of knowing how other websites look and respond. The first website I looked at was WWF 

This is the main home page of the WWF website. It has a main colour scheme of white on a black background with some orange in the top right of the page to help highlight some of the important sections like where you can donate to the WWF or where you can adopt an animal.

The layout is simple with the main navigation along the top and consisting of white text on a black black background. Under the navigation is a main image banner that scrolls through like a slide show of different images. under that is 4 sections for 4 smaller images and then the bottom of the page includes a footer. By using big images at the top of the page it will attract the audience to look and also reduces the content that can be on each page avoiding making it text heavy but by being a slide show it also keeps the audience interested and maximises the space it takes up.

This shows the website when reduced to phone or tablet size. the main differences apart from the size are in the top section of the site, first being the navigation which is hidden under a burger icon in the top right. In the computer view of the site the navigation was originally across the top of the page but by being hid in the burger button it gives the option of a drop down menu that can be hidden to maximise the amount of screen that is used for content and therefore maximises the amount of content that can be on each page. The other main change of the website is the colours where as the website opened on computer uses white on a black background and then uses orange to hi light sections this version of the website uses black on a white background and also uses orange to highlight some of the sections.

www.skinnyties.com

This website skinny ties works well with clear navigation along the top and underneath is the main banner with ties under that the site is split in to 3 sections for most popular ties, tie bars and solid satin ties. By having this website in sections it works well when resized to fit on a smaller device like phone or tablet.

This shows how when the website is opened at tablet size the sections ether get smaller or move down the page for example the section that says solid satin has moved under the other two sections it was originally next to. Also you can see they have moved the shopping cart and search bar to be above the navigation rather than in line with it making more room to spread out the navigation. 

I then looked at how the website would display if on a phone browser and found that it follows the same structurer as the others but ether reduces the size again or moves things further down the page.

This page shows how each of the 3 sections has been moved down the page and placed under each other rather than beside they also reduced the size of the banner with tie images but this works less well as the ties start to overlap off the side of the page and out of view. This version of the page also has buttons in the top right for shopping and search options rather than a full search bar that was on the other 2 views. 

www.jeet.gs 

I looked at this responsive website http://jeet.gs as it has several good features that work well. The website jeet.gs is all about using grids in css and it has options to view the website with or without a grid. This becomes useful for the website as you start to see how a grid would really be used and how it is an example of how it works well. Although this grid idea would be irrelevant to most websites the idea of a button to turn elements of the website on and off works well.  

This website is based around one page and so requirers very minimal navigation around the site. Along the top left of the browser there is the Jeet logo and  underneath is 4 icons that link to parts of the page and also pop out bars on the left. This idea works well for a small website like this, as most of the site content is visible from the start and the extra content can be made visible when needed. Allowing the site to be simple and the audience to not be overwhelmed.

Another feature I like about this website is when opened at the size of a tablet or phone there becomes a icon in the top right of the website. This again is very useful for a small website as it allows the text to fill the room previously taken up by the navigation bar and now when viewed on a phone the main text takes up most of the screen with the navigation tucked away at the top. This is how the navigation drawdown looks. a drop down menu like this is often used on mobile or tablet because of limited screen space and making it easy to navigate around a site or app. This icon also stays int the top right of the browser rather than of the top right of the website which means it is always in view and there is no need to keep scrolling to the top of the page to navigate the site.

Wonders of Nature Design for the Web

I was given this assignment Wonders of Nature Design for the Web after finishing the project Wonders of Nature which was to create an ibook . . . 

The brief for Wonders of Nature Design for the Web was to produce a responsive Website that will display on Desktop. Tablet and Smartphone devices.You will each be using the material, which you created for the “Wonders of Nature” iBooks from Unit AF106 as your site content. The aim is to develop your own visual approach that will be consistent across your products.