W3 Validation

As the last task, I used the W3 Validator to track down any errors that my HTML may have and correct them. I was shocked to see how many errors appeared when I pasted in my code from one of my pages - around 160. I worked through them, realising that half of my issue was that I'd completely forgotten that duplicating ID's was not idea, and I needed to change them to classes. So, I've been working through this, although it's not going to be possible for me to complete it all before the deadline!

Using TextWranglers 'find all' feature I've been changing errors across multiple .html files at the same time, as a lot of my errors are on every page as my content pages are duplicates of each other with different content on each.

I have managed to get, for example, Chapter Four down to 21 errors. That sounds like a lot, but it started at around 80 odd and I'm finding that by fixing some of the errors it ruins the functionality of the website and breaks things (such as the navigation). I understand that 21 is rather high, but if I had more time I would go through, 'break' the site by changing all of the errors and then work to fix it without producing so many errors! I've gone through and changed a lot of the issues as I said, with TextWrangler's 'find all' feature.

Errors in chapter_four.html

The majority of the work to fix a lot of the errors revolved around A: changing all fixable ID's to Class's and B: ensuring all images had "alt" values, so that is what I have done.

Also, there seemed to be a lot of stray </div> tags that were not closing any <div> tags. Some people were having issues with removing these, as it seemed removing them would present more errors but keeping them was an error itself, but I did not have that issue. I have gone through and removed all of these. They are probably down to cutting out/pasting in various code from page to page, stray </div> tags are bound to be dotted all over the place after a while.

Crit and Evaulation

Today I crit my site. I didn't crit my completely finished site as I am still having issues with the responsiveness of the home page. The feedback was good, though.

The main response was that people really liked my graphic style and my chosen colours as they complimented each other well and overall made for a good experience on the site. I was also told that the site really matches my iBook, so I am happy with this as that was one of my main goals and also a requirement of this project.

I also received some useful feedback on how I could improve the site. The four main points I received were:

• The graphic in the main logo on the 480px + site has changed and they preferred the previous version.
• The alignment of the text on some pages was a bit dodgy.
• The sizing of the text on the home page could be looked at.
• Further implementation of navigation would be useful - e.g. navigation made available when a user is halfway down a page. 

I agree with all of these points. Point 1: The graphic in the 480px + site. I decided to change this as I was having issues on how I could lay out the navigation so that it wouldn't take up the majority of the page. As I decided to drop the main featured slideshow from the home page it meant I could reduce the height of the navigation bar and had to rearrange the navigation buttons. In order to ensure the navigation didn't take up too much of the page, I cut the top of the volcano out of the graphic and stuck with just the outline of the volcano, no eruption. This wasn't the best decision that I made as that graphic was somewhat of a main feature in my iBook and I was hoping to integrate it more-so in the website. If I were to have more time I would find a way to implement it back into either the navigation or have it have a more obvious presence in the site.

 

Points 2 & 3: Text alignment and size issues. These are things that I am making changes to now. I am going to simplify the text throughout the entire site and have the majority of it the same to keep a sense of consistency. At the moment the home page text is actually smaller than the text on the internal pages, so this I need to fix by increasing the size of that text. I agree with the comments on the text alignment as it was not an aspect I took great care over. I am going back and fixing this, although if I were to do this project again I would take more care over it. When I did the magazine project I realised how important the alignment of text was for the experience the user had when interacting with your project, but I have unfortunately let that slide in this project.

Point 4: Further implementation. This is something that I would ideally like to do today, but I am still having issues with the responsiveness of the home page. If I can fix this I will then move onto adding more navigation options. I like the idea of having a floating navigation bar in the top right hand corner, or even a navigation bar attached to the right hand side of the page constantly. 

Overall, I think I've been relatively successful with this project. Its not been my favourite, but not my worst. There have been times where I've been so frustrated (like with the Responsive issues) and times where I've genuinely felt proud of the work I've managed to produce. Its a love-hate relationship.

Throughout this project it was inevitable that I was going to hugely develop my skills in the HTML and CSS areas as we were required to hand-code a lot of the site (with the help of the Skeleton framework). So, I would agree that I have greatly developed my skills in this area. There have been times where I've been totally lost and times where I've surprised myself at how fast I can type out a long list of CSS and there be no problems with it, recalling Tags and immediately understanding what the issue was when I had a problem. I do think I could have branched out and learnt a bit more, though. I uses JavaScript and jQuery, but I would have liked to used them more in order to implement even more interactive elements on my site. The main feature of the iBook was that it was interactive, and I feel that my site does not provide as much as half the amount of interactivity or engagement that the iBook does. 

