How to Format Your Text to Help Your Readers

Slide 1

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

Slide 2

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

Slide 3

CONTENT IS KING @FrancescaMarano

Slide 4

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

Slide 5

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

Slide 6

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

Slide 7

HTML 101 @FrancescaMarano

Slide 8

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

Slide 9

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

Slide 10

Slide 11

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>

Slide 12

ACCESSIBILITY 101 HELP ALL THE READERS @FrancescaMarano

Slide 13

Slide 14

FORMATTING IN WORDPRESS @FrancescaMarano

Slide 15

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

Slide 16

Slide 17

GUTENBERG

Slide 18

PARAGRAPH SELECTOR @FrancescaMarano

Slide 19

Slide 20

Slide 21

<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

Slide 22

<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

Slide 23

Slide 24

BOLD AND ITALIC @FrancescaMarano

Slide 25

@FrancescaMarano

Slide 26

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

Slide 27

Slide 28

LISTS @FrancescaMarano

Slide 29

Slide 30

Slide 31

<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

Slide 32

BLOCKQUOTE @FrancescaMarano

Slide 33

@FrancescaMarano

Slide 34

Slide 35

<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

Slide 36

Slide 37

ALIGNMENT @FrancescaMarano

Slide 38

Slide 39

Slide 40

STRIKETHROUGH @FrancescaMarano

Slide 41

Slide 42

Slide 43

TEXT COLOR @FrancescaMarano

Slide 44

Slide 45

Slide 46

COMMON ANNOYANCES @FrancescaMarano

Slide 47

NESTED ELEMENTS @FrancescaMarano

Slide 48

Slide 49

Slide 50

PARAGRAPH VS NEW LINE @FrancescaMarano

Slide 51

Slide 52

Slide 53

GET ME OUT OF THIS LIST @FrancescaMarano

Slide 54

Slide 55

Slide 56

LINKAPALOOZA @FrancescaMarano

Slide 57

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

Slide 58

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

Slide 59

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

Slide 60

QUESTIONS? @FrancescaMarano