TL;DR
- Writing for digital presentation differs to writing for print.
- Correctly deploy the two handfuls of basic digital writing design patterns.
Design Patterns
How many content patterns do we create and deploy?
- Page and topic titles
- Headings levels 1 to 6
- Paragraphs
- Links
- Calls to Action links
- Ordered lists
- Unordered lists
- Figures and figure captions
- Tables, table captions, table heading cellss, and table data cells
- Images, their captions, and alternative attributes or content.
- ‘Cards’ (and other widgets)
Where do we employ them?
- Overviews
- Section breaks
- Descriptions and explanations
- Processes
- Lists
- Notes
- Illustrations
- Emphasis
How much HTML is that? Well, the following 16 tags will get you writing content in most Content Management Systems:
- <header>Region of banner content</header>
- <main>Region of main content</main>
- <nav>Region of navigation</nav>
- <h1>Heading Level One</h1> to <h6>Baby Heading</h6>
- <p>Paragraph</p>
- <ul><li>List item</li></ul>
- <ol><li>List item</li></ol>
- <a href=”url.url”>Link</a>
- <figure><figcaption>Figure Caption</figcaption>Figure content</figure>
- <table>
<thead><tr><th>Column 1</th><th>Column 2</th></tr></thead>
<tbody><tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td></tr></tbody>
</table> - <img src=”url.url” width=”n in pixels” height=”n in pixels” alt=””>
- <strong>BOLD</strong>
- <em>italic?</em>
- <code>some inline code with ‘<‘ converted to ‘<’ and ‘>’ to ‘>'</code>
- <pre>some block code with ‘<‘ converted to ‘<’ and ‘>’ to ‘>'</pre>
- <mark>Highlight the text contained within</mark>
The above are each accessible ‘out of the box’. To play with them you need an HTML document:
<!DOCTYPE html> <html lang="en"> <body> …insert your content from above… </body> </html>
Simply play with your code in a text editor, save as your filename.html, and open it in a browser. If you use a Mac, try using VoiceOver (Cmd + F5) with your page!
PS: Pat has built a play box where you can write your HTML in one box and it outputs to it’s sibling as rendered code. Ask if you would like a copy.