
U.S. Web Design Standards 1.0 - molecule
https://standards.usa.gov/whats-new/releases/#version-1-0-0
======
neves
Great! Even if you disagree, just the existence of a Gov standard will:

1) Create a minimal common language for all sites that the citizens are forced
to use. Now we can all can use these patterns in our sites knowing that more
users will know them. Remember that software isn't intuitive, but familiar:
[http://www.asktog.com/papers/raskinintuit.html](http://www.asktog.com/papers/raskinintuit.html)

2) Force software developers for public services to put up a minimal decent
interface, instead of just a list of features.

The best page is their Design Principles: [https://standards.usa.gov/design-
principles/](https://standards.usa.gov/design-principles/)

~~~
neves
It is even better. They also have code guidelines. Easing the choosing of
technologies (open source!) and configuration.

Less opportunities for that crazy developer who wants to implement your
costumer facing site in Common Lisp.

~~~
ethbro
_> Less opportunities for that crazy developer who wants to implement your
costumer facing site in Common Lisp._

Somewhere, an LM-2 who has been faithfully serving requests since 1981 just
cried a single, perfectly simulated electronic tear.

~~~
mirekrusin
Surely this very system (HN) shed a tear somewhere between brackets as well.

------
algesten
I'm really surprised all the typography options require downloadable fonts
(Source Sans Pro and/or Merriweather).

I'm on a 1mbit throttled connection right now, and it's really noticeable,
even on these pages, the font loading takes a while and suddenly the whole
page jumps around and re-renders.

Though apart from that It's a great guideline.

Really glad they put so many color choices in there and taking care of showing
how to combine typography with color. Many guidelines I've seen have two
accent colors and when you come to implementing the site, you straight away
must deviate from the guideline and invent new things.

~~~
dangero
It does suck especially if agencies rehost the fonts and you end up
downloading the same ones over and over. Hashed font caching solves this
problem pretty well and that seems like the answer instead of forcing everyone
to use a common set of fonts.

~~~
algesten
Maybe there could be room for innovation here? Signed font sets with known
hashes (maybe piggyback on HTTP ETag?), so over time your browser has a cache
of "well known fonts".

Things like Source Sans Pro are not unusual.

~~~
mschuster91
Why not modify the CSS syntax? For example, what now is

    
    
        src: url("path/my.otf") format("opentype");
    

can become

    
    
        src: url("path/my.otf") format("opentype");
        src: url-hash("path/my.otf", "md5:86fb269d190d2c85f6e0468ceca42a20") format("opentype");
    

This way, due to the double declaration, older browsers can opt to download
the file as usual while a modern browser detects the hash and can look up the
file from its cache. Note I chose md5 here as an example, it may very well be
possible to use any hashing scheme here.

~~~
dchest
Obligatory: [https://hillbrad.github.io/sri-addressable-caching/sri-
addre...](https://hillbrad.github.io/sri-addressable-caching/sri-addressable-
caching.html)

(List of problems you need to solve to introduce hash-addressable caching to
Web)

~~~
angry-hacker
What if major operating systems would include the popular fonts on Google
library with update(s)?

~~~
dchest
Then you can use them:

    
    
       src: local('Font Name'),

~~~
mschuster91
Please not. People e.g. download questionable fonts from the net, which e.g.
have been stripped of everything non-alphanumeric, and then complain to you
"your website looks bad", or they have official, but fossilized versions of
fonts... I always strip local-sources when embedding webfonts for this reason.

------
jimbauer_12
Been using this on a govt. site Ive been redesigning for 2 years and could be
doing so for another year or more.

We've went from one govt. design standard to another and I'm not sure if the
site will ever get redesigned or finished as it has to get signed off by a 100
govt. VP types. I'm burnt out by the bureaucracy and they need someone to get
this thing approved vs. what do you think and what do you think and oh what do
you think ... each person having a different opinion and nothing getting done
but revise it again. What version are we on now .. oh number 599.

Keeps me gainfully employed thankfully, but redesigning a website should not
take 3 years or more.

------
dangero
This is great at this point because it's short and simple, but I could imagine
this becoming terrifying in a few years if it does not remain in good hands.
The natural thing to do is point out what could be added and pretty soon it
could become a massive burden to make sure you're compliant with the
standards. Long term I suspect this could increase the weight (cost and time
of delivery) of government software projects. If only we could have some
predefined limit set of how long and complex it can become. My libertarian
side is coming out here, but the government is really good at adding cool
things, not so good at taking them away, decreasing them, or even maintaining
them.

~~~
matt4077
I really wish libertarians would – from time to time - point at actually
unambiguously government overreach. All I ever see is "seat belts are great,
but making them mandatory is a nanny-state gone wild, and soon you won't be
allowed to leave the house".

I think the myth of regulatory strangulation is just some fantasy of people
who see a stack of paper more than an inch thick and for their lives cannot
imagine why it would require so many words to make air travel (etc.) safe.

~~~
tyre
There is a fantastic overview of this by Matt Levine at Bloomberg.[1] (The
following is all quoted text):

I am working on a tentative theory of regulation. It goes like this:

1) There are two kinds of regulations: custom regulations and bulk
regulations.

