Evaluation

When i started this project i was a little worried as i hadn't been too acquainted with HTML and css and the HTML and css i did do was a couple of years ago was only a bit and i didn't like coding because i am a more visual person and i struggled with coding back then so i wasn't too keen on this project.

We were first given our brief which stated that we had to create a responsive website that was user friendly and had a similar visual style to the ibook and contains the same content as the wonders of nature ibook did.

To start with the project i began doing some visual research in terms of web design, seeing sites from simplistic and minimalistic well designed sites to bulking content infested sites. Doing the visual research allowed me to get an idea in my head about how i could incorporate design elements from my ibook design to a website, and how my website could visually look. I got a lot of inspiration from a ton of sites some responsive some not. Finding responsive sites also allowed me to picture how i could lay out my content on smaller platforms so seeing sites that already did that was very helpful to my idea development.

After getting a lot of web design research done i then went onto brainstorming elements i could include in my site and ways in which i could make the website user friendly and then i also brainstormed what was fundamental for a website and what I'd need to include like navigation and content etc. I also spent a lot of time on the project sketching wireframes and concepts for the design like the logo and banners etc. This helped me to develop my ideas further and and get a better of how my website could look visually and how it would be laid out.

I spent a lot of time figuring out how i would present my content and i came to the conclusion that i was going to have to cut some of my content as some it wasn't needed as much and it would take too much extra time to add content that was necessarily not needed. I ended up deciding i was going to combine a couple of sections together and that i would have one chapter introduction page and i would have two section pages. The chapter page would be like an introduction to that chapter and to the sections. The section pages go off on a tangent on a different topic relating to the chapter topic.

I feel like this way of laying out the website was a good way for me to understand how the content would be placed and how the user would be able to navigate through the site as well as having the content divided up and not all on one page.

After spending a lot of time developing ideas in my sketchbook and on illustrator i later began to develop my website with html and css and began designing the frame of the website. The website has 3 css style sheets, 1 being the homepage style sheet, 2 being the chapter pages and 3 being the section pages. I did this in order to make it easier to organise chapter pages and section pages.

Overall i'm very pleased with my site, i really like how i incorporated a very similar style from my ibook to the website as i wanted the site to look really similar so people could tell it was made by the same person and that both of these projects held the same style, visually. The page layout of the site i'm very proud of, i really like the way i laid out the site as well as all the content i added like videos, text content, graphics and images, sliders etc. So there i a wide range of content on my site that i' glad i was able to add, both new and from my ibook.

The issues i had throughout this project was getting used to the skeleton framework as i realised that i wasn't using it properly but once i got past that i was able to work on my site productively, getting a lot of work done and making my website responsive for all the platforms.

 For me the biggest achievement about this project was managing to get it done! I really didn't have a lot of experience with html and css and the html and css i did know back a couple of years ago i ended up forgetting so this project was almost like a new experience, however i've learnt so much about responsive web design and more html and css in general and its been great to be refreshed on html and css coding and it allowed me to produce something i'm very happy with.

In conclusion i did have a lot of struggles with this project but when i was able to overcome these problems, i felt so proud and it made me more knowledgable about overcoming issues in the future. This project believe it or not was probably my favourite just because i felt like a sense of  accomplishment when i was able to produce something i really thought i was going to struggle with and being able to achieve what i felt like was the unachievable felt amazing and it's definatley made me more confident with html and css, and like it a little more.

Accessability

I've added alt (alternative) tags to all of my images so if in any case the images can't be viewed on the website for whatever reason then there will be a description of the image in this tag. So i've gone through nearly all of my alt tags and done this towards all the visible content of the images that display on screen on all of my pages, helping to make the site more accessible.

Here's an example below:

As for colour scheme i use a lot of contrasting colours and have made sure that none of the colours clash or make the text or content unreadable or unable to view properly, so below is a couple examples of my homepage, chapter page, and a section page.

As you can tell by this, a lot of the colours don't class and i've made sure of that and that it wouldn't be an issue for the user, so i've experimented in the past with colours for images etc on the site so that i would fully be able to tell what did and didn't work for the website, making sure everything would be fine for the user and to access.

Validation checks with HTML

One of our teachers mentioned for us to check all of our pages on a website called 'w3 schools' for validation checks on our html for our website that we created. This process allows us to drop our code in and for the program on the site to detect any issues of errors about the site.

