Blog Exercises: The Art of List Making

Today’s blog exercise is part two on how to make a list.

In “Weekly Link Roundups” and “Making Lists” blog exercises I covered some basics of how to make a list. This blog exercise will take these exercises further to help you create interesting lists in your blog posts that pull the reader through your content.

This exercise could be done with the visual editor of WordPress posts, but I recommend you experiment with the Text (HTML) editor to become more at ease using HTML when writing your posts. You will also need to review how to make properly formed links if you feature links in your lists.

When appropriate, I will share the HTML tags and structure. If you would like to dig deeper, view the source code of this web page in your browser (right click > view source or page source).

I will be exploring examples of the plain list, a bullet list, numbered list, heading list, the titled list, and the graphic list, along with some variations on these.

The Plain List

Here is the list you are going to start with, displayed as plain text with line breaks (single space after each paragraph or sentence).

Be clear, concise, and specific with your goals. The more specific, the more achievable.
Chart the course. Lay out the steps to achieve the goal, identifying the tools, help, and support you need to make it happen.
Set attainable goals. How achievable the goal is for yourself and your site. Does this need to be broken down into smaller steps or longer time periods? What is going to get in your way? Solve all the problems in your plan to make this a goal you can keep.
Check in on your goals. If you are not reviewing your progress, you will not progress. If you need to re-evaluate your goals, then do so.
Make it measurable. Without some form of scorecard, how do you know how you are doing or how close or far you are from your goal?
Reward yourself. When you attain your goal, or along the journey, honor the moment and reward yourself for getting to this point. Such reward stimulates hormones in your system that bring positive feelings and stabilizes your emotional investment in that direction. It keeps you going.

Personally, I call this the lazy style of creating a list. This style is the most commonly found list type because people rarely know how to make a list on their sites.

Many manually add numbers, * or # before each line at most to force bullets on each line.

This format doesn’t stand out, doesn’t grab our attention, and looks like a giant block of text, hard to read.

The Bullet and Number List

The bullet and number list have the same HTML list structure. The change of the <ul> to <ol> HTML tag is the only difference to change the bullets into numbers.

• Be clear, concise, and specific with your goals. The more specific, the more achievable.
• Chart the course. Lay out the steps to achieve the goal, identifying the tools, help, and support you need to make it happen.
• Set attainable goals. How achievable the goal is for yourself and your site. Does this need to be broken down into smaller steps or longer time periods? What is going to get in your way? Solve all the problems in your plan to make this a goal you can keep.
• Check in on your goals. If you are not reviewing your progress, you will not progress. If you need to re-evaluate your goals, then do so.
• Make it measurable. Without some form of scorecard, how do you know how you are doing or how close or far you are from your goal?
• Reward yourself. When you attain your goal, or along the journey, honor the moment and reward yourself for getting to this point. Such reward stimulates hormones in your system that bring positive feelings and stabilizes your emotional investment in that direction. It keeps you going.

The bullet list looks like a list. It is a familiar structure to most readers. We get that these are points you wish to make.

A numbered list has order. There is a sequence to the process. You must do one before you do two, three, and four.

1. Be clear, concise, and specific with your goals. The more specific, the more achievable.
2. Chart the course. Lay out the steps to achieve the goal, identifying the tools, help, and support you need to make it happen.
3. Set attainable goals. How achievable the goal is for yourself and your site. Does this need to be broken down into smaller steps or longer time periods? What is going to get in your way? Solve all the problems in your plan to make this a goal you can keep.
4. Check in on your goals. If you are not reviewing your progress, you will not progress. If you need to re-evaluate your goals, then do so.
5. Make it measurable. Without some form of scorecard, how do you know how you are doing or how close or far you are from your goal?
6. Reward yourself. When you attain your goal, or along the journey, honor the moment and reward yourself for getting to this point. Such reward stimulates hormones in your system that bring positive feelings and stabilizes your emotional investment in that direction. It keeps you going.

A nested list is one that incorporates lists within lists. The nested list may feature numbers or bullets or combinations of the two.

1. Be clear, concise, and specific with your goals.
   • The more specific, the more achievable.
2. Chart the course.
   • Lay out the steps to achieve the goal, identifying the tools, help, and support you need to make it happen.
3. Set attainable goals.
   1. How achievable the goal is for yourself and your site.
   2. Does this need to be broken down into smaller steps or longer time periods?
   3. What is going to get in your way?
   4. Solve all the problems in your plan to make this a goal you can keep.
