In the following examples, you can see that number 2 is much easier and faster to read, because the important points are clearly listed on short, individual lines:
Example 1
Our Secret Sauce: We limit our current project-load to three clients, so we can do our best work and be available to you to provide personal attention. We believe
You’ll get one-on-one personal support throughout the entire design and development process. You’ll learn “website anatomy” so you’re better equipped to ask questions and give feedback. We use plain language, not technical jargon and you’ll ALWAYS know what’s happening with your project at any given point.
Your contract will explain exactly what’s included and what to expect. You’ll have your own project timeline, and you’ll know the cost, upfront.
Example 2
Our Secret Sauce
• Projects are limited to three at a time, so we do our best work
• We educate & empower our clients by teaching as we go
• You get one-on-one personal support throughout
• We use plain language, not technical jargon
• Project management tools allow us to collaborate easily
• Your contract explains what’s included and what to expect
• You know the cost and timeframe, upfront
Studies also show that the amount of vertical space used in a list, is irrelevant. Readers don’t mind scrolling if they’re getting the info they want.
An interesting research finding shows that websites perceived as “inviting” often use bulleted lists, making content easier to read and understand. Users are more likely to scroll through a website containing lists than a website that mainly consists of text-heavy paragraphs.
6 Tips for Using Bulleted Lists
1. Write bulleted lists of similar length and related items.
Items in a bulleted list should include related elements of similar importance. This makes the shape of the list easy on the eye; it includes lots of white space.
2. Don’t use numbered lists unless the sequence or item-count is important.
Numbered lists are used when items occur in a specific order, for example, steps in a recipe, or a “top 10” list. Or like this list of 6 tips!
Numbered long lists can get confusing. In one particular study, people mistakenly thought they had to complete all of the steps in a numbered list, but they really only needed to complete just one. Don’t number if your list makes sense without it.
3. Be consistent in phrasing and grammar.
Each bulleted-list item should start with the same part of speech (i.e.: verb or noun) and all bullet points should be either fragments or complete sentences. Don’t mix them together.
4. Be consistent with formatting.
Use the basic rules of capitalization and punctuation:
• If the list items are sentences, capitalize the first word and use correct ending punctuation.
• If the list items are fragments, don’t use end punctuation.
• For hierarchical lists, use a different style of bullet for each group, for easier reading and comprehension.
5. Use discerning keywords at the beginning of each line and avoid repetitive phrasing.
Omit parts of speech like “the” and “a”. Use action-words at the beginning of the line.
6. Introduce the list with a clear, descriptive sentence or phrase.
The introduction tells the reader what the list is about or why it’s important. The intro doesn’t have to be a complete sentence if each item in the list makes sense on its own.
To make a bulleted list in HTML:
1. An unordered (not numbered) list:
starts with the <ul>tag, and each item within the list starts with an <li>tag. Remember to close the tags.
The list items will be marked with “bullets” by default. You can style the bullets by using the CSS list-style-type:
and choosing one of these properties: disc, circle square, or none.
Example:
<ul style=”list-style-type: disk”>
<li>Bananas</li>
<li>Oranges</li>
<li>Apples</li>
</ul>
Looks like:
2. An ordered list
starts with the <ol>tag and each item within the list starts with an <li> tag. Remember to close the tags.
The list items will be marked with numbers by default. You can style the bullets by using the CSS type attribute:
and choosing one of these properties:
type=”1″ The list items will be numbered with numbers (default)
type=”A” The list items will be numbered with uppercase letters
type=”a” The list items will be numbered with lowercase letters
type=”I” The list items will be numbered with uppercase roman numbers
type=”i” The list items will be numbered with lowercase roman numbers
Example:
<ol type=”1″>
<li>Bananas</li>
<li>Oranges</li>
<li>Apples</li>
</ol>
Looks like:
- Bananas
- Oranges
- Apples
3. Description lists
A description list is a list of terms, with a description of each term.
The <dl>tag defines the description list, the <dt> tag defines the term (name), and the <dd>tag describes each term:
Example:
<dl>
<dt>Bananas</dt>
<dd>- Sweet, yellow skinned fruit</dd>
<dt>Oranges</dt>
<dd>- Sweet, orange skinned fruit</dd>
<dt>Apples</dt>
<dd>- Pungent, red-skinned fruit</dd>
</dl>
4. Nested Lists:
List can be nested (lists inside lists):
Example:
<ul>
<li>Bananas</li>
<li>Oranges
<ul>
<li>Naval Oranges </li>
<li>Mandarin Oranges</li>
<li>Blood Oranges</li>
</ul>
</li>
<li>Apples</li>
<ul>
<li>Red Delicious Apples</li>
<li>Granny Smith Apples</li>
</ul>
</ul>
Have fun trying these yourself!
Questions?
[email protected]
My Contact Page
Other articles you might like:
-Using images: Tips to improve your SEO rankings
-Use a customer thank-you page to avoid missed opportunities
-6 Tips to Make Your Blog Post SEO Friendly
About the author
I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.
I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.
I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.
I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.
‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.
Visit Image and Aspect to learn more about your web presence options
Diane M. Metcalf, M.S.
