help your readers: format all the things - wcldn
TRANSCRIPT
H E L P YO U R R E A D E R S :F O R M AT A L L T H E T H I N G S
Francesca Marano - @FrancescaMarano
C I AO ! S O N O F R A N C E S C A WO R D P R E S S P RO F E S S I O N A L , C O M M U N I T Y J U N K I E .P O LY G L OT, M E E T U P O R G A N I Z E R , WO R D C A M P O R G A N I Z E R .
L E T ’ S TA L K @ F R A N C E S C A M A R A N O
A B I T O F H I S TO RY
• March 12, 1989 - Sir Tim Berners-Lee writes a proposal for a distributed information system
• In 1993 he publishes the first specs for HTML tags
• November 24, 1995 - HTML 2.0 specs are published as a standard for all future implementations
• October 1, 1997 - Jakob Nielsen publishes the article “How Users Read on the Web”
Summary: They don't. People rarely read Web pages word by word; instead, they scan the page, picking out
individual words and sentences.
J A KO B N I E L S E N
W H AT I S H T M L
• HyperText Markup Language
• Defines the elements in a page semantically
• Elements are defined by English words or their abbreviations
• <Opening tag> Content </Closing tag>
U S E F U L H T M L TAG S F O R W R I T E R S
• Paragraphs <p> Content </p>
• Blockquotes <blockquote> Content </blockquote>
• Ordered lists <ol> List Items <li> Content </li> </ol>
• Unordered lists <ul> List Items <li> Content </li> </ul>
• List items <li> Content </li>
• Links <a href=“”> Content </a> (Anchors)
• Images <img src=“”> (No Closing Tag!)
T H E H E A D I N G E L E M E N T
• <h1>Headline 1</h1> Don’t use it!
• <h2>Headline 2</h2>
• <h3>Headline 3</h3>
• <h4>Headline 4</h4>
• <h5>Headline 5</h5>
• <h6>Headline 6</h6>
M I C R O S O F T I N C L U S I V E D E S I G N TO O L K I T
“Solve for one, extend to many by focusing on what’s universally important to all humans”
PA R AG R A P H /H E A D I N G S E L E C TO R
• Default paragraph
• All your headings
• Preformatted text
Bulleted List (Unordered)
• Bulleted list item #1 • Bulleted list item #2 • Bulleted list item #3
Numbered List (Ordered)
1. Numbered list item #1 2. Numbered list item #2 3. Numbered list item #3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a augue vel lorem posuere imperdiet. Nulla ipsum est, eleifend et eros a, rutrum sagittis neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a augue vel lorem posuere imperdiet. Nulla ipsum est, eleifend et
eros a, rutrum sagittis neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a augue vel lorem posuere imperdiet. Nulla ipsum est, eleifend et
eros a, rutrum sagittis neque.
Default for LTR - Use this!
T H I N G S M I G H T G E T WO N K Y
• Problem: Nested elements
• Solution: Go to the Text Editor and move the closing tag in the right place
T H I N G S M I G H T G E T WO N K Y
• Problem: Paragraph vs new line
• Solution: Enter creates a new paragraph, if you only want a new line use Shift + Enter
T H I N G S M I G H T G E T WO N K Y
• Problem: Get me out of this list!
• Solution: Click Enter twice or go to the Text Editor view, position the mouse after the closing tag and start typing.
F O R M AT A L L T H E T H I N G S , N OW
• Use a draft or an old post that needs some looooove
• Format ALL the things :-)
• Raise your hand and ask for help
• Tweet your newly formatted posts (and additional questions!) with the hashtag #formatit #wcldn @FrancescaMarano
B I B L I O G R A P H Y
• Tim Berners-Lee proposal: https://www.w3.org/History/1989/proposal.html
• Tim Berners-Lee HTML specs: https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html
• Jakob Nielsen “How Users Read On The Web“: https://www.nngroup.com/articles/how-users-read-on-the-web/
• Jakob Nielsen “F-Shaped Pattern For Reading Web Content”: https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
• Accessibility Resources: http://a11yproject.com/resources.html
B I B L I O G R A P H Y
• Rian Rietveld “HTML5 Headings in WordPress: A11y versus SEO?”: https://blog.rrwd.nl/2014/11/21/html5-headings-in-wordpress-lets-fight/
• Adrian Roselli “Typefaces for dislexia”: http://adrianroselli.com/2015/03/typefaces-for-dyslexia.html
• Sami Keijonen “Writing Accessible Content”: https://foxland.fi/writing-accessible-content/
• Trac Ticket #27159: https://core.trac.wordpress.org/ticket/27159
• Microsoft Inclusive Design Toolkit: https://www.microsoft.com/en-us/design/inclusive