2) A custom regulation is designed to accomplish a particular goal. You want
people to do something, so you write a rule mandating that they do it and
punishing them if they don't. For instance, if you want U.S. companies to keep
jobs in the U.S., you might write a rule to mandate that, and to "impose a
'very major' border tax on companies that move jobs outside the U.S." That is
an example of a custom regulation, and it is good because it keeps jobs in the
U.S.

3) Bulk regulations are the kind that you buy by the yard, ones that you
measure by quantity rather than purpose. They don't have a purpose, really;
they are just generic "red tape." These are the regulations that presidents
frequently announce they will cut in half, or freeze with an executive order.
They're the regulations that come not from a reasoned desire to achieve a
particular goal, but from a pure impulse to regulate. Bulk regulations are bad
because they prevent businesses from doing business-y things without
accomplishing anything good.

4) All regulations are custom regulations.

5) All discussion of "regulation" is about bulk regulations, which do not
exist.

[1]:
[https://www.bloomberg.com/view/articles/2017-01-24/metrics-f...](https://www.bloomberg.com/view/articles/2017-01-24/metrics-
fees-and-regulations)

~~~
Afforess
I love Matt Levine, but he's wrong that "Bulk Regulations" don't exist. They
are called licenses, and you have to have them do operate many types of
businesses. See hair salon licenses, landscaping licenses, etc. There is zero
reason for licenses in many low-skill sectors, but they exist and are
regularly codified into state or federal laws as a requirement of doing
business. These licenses are enforced by rent-seeking gatekeepers, who
effectively drive out competition and raise prices on consumers. This is very
much "bulk regulation", and is terrible for everyone.

~~~
wavefunction
How do you enforce uniform education about say, hygiene without a license?

You say there are zero reasons but I think there had to be at least one once,
and probably still.

~~~
Afforess
Do you need 1000 days of training to properly dress hair? Because that's the
average training required to acquire the license.

~~~
tadfisher
Cosmetology licensure requirements usually specify hours, not days.

Even still, cosmetology is a surprisingly complex practice which really does
require a lot of hands-on training to become proficient. You should talk with
a licensed cosmetologist sometime to get the ins and outs of their education.

~~~
WorldMaker
Or talk to someone who actually uses a cosmetologist's services regularly.
It's very easy to gloss over the depth and complexity of a field when you
don't even need its services.

------
SippinLean
>18F specifically does not recommend using Bootstrap for production work
because:

>It is difficult to adapt its opinionated styles to bespoke design work, and

They have a tool on their website to generate a theme (Bourbon and PureCSS do
not), and Sass functions and mixins for customizing elements. Bourbon and
PureCSS's components are just as opinionated (and there are less of them).

>Its CSS style places semantic layout instructions directly in HTML classes.

Sure, but you can just use the Sass mixins instead, allowing you to use the
grid system without adding a single class to HTML.

Seems they knew this about Bourbon:

>Bourbon is a Sass mixin library that has extensions for a robust semantic
grid (Neat)

The same is true of Bootstrap, so they recommend against it?

It sounds like the author wasn't familiar with Bootstrap.

~~~
ahoy
I imagine you're right. There's so much hissing and booing and the mention of
bootstrap that a lot of otherwise good developers never touch it.

Despite the fact that, you know, bootstrap is just fine.

