The style guide project

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Or:
how do you make a style guide for a Web site?

Bert Bos
Presented at:
Paris Web 2018
Paris, 6 October 2018

Context

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

W3C Design Task Force

Ongoing project improve usability
update & merge existing guides
strengthen brand
help authors
keep informed of new insights
keep informed of new tech

Current cycle started March 2017

You're now part of it ☺

Outline

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

• Why write a style guide?
• The guide's audience
• Who writes the style guide?
• Visual elements
• Aside: internationalization
• Spelling & grammar
• Writing style
• Vocabulary
• Human-readable metadata
• Machine-readable metadata
• Navigation
• Technologies
• Specific categories
• Structure of the guide
• Writing style of the guide
• Should the guide be public?

Why write a style guide?

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Consistency
→ site is easier to use

Identity
→ brand recognition

The guide's audience

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

• Authors
• Editors
• Designers
• Front-end developers
• Back-end developers

Maybe different people need to read different parts?

Who writes the style guide?

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

General:	W3C:
Comm./marketing experts	✓	✓
Front-end developers		✓	✓	✓
Back-end developers			✓	✓
Designers		✓
Usability experts				✓
Authors	✓			✓

Hire external help?

Visual elements

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Aside: internationalization (1/2)

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Some examples:

• Gill Sans only covers Latin
• Letter spacing for justification vs emphasis in Hebrew
• Different ways to emphasize (e.g., boten marks: 傍点)
• Different expectations about emphasis

May require authors to use classes for kinds of emphasis

Wikipedia article on Japanese marks

See article on <b> and <i> elements

Aside: internationalization (2/2)

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

More examples:

• Underlining (for links…) not usual in Hindi (हिन्दी)
• Layout is different for vertical (mixed) text
• Use of uppercase: very few scripts are bicameral
• Americans used to Capitalized Headings, but
• … in German, capitals have semantics

  thus, all-lowercase not advisable in German

Spelling & grammar

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

For example:

• American English (-ize instead of -ise)
• Merriam-Webster dictionary
• Chicago Manual of Style
• Web and Internet capitalized
• ‘ – ’ (en dash) instead of ‘—’ (em dash)
• Punctuation outside quotes instead of inside

Writing style

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

For example:

• Do not instead of don't
• Avoid long sentences
• Avoid passive voice
• Explain abbreviations
• First person singular (I), plural (we), third person (W3C)

Vocabulary

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

• mobile phone or cell phone
• he or she or they
• GiB or GB
• 8 am–8 pm or 08:00–20:00
• USD or $

Navigation

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Example:

Home page:

• 3 Different menus (top, left and bottom sides)
• Search box

Other pages:

• Short menu (3–6 items)
• Mini-sites that share the same navigation
• Search box

Technologies

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Where to use

• stable tech. → everywhere
• recent tech. → with fallback
• experimental tech. → demo only

Consider:

• Old and future software
• Devices, non-human users
• Availability of authoring tools

Structure of the guide

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

The end

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

These slides are at https://‌www.w3.org/‌Talks/‌2018/‌1006-style-guide-Paris/