Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Help your readers: format all the things - WCLDN

405 views

Published on

You press Enter and instead of a new line you get a new paragraph. You want to create a nested list and it just doesn’t look how you want it to. You pasted text from your word processor and its format is all wrong.

Formatting an article in WordPress can be boring and frustrating, but it’s a crucial step in writing for the web.
People read on screen differently than on paper and formatting the text will help them get to the end of it.

Nothing much has changed since 1997, when Jakob Nielsen published his “”How Users Read on the Web”” article: despite the principles being 20 years old, lots of pages look like a wall of text that might discourage well intentioned readers.

This talk will show you how to leverage the options available in WordPress and it will teach you how to fix some common problems with a few HTML tags.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Help your readers: format all the things - WCLDN

  1. 1. 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
  2. 2. 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
  3. 3. C O N T E N T I S K I N G
  4. 4. A B I T O F H I S TO RY • March 12, 1989 - SirTim 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”
  5. 5. 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
  6. 6. H T M L 1 0 1
  7. 7. 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>
  8. 8. 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 ClosingTag!)
  9. 9. 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>
  10. 10. AC C E S S I B I L I T Y 1 0 1
  11. 11. M I C RO 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”
  12. 12. AC C E S S I B I L I T Y R E A DY T H E M E S
  13. 13. F O R M AT T I N G I N WO R D P R E S S
  14. 14. T H E F O R M AT T I N G B A R
  15. 15. V I S UA L V S . T E X T
  16. 16. 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
  17. 17. Bold and Italic are used to emphasise portions of text
  18. 18. 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
  19. 19. 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!
  20. 20. Break the text after X characters Break the text manually where you add with Read More
  21. 21. • Strikethough • Is it really necessary?
  22. 22. • Horizontal Line • Please use this instead of a sequence of dashes to achieve the same effect
  23. 23. • Text colour • Just no.
  24. 24. • Paste as text • Strip the elements from text written with external text editors
  25. 25. • Clear Formatting except for headings and lists
  26. 26. • Undo • Redo
  27. 27. C O M M O N A N N OYA N C E S
  28. 28. T H I N G S M I G H T G E T WO N K Y • Problem: Nested elements • Solution: Go to theText Editor and move the closing tag in the right place
  29. 29. 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
  30. 30. 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 theText Editor view, position the mouse after the closing tag and start typing.
  31. 31. N OW I T ’ S YO U R T U R N !
  32. 32. 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
  33. 33. 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 OnThe 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
  34. 34. 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/ • TracTicket #27159: https://core.trac.wordpress.org/ticket/27159 • Microsoft Inclusive DesignToolkit: https://www.microsoft.com/en-us/ design/inclusive
  35. 35. Q U E S T I O N S ? @FrancescaMarano

×