So what we had to do was check all of our pages and see if there were any faults with the html that needed to be fixed Our teacher did mention if we couldn't fix all of the errors it doesn't matter. I did check all of my pages and i managed to fix a lot of the problems and would usually have about 40 issues per page and most of them were issues like this:

So i managed to sort this out, giving all of my images an alt (alternative tag) to the pages on my site. Apart from that i had a few issues with the section tags and it was stating some really odd things. I also had a few issues with the video tags and also some image tags (Shown below).

A lot of these i didn't understand and didn't know why it was giving me this error, so i decided to leave these ones, and sometimes when an error appeared, i would repair it and then it would give me more errors or the same error, or it would mess my site up so some of the issues it highlighted were very odd and out of place with some of the more fixable issues. Overall i fixed about 80% of all my pages issues which is good so i'm happy.

Adding a description on homepage

I decided that my main homepage was very minimal and doesn't give any first insights to what the website actually is, so i decided to make a graphic box with text in the box in illustrator and export that as a png and place it underneath my logo in the centre of the page, just to add a description and insight to the user what the site is and its purposes.

Crit and Feeback

The other day i presented my final piece to the class of the wonders of nature website to do with earthquakes. At the point before presenting my website the stage i was at was very close to the end process of finishing the site, so i pretty much had a finished site to show to the class, and i was very proud of the site i had created.

When i showed my site i talked about the responsive side a lot, to do with hiding certain aspects in the smaller versions and making it user friendly. I also talked about my pages and how the user would navigate through the site and also giving everyone an insight to the content i had added like the imagery, videos, and text i had used throughout.

I explained that on my chapter pages i had created separate boxes for content (which were similar in my ibook) and explained i wanted to give a bit of breathing space for the content. When i showed the section pages i told the class that i wanted the user to be able to tell the difference between a chapter page and a section page, explaining that the chapter page is an introduction to the subject which then goes on tangents in separate paths which are the sections which go more into a certain subject relating to earthquakes.

I told the class the way i made the chapter pages different to the section pages was by styling them slightly different with a slightly different visual look and layout, and explained that this would help the user to tell what is a chapter page and what is a section page. When explaining the navigation at the bottom of the section pages i said you could either go back to the chapter page or go forward and go to the next section or next chapter and because the home button is fixed on the screen if the user wants to go to chapter 1 to chapter 4 then can simply go back home and click on any chapter they wish.

Overall i covered what i wanted to cover about my site and i'm really pleased with how it looked. Once i had presented my website i wasn't given much feedback to be honest which was disappointing but the feedback i got was mainly positive. Someone pointed out that my style on the site and ibook are very similar and they would be able to recognise that they were the same thing and were made by the same person and was about the same topics, which i was pleased to hear and feel like i did try as much as i could to make my websites visual style very similar to my ibooks.

I did get a little bit of critique but didn't make sense to be honest. Someone in the class said that my site was non-linear, e.g. they couldn't go to wherever they wanted like from chapter 2 to chapter 4 or whatever. When i heard this i did mention that the user had the choice from the start on the homepage to click wherever they want and can go back home to go on another chapter, and because i  had fixed the home button navigation on the chapter and section pages, it allows instant access back home without having to scroll all the way back up the top of the page. This would then allow the user to go from chapter one to chapter 3 if they wanted. When i explained that to them they seemed a bit dumb for asking that question in the first place.

Apart from that i think everyone liked my website and loved the visual style of the site and how the content was laid out and the content that was there as well as how the user would navigate through the website, so i was very happy that i got an overall positive response from the class, even though most of them were quiet and wouldn't give me and many others much feedback when they were crating their work. Apart from that i'm happy!

Issues with slideshow and resolving it!

I recently found a image slide that i was able to add on my website i.e. my introduction page for chapter 1 and i placed the code into my html and css and it worked, and all i had to do was change the images to the ones i wanted in my gallery.

This is how it looked before

and this is how the gallery looks on my website.

Once i did that i looked at my website to see if it worked, and it did! and before i found this gallery i tried other ones but for some reason when i placed the code in it wouldn't work the way i wanted it to.  When i found the gallery on the website it had the look that i wanted, as the previous gallery slider i used in my other pages i couldn't figure out how to get it full sized, so i wanted a slider that used the full size of the image to cover the slider, so i was pleased when i found this one.

Link to where i found the image slider: 

http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/

I also had to add smaller icon images when the user hovered over the icon dots, as it was built in, in the original version. This is a great addition to the image slider and it allows the user to tell what they want to click on for the images within the gallery.



