Assessment 5 — Testing

And now for Assessment #5! It’s been a busy couple of days here.

Changes!/

I referenced this in my previous assessment post, but my website underwent a drastic change over the weekend, to become more functional and filled with content required by the client.
I covered this by including the following changelog of what exactly transpired these past 72 hours:

  • Overhauled general website presentation.
  • Social media integration has been altered significantly. 
    Instead of a static page to the left of the website, the site now has a “Pod Bay Doors on Social Media” button at the bottom of each page, which — when clicked — opens up a drop-down page containing the Twitter, Instagram, and Facebook feeds.
  • Added a touring widget from Bandsintown.com and linked it to the Pod Bay Doors’ Facebook account, where the Pod Bay Doors (or their manager) can update touring details at any given time.
  • Scrapped the “Merchandise” page and replaced it with the “Biographies” page.
  • Added a Javascript image carousel to the “Gallery” page, replacing the old static gallery.
  • Made the “Touring” page the website’s index (home) page.
  • Gave band members and the band itself little backstories in the “Biographies” page.

The final point regarded validation — however given that validation is the objective of this assessment, I’ll just go ahead and explain my validation process in-depth!

Validation/

With the main content of the website now complete — as documented in my previous Assessment post — the next work making sure everything is as valid as it can be!

Every page was validated using the w3schools validator website.

Index/Touring Page/

Running the Index/Touring page of the website through the validator revealed that it had three problems:

  • Some issues regarding the Google Maps plugin I’d used to show where the band would be touring to. 
    Given it is a useful tool for fans to track the band with, I couldn’t remove it, and annoyingly there wasn’t much I could do to fix it:
  • The other was regarding the glowing effect on my Social Media dropdown button, stating that the element cannot be used as a child of my other div tag that houses it:
  • The final error — also evidenced in the above screenshot -was regarding the Facebook page plugin, which was frustratingly beyond my control to fix. Nor could I remove the plugin, as that would be robbing both the band and their fans of vital interaction.

The second error was especially frustrating, as it was not possible to rectify without losing the glow for the social media dropdown button. 
I found it an essential effect to keep, as it prompts the user to click the button to see the social media feeds.

Otherwise, things ran smoothly for this page!

Biographies Page/

I ran into the exact same Facebook and social media button errors when validating the Biographies page:

Again, the Facebook errors aren’t something I can fix. And I can’t lose the glowing effect from that social media dropdown button.

Otherwise — no errors found.

Media Page/

For the Media page, I encountered a new (unique to this page) error — caused by the Soundcloud plugin:

And of course, the Facebook plugin/button errors continue:

I’m starting to see a pattern here…

Gallery Page/

Finally, we come to the gallery page.

Some familiar errors here — only the Facebook plugin and the other button errors were present:

That said, there were a few more button errors, as the buttons I used for the forward/back/start functions of the gallery all had glowing effects on them. Again, I didn’t want to remove these, as I feel to do so would take away from the website.

One thing left to do now — test the site in a few different browsers!

Gallery Page/

For this test, I will load each separate page of the website in a different browser. 
The browsers I will be using are Chrome, Edge, Opera, and Google Canary, which is Google’s experimental browser that contains the latest Chrome updates that are still considered in beta.

I will NOT be testing FireFox because it has issues with displaying the social media widgets for Facebook and Twitter. 
(My research into this issue is that it is widespread and not the fault the person developing the website, but rather with the browser’s compatibility with the plugins.)

First up, testing the Gallery page in Google Chrome!

Google Chrome/

The page being tested in Chrome is the Gallery page:

No real surprises here — Chrome displayed everything without any issues. 
The gallery itself also worked with no isses.

Edge/

The page being tested in Edge was the Biographies page.
Time for IE’s bigger sister to strut its stuff:

Everything displays correctly, save for some scaling issues with the social media feeds.
Instagram does not display the embedded image, sadly — this is not an issue in Chrome, as evidenced here with the same page:

All in all, Edge is actually not such a bad little browser!

Opera/

The page being tested in Opera is the index/touring page:

The main body of the site displays with absolutely no issues, and the little JavaScript clock I implemented also shows up quite quickly and nicely!

Again, the social media feeds have some issues with scaling, but they still remain functional.

Canary/

The page being tested in Canary is the final page left unchecked, the Media page:

Canary had no issues with Soundcloud or the general site layout. 
Curiously, it also suffered the same scaling issues for the social media feeds as the other browsers — whereas stock Chrome didn’t have any scaling issues.

Final Word/

So out of all the browsers, only standard Chrome could scale the social media widgets correctly. 
Mind you, I’ve developed this website mainly on a 1080p display, and after a bit more testing, I can confirm that this issue isn’t present on lower display resolutions.

It should also be said that an incredibly large amount of time was spent trying to get these social media feeds to display correctly — so much so that it held up not just the submission of this assessment, but also other assessments I had due for other subjects. 
However, at the end of the day, the widgets just seem to do their own thing, despite how hard you try to format them.

Another point to touch on is how the use of third party plugins can cause validation errors. Even when the plugins are made by the big companies such as Facebook and Twitter, sometimes errors seem to be unavoidable! 
That said, as a developer, you should always take care to check the compatibility of plugins and browsers before any heavy development takes place, to better avoid future issues.

Phew! That was a much longer post than I thought it’d be.

Anyways! Thanks for reading to the end, take care, and I’ll catch you in the next update :)

Like what you read? Give Sam Yomataris a round of applause.

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