Week 17 — Testing — in every sense

I found testing both more useful and more annoying (more errors to see) than when we did it early on in the project. Results are as follows:

Testing results from W3C validators

HTML TESTING

index.html

Home: all good.

learn.html

Learn: 1 error:

· in the <iframe> element containing the Google map marking the locations of CP photo excursions

Action taken:

  • tested option of removing the % character — this reads the 60 as 60px and removes the responsiveness of the map
  • no corrective action taken.
our_work.html

Our_work: 6 errors:

All the same error on different code lines. Example left - line 122.

our_work.html — Brackets

Action taken:

  • validator does not approve of leaving the attribute src blank
  • tried (at Kyle’s suggestion — thank you Kyle) putting the # character in the “ “
  • tested to check impact on page — none
  • this worked — changes made and page revalidated — 0 errors:
our_work.html — no errors
booking.html — errors

Booking: 7 errors.

Action taken:

  • removed redundant form tags on lines 47 and 134
  • added spaces on lines 67, 74, 81, 88.
  • removed the white space in the td element on line 110 and made the same change in the JavaScript file.
redundant <form> tags
Example — spaces added in 4 lines
white space removed from <td> element
  • tested to check impact on page — all good
  • page revalidated with 0 errors:
booking.html — no errors

CSS TESTING

Style: 1 error — great catch.

Action:

  • I accidentally left this 150 in when I was testing table widths. My intention was to work out the best %
  • changed to width: 100%;
  • tested page — all good
  • reran validation — no errors (except the warnings related to Google fonts):
mystyle.css — no errors

BROWSER TESTING

Sadly I can’t use Browsershots (http://browsershots.org) because the webpages are not published yet. So here goes the manual way - examples of resolution on each browser + the mobile view as reflected in each browser’s developer tools:

Chrome

booking on widescreen
first rendering on mobile
fixed up rendering on mobile

Big but not unexpected problem with my javascript calculation table’s ability to be responsive. Isn’t that why tables fell into disrepute?

I used {display:none;} and 2 separate <div> class tags to create 2 different displays — 1 for wide screen and 1 for mobile.

Working on this I found I liked Firefox’s developer tools better than Chrome tools.

Safari

home page on widescreen
home page on mobile

Firefox

our work page on widescreen
our work on mobile

Reflection

This was a very valuable exercise (for a Mac person) as I got to explore all the tools on the different browsers and particularly Safari. This means I have now downloaded and started to use Xcode … good fun for the future.

NOTE:

My Instagram embed on the HOME page is not working as I have not been able to solve the Instagram Client ID problem since Marcus’s ID stopped working.

OTHERWISE:

All pages look good at various resolutions.

Like what you read? Give Rosa Walden a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.