Time Management. My Time Management has been okay. For the most part I have stuck to my schedule and I will be able to hand in. I do not think I factored in a large enough time for me to fix problems, though, as because I have had so many issues with the Responsiveness the home page I am having to leave out an entire Chapter. This is not ideal and greatly reduces the content on the site, but I would rather spend the last few hours trying as hard as possible to fix problems and have a site that is successfully responsive - the main aim of the brief. 

Problems Making The Home Page Responsive.

Well, this has been fun. I am currently really struggling with making my home page responsive. The only versions that it displays as it should is the full size, 960px + version and the smallest mobile version.

Mobile 

960px + (desktop)

When I try to view the page at any point above 480px and below 960px, this is how it appears:

Not cool.

At the moment I am in the layout.css trying to figure out why these issues are happening. For some reason, telling the browser to hide e.g. the brown navigation ribbons between 480 and 960 makes them disappear above 960 too, even though I have specified that they be shown when the screen is about 960. 

What is making the task more complicated and stressful is that I want to switch out the images being displayed when the screen gets smaller. This means that when the screen is at 960 and above they are hidden and then anything below they should be shown (and the originals to be hidden). This has worked well on other pages but for some reason this just is not working on this page.

The only reasons I can think of why this isn't working is 1. I have a lot of margin-top margin-bottom settings which changes the position of an image on the page. This could be why (like above) the images are merging in together when the page gets smaller and the Skeleton Framework starts to stack and rearrange. The other issue could be that there's a major confusion in the layout.css for the media queries which tell the browser what to display and how to display it at each resolution. 

I will update when I (or if...) I have a solution.

Accessibility

I have gone through and added "alt" (alternative) tags to my images so that if they cannot be loaded or a description of them is required, it is possible. Below are three examples, but I have done this as much as possible across the site.

I've also taken other provisions to ensure that my site is accessible. Any text that I have on the site can be read clearly due to the high contrast between the text and the background (e.g. white against a deep green/deep red) and the colours in general on the site are high contrasting, but not too much so.

As you can see from this screen cap (of my favourite part of my site!) all of the colours contrast each other well and most importantly, the text is readable. It is 'real' text (it's not an image) which helps if a user requires the computer to read out the text due to an impairment.

Embedding A Slideshow

I have embedded a few slideshows into my website so I thought I would explain how I went about it. I used an already existing slideshow from a tutorial online, which used jQuery.

First off, I placed a file named 'responsiveslides.min.js' into the same folder as my HTML files. This is what enables the Javascript to work to make the site responsive.

The next piece of code was to be placed at the bottom of the <body> section of my HTML. This was unusual to me as I would have put a script in the <head> tags, but it was specifically instructed to place it at the bottom.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
<script>
  $(function() {
   $(".rslides").responsiveSlides({
  auto: true,             // Boolean: Animate automatically, true or false
  speed: 500,            // Integer: Speed of the transition, in milliseconds
  timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
  pager: false,           // Boolean: Show pager, true or false
  nav: false,             // Boolean: Show navigation, true or false
  random: false,          // Boolean: Randomize the order of the slides, true or false
  pause: false,           // Boolean: Pause on hover, true or false
  pauseControls: true,    // Boolean: Pause when hovering controls, true or false
  prevText: "",   // String: Text for the "previous" button
  nextText: "",       // String: Text for the "next" button
  maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
  navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
  manualControls: "",     // Selector: Declare custom pager navigation
  namespace: "rslides",   // String: Change the default namespace used
  before: function(){},   // Function: Before callback
  after: function(){}     // Function: After callback
});
  });
</script>

In this script I can go in and make changes on what I want to appear. In bold above you can see the 'nav' feature. If I want navigation buttons to appear on the Slideshow I can change it to "true" instead of "false" and they will appear.

In the area I want the slideshow to appear, I put this:

<div class="container">
<ul class="rslides">
  <li><img src="images/ash_1.jpg" alt=""></li>
  <li><img src="images/ash_2.jpg" alt=""></li>
  <li><img src="images/ash_3.jpg" alt=""></li>
<li><img src="images/ash_4.jpg" alt=""></li>
<li><img src="images/ash_5.jpg" alt=""></li>
<li><img src="images/ash_6.jpg" alt=""></li>
</ul>
</div>

This seems extremely simple, almost too simple to me. In bold above you can see "class="rslides". This relates to the next code, placed in the CSS, which tells the browser how to display that Class, as well as the script in the bottom of the body.

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  margin-right: auto;
  margin-left: auto;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
margin-right: auto;
  margin-left: auto;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
margin-right: auto;
  margin-left: auto;
  }

In order to make sure my slideshow displays properly I had to make sure all of my images were the same dimensions (also, to make them smaller sizes and so they load quicker, exported and compressed for the web), and that they were in the 'images' folder, reference in the src code in the HTML.