TLDR; Browsers Lie To Us
What is worse - a sanctimonious ex-somethingorotherer or a zealous recent convert?
I guess it doesn’t really matter, I didn’t choose one role above t’other.
After my HTML Validation experience
I adopted the persona of “Pious Sanctimonious Boy” and went to work.
I ignored my WordPress and Blogger blogs for the moment because I have plausible deniability ready in the form of:
- “blame WordPress”
- “blame Blogger”
In an age of tools and frameworks it remains defiantly hand coded because I need a site where I can experiment and have total control. Unfortunately with “total control comes total responsibility”
And boy did I have errors!
I don’t think many were serious. But I wasn’t grading by seriousness, I was grading by “total amountness”.
I just wanted to get the number down.
And some of the errors related to my HTML Mythconceptions
See I grew up with HTML. And my site still has (or had) some code from FrontPage 98 or 97, I forget which.
I also learned HTML and hand coded parts as I moved away from FrontPage.
And I learned HTML from stuff in books and on the fledgling internet over dial up.
And it seems that some HTML I learned has dated - badly:
- apparently anchor tags with names to allow in page linking is no longer in fashion, and is now actively non-standard. One should now add an
id
to any element and use that as the link. Apparently such was always the case, but I learned it wrong. - I had a bad habit of occasionally leaving tags unclosed. Browsers were kind enough to hide my faults from me and ‘fix’ my code for me when rendering in the dev tools. (After all no-one uses ‘view page source’ anymore.
- Apparently in HTML5 some tags are not self-closing. I think I just assumed all tags were self closing. I’m going to blame that on a legacy of learning XML and XSLT.
- I forgot the ‘semantics’ of HTML and clearly some tags shouldn’t be nested within others.
- Somewhere down the line I forgot that CSS comments were only
/* */
and that//
was not part of the repertoire. Again browsers were kind enough not to draw attention to my lack of syntax protocol.
I previously wrote about how I used static analysis tools to improve my Java coding.
I’m now doing that for my CSS and HTML.
As a side-effect it means that:
- all the embedded youtube, slideshares and vimeo videos are all fully responsive and resize nicely rather than having fixed widths
- the site should also help screen-readers and accessibility.
- currently the validators I use report 0 errors and 0 warnings against my main site (mostly)
And where does Pious Sanctimonious Boy come in?
Oh yes, “Pious Sanctimonious Boy”. Him.
Well. After spending a day or so tidying up my site to comply with the standards implemented in the HTML validation Tool I was using I turned my attention to test consultancy sites on the internet.
I just wanted the validation that “It wasn’t just me” and “I wasn’t the worst”.
And lo! It wasn’t just me. And I wasn’t the worst.
I limited my unasked for, and potentially rude, questioning to test consultancy web sites. (I’m not going to name names). I pretty much ignored independent consultants like myself and concentrated on the ‘bigger’ consultancies that farm out people to clients. I expect to see them hold themselves to higher standards, after all who among them would turn down the sales opportunity, when bidding against a rival consultancy, of reducing the clients confidence in their rival by pointing out the flaws in their rival’s web site.
I was surprised that I found so few - not many - in fact only one - that clearly takes this seriously and routinely checks their website against accessibility and HTML standards. So a big shout out to Steve Green and his team at Test Partners for creating such an accessible and standard compliant site.
The rest of us can hang our heads in shame. Steve’s team set the bar pretty high by default.
The interesting things I noticed were:
- a lot of these errors are very quick to fix since they are often embedded in ‘standard templates’. So one change would fix throughout the site.
- a website doesn’t really demonstrate your technical skills but it does showcase part of your corporate culture (“we test everything… almost”)
- one site crashed my validation tools - wow, even my bad HTML came no-where close to that
Sanctimonious Conclusion
I have a habit of asking tool vendors how they use their tool to test their software. I rarely get a good answer.
Now I’m going to start asking how test consultancies test their own apps and web sites. And that’s where “Pious Sanctimonious Boy” comes in.
And of course the risk is that my piousness starts to slide. But should that happen, remember “I pretty much ignored independent consultants like myself”.
Sanctimonious Solution
Of course the ultimate solution is for me to provide “Pious Sanctimonious Boy” as a logo that test consultancies can add to their web site when they pay me mega dosh to run automated validation tools against their web sites; and when it reports no errors I issue a “Pious Sanctimonious Boy” Web Standard Certification and logo award.
Piously and Sanctimoniously Certified Standard
Alternative Solution and Conclusion
- Browsers lie to us.
- Browsers are too polite to point out our HTML design failings - except Android Browser which quite proudly proclaims that “Unfortunately, Internet has stopped”.
- Browsers pose a risk to our testing process with their rose tinted HTML interpretation and helpful “DOM tidying up” features.
- Even our most basic tool introduces risk.
We need to augment our process with tools which can validate our code and pull back the curtain automatically, while we get on with the process of testing.
PS.
- prior to writing this post I had no idea how hard “Sanctimonious” is to spell
- if anyone does want to pay me to run the free tools and £30 Total Validator Pro against their web site I’ll happily do so. And if you pay mega dosh, then I will enthusiastically issue a certificate and grant a license to use the logo. The certificate would be valid for different time periods depending on the level of ‘mega dosh’ supplied. Contact me directly for a custom solution.