4. Check in on your goals.
   1. If you are not reviewing your progress, you will not progress.
   2. If you need to re-evaluate your goals, then do so.
5. Make it measurable.
   • Without some form of scorecard, how do you know how you are doing or how close or far you are from your goal?
6. Reward yourself.
   • When you attain your goal, or along the journey, honor the moment and reward yourself for getting to this point.
   • Such reward stimulates hormones in your system that bring positive feelings and stabilizes your emotional investment in that direction. It keeps you going.

The Titled List

The titled list is my name for what others call a bolded list or emphasized list. It features the key word or phrase that makes the point at the beginning of the list in bold and an explanation statement after it.

The bold phrase may be separated by a period or colon depending upon the intent and style of the article.

The list may be bullet or number.

• Be clear, concise, and specific with your goals. The more specific, the more achievable.
• Chart the course. Lay out the steps to achieve the goal, identifying the tools, help, and support you need to make it happen.
• Set attainable goals. How achievable the goal is for yourself and your site. Does this need to be broken down into smaller steps or longer time periods? What is going to get in your way? Solve all the problems in your plan to make this a goal you can keep.
• Check in on your goals. If you are not reviewing your progress, you will not progress. If you need to re-evaluate your goals, then do so.
• Make it measurable. Without some form of scorecard, how do you know how you are doing or how close or far you are from your goal?
• Reward yourself. When you attain your goal, or along the journey, honor the moment and reward yourself for getting to this point. Such reward stimulates hormones in your system that bring positive feelings and stabilizes your emotional investment in that direction. It keeps you going.

By putting emphasis on the key points, these become the most memorable in the list. People tend to remember them more than if the information is presented as a plain sentence.

This format is also used for definitions.

The Heading List

The heading list breaks the list up into paragraphs with a leading heading before each “section” to title the points you are making. This works best with list points with more than one or two sentences each. One to three paragraphs explaining the list point make this format work at its best.

HTML headings look different in size and style depending upon your WordPress Theme’s styles. Experiment to find the right heading styles for your lists.

Let’s see how it works with the example list I’m using, adding with some extra words to flesh out each point.

Clear, Concise, and Specific

It is important that you be clear, concise, and specific with your goals. The more specific, the more achievable.

Chart the course

Lay out the steps to achieve the goal, identifying the tools, help, and support you need to make it happen.

You may use traditional pen and paper, or go for the crayon method, scribbling all over the paper to map out your journey. Or take advantage of the many mind-mapping and charting software options available today on the computer and Internet.

Set Attainable Goals

How achievable the goal is for yourself and your site. Does this need to be broken down into smaller steps or longer time periods? What is going to get in your way?

Solve all the problems in your plan to make this a goal you can keep.

Check In Regularly

If you are not reviewing your progress on the path to your goals, you will not progress.

If you need to re-evaluate your goals, then do so.

Make It Measurable

Make it measurable. Without some form of scorecard, how do you know how you are doing or how close or far you are from your goal?

It is essential that you have some way of tracking your progress to keep you from straying too far from your goals.

Reward Yourself

Reward yourself. Give yourself the gift of accomplishment along the journey to remind you that there are many small steps on your journey that are necessary in order to reach the final goal.

When you attain your goal, or along the journey, honor the moment and reward yourself for getting to this point.

Such reward stimulates hormones in your system that bring positive feelings and stabilizes your emotional investment in that direction. It keeps you going.

The Graphic List

The graphic list uses graphics of all types and sizes to create visual bullets or sections as you make your points.

This example uses a graphic at each point.

Be clear, concise, and specific with your goals. The more specific, the more achievable.

 

Chart the course. Lay out the steps to achieve the goal, identifying the tools, help, and support you need to make it happen.

 

Set attainable goals. How achievable the goal is for yourself and your site. Does this need to be broken down into smaller steps or longer time periods? What is going to get in your way? Solve all the problems in your plan to make this a goal you can keep.

 

Check in on your goals. If you are not reviewing your progress, you will not progress. If you need to re-evaluate your goals, then do so.

 

Make it measurable. Without some form of scorecard, how do you know how you are doing or how close or far you are from your goal?

 

Reward yourself. When you attain your goal, or along the journey, honor the moment and reward yourself for getting to this point. Such reward stimulates hormones in your system that bring positive feelings and stabilizes your emotional investment in that direction. It keeps you going.

 

There are many pros and cons to this technique.

Setting the alignment of the image to the right or left wraps the text around the image, but there must be enough text to cover the height of the image to keep the text with the image. Otherwise the image crowds the next image on the point below it, and you get a stair step effect.

