Staff/Student Liaison Committee

Testing

Optimisation

The largest page to load is the home page as it has a high resolution JPG of the diamond. The load time for the whole page was 63ms which is fast enough and not annoying to use.

Debugging

I used this validator for HTML: w3 validator
The only error it showed was that the diamond image on the home page did not have an alt tag. I forgot to add this during development, so I added it now. So the only change before and after was the addition of the alt tag.

For CSS, I used this validator: w3 validator
This checker showed no errors in my CSS, so I made no changes to the site.

Browser Testing

Throughout development, to achieve different pixel widths and responsive design, I have used Firefox Developer Edition's Responsive Design Mode and set the viewport to different widths.

mobile width screenshot narrow width screenshot normal width screenshot

I also tested the site on chrome which showed the same results as firefox

Finally, I tested the site on my phone using firefox

phone firefox screenshot

For all of these different browsers and resolutions, there were no apparent issues in displaying the site.

Accessibility

I used the WAVE tool on the site, and it generated this output

accessibility report screenshot

The alert here was that on the home page, I used a bold <p> element for the "Welcome to SSLCom" text. This is bad as a screen reader would not know this is a heading. To fix this, I replaced it for a <h3> element.