How To Format Your Text to Help Your Readers Francesca Marano - @FrancescaMarano

CIAO! SONO FRANCESCA WordPress Community Team Ex freelancer that built websites for freelancers WordPress Community Manager

CONTENT IS KING @FrancescaMarano

A BIT OF HISTORY 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 @FrancescaMarano

A BIT OF HISTORY October 1, 1997 - Jakob Nielsen publishes the article “How Users Read on the Web” @FrancescaMarano

Summary: They don't. People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences. Jakob Nielsen @FrancescaMarano

HTML 101 @FrancescaMarano

WHAT IS HTML HyperText Markup Language Defines the elements in a page semantically Elements are defined by English words or their abbreviations <Opening tag> Content </Closing tag> @FrancescaMarano

USEFUL HTML TAGS FOR WRITERS 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> @FrancescaMarano

THE HEADING ELEMENT <h1>Headline 1</h1> (Nope) <h2>Headline 2</h2> <h3>Headline 3</h3> <h4>Headline 4</h4> <h5>Headline 5</h5> <h6>Headline 6</h6>

ACCESSIBILITY 101 HELP ALL THE READERS @FrancescaMarano

FORMATTING IN WORDPRESS @FrancescaMarano

DIFFERENT WAYS TO FORMAT Editor (UI) Gutenberg (UI) HTML @FrancescaMarano

GUTENBERG

PARAGRAPH SELECTOR @FrancescaMarano

<h1>Headline 1</h1> (Nope) <h2>Headline 2</h2> <h3>Headline 3</h3> <h4>Headline 4</h4> <h5>Headline 5</h5> <h6>Headline 6</h6> @FrancescaMarano

<pre>This is an example of a WordPress post, you could edit this to put information about your site so readers know where you are coming from. You can create as many posts in order to share with your readers what is on your mind.</pre> <p>This is an example of a WordPress post, you could edit this to put information about your site so readers know where you are coming from. You can create as many posts in order to share with your readers what is on your mind.</p> @FrancescaMarano

BOLD AND ITALIC @FrancescaMarano

@FrancescaMarano

<strong>Bold</strong> <em>Italic</em> @FrancescaMarano

LISTS @FrancescaMarano

<ol> <ul> <li>Ordered List Item #1</li> <li>Unordered List Item #1</li> <li>Ordered List Item #2</li> <li>Unordered List Item #2</li> <li>Ordered List Item #3</li> <li>Unordered List Item #3</li> </ol> </ul> @FrancescaMarano

BLOCKQUOTE @FrancescaMarano

@FrancescaMarano

<blockquote> This is an example of a WordPress post, you could edit this to put information about your site so readers know where you are coming from. You can create as many posts in order to share with your readers what is on your mind. <cite>Author</cite> </blockquote> @FrancescaMarano

ALIGNMENT @FrancescaMarano

STRIKETHROUGH @FrancescaMarano

TEXT COLOR @FrancescaMarano

COMMON ANNOYANCES @FrancescaMarano

NESTED ELEMENTS @FrancescaMarano

PARAGRAPH VS NEW LINE @FrancescaMarano

GET ME OUT OF THIS LIST @FrancescaMarano

LINKAPALOOZA @FrancescaMarano

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-theweb/ Jakob Nielsen “F-Shaped Pattern For Reading Web Content”: https://www.nngroup.com/articles/f-shapedpattern-reading-web-content/ @FrancescaMarano

Accessibility Resources: http://a11yproject.com/ resources.html Rian Rietveld “HTML5 Headings in WordPress: A11y versus SEO?”: https://blog.rrwd.nl/2014/11/21/html5headings-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/ @FrancescaMarano

Trac Ticket #27159 “Removing TinyMCE buttons to improve user experience”: https:// core.trac.wordpress.org/ticket/27159 Microsoft Inclusive Design Toolkit: https:// www.microsoft.com/en-us/design/inclusive Bulleted and numbered lists https://www.prismnet.com/~hcexres/textbook/ lists.html Mark Root-Wiley “No Justification: Don’t Use Right, Center, and Full Justification on the Web”: https:// mrwweb.com/no-justification-dont-use-right-centerand-full-justification-on-the-web/ @FrancescaMarano

QUESTIONS? @FrancescaMarano