IT training the little book of website quality control khotailieu

The Little Book
of Website
Quality Control

Jens Oliver Meiert

Foreword by Kevin Khaw




The Little Book of Website
Quality Control

Jens Oliver Meiert

Beijing

Boston Farnham Sebastopol

Tokyo


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 (). For

more information, contact our corporate/institutional sales department:
800-998-9938 or

Editor: Meg Foley
Production Editor: Shiny Kalapurakkel
Copyeditor: Octal Publishing, Inc.
October 2016:

Interior Designer: David Futato
Cover Designer: Karen Montgomery

First Edition

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 limi‐
tation 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 responsi‐
bility to ensure that your use thereof complies with such licenses and/or rights.

978-1-491-96633-4
[LSI]


Table of Contents

Foreword. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii
The Little Book of Website Quality Control. . . . . . . . . . . . . . . . . . . . . . . . . . 1
Introduction

1

What Is Quality Control?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Why Is Quality Control Important?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
The Great Website Quality Control Rundown. . . . . . . . . . . . . . . . . . . . . . . . 7
Quality Control in Practice. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Tools. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

v



Foreword

Website quality is often an overlooked and underrated web develop‐
ment topic. I could go on about my personal philosophy, but what
matters most is the person who shaped and guided my website qual‐
ity 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, cham‐
pioning its importance, and making it work in fast-paced environ‐
ments 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.
— Kevin Khaw

vii


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 profes‐
sionalism, the mindset of quality comes close to ideas like “if some‐
thing’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 recog‐
nize the entire O’Reilly team for their swift, competent, and kind
help. When this book turns out well, it will have been because of
them. Thank you all.

viii

|

Foreword


The Little Book of Website
Quality Control

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 professio‐
nal 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 plan‐
ning, 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

1


loose and relaxed manner, however, and not to the extent ISO stand‐
ards would cover quality.
Finally, and although this should matter only in few instances, the
book hinges more on websites rather than web apps. That distinc‐
tion 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.
This is a little book, then, because it’s short. Let’s leave the intro

behind.

2

|

The Little Book of Website Quality Control


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 qual‐
ity of all factors involved in production.” ISO 9000, also through
Wikipedia, is said to define quality control as “a part of quality man‐
agement 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 sam‐
ple 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.”
“Means,” then, will refer largely to infrastructure—that is, tools.
Also, as stated a moment ago, we’ll look at some processes and
methods useful to improve, not just measure, the quality of our
work.

3

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 professio‐
nal and amateur work. Consistent quality is the mark of the profes‐
sional.
Quality control, finally, saves time and money and sometimes
nerves, particularly in the long run.
But what are our options to control the quality of our websites?
We’ll look at that now in more detail.

5



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 dis‐
posal 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
exceptions noted. The idea was not to shoulder the probably impos‐
sible task of listing and evaluating all tools, but to give the interested
reader a starting point to evaluate production sites instantly. (Note
that despite all diligence exercised in retrieving and evaluating these
tools, neither the author nor O’Reilly Media assumes responsibility
for the usefulness, reliability, or accuracy of the tools listed.)

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

7


is compromised, we and our users are compromised and can be
harmed in a number of ways, from losing data (and privacy) to los‐
ing 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 infor‐
mation 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
• Email Blacklist Check
• FTP Server Test
• HTTP Header Editor (Request Maker; WebKit browser exten‐
sion)
• HTTP Header Editor (Tamper Data; Gecko browser extension)
• HTTP Header Test
• HTTP Header Test (Advanced)
• IP Address Trace
• IP Determiner (DSLReports)

8

|

The Great Website Quality Control Rundown

• IP Determiner
• IP Spam Check
• Malware and Security Scanner
• MD5 and SHA Hash Generator
• MD5 Encrypter
• MX Lookup
• Network Intrusion
command-line tool)

Prevention

and

Analysis

(Kismet;

• Network Intrusion Prevention and Analysis (Snort; commandline tool)
• Password Generator (Arantius.com)
• Password Generator (GRC)
• Password Generator (Packetizer)
• Password Security Check
• Password Security Check (GRC)
• 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
The Great Website Quality Control Rundown

|

9


• Traceroute Tool
• Traceroute Tool (Visualized)
• User Identity Generator
• 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
• Website Monitoring Service

Accessibility
Per Wikipedia, accessibility “refers to the design of products, devi‐
ces, services, or environments for people with disabilities”; “the con‐
cept 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 step‐
children.

10

| The Great Website Quality Control Rundown


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, HTML, and Link Check (WebKit and Gecko
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
• Color Selector
• CSS Accessibility Analysis
• Design Responsiveness Test
• Mobile-Friendliness Check
• Section 508 Check
• 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)

The Great Website Quality Control Rundown

|

11


• WCAG 2.0 Check (Evaluera)

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 Usability.gov, Nielsen Nor‐
man Group, or UXmatters.

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
12

|

The Great Website Quality Control Rundown


• Website Performance Analysis (GTmetrix)
• Website Performance Analysis (IISpeed)
• 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)
• Website Timer

Functionality

Another user-centered matter concerns site functionality and work‐
flows: 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 functional‐
ity, 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

The Great Website Quality Control Rundown

|

13

• Link Check (LinkTiger)
• Link Check (Site Valet)
• Link Check (W3C)
• Responsiveness Test
• UI Test Automation (Ghost Inspector; browser extension)
• UI Test Automation (Screenster)
• Universal Validator
• Web App Test Automation (command-line tool)

Maintainability
The first, rather technical item to watch out and test for is maintain‐
ability. 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 prac‐
tices 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.
(As for tools, only sadness seems to be available as of yet.)
• QA Style Sheet (bookmarklet)

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.

14

|

The Great Website Quality Control Rundown


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 ele‐
ment and attribute means. Vendors and the web development com‐
munity 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, http://
bit.ly/2cUCbZB, or so I feel. But with respect to semantics, we’re
right at the seam, and things have become loose there. No one focu‐
ses any longer 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
The Great Website Quality Control Rundown

|

15


• 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
(Some accessibility and validation tools cover aspects of semantics,
too; to avoid repetition and not distort the view on the “purely
semantic” testing options, these have not been duplicated here.)

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 rele‐
vant 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 professional‐
ism, 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:

16

|

The Great Website Quality Control Rundown