Validity and Accessibility of my Website

Validation

As the website comes to a finish I needed to ensure that the website was validated by w3 so it would work correctly if I did publish it.

When i first went to validate my Index.html page it had 55 errors and 2 warnings, i was told that the warnings were nothing to worry about but i had to fix the errors in my code. Fortunately the errors in my code were nothing major that could potentially break my website. A lot of the errors were minor issues such as "Include Alt text for your img" which i needed to do for all of them, as well as closing tags that i had left open which all of them were </a> tags so again these were nothing major.

Accessibility

For our Websites as well as testing if they were Validated, we also had to check if they were accessible to other users that need certain requirements to view websites.

On w3 they had a general list that websites need to be able to pass the accessibility test.

Looking at my website i know that it has passed the accessibility test. It does have a page title, alt text for images, headings etc. The colours are strong and opposite to each other so anyone that requires visual aid should not have a problem viewing my website and hopefully anyone with any disability that requires certain needs to be able to view my website.

Creating a slideshow

For my website i added an image gallery of the list of animals i talk about. Adding an image gallery was quite complicated especially trying to find a helpful tutorial that was responsive, simple and didn't require me to enter my debit card details to watch the full video!

Luckily i found a website called GitHub which is an open source website where people will share their codes for other viewers to use and help improve on. For me this was very handy as I did not know how jQuery works so i needed to find other resources that showed me how to do it. The slideshow i found was a full screen responsive slideshow with buttons to let the user change image manually rather than a automatic transition between slides. On my previous website layout i did use a slideshow for my home page, however it was a free download and the images had a watermark over the top of them when i create the slider, i didn't think this looked professional so i decided to look for a different slideshow code where there wasn't a watermark.

As you can see my slider is a full screen and is very simply styled with just two buttons and the images. I think this is the best style as it has everything essential you need for a slideshow, no fancy over the top animations between images or borders.

Again for the Mobile device version, the slideshow is 100% width across the screen so it fits the viewer window. The image quality does not decrease and i think that the slideshow is still accessible from a mobile view as the buttons are still a size where you would be able to tap on the arrows to view the slideshow.

Why is my website all on one page?

In  this post i thought i would talk about my decision of making my website on a single HTML page instead of spread across different pages.

When researching different websites for inspiration a lot of them were shown on a single page and their content wasn't spread across many different pages. At first i thought it was a unique take on website design. I know for sure that I wouldn't want to create a website that takes a long time to scroll from the top to the bottom but it still needed a decent amount of content. However with making it all on one single page i think it saves a lot of confusion for trying to find specific content that could potentially be on another page that's difficult to locate.

A .GIF showing the navigation of my website.

So for the navigation instead of linking to another page I use anchor points. Anchor points are when you can link to other parts on the same page. For example when a website uses a 'back to top' button they use an anchor to link to the top of the page when the user clicks on the button. Essentially my website does the same for the entire website navigation.

Re-Design of Website

So when i started my website as i slowly started to build it i wasn't sure in what direction it was going. I was building upon new ideas that was just coming to mind at the time. There was no plan or structure to it and eventually i wasn't happy with the way it looked. It looked too cluttered and unprofessional, the colour schemes were off and it didn't look visually pleasing at all. So i decided to go back to my sketch book and draw up some new ideas with a new set of ideas. I soon realised that a lot of websites have one thing in common: simplicity. When looking at some websites that had won awards for their responsiveness, it was all about the styling and how simple it was. Some of them just simply used images with very little text on them. I think these websites worked the best as you didn't have to take in a lot of information all at once it was structured very well and had clearly been thought out how to make it interesting without having too much for the user to look at.

My new website home page

This is a screenshot of the home page of my new website. The design i went for was a full screen effect where images would take up the whole screen. This is a common trait amongst responsive design website and i personally think it looks professional and less boring. My home page has a .gif image I found of a cinemagraph of a humpback whale where the reflection of the ocean moves on its back. I think that it is simple concept but it works out really well as it adds some more visual styling to the homepage rather than just a plain image.

So for each section i added a banner of an image and the title. I thought it would be good to add a button that takes you back a section as it saves a lot of scrolling especially when viewing my site on a mobile device. I also added a parallax scrolling effect when you scroll past each banner, it adds a 3D effect which i think adds to the look and feel of it.

Here is my coding to achieve the background parallax effect. It was as simple as making the background fixed. From there the background would remain in a fixed position and the text positioned around it would move, this would make it look 3D.

Another part of my website i changed was the Navigation. My old navigation was still responsive however the icons and the styling of it looked too simple and boring, as i had downloaded it instead of making it myself. For this new navigation bar i followed a simple Youtube tutorial on how to make it responsive and how to create a button for when it goes down to a mobile size.

This is what my navigation looks like on the desktop screen. I used a simple sans serif font and changed the opacity of the background to 0.5. My original idea was to make the nav bar fixed and move with the screen but I later found out that a lot of websites don't really use a fixed nav bar.

These are some screenshots of my website when it's at a mobile size. As you can see the navigation shrinks down and hides the menu options and only the 3 line icon appears. This icon is used on most websites for mobile devices so i thought it would be good to use it for mine as it is recognised easily. When you click on the button the navigation becomes a drop down menu. When the menu drops down the H1 title of 'Oceans' also moves down with it. At first it did this on it's own but now i think it is better that it does it like that rather than the nav bar going over the top of it and having the two elements clashing with each other. Again i made the nav bar for mobile have a lower opacity as it goes well with the background image and makes it more visible so you don't lose half the image because of the nav bar.