------
ourmandave
Their wonderful tag line at the bottom of the page footer:

 _We’re from the government, and we’re here to help._

~~~
desdiv
The full original quote being: "The most terrifying words in the English
language are: I'm from the government and I'm here to help."

[0]
[https://en.wikiquote.org/wiki/Ronald_Reagan](https://en.wikiquote.org/wiki/Ronald_Reagan)

------
0xcde4c3db
I love this:

> The UI components are built on a solid HTML foundation, progressively
> enhanced to provide core experiences across browsers. All users will have
> access to the same critical information and experiences regardless of what
> browser they use, although those experiences will render better in newer
> browsers. If JavaScript fails, users will still get a robust HTML
> foundation.

I guess it remains to be seen just how robust this really is, but it's a
fantastic goal to see explicitly embraced for modern websites. I skimmed some
things in Lynx and w3m (elinks failed with an SSL error; rumor has it that it
doesn't support SNI), and it honestly looks better than I remember a lot of
sites looking in Lynx ~20 years ago, let alone the average modern site. Sure,
part of that is imagemaps and frames going out of style, but modern sites
haven't necessarily replaced them with more graceful constructs.

------
sdevoid
> An official website of the United States government Here's how you know...

> This site is also protected by an SSL certificate that's been signed by the
> U.S. government...

Oh really?

DST Root CA X3 \- Let's Encrypt Authority X3 \- standards.usa.gov

Kudos for using Let's Encrypt though!

~~~
wslack
That's being fixed: [https://github.com/18F/web-design-
standards/issues/1738](https://github.com/18F/web-design-
standards/issues/1738)

------
hyperhopper
The main page developers will care about:

[https://pages.18f.gov/frontend/#intro](https://pages.18f.gov/frontend/#intro)

Some things are great, and show a pulse on the industry, but some aren't. For
example, Bower is prohibited, but yarn isn't even mentioned or encouraged,
much less required.

Though they do give devs the freedom to choose any framework, with a very nice
pros/cons lists of the popular ones

[https://pages.18f.gov/frontend/#js-
frameworks](https://pages.18f.gov/frontend/#js-frameworks)

~~~
wslack
Issues/PRs welcome!
[https://github.com/18F/frontend](https://github.com/18F/frontend)

------
nateabele
I had a manager once who had a prior career in government. One of their many
cynical internal catchphrases was "the conveniences which you have requested
are now mandatory".

Anyone with common sense and a knowledge of history knows exactly where this
is going. As things continue to move online, internet access and associated
technology standards begin to be declared a "public necessity" or some other
nonsense along similar rhetorical lines.

You don't even need to look very far for examples. UK accessibility laws (not
that they're an unqualified evil, simply a legislative 'gateway drug'),
references to 'digital haves and have-nots' from a few US election cycles ago,
etc.

I'd really hoped to be closer to retirement before this sort of thing started
happening.

Edit for clarity: I'm not saying this is immediately going to turn into some
draconian thing, but as a founding member of a standards body[0] with a
narrowly-defined intent, I've seen how easy it is for something like this to
become a de-facto industry standard that non-experts use to judge things
against, even when it's not appropriate.

[0] [http://www.php-fig.org/](http://www.php-fig.org/)

~~~
onion2k
Are you saying that legislation to make sure people with disabilities or low
incomes still have access to services when all the alternatives are shut down
is a _bad_ thing?

~~~
washadjeffmad
That's pretty far from the mark, but being made to provide multiple versions
of content to accommodate all ranges of accessibility for anything, not just
vital or government services, published on the web could be a pretty difficult
thing.

Content without captions spurred a lawsuit by the National Association of the
Deaf against Netflix a few years ago. What if your personal website hosted
some dynamic content where an uncaptioned sound bite appeared, and you ended
up being faced with legal action?

What if the scope were broadened so that all websites required content
compatibility modes for color blindness or spectrum sensitivity? Would that
responsibility be shared by the browser makers as well? Would Google pull ads
from businesses whose websites were not in compliance?

And in the Netflix case, the judge found that it would be “irrational to
conclude [that] places of public accommodation are limited to actual physical
structures.”[1] That's quite an interesting interpretation.

[1]
[http://www.slate.com/articles/arts/culturebox/2012/07/closed...](http://www.slate.com/articles/arts/culturebox/2012/07/closed_captioning_lawsuit_netflix_faces_legal_charges_for_not_complying_with_ada_requirements_.html)

~~~
extra88
The foundational law has been around for over 25 years. It doesn't require
anything of your personal website anymore than it would require your personal
home to have wheelchair ramps.

> What if the scope were broadened so that all websites required content
> compatibility modes for color blindness or spectrum sensitivity?

The law already requires reasonable measures to provide access to people with
disabilities. If a business website's colors prevents a customer from using
the site, they could already make it a legal matter. But that doesn't happen
often, it's much easier for everyone for a customer to contact the business,
explain the problem, and for the business to make a change that corrects the
problem (more likely, some number of customers explain and eventually
something is done).

But standards and expectations do change over time, what's considered
reasonable partially depends on technical possibilities, their general
availability, and cost. It's reasonable to expect web sites to work with
screen readers because they're readily available on almost all the computers
people use; if screen readers didn't exist, it would not be reasonable to
expect web sites to provide a purely aural interface for the vision impaired.

> the judge found that it would be “irrational to conclude [that] places of
> public accommodation are limited to actual physical structures.”[1] That's
> quite an interesting interpretation.

It's an interpretation that makes sense. The purpose of the law is to ensure
people with disabilities have access to goods and services, it matters not
whether such access involves concrete, paper, or ones and zeros.

~~~
matt4077
> It doesn't require anything of your personal website anymore than it would
> require your personal home to have wheelchair ramps.

The only slippery slope that wheelchair users approve of :)

------
sacheendra
The introduction to the colors section talks about communicating warmth and
trustworthiness. How does a mostly blue, grey and white page communicate those
feelings. Personally, I have always associated blue and grey with cold and
isolation.

------
dbg31415
This is really well done. Code is well laid out, well documented. Will make it
easy to use this for training new college hires for sure. Didn't expect
something like this out of the government. Nice to be surprised here.

------
burntrelish1273
This is great. Also worth noting in the UK, accessibility features for web
pages are required by law (EQA, DDA). In the US, RAA 1998 is the similar
legislation. Most govt agencies and private-sector businesses are required by
law to provide accessible web pages, or face lawsuits and/or fines.

TL;DR: all sites of reasonable size (govt and otherwise) should follow WCAG
2.0.

WCAG: [https://www.w3.org/TR/WCAG20/](https://www.w3.org/TR/WCAG20/)

UK - Equality Act 2010 (EQA):
[http://www.legislation.gov.uk/ukpga/2010/15/contents](http://www.legislation.gov.uk/ukpga/2010/15/contents)

UK - Disability Discrimination Act 1995 (DDA):
[http://www.legislation.gov.uk/ukpga/1995/50/contents](http://www.legislation.gov.uk/ukpga/1995/50/contents)

US - Rehabilitation Act Amendments of 1998 (RAA):
[https://www.congress.gov/congressional-report/105th-
congress...](https://www.congress.gov/congressional-report/105th-
congress/senate-report/166/1)

------
tingletech
it says on the site: "This site is also protected by an SSL (Secure Sockets
Layer) certificate that’s been signed by the U.S. government. "

But when you look at the certificate, it is signed by "Issued by: Let's
Encrypt Authority X3"

------
pfooti
From the installation: _Note: Using npm to install the Standards will include
jQuery version 2.2.0. Please make sure that you’re not including any other
version of jQuery on your page._

Isn't that pretty much precisely what peer dependencies are for?

~~~
bjacobel
peerDependencies were deprecated as of NPM 3.

~~~
pfooti
They're not exactly deprecated, they just don't install automatically anymore.
As I read it (and use them in npm 3), they're a way to specify "you need this
other library installed also" without actually installing it.

In a lot of cases ("we just need some flavor of jQuery 2"), of which I am not
sure that this us-web thing is an example, it's handy. The thing you're
distributing isn't standalone, it's a thing people will use in an environment
that has some installed jquery already, so you're fine.

The way I see it, if you're using a library that you can specify _very
permissively_ , peer dependencies are quite handy, and in this particular case
seem useful - I'm building some webapp, I need to know that my UI library
wants jquery to work, but I have a choice of not necessarily using that part
(probably used for DOM manipulation, so if I'm just npm installing it for the
CSS, wev), or making sure I meet the dependency with the other stuff I'm
using. If not installed by default is a problem, there's an npm-install-peers
package that does that.

------
wyldfire
Is this supposed to be used by non-US gov sites? Can any old private site use
it? It's public domain in the US, so assuming the answer to that question is
yes, would it make sense for a private site to use it?

~~~
notatoad
Legally, I'm pretty sure public domain is public domain (it's not just PD 'in
the us'). You can do what you want with it without fear of copyright. And it's
good style guide, but the US government is a pretty big brand to compete for
an identity with - it doesn't really seem like it would be a good idea to just
adopt their style guide wholesale.

However, using this as a framework to build your own style guide sounds like a
pretty decent plan.

~~~
wyldfire
Unfortunately, some other jurisdictions don't have a concept of "public
domain" works. That's why the page indicates "... this project is in the
public domain within the United States." in its license [1].

But you answered the main point of my question, so thanks!

[1] [https://github.com/18F/web-design-
standards/blob/develop/LIC...](https://github.com/18F/web-design-
standards/blob/develop/LICENSE.md#the-rest-of-this-project-is-in-the-
worldwide-public-domain)

------
AstroJetson
I have an older Firefox that I'm running and the Web Design Standards page is
all borked up. I'm wondering how many people that don't keep the upgrade
stream going for their browsers will now have problems.

~~~
extra88
How old? I have a copy of Firefox 3.6.27 from 2012, the main content is below
the sidenav, probably because its in an <aside>, support for which wasn't
added until Firefox 4. That's okay, it's still usable, the content is still
all there and readable.

But there are some other things that are more fundamentally borked, the
accordions won't operate. I'm for progressive enhancement and while requiring
JavaScript for a site to work well or in some cases work at all is okay, there
should still be some provision to "fail safe" so the content is available when
the specific JavaScript fails for some reason (I don't think it's because
they're using <button>, technically using that outside a form was against old
HTML specs but I think browsers still routinely supported them). For
accordions, my preference would be to use <details> and <summary> elements and
a polyfill to make them work in browsers that don't support them; they'll
"fail safe" and display all the content in browsers that don't support them
and don't run the polyfill.

~~~
AstroJetson
24.6 ESR from June 2014. The side navs are now on top of the main content. So
the main contend slides under the side nav and is hard to read. I understand
that it's a 3 year old browser, but it's on a Win7 machine, like lots of other
web users.

~~~
extra88
I realized that Firefox 3.6 not supporting <aside> wouldn't really affect the
layout, it's basically a <div> and it's floated left, something 3.6 can
handle. The main content has a class containing width: calc(100% - 250px); and
Firefox didn't support calc() until 4 but that wouldn't explain it happening
to you in 24.6 ESR.

Maybe older Firefox has a bug in calc(), disabling that property in a newer
browser is enough to shift the content below the sidenav because it falls back
to width: 100%;. I see what you mean about hard to read, if I disable the
calc() width, the sidenav stays put but the main content scrolls on top of it.
That's a little confusing because the sidenav staying put is due to the
property position: sticky; but caniuse.com says Firefox didn't support that
until version 26, version 32 without having to enable a flag.

Anyhow, I do think government guidelines in particular should handle older
browsers better than this page is demonstrating. Part of the point of using
frameworks for libraries and others is they can maintain and aggregate all the
little solutions to problems between browser implementations and between older
and newer browsers.

~~~
wslack
This is a really interesting question, given the very long tail of old
browsers out there. There's downloadable data about the browsers visiting
gov't websites (all anonymized by Google Analytics)[1], but that doesn't solve
the "when do you stop supporting" question, particularly for old versions of
IE.

[1]: [https://analytics.usa.gov/](https://analytics.usa.gov/)

------
sacheendra
Also notice the very inclusive picture on their landing page template.

------
ourmandave
So the General Services Administration (GSA) forked Bootstrap. =)

------
cjhanks
Why does this standard not fall under the purview of N.I.S.T.?

------
7ewis
So these are the web design standards the government abides by?

~~~
dangero
What will happen is that adherence to these standards will be embedded in
federal government software contracts moving forward. It's a good start and
written by a common sense group of people.

------
ronilan
And so the Hero Unit becomes a US standard.

