This is the fourth post in my series on Writing for the Web. In this post, I will outline some options for how to use lists online.
Making text scannable with lists
Human beings communicate by talking, which often leads to writing that is conversational or prose-heavy. However, long sentences are not scannable, and users want to know quickly what they are reading without looking at every word. Enter lists!
Great things about lists
- You can break up text into small, easily digested bits of information
- You can get your point across much easier
- Your pages will look much neater and be more scannable
Any time you find yourself using lots of commas, it's a chance to consider restructuring your information.
Types of lists
There are two list types commonly used on the web, bulleted lists and numbered lists, which will be familiar for users of MS Word or other word processing software.
Bulleted lists, also called "unordered lists", are great for listing anything that doesn't need to come in a specific order.
- Example bulleted list item
- Second example list item
- Subitem of the second item
Numbered lists, also called "ordered lists", are used to list items that require a specific order. One example might be a list of steps required.
- Read through your text for directions that are in a paragraph
- Identify each individual step
- Restructure the directions into a numbered list to make it easier for your users
Hawaii’s diverse natural scenery, warm tropical climate, abundance of public beaches, oceanic surroundings, and active volcanoes make it a popular destination for tourists, (wind) surfers, biologists, and volcanologists alike.
Restructured into scannable lists
Hawaii's attractions include:
- diverse natural scenery
- warm tropical climate
- abundance of public beaches
- oceanic surroundings
- active volcanoes
Many people enjoy Hawaii:
- wind surfers
Structured HTML lists vs. Wanna-be lists
Beware: just because something looks like a list, doesn't mean it's behaving as a list. Make sure you use your WYSIWYG list icons to create lists, not make them by hand. Here's an example:
1) This list is actually made of paragraphs and breaks in the HTML.
2) I made it by hand typing the numbers and pressing Shift-Enter for create a new line.
3) Screenreaders and other assistive technologies will not be able to tell that it is a list.
4) Using this approach decreases the accessibility of your website and makes it look less nice.
The code looks like this:
<code lang="html"> <p>1) This list is actually made of paragraphs and breaks in the HTML.<br> 2) I made it by hand typing the numbers and pressing shift-enter for create a new line.]<br> 3) Screenreaders and other assistive technologies will not be able to tell that it is a list.<br> 4) Using this approach decreases the accessibility of your website and makes it look less nice.</p> </code>
Go forth and make lists!
I hope this has been helpful. Remember, always look over your paragraph content to see if there's a way it can be restructured into lists. Your readers will thank you.
To learn more about writing for the web, check out my other posts in this series:
- Calls to Action: https://swsblog.stanford.edu/blog/writing-web-1-calls-action
- Titles and Headings: https://swsblog.stanford.edu/blog/writing-web-2-titles-and-headings
- Composing Drupal blocks: https://swsblog.stanford.edu/blog/writing-web-3-composing-good-block-drupal
Also check out:
- Working with Content in Drupal: https://swsblog.stanford.edu/blog/working-content-drupal-introduction-design-accessibility-and-seo
- Staging Content for Drupal with Google Docs: https://swsblog.stanford.edu/blog/staging-content-websites-google-docs-clean-html