If necessary, as I did in the above example, change the size of the image to a width or height appropriate to the text on that point. You may change only the width or height and delete the other in the HTML for the image. If you set the width and delete the specifics for the height, the browser will set the height appropriately.

To avoid a cluttered look, it helps if all the images are the same size, or the same width or height. If they are different sizes, it adds to the jumbled and busy look of the list.

If the images are not merely visual bullets but images that represent the points you are making, you have more choices.

Alternating Images in a List

If the images represent the points you are making, consider setting them as alternative “floats.” The first point would feature the image on the right, the next point on the left, and back to the right with the next and so on. This staggered effect may allow you to make the images larger. Again, keeping the images at similar sizes will help avoid a visual clutter.

To do this quickly, use the Text Editor in WordPress to change alignright to alignleft on the images you wish to alternative sides.

The images may also be set as attachments, turning the images into links that when clicked take the reader to a larger view of the image.

Remember to control the size of the images so they do not overlap or look jumped. Follow the instructions in the section above for easily adjusting the size of the images to match the text volume. Alternating the images in the list allow for larger sizes, but they still may overlap and shove the other images and the text around.

Be clear, concise, and specific with your goals. The more specific, the more achievable.

 

Chart the course. Lay out the steps to achieve the goal, identifying the tools, help, and support you need to make it happen.

 

Set attainable goals. How achievable the goal is for yourself and your site. Does this need to be broken down into smaller steps or longer time periods? What is going to get in your way? Solve all the problems in your plan to make this a goal you can keep.

 

Check in on your goals. If you are not reviewing your progress, you will not progress. If you need to re-evaluate your goals, then do so.

 

Make it measurable. Without some form of scorecard, how do you know how you are doing or how close or far you are from your goal?

 

Reward yourself. When you attain your goal, or along the journey, honor the moment and reward yourself for getting to this point. Such reward stimulates hormones in your system that bring positive feelings and stabilizes your emotional investment in that direction. It keeps you going.

 

The Centered Visual Graphic List

The centered visual graphic list features images, sometimes screenshots, charts, graphics, or photographs, centered between the list posts.

There are several ways to do this. The most common, made popular by the likes of Smashing Magazine and Mashable, features a large image between the points you are making, such as a list, often as step-by-step instructions.

The images may be placed above or below your point, depending upon your own style and the connection of the image to the point you are making.

If you are offering numbered instructions in your list, the list may be in an HTML numbered list, or you may wish to manually number your list items.

1. Be clear, concise, and specific with your goals. The more specific, the more achievable.

2. Chart the course. Lay out the steps to achieve the goal, identifying the tools, help, and support you need to make it happen.

3. Set attainable goals. How achievable the goal is for yourself and your site. Does this need to be broken down into smaller steps or longer time periods? What is going to get in your way? Solve all the problems in your plan to make this a goal you can keep.

4. Check in on your goals. If you are not reviewing your progress, you will not progress. If you need to re-evaluate your goals, then do so.

5. Make it measurable. Without some form of scorecard, how do you know how you are doing or how close or far you are from your goal?

6. Reward yourself. When you attain your goal, or along the journey, honor the moment and reward yourself for getting to this point. Such reward stimulates hormones in your system that bring positive feelings and stabilizes your emotional investment in that direction. It keeps you going.

Your blog exercise is to experiment with lists on your blog.

Edit previously published posts with lists and consider making changes to how the listed information is presented to make it more readable as well as visually interesting on the page.

The design of your lists is often based upon the CSS, the design styles associated with your site and WordPress Theme. You may be stuck with a boring black circle for a bullet. If you have a little CSS experience, consider adding a Child Theme to your site to customize the look and feel of your lists, including replacing that boring black circle with a square or graphic.

In my CSS Unleashed – Experiments with CSS Designs series done many years ago, I have many examples of how to style content and graphics using only HTML and CSS including experiments with Lists, Menus, Tables of Content, and more, if you are looking for pushing your list making to new horizons. The styles presented are free to use on your site and WordPress Themes.

Have fun with this. This is just a glimpse at all the various ways you can style lists on your site. Just remember that such design choices are like using spices when you cook. Use too many or too much and it spoils the dish. Use these judiciously.

You can find more Blog Exercises on Lorelle on WordPress. This is a year-long challenge to help you flex your blogging muscles.

---

Subscribe Via Feedburner Subscribe by Email

Copyright Lorelle VanFossen.