Once i had all the images and icons etc on my gallery i was finished with it, and the final changes i made was making the gallery invisible in the smaller formats as it would weird on smaller platforms and probably wouldn't work as well on the mobile versions. The gallery works fine on safari and i then thought of checking how it looked on firefox and it worked fine and then i checked how it worked on google chrome, and it didn't work.

This is how it looked on google chrome as the default.

This is how it looked when trying to click on another image.

I didn't know what the problem was so i went back on the website to look at the demo and see if it worked on google chrome, just to see if i had messed something up in the code or if it was the galleries fault. Below is how it looked on google chrome.

So when i looked before a while ago when i first found this issue the demo didn't work on chrome, and i recently went on chrome on the demo and it worked so i felt a bit clueless to why it worked now. I went on the site i got it from and scrolled down the page seeing similar problems with the image slider on certain browsers and she did address the issues and showcased the improvements on the page.

I used the developer tools to look through some of the html and i got rid of my old script and placed the new one she linked and then i checked if it worked and it did! 

This is how my image slider looks on chrome now!

So overall the way i resolved this issue was by taking out some script from my original html for the image slider, and then i went onto the improved sideshow on chrome in the developer tools and copy and pasted that script in, to replace my old script i had got rid of and the image gallery worked!

Fixed Home Navigation

Something i decided to do to my home navigation button is to make it fixed to the screen so when the user scrolls down the home button will stay fixed to the page and will scroll down with it. This will help to make it easier on the user so they don't have to scroll all the way to the top of the page click to go home.

Also having it attached to the top of the page will allow the user to have easy access to go home, and i applied this to the chapter and section pages, i isn't bother with the homepage as it isn't a large or long page so theres no point it making it attached to the top of the page on the homepage.

The code i added within the css was this, and using the 'z-index' allows the home button to stack above all the other elements, this means that the home button will always be above and on top of other elements and objects on the site.

Adding extra navigation into section pages

Something I realised when i was working on my website and going through page to page and viewing it in the browser is how inconvenient it was to get through the site easier by being able to go from section to section or go back to the chapter page. I decided that if i added extra navigation at the bottom of the section pages it would make it easier for the user to get through the site and from page to page etc.

I decided that the navigation i would add would be at the bottom as it would make it easier to place because adding it at the top would make the page look messy and take away from the pages main focus, as i wanted to add big arrows with the text like 'go to' blah blah. So i felt adding it at the top wouldn't do my website justice so i decided to add them in on the bottom of the section pages.

As for the idea, i wanted to make these navigation boxes like arrows for a couple of reasons, one of them being because the user could know they are either going back or forward on the website, secondly because i've used arrows a lot on my website and its a theme throughout my website.

(Its a little bit messy on some of my illustrator documents, i know haha...)

I created the graphics in illustrator of the arrows and i made two of tach arrow as i wanted to do an image swap on the arrows, one of them being the normal arrow not hovered over and another either shifted a  bit from the left or the right depending on the arrow. I wanted to do this so when the user hovered over one of the arrows it would move either to the left or right so it creates more movement and interactivity to the website and giving the user a better experience.

Something i also did is i added different colours to the chapter names and section names so the user could tell if they were clicking on a chapter page or a section page. I made the chapter name colours white and the section name colours red.


I feel that having these arrow navigations to go either back to the chapter page or go from section to section or the next chapter is a good way to make it easier for the user to navigate through the site and have a better experience in total.

Creating Chapter Header Banners

After i had got my structure for my chapter pages on my website sorted out i then wanted to begin adding assets to each of the pages, and the first thing i began doing was creating some header banners in illustrator for each of the chapters, but i was slightly in decisive about what i wanted the chapter headers to look like, as i wanted them to be different from the section pages, but still work with them theme of the site and look nice.

At first i didn't know what i wanted the banner to look, so i came up with a couple of ideas, shown below, and in these i was trying to express some relation to earthquakes in these headers.

I did like these concepts, especially the one on the right however, because it was suppose to be a hole and cracks i originally thought it was a cool concept  as it related to my ibook chapter introduction pages. However when i kept looking at it on the website, it didn't feel right as it looked like a hole was hovering instead of a birds eye view of the hole, so i decided to scrap the idea.

The other header i made on the left was an okay idea but when i placed it on the website it didn't look like a header and it just didn't work with the overall style of the site, so i decided to come up with a few other ideas for chapter headers, and then i was able to create one i felt comfortable with.

