The Little Book of Website
Quality Control
The Little Book of Website Quality Control by Jens Oliver Meiert
Copyright © 2017 Jens Oliver Meiert. All rights reserved. Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://safaribooksonline.com). For more information, contact our corporate/institutional sales department: 800-998-9938 or
corporate@oreilly.com. Editor: Meg Foley
Production Editor: Shiny Kalapurakkel
Copyeditor: Octal Publishing, Inc.
Interior Designer: David Futato
Cover Designer: Karen Montgomery
Revision History for the First Edition 2016-09-20: First Release
The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. The Little Book of Website Quality Control, the cover image, and related trade dress are trademarks of O’Reilly Media, Inc.
While the publisher and the author have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the author disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is subject to open source licenses or the
intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights.
Foreword
Website quality is often an overlooked and underrated web development topic. I could go on about my personal philosophy, but what matters most is the person who shaped and guided my website quality ideology perhaps more than any other developer with whom I’ve ever worked: Jens Oliver Meiert. Over the years, I’ve followed Jens through his ideas, blog posts, and books. When I finally got the chance to work closer with him, I began to really understand his philosophy behind developing and maintaining websites alongside his relentless focus on quality. We spent lots of time debating the merits of what quality meant, championing its importance, and making it work in fast-paced environments in which quality is more commonly a convenience rather than a requirement.
He was first to begin promoting the positive impact of quality on
development, performance, collaboration, and overall maintenance in large web development teams. To operate at scale, the focus switched from
policing to advocating for quality while centering efforts around establishing value behind tools and automation. For Jens, quality became a benchmark of professionalism and symbol of craftsmanship that still holds true today. This little book is a glimpse into the world of website quality from the
perspective of a passionate developer who strives to educate other developers and improve websites. You will learn everything from topics related to
website quality, putting it in practice, and the tools to help with the process.
Acknowledgments
Quality, as this book aims to show, is such an important matter that it would be surprising if I, writing about the very subject, could not name the people to whom I’m indebted. Lars Röwekamp and Jens Schumann, executives of
Open Knowledge GmbH in Oldenburg, Germany — where I learned to improve my code — are the first to come to my mind. Yet, as an important goal and a sign of professionalism, the mindset of quality comes close to ideas like “if something’s worth doing, it’s worth doing well,” too.
This little book would not exist were it not for old role models and old sayings, as well as for all the people who have made it reality. For that, I want to thank very much my former colleague, manager, and good friend Kevin Khaw for the Foreword. Finally, I want to recognize the entire
Introduction
There’s always something professional about doing a thing superlatively well.
Colonel Pickering, in George Bernard Shaw’s Pygmalion
What is a good website? For us web professionals, this is a most important question. Building good websites is part of our professional ethics, stemming from a code of honor that asserts that we can be professionals only if our work is good.
But how do we know that our work — that our websites — are good? Many criteria and examinations come to mind, but there is actually an entire field dedicated to informing us: quality management.
Quality management, which can be broken down into quality planning, quality control, quality assurance, and quality improvement, comes with a host of methods to not just identify (control) and fix (improvement) defects, but to avoid them systematically (planning, assurance).
This little book, which is the third in a series of books that cover important components of modern web development (after web frameworks and coding standards), focuses mostly on the quality control piece, for if we can’t “see” what’s wrong, we won’t fix or plan to avoid what’s wrong. Still, it’s going to share advice on how to tie quality to our processes, for it is more useful to learn how to fish than to hope to be fed every day. The book will do all of this in a loose and relaxed manner, however, and not to the extent ISO standards would cover quality.
Finally, and although this should matter only in few instances, the book hinges more on websites rather than web apps. That distinction is usually relevant when it comes to standards and development best practices, but there are some differences in how one should go about quality checking of sites as opposed to apps. What follows will work slightly better and allow for more complete quality control of websites.
What Is Quality Control?
Wikipedia defines quality control (often, but rarely in this book, abbreviated as “QC”) as “a process by which entities review the quality of all factors involved in production.” ISO 9000, also through Wikipedia, is said to define quality control as “a part of quality management focused on fulfilling quality requirements.” Google, without offering attribution, understands quality control to be “a system of maintaining standards in manufactured products by testing a sample of the output against the specification.”
We want to use a definition that is stricter on the one end and more lenient on the other: “Website quality control entails the means to determine (a) whether they meet our expectations and (b) to what degree our websites meet
professional best practices.”
Why Is Quality Control
Important?
Quality control is — for that decisive reason — important, because without it we have no robust way of determining whether what we do and produce is any good.
Quality control, therefore, is a key differentiator between professional and amateur work. Consistent quality is the mark of the professional.
Quality control, finally, saves time and money and sometimes nerves, particularly in the long run.
The Great Website Quality
Control Rundown
When you think about the quality of websites, what comes to your mind? How would you test — and what would you test for? Take a moment to ponder this question.
We should readily recall some tools and tests known to us from our everyday work. Some of us might remember validators; some might think of linters; and for others, security suites pop into their minds.
What do we test for? Not only spec compliance as with validation, or code formatting with linters, we can — and should, as professionals — test for everything we can get our hands on. Going through what we can get our hands on and showing what tools we have at our disposal is the purpose of this section. For each area, in descending order of importance, we’ll go over why quality control matters and look at available tools and automation options.
The tools are mostly web-based; applications have been left out, and
Security
Security can be considered the most important thing to test for because
whatever it is we and our users are doing, if the security of it is compromised, we and our users are compromised and can be harmed in a number of ways, from losing data (and privacy) to losing the service itself, and possibly much more. We stand and fall with the security of the services that we offer.
Security is critical, but it’s also tricky in the light of website quality control. For one, websites — rather than apps — might or might not deal with any personal and sensitive information or even ask their users to provide such information. For another, security is not trivial to test and not necessarily to be evaluated all from the outside. This leads us to the situation in which, although security is so crucial, there’s not that much to add outside the context of dedicated information security.
Let’s go over some tools that are available to us (again primarily with a focus on web-based tools). The responsible website owner should — and will — employ additional, notably inner-organizational means to ensure that his services and the data those services gather are secure.
AES Encrypter
Bandwidth Speed Test
Blowfish Hash Generator
Cookie Editor (WebKit browser extension)
CSR Decoder
DNS Analysis
DNS Propagation Check
Download Time Calculator
FTP Server Test
HTTP Header Editor (Request Maker; WebKit browser extension)
HTTP Header Editor (Tamper Data; Gecko browser extension)
HTTP Header Test
HTTP Header Test (Advanced)
IP Address Trace
IP Determiner (DSLReports)
IP Determiner
IP Spam Check
Malware and Security Scanner
MD5 and SHA Hash Generator
MD5 Encrypter
MX Lookup
Network Intrusion Prevention and Analysis (Kismet; command-line tool)
Network Intrusion Prevention and Analysis (Snort; command-line tool)
Password Generator (Arantius.com)
Password Generator (GRC)
Password Generator (Packetizer)
Password Security Check
PGP Decrypter
PGP Encrypter
PGP Key Generator
Ping Tool
Ping Tool (Regional)
Reverse IP Lookup
Security Breach Victim Check
Security Analysis (OWASP Mantra; browser extension)
SHA-512 Hash Generator
SPDY Implementation Check
SQL Injection and Database Check (command-line tool)
SQL Injection Scanner (command-line tool)
SSL Certificate Check (DigiCert)
SSL Certificate Check (SSL Shopper)
SSL Client Check
SSL Scanner (command-line tool)
SSL Server Test
Traceroute Tool
Traceroute Tool (Visualized)
Virus Scanner
Wake-on-LAN Service
Web Application Security Analysis (Canoo; command-line tool)
Web Application Security Analysis (OWASP; server application)
Web Application Security Analysis (Skipfish; command-line tool)
Website Blockade Check for China
Website Blockade Check for England
Website Fingerprint Check
Accessibility
Per Wikipedia, accessibility “refers to the design of products, devices, services, or environments for people with disabilities”; “the concept of accessible design ensures both ‘direct access’ (i.e., unassisted) and ‘indirect access,’ meaning compatibility with a person’s assistive technology (for example, computer screen readers).” Accessibility is one of the most important ideas to understand, for the Web is all about accessibility — accessibility is, in fact, the Web’s biggest promise. Accessibility has often been linked to making data available to machines — like search engine bots — but it is, first and foremost, about making information available to people. Legislation exists in many countries — like Section 508 in the United States, BITV in Germany, or RGAA in France — that supports and presses for worldwide accessibility. The key standards, Web Content Accessibility
Guidelines (WCAG), published by the World Wide Web Consortium (W3C) have gone through two versions and are, though not perfect, robust. There are a good number of tools, as we shall see. And still, accessibility remains one of the industry’s stepchildren.
Independent of whether we would be held accountable legally, accessibility is one of the most important things that we should cater to on our sites.
Accessibility Analysis (Gecko browser extension)
Accessibility Check (AATT; Automated; command-line tool)
Accessibility Check (FAE)
Accessibility Check (WAEX)
Accessibility Check (WAVE 3.0)
Accessibility Developer Tools (WebKit browser extension)
Accessibility Linter
Accessibility Visualization (script)
ARIA Validator (WebKit browser extension)
Colorblind Web Page Filter
Color Contrast Analysis (Jonathan Snook)
Color Contrast Analysis (WCAG Contrast Checker; Gecko browser extension)
Color Contrast Analysis (WebAIM)
Color Deficit Emulation
Section 508 and WCAG 1.0 Check (Site Valet)
Section 508 and WCAG 2.0 Check (Cynthia Says)
Section 508, WCAG 2.0, and BITV 1.0 Check
WCAG 1.0 Check (SIDAR)
WCAG 1.0 Check (TAW)
WCAG 2.0 Check (BOIA)
Usability
Usability is one of the most critical areas to focus on when running a website, hence it deserves special mention here. Because it is not a technical concern, however, it’s only mentioned in passing. If you are interested in this and not already familiar with designing and keeping a usable website, you might want to check out some key resources for further information, like
Performance
For the longest time, Google has worked following the mantras, “every millisecond counts” and, though weaker, “fast is better than slow” . And for good reason! Speed is a key factor for a positive user experience — so
crucial, in fact, that it’s one of the determinants for customer satisfaction and conversion.
There are many studies that back performance up as important for quality websites, and Six Revisions (with Why Website Speed is Important), Impressive Webs (with The Importance of Page Speed), and
WebSiteOptimization.com (with Empirical Study of Web Site Speed on Search Engine Rankings) provide pointers for a good number of them.
Today, test tools abound for performance measuring. Here are some of them: Availability Check (CurrentlyDown.com)
Availability Check (Is It Down Right Now)
Availability Check (Regional; InternetSupervision.com)
Availability Check (Regional; Site24x7)
CSS Analysis
Load Time and Object Check
Load Time Check
Performance and Scalability Test (Pylot; command-line tool)
Performance and Scalability Test (Tsung; command-line tool)
Website Browser and Location Speed Test
Website Performance Analysis (GTmetrix)
Website Performance Analysis (Page Performance; WebKit browser extension)
Website Performance Analysis (PageSpeed)
Website Performance Analysis (Pingdom)
Website Performance Analysis (WebPagetest)
Website Performance Analysis (YSlow; browser extension)
Functionality
Another user-centered matter concerns site functionality and workflows: can we get from A to B? Fortunately, even though this is important to ensure, it’s easy to verify — so easy in fact, that most of the time functionality testing is “implied.”
How so? What have we just said? Essentially, that we’d know whether when building and extending our sites and their functionality, we can’t get to what we just built and extended. Whether we’d add a new registration page or post a new press release, we typically notice as part of the testing and launch process whether it actually made it live and can be found.
Thus, it’s advantageous to tell by other means whether everything’s where we expect it to be, and whether it works as we expect it to work. Here are some tools to do that:
Accessibility, HTML, and Link Check (WebKit and Gecko browser extension)
Browser Test Automation (Sahi; browser extension)
Browser Test Automation (Selenium; browser extension)
Browser Test Automation (Squish)
Browser Test Automation (Watir; browser extension)
“Cognitive Walkthrough for the Web” Tools
Image and Link Analysis
Link Analysis
Link Check (LinkTiger)
Link Check (W3C)
Responsiveness Test
UI Test Automation (Ghost Inspector; browser extension)
UI Test Automation (Screenster)
Universal Validator
Maintainability
The first, rather technical item to watch out and test for is maintainability. Maintainability? Yes, the degree of our ability to efficiently make changes to our design and code. This degree, this efficiency, makes for one of the most crucial aspects of web development — and at the same time it’s regularly among the most neglected ones.
What is maintainability, what does this ability and efficiency really refer to? That is a valid question in light of the fact that many long years of neglect have yielded little documentation and few best practices pertaining to maintainability and maintenance. “One cannot not maintain” — that is the “law” I’ve coined in despair. One cannot not maintain originates in the fact that anything we produce must at some point be dealt with again, whether by us or by others.
Semantics
Semantics was one of the hot topics of the last decade, when the field of web development went through its first stage of maturation and developed a better sense for how HTML markup should be written. This awareness was
motivated in part by a higher and closer regard for web standards — mostly in relation to the underlying specifications — and in part by stronger
emphasis on the need for websites to be more accessible.
Today, the hype has long moved on to web apps, and tolerance has stretched a bit again to “anything goes.” WAI-ARIA has grown and matured as both tool and excuse. Microdata and web components have, so far, also done their share to allow a mindset of “semantics is not important anymore” to flourish. Is this all justified? No. But the situation is complex. To make a bit more sense of it, we should break things apart.
For semantics, we should look at where it’s coming from and what people mean when they talk about it. Semantics in HTML refers to authority — and consensus-based meaning. The W3C or the WHATWG — the authorities — define in specifications what each element and attribute means. Vendors and the web development community buy into these definitions. Sometimes, as for consensus, they disagree (voiced in standard controversies) or they add their own solutions (as with microformats). ID and class names represent the most minimal form of consensus on meaning, sometimes just brought forth by a single developer.
For new technology and techniques, we find ourselves in a conflict. The standards community has given in to a form of arms race against itself. After years of slow progress, low output, and seeming indifference to the user and vendor community, suddenly those involved in standards want to
micromanage everything. This has led the specifications to grow in number and size, and we’ve still not been able to take inventory of everything we’re now capable of doing. With that growing complexity, we risk losing it all,
on the meaning of what documents and templates describe anymore.
Semantics will make it back to our agendas for the following reason: we can only get the most out of code and information within code, ensure best access to that code, and work best together on code if the code has meaning, or is used according to the meaning it had been assigned.
There are a number of semantics checks and generators for enriched markup available:
hCalendar Generator
hCard Generator
HTML Outline Extractor
Microformat Extractor and Transformer
Open Graph and Semantics Extractor
Schema Generator
Semantics Check (Gecko browser extension)
Semantics Extractor
Semantics Parser and Extractor
Structured Data Test (Google)
Structured Data Test (Yandex)
Twitter Card Test
Validation
Validation as a measurable priority had peaked, too, before falling from grace. But popularity does not correlate with validity (hah!), accuracy, or quality, and one can argue well how validation is a relevant factor for website quality. It is such an important factor for that reason that only validation ensures we’ve been coding according to the different specs — a condition that corresponds with professionalism, or at least professional ethics. Although this is almost all there is to say about validation, the web
development landscape begs to differ, most notably when it comes to HTML and CSS. HTML is more stable and used in more places than CSS. CSS is under heavier development and occasionally experimental, yet style sheets live in relatively few places (CSS being “orthogonal” to HTML makes for its relevance in maintainability). That means that validation for HTML is far more important than for CSS. Because HTML is stable, it is easier to
validate, and because it’s so prevalent — all over the place in templates and documents — it’s also much more critical to validate.
We are in the envious situation of having a great many, good-quality validators at our disposal:
Accessibility, HTML, and Link Check (WebKit and Gecko browser extension)
ARIA Validator (WebKit browser extension)
HTML Validator (WDG)
HTML 5 Validator
HTML, CSS, and Conformance Validator
Internationalization Check
JSON Validator
Markup Validator
P3P Validator
Rich Pin Validator
RDF Validator
robots.txt Syntax Check
RSS and Atom Feed Validator
SADiC Validator
SBML Validator
Sitemap Validator
SQL Validator
SVG Validator
Universal Validator
XHTML 1.0 Schema Validator
XML Schema Validator
Layout and Design Consistency
Normally filed under other categories, consistency-checking is also a key factor in website quality control. What is it normally filed under? Browser-testing. That is, as we’ve just noticed, a misnomer: we’re not testing
browsers, we’re testing the layout and design of our websites for consistency across browsers and devices.
Making this little differentiation makes clear what tools we can use: browser and device emulators, of which there are plenty. The testing landscape has changed significantly over the years, and although it’s become a big issue to test for the slew of devices, web-based tools that allow quick comparisons have matured to the extent that we have to install fewer user agents than we used to. (The normalization and unification of rendering engines has
contributed to improvements, too, considering that WebKit is now by far the most common engine.)
To test layout and design, we can use tools and services like the following: Android Emulators
Browser Screenshots (Windows, Mac OS, Android, iOS)
Browser Screenshots (Windows, Mac OS, Linux)
Browser Test Automation (Sahi; browser extension)
Browser Test Automation (Selenium; browser extension)
Browser Test Automation (Squish)
Browser Test Automation (Watir; browser extension)
Design Diff (script)
Edge Compatibility Test
Internet Explorer Viewer (URL2PNG)
iPhone Emulator
Layout Bug Test (script)
Lynx Viewer
Mobile Emulator
Opera Mini Emulator
User Agent Detector
Viewport Size Determiner
Website Design History (DomainTools)
Typography
Typography is not what the common website owner will connect to website quality — and, sadly, neither might every designer — but it is, of course, an important aspect of every website. Typography is all the more important, as the amount of content a website actually has increases — we remind
ourselves of Robert Bringhurst, who taught us that “typography exists to honor content.”
But why test? Obviously, for the reasons that typography matters — and so we’re not just running into William Bruce Cameron’s (and apparently not Albert Einstein’s) famous statement, “Not everything that counts can be counted, and not everything that can be counted counts.” Typography can be counted — the surprise of this section, perhaps — and typography does
count. Not many tools are available to test for good typography, but still there are some that make our typographic jobs easier:
Font Combinator
Font Comparison
Font Determiner (WhatFont; WebKit browser extension)
Font Determiner (WhatTheFont)
Font Fallback Determiner (bookmarklet)
Golden Ratio Typography Calculator
Type Diff
Type Live Test
Type Scale
Type Scale (Modular)
Code Quality
Venturing again into the realm that’s invisible to the users of our sites, code quality has many attributes, some of which we’ve already addressed. Here, code quality will touch on general overall checks, as well as on linting — that is, analyzing code for potential programmatic and stylistic errors (which we’ll focus on separately in the next section).
Linting comes out of computer programming, something we don’t file web development under, but linters are by now available for pretty much
anything, including CSS. Some general quality-related tools include the following:
Accessibility Linter
CMS Detector
CSS Linter
Google Webmaster Guidelines Check
HTML Compatibility Check for XHTML
JavaScript Linter (JSHint)
JavaScript Linter (JSLint)
Reputation and Safety Check
Trustworthiness Check
Website Analysis (Alexa)
Website Analysis (Nibbler)
Website Analysis (RankFlex)
Website Analysis (StatsCrop)
Website Analysis (UITest.com)
Website Grader
Website Review
Coding Standard Compliance
Last but not least and not to be missed: we want to and can measure the
conformity and consistency of our code. For that — and you might remember
The Little Book of HTML/CSS Coding Guidelines (or want to check it out) — we look at common coding practices, and, notably, our coding guidelines. The listed quality checks, now, simply look at compliance, comparing code strings against a predefined catalog of rules. Only lowercase element names in HTML? Only single quotes in CSS? No global variables in JavaScript, if the more experienced scripter fancies? No BOM in text files? This is done by website quality checks against code standards, such as the following:
Code Formatter (Code Beautifier)
Code Formatter (Pretty Printer)
CSS Formatter (CSS Portal)
CSS Formatter (Lonnie Best)
CSS Optimizer and Formatter (CSS Beautifier)
CSS Optimizer and Formatter (CSScomb)
HTML Formatter
HTML, CSS, and JS Formatter
JSON Formatter
After we have properly formatted our code and made it consistent, however, we might still want to make it production-ready by compressing and
minifying it. Our work files should be easy (to understand) for us and our production files should be easy (to parse and transfer) for others. For this there are additional tools.
HTML Compressor
HTML Compressor (html-minifier)
Quality Control in Practice
Training
Training is a first, very important step toward successfully implementing quality control practices. Training should be understood very generally here, for any professional training that teaches people how to produce better work will at the same time help quality. In that sense, training will not be
elaborated on here.
Mindset
The most important factor when it comes to practical quality is the mindset. The greatest quality initiative is not worth much if it’s not clear to the team and enterprise why quality matters, and how quality is beneficial for them. The key to a conducive mindset is communication; a potential trap is rewards.
Communication
Communication is the primary way to spread and instill a mindset of quality, with quality as the goal and guiding principle.
This communication should sporadically repeat, but doesn’t need to consist of overt reminders on why quality matters and how it benefits everybody. If we want to repeat the essence of both answers here, then: quality is important to deliver work that is good by professional standards and benefits everyone, because products of quality are easier and more pleasant to consume and work with.
Communication is, for that reason, important because we all benefit from being reminded of our priorities.
Based on this, communication can now range from bylines in regular
company and team communications, thanking everyone for the vigilance to produce good work, to dedicated emails emphasizing the goal and importance of quality.
Rewards
Rewards, then, are no key for a quality mindset. We should avoid rewards. Rewards might compel people to participate in quality-related events — see “Logistics” — but they don’t necessarily compel people to embrace quality (in fact, they rarely do). They seem to distract from, rather than point to the message.
Automation
Insist on automation. Insist — on automation. Of course, we’re inclined to say — once we’ve automated all quality-relevant tasks and processes, what’s there to be missed, how could we get anything wrong? But we haven’t
progressed quite yet to the point that we’re able to automate everything. Our reality is that not enough is being automated, and sensitizing for that is what this very practical recommendation aims at. We must automate as much as we can; we must insist on automation.
We have discussed many tools so far and are going to summarize them again (it follows a section listing all our tools) — some of those are very easy to implement and automate, but for others, per our now-defined goal to
Enforcement
In the context of coding guidelines, we’ve learned to differentiate between descriptive or positive guidelines and those that are prescriptive or normative (see The Little Book of HTML/CSS Coding Guidelines). The difference is mostly practical — when code quality is at a high level, we merely document (describe) what everyone’s already doing; when code quality is low, we tell everyone what to do (prescribe). However, as it pertains to much of what we’ve discussed so far, this requires some way of enforcement.
How do we enforce quality? This is still a difficult question; so difficult, in fact, that in practice we often see it dodged. Why? Because enforcement easily upsets people, and we don’t want to upset people, not even — or especially — when they report to us. But we’re on the right track here.
Enforcement happens top-down. Executives and managers are to be looked at to emphasize and live quality, to reward good quality, and to — in one way or another — discourage poor quality. How? By doing what we surprisingly forget frequently: measuring quality and tying related metrics to performance evaluations.
Two anecdotes illustrate that approach. There’s one tale of a manager who has, despite efforts of his team to up the ante and increase quality in his department, never endorsed, let alone supported or encouraged those team members’ efforts in team communications or goals. That quality initiative’s efforts, witnessed at one point at a major corporation, suffered a significant blowback.
At the same firm at another time, managers called out the importance of quality and used available data points, like performance scores as measured by Google’s PageSpeed tools, accessibility problems as measured by Sidar’s HERA, or the number of validation errors as measured by W3C’s Link
Logistics
In broad terms, our efforts around quality require logistics. These might consist of the following, listed briefly for inspiration:
Standards and guidelines documentation
No quality effort can succeed without standards and guidelines. These can be external, but wherever they can be found, they must still be documented.
Meta documentation
What our quality efforts entail and require must also be documented. That…
Internal websites or wikis
…is best done on some internal website or wiki. Here, we should gather everything we want, know, do, and plan.
Dedicated contacts
Quality stands and falls with people. At least one among them should serve as a primary contact, and that person must not just be responsible and accountable (and laudable), but also discoverable and available.
Mailing lists
To coordinate quality efforts, communicate new and updated
documentation, and so on, mailing lists are a crucial tool. There might be lists for quality-related teams to lists for the entire enterprise.
Events
Google has a practice to host “fix-its” or “fixlets,” events that let the company or departments clean up and improve their work and code base, but quality events can really range from a toast on quality at the daily scrum meeting to external conferences (with company
representation) talking about quality.
Tools
The following serves as an index of a range of web-based tools, browser extensions, command-line tools, scripts, and bookmarklets. It is not complete; it might lack some important tools; but many tools come with my
endorsement, and the promise to also serve others well.
(By the way, my UITest.com site is a hub for web-based testing tools,
generators, and anything else web-based that’s useful for web developers and designers. You can find many of the tools listed in this book and more there.)
Accessibility Analysis (Gecko browser extension) (https://mzl.la/2cqOkkH)
Accessibility Check (AATT; Automated; command-line tool) (https://github.com/paypal/AATT)
Accessibility Check (FAE) (http://fae20.cita.illinois.edu/)
Accessibility Check (WAEX) (http://www.it.uc3m.es/vlc/waex.html) Accessibility Check (WAVE 3.0) (http://wave.webaim.org/)
Accessibility Developer Tools (WebKit browser extension) (http://bit.ly/2cI92xl)
Accessibility, HTML, and Link Check (WebKit and Gecko browser extension) (https://www.totalvalidator.com/)
Accessibility Linter (http://accesslint.com/)
Accessibility Visualization (script) (https://github.com/Khan/tota11y) AES Encrypter (https://www.infoencrypt.com/)
ARIA Validator (WebKit browser extension) (http://bit.ly/2cqQccO) Availability Check (CurrentlyDown.com)
(http://www.currentlydown.com/)
Availability Check (Is It Down Right Now) (http://www.isitdownrightnow.com/)
Availability Check (Regional; InternetSupervision.com) (http://bit.ly/2cRSwiS)
Availability Check (Regional; Site24x7) (http://bit.ly/2caFmL3) Bandwidth Speed Test (http://www.bandwidthplace.com/)
Blowfish Hash Generator ( http://hash.online-convert.com/blowfish-generator)
Browser Screenshots (Windows, Mac OS, Android, iOS) (http://www.browserstack.com/screenshots)
Browser Screenshots (Windows, Mac OS, Linux) (http://browsershots.org/)
Browser Test Automation (Sahi; browser extension) (http://sahipro.com/docs/introduction/)
Browser Test Automation (Selenium; browser extension) (http://bit.ly/1JVDVIY)
Browser Test Automation (Squish) (https://www.froglogic.com/) Browser Test Automation (Watir; browser extension)
(https://watirwebdriver.com/)
CMS Detector (http://guess.scritch.org/)
Code Formatter (Pretty Printer) (http://www.prettyprinter.de/)
“Cognitive Walkthrough for the Web” Tools (http://bit.ly/2cBu5ED) Colorblind Web Page Filter (http://colorfilter.wickline.org/)
Color Contrast Analysis (Jonathan Snook) (http://bit.ly/2cmljIc) Color Contrast Analysis (WCAG Contrast Checker; Gecko browser extension) (https://mzl.la/2cmVY1A)
Color Contrast Analysis (WebAIM)
(http://webaim.org/resources/contrastchecker/) Color Deficit Emulation
(http://www.vischeck.com/vischeck/vischeckURL.php) Color Selector (http://bit.ly/2cGbe9P)
Cookie Editor (WebKit browser extension) (http://bit.ly/2ctdnGQ) CSR Decoder (https://www.sslshopper.com/csr-decoder.html) CSS Accessibility Analysis (http://bit.ly/2cWIADz)
CSS Analysis (http://cssstats.com/)
CSS Compressor (http://hell.meiert.org/aux/compress/css/gui/) CSS Formatter (CSS Portal) (http://bit.ly/2cl8H2K)
CSS Formatter (Lonnie Best) (http://bit.ly/2cKq91z) CSS Linter (http://csslint.net/)
CSS Validator (W3C) (http://jigsaw.w3.org/css-validator/)
CSS Validator (WDG) (http://www.htmlhelp.com/tools/csscheck/) DAML Validator (http://www.daml.org/validator/)
Design Responsiveness Test (http://responsivepx.com/) DNS Analysis (https://cloudmonitor.ca.com/en/dnstool.php) DNS Propagation Check (https://www.whatsmydns.net/)
Download Time Calculator (http://www.whytehouse.com/opener.html) Edge Compatibility Test (http://doesitworkonedge.com/)
Email Blacklist Check (http://mxtoolbox.com/blacklists.aspx) Font Combinator (http://font-combinator.com/)
Font Comparison (http://www.typetester.org/)
Font Determiner (WhatFont; WebKit browser extension) (http://bit.ly/2cUTmY6)
Font Determiner (WhatTheFont)
(http://www.myfonts.com/WhatTheFont/)
Font Fallback Determiner (bookmarklet) (http://ffffallback.com/) FTP Server Test (https://www.dotcom-tools.com/ftp-server-test.aspx) Golden Ratio Typography Calculator
(http://www.pearsonified.com/typography/)
Google Webmaster Guidelines Check (https://varvy.com/)
hCard Generator (http://microformats.org/code/hcard/creator) hCard Validator (http://hcard.geekhood.net/)
.htaccess Validator (http://bit.ly/2cqOs3D)
HTML Compatibility Check for XHTML (http://qa-dev.w3.org/appc/) HTML Compressor (http://htmlcompressor.com/compressor/)
HTML Compressor (html-minifier) (http://bit.ly/2cUUjQ8) HTML Formatter (http://bit.ly/2cpa6qj)
HTML, CSS, and Conformance Validator (http://validator.w3.org/unicorn/)
HTML, CSS, and JS Formatter (https://www.dirtymarkup.com/) HTML Outline Extractor (http://gsnedders.html5.org/outliner/) HTML Validator (W3C) (http://validator.w3.org/)
HTML Validator (WDG) (http://bit.ly/2cBBH9X) HTML 5 Validator (http://html5.validator.nu/)
HTTP Header Editor (Request Maker; WebKit browser extension) (http://bit.ly/2cWGNOH)
HTTP Header Editor (Tamper Data; Gecko browser extension) (https://mzl.la/2coxG7D)
HTTP Header Test (http://www.rexswain.com/httpview.html) HTTP Header Test (Advanced) (http://bit.ly/2ctczOY)
Internationalization Check (http://bit.ly/2ccmF9Q)
Internet Explorer Viewer (IE NetRenderer) (http://netrenderer.com/) Internet Explorer Viewer (URL2PNG) (https://www.url2png.com/) IP Address Trace (http://www.ip-tracker.org/)
IP Determiner (DSLReports) (https://www.dslreports.com/whois) IP Determiner (http://www.ipdatabase.com/)
IP Spam Check (http://www.spamhaus.org/lookup.lasso) iPhone Emulator (http://iphone4simulator.com/)
JavaScript Compressor (http://dean.edwards.name/packer/) JavaScript Linter (JSHint) (http://jshint.com/)
JavaScript Linter (JSLint) (http://www.jslint.com/) JSON Formatter (http://bit.ly/2cX1dXT)
JSON Validator (http://pro.jsonlint.com/)
Layout Bug Test (script) (http://bit.ly/2czWyeT)
Link Analysis (http://juicystudio.com/services/linktest.php) Link Check (LinkTiger) (http://www.linktiger.com/)
Lynx Viewer (http://www.delorie.com/web/lynxview.html) Malware and Security Scanner (http://sitecheck.sucuri.net/) Markup Validator (http://www.validome.org/)
MD5 and SHA Hash Generator (http://onlinemd5.com/)
MD5 Encrypter (http://www.md5online.org/md5-encrypt.html) Microformat Extractor and Transformer (http://microform.at/) Mobile Emulator (http://mtld.mobi/emulator.php)
Mobile-Friendliness Check (http://bit.ly/1TaiOL0) MX Lookup (http://mxtoolbox.com/)
Network Intrusion Prevention and Analysis (Kismet; command-line tool) (https://kismetwireless.net/)
Network Intrusion Prevention and Analysis (Snort; command-line tool) (https://www.snort.org/)
Open Graph and Semantics Extractor
(https://developers.facebook.com/tools/debug) Opera Mini Emulator (http://opr.as/2cKpahy) Password Generator (Arantius.com)
(http://tools.arantius.com/password)
Password Generator (GRC) (https://www.grc.com/passwords.htm)
Password Generator (Packetizer) (https://secure.packetizer.com/pwgen/) Password Security Check https://howsecureismypassword.net/
Performance and Scalability Test (Pylot; command-line tool) (http://www.pylot.org/)
Performance and Scalability Test (Tsung; command-line tool) (http://tsung.erlang-projects.org/)
PGP Decrypter (http://www.igolder.com/pgp/decryption/) PGP Encrypter (http://www.igolder.com/pgp/encryption/)
PGP Key Generator (http://www.igolder.com/pgp/generate-key/) Ping Tool (https://tools.pingdom.com/ping/)
Ping Tool (Regional) (http://bit.ly/2coze1f)
P3P Validator (http://www.w3.org/P3P/validator.html)
QA Style Sheet (bookmarklet) (https://github.com/j9t/qa-style-sheet) RDF Validator (http://www.w3.org/RDF/Validator/)
Reputation and Safety Check (https://www.mywot.com/) Responsiveness Test (http://www.viewlike.us/)
Reverse IP Lookup (http://mxtoolbox.com/ReverseLookup.aspx) Rich Pin Validator (http://bit.ly/2cBCh7x)
robots.txt Syntax Check (http://bit.ly/2cl6HYm)
RSS and Atom Feed Validator (http://validator.w3.org/feed/) SADiC Validator (http://bit.ly/2cUCpzP)
Section 508 Check (http://www.508checker.com/) Section 508 and WCAG 1.0 Check (Site Valet) (http://valet.webthing.com/access/url.html)
Section 508 and WCAG 2.0 Check (Cynthia Says) (http://www.cynthiasays.com/)
Section 508, WCAG 2.0, and BITV 1.0 Check (http://achecker.ca/checker/)
Security Breach Victim Check (https://haveibeenpwned.com/) Security Analysis (OWASP Mantra; browser extension)
(https://sourceforge.net/projects/getmantra/)
Semantics Check (Gecko browser extension) (https://mzl.la/2cjC31A) Semantics Extractor (http://bit.ly/2cp0MTp)
Semantics Parser and Extractor (http://buzzword.org.uk/swignition/try) SHA-512 Hash Generator (http://bit.ly/2cWHLKX)
Sitemap Validator (http://www.validome.org/google/validate) SPDY Implementation Check (http://spdycheck.org/)
SQL Injection and Database Check (command-line tool) (http://sqlmap.org/)
SSL Client Check (https://www.howsmyssl.com/) SSL Scanner (command-line tool)
(https://github.com/iSECPartners/sslyze)
SSL Server Test (https://www.ssllabs.com/ssltest/)
Traceroute Tool (https://cloudmonitor.ca.com/en/traceroute.php) Structured Data Test (Google) ( https://search.google.com/structured-data/testing-tool)
Structured Data Test (Yandex)
(https://webmaster.yandex.com/microtest.xml) SVG Validator (http://bit.ly/2ctwMr0)
Traceroute Tool (Visualized) (http://traceroute.monitis.com/) Trustworthiness Check (http://www.scamadviser.com/)
Twitter Card Test (https://cards-dev.twitter.com/validator) Type Diff (https://tiff.herokuapp.com/)
Type Live Test (http://typewonder.com/) Type Scale (http://type-scale.com/)
Type Scale (Modular) (http://www.modularscale.com/) UI Test Automation (Ghost Inspector; browser extension) (https://ghostinspector.com/)
UI Test Automation (Screenster) (http://screenster.io/) Universal Validator (http://watson.addy.com/)
User Identity Generator (http://bit.ly/2c84dAz) Viewport Size Determiner (http://bit.ly/2cScuWp) Virus Scanner (http://www.virustotal.com/)
Wake-on-LAN Service (http://www.dslreports.com/wakeup) WCAG 1.0 Check (SIDAR) (http://www.sidar.org/hera/) WCAG 1.0 Check (TAW) (http://www.tawdis.net/)
WCAG 2.0 Check (BOIA) (http://www.boia.org/)
WCAG 2.0 Check (Evaluera) (http://www.evaluera.co.uk/)
Web Application Security Analysis (Canoo; command-line tool) (http://bit.ly/2cT9wFm)
Web Application Security Analysis (OWASP; server application) (https://sourceforge.net/projects/owasp/)
Web Application Security Analysis (Skipfish; command-line tool) (https://github.com/spinkham/skipfish)
Web App Test Automation (command-line tool) (https://github.com/svenfuchs/steam)
Web Font Generator (http://bit.ly/2cWYrlz)
Website Analysis (Alexa) (http://www.alexa.com/)
Website Analysis (Nibbler) (http://nibbler.silktide.com/) Website Analysis (RankFlex) (http://www.rankflex.com/en/)
Website Analysis (UITest.com) (http://uitest.com/en/check/)
Website Blockade Check for China (http://www.blockedinchina.net/) Website Blockade Check for England (https://www.blocked.org.uk/) Website Browser and Location Speed Test (http://bit.ly/2cGeYrO) Design Diff (script) (https://percy.io/)
Website Design History (DomainTools) (http://bit.ly/2cjC0mD) Website Design History (Screenshots.com)
(https://www.screenshots.com/)
Website Fingerprint Check (https://www.grc.com/fingerprints.htm) Website Grader (Website Grader)
Website Monitoring Service (http://www.montastic.com/)
Website Performance Analysis (GTmetrix) (https://gtmetrix.com/) Website Performance Analysis (IISpeed)
(https://www.iispeed.com/pagespeed/insights)
Website Performance Analysis (Page Performance; WebKit browser extension) http://bit.ly/2cqOoRk)
Website Performance Analysis (PageSpeed) (http://bit.ly/2coEeD8) Website Performance Analysis (Pingdom)
(https://tools.pingdom.com/fpt/)
Website Performance Analysis (WebPagetest) (http://www.webpagetest.org/)
Website Review (http://www.reviewmyweb.com/) Website Technology Analysis (http://builtwith.com/)
Website Timer (http://www.octagate.com/service/SiteTimer/) XHTML 1.0 Schema Validator (http://schneegans.de/sv/) XML Schema Validator (http://bit.ly/2ctvqJZ)
XML Validator (http://www.xmlvalidation.com/)
Summary
This was a brief treatise on the subject of website quality control. What have we learned?
Quality management consists of quality planning, quality control, quality assurance, and quality improvement, and it comes with a number of methods to identify (control), fix (improvement), and avoid defects (planning,
assurance).
Website quality control entails the means to determine (a) whether websites meet our own expectations and (b) to what degree our websites meet
professional best practices.
Quality control is important because otherwise we would have no way of knowing whether what we do and produce is any good. Quality control is professional; quality control saves time and money and sometimes nerves. Quality control entails and must include a great number of tests, covering security, accessibility, usability, performance, functionality, maintainability, semantics, validation, layout and design consistency, typography, (general) code quality, and coding standard compliance.
In practice, quality control requires training, depends on our mindsets, stands and falls with automation, and needs enforcement.
About the Author
Foreword
Acknowledgments
The Little Book of Website Quality Control Introduction
What Is Quality Control?
Why Is Quality Control Important?
The Great Website Quality Control Rundown Security
Layout and Design Consistency
Typography
Code Quality
Coding Standard Compliance
Mindset
Automation
Enforcement
Logistics
Tools