Because in my logo for the website i used a ribbon in it i thought potentially i could create something like a ribbon as a chapter header, but using different colour so people could tell it was a separate thing from the logo, and below is what i ended up creating as an representation example of all the chapter headers.

It was simple and helped to frame the topic name pretty well, so i decided to go for it and see what it looked like on the website, and below is how it looked.

Personally i think it looks fine and in nice how there is spacing away from the logo and the actual content boxes so i feel like its got the room it needs, and it being centred brings the page together and i think works really well. If i decide to change the chapter header i will do so when i go back to college to get some feedback from other people and if i can think of a better idea, potentially i will change it, but to be honest i like it and don't really think it needs changing but i guess we'll see.

Creating a frame structure for chapter pages

Since i had done my section pages i decided to go back to my chapter pages and create a structure for it as well as starting to add the content in. The reason i wanted a new structure to my chapter pages is because i wanted the user to be able to tell the difference between a chapter page and a section page, as i wanted to make them look different.

I initially wanted a similar concept to my section pages with an individual container for each area of content as well as using a background colour to place the content in a box frame. Looking back at my ibook i realised that i used a lot of the odd looking boxes to frame and contain a lot of my content in, and it made me realise i could do something similar to my website.

(examples of my iBook where i used the boxes to contain my content in)

The way in which i was thinking of being able to achieve this idea was to use the frame structure from my section pages and change the colour to the box colour from my ibook and then replace the skyline top part and use a rugged scrappy look, similar to the box top from the ibook, and then use a bottom part as well and have it place under the container so it would look like the box from that i used in my ibook but just stretched with max width.

This is how it looks like on a couple of the chapter pages as i haven't officially added the content in yet, the text and video is just something i randomly used so i could have content in there for the time being so i could see what the container looked like.

From this style for all of the chapter pages, i will have multiple boxes in order to contain my information. I will most likely use two to three boxes per chapter page as i don't want to have too much content for more of the introduction to the chapter on a whole. 

Something i also i added to fit the theme of the rest of my section pages, is by adding an arrow with text, which i feel like is a cute touch and informs the user well about looking for more content and knowing where to go to get it.

Finishing section pages!

After spending a lot of time getting the structure sorted out and placing in all the content in, and making the overall presentation a layout looking nice, i've finally been able to get my section pages finished!

Getting these pages done did take some time and it was very time consuming to get the right structure for these pages, however once i sorted out all the structure for one of my section pages it was easy to do it for the rest of them.

Some pages within the sections had more content than others, and some had sliders and there were a few problems i encountered when placing the content in at times or getting the slider to work the way i wanted it to work and look.  Despite all of the section pages are done.

I will if i have time go back and add things to certain pages or remove things or change particular things about certain aspects of those pages, but for now i'm happy how they look and the fact that i've got them done, now its time to work on my chapter introduction pages!

Making things simpler

When putting some content on my pages there were instances where i was placing the content in and was adding text underneath a image for example but because i didn't have a lot of text content for particular bits of content i felt that using mainly 8 columns wouldn't work unless i either added more text content or got rid of the text content.


The page i'm referring to is the safety page within the sections on my safety chapter and when i was adding the supply images of 'what you need for an earthquake' i realised it wouldn't work by adding text as there was very little of it for each supply and because the information i had originally wanted to use was obvious on what it was or how to use one of the supplies i decided to make it easier on myself and make it simpler by just using the images and having a comment with an arrow above to point out that they are supplies that are needed incase of an earthquake.

Overall i think it makes the layout more comfortable and i feel added text would have ruined it and the titles underneath the image speak for themselves so its more obvious to the user what images they are and because using them or getting these supplies is general knowledge i felt that added text really wouldn't have been needed.




Also for another page of mine and in the same chapter i.e. 'common places' section page i was originally going to have a continent per column with the image at the side at the text on the other side but as i was doing this i realised i didn't have as much text content as i thought so i decided to simplify it by adding all the places on a four column grid to make the text fit with the size of the screen and images and i think it looks better this way.

Also when i was working on the 'safety' page, i was originally going to add before, during and after section but because i added a lot of text for that in my ibook i realised that on the website the content of it would make it look messy and overwhelming, so i decided only to add the '3 step rule' because it would make the layout more neater and overall not overwhelm the user with text which is what i wanted to avoid doing, so i could give the user a better experience when using my site.