How to Use (and Not to Use) Bullet Points on Your Website

Last updated: January 5, 2021

Use bullet points on your website, they said. It will be great, they said.

What they probably didn’t tell you is how those unordered and numbered bullets may backfire if you don’t pay attention.

So, let’s correct that and talk about how to use bullet points for marketing your products and services on your website to keep all that important information scannable, readable and memorable for your prospects.

But before we get to the juicy part, let’s quickly sort out the grammar and punctuation rules for bullet points. Because nothing screams “Not a professional here!” louder than an inconsistent usage of capital letters, commas and periods.

Super fun, I know. But you won’t believe how easy it is!

Should you use periods and other punctuation with bullet points?

Good news: There are no fixed rules on how to use punctuation with bullet points. You know it’s true because even Oxword Dictionary says so.

I don’t use any punctuation for bullet points on my website. Why? Because I care about my website visitors.

Normally, you’d use periods and commas to separate the sentences or semi-independent sentence parts and keep your text easy to follow.

But your bullet points are already separated from each other – by a new line and spacing in between. So punctuation for the sake of separation makes no sense.

But if you really-really want to, you can use periods after the bullet points that are full sentences or longer phrases.

Speaking of longer sentences as bullet points. In this case, the usual rules of punctuation apply.

From “9 Painful Blog Formatting Mistakes That Will Ruin the Best Content”

Whatever you decide, make sure to use (or not to use) punctuation in the same way throughout your website.

Do you need to capitalize bullet points?

No, if your bullet points are single words or short phrases.

As you like, if your bullet points are longer phrases.

Yes, if your bullet points are full sentences.

If everything in life would be so easy, eh?

Now to the juicy part.

Using bullet points on your website

You want to use bullet points to break visual monotony on your web pages and draw attention to the important information you hope will help you sell more.

Let’s look at what can make or break your list of bullet points using (and fixing) some real-life “don’t do it like this” examples. All of the advice below holds for both unordered and numbered lists.

Make your bullet points easy to process

The bullet points are supposed to make your content easy to read and process. But look at this example:

Anti-example #1: No space between the list items

Here goes your readability out of the window! There is no spacing between individual bullet points, and it all looks like a giant block of text with dots on the side (and don’t get me started on highlighting things bold like that!)

I know who’s to blame for this: Web designers who create website themes. They often don’t add that spacing per default, and many website owners just don’t know how to change that.

Here’s how to claim your rightly deserved spacing back.

In your custom CSS file, add:

If it doesn’t work and some other style is overwriting it, add !important after the margin values to show it that you really mean it:

In human speak it means “Add 24px of white space before every bullet point and additional 24px of white space after the last bullet point.”

Next time you need a list of bullet points, copy-paste this HTML snippet into your blog post:

Basically, you need to assign class “custom” to the <ul> or <ol> element.

Make your bullet points easy to remember

Although your bullet points are now nicely separated, you may have still phrased them the way that makes them hard to remember.

Here’s an example of a registration page for an online event.

You may have heard that using numbers in your copy makes it more trustworthy.

“Join your 1300 peers”, says a newsletter opt-in, and people sign up in packs.

“In the last 5 years, we helped 87 small businesses launch new products”, says a marketing agency on their website, and gets bombarded with inquiries.

But in case of a list where every item starts with a number, this is counter-productive.

Do you think that your prospects care if it’s 19 presentations and not 21? Or if it’s 8 workshops and not 6? Of course, not!

But you care for them to quickly understand what kind of even you’re asking them to register for.

You need them to remember “presentations, workshops, Q&A sessions, 6-month access”, not struggle through numbers first that are much less relevant.

Here’s a way to do it better.

“But I think it’s really important that it’s 19 presentations!”

I think so, too. But you don’t have to say it here.

This list is supposed to give a quick overview for your prospects to decide if it’s relevant for them at all. I’m assuming the landing page for your event consists of more than just these bullet points. If you list all the speakers and the corresponding 19 topics after that, it will be much more valuable for your potential participants.

Another way to make your bullet points harder to process is to start all of them with the same phrase.

Your website visitors are already prone to skimming your page in F pattern. So, make sure that you put the most important words closer to the beginning. You can do that by moving the “how to” part to the first line.

Beware of cognitive dissonance

Remember this riddle from your childhood?

Look at your bullet points and ask yourself, “Which one doesn’t belong here?”.

You want your website visitors to ride smoothly through your bullet points, effortlessly absorbing their meaning and value, and not trip over words and phrases that don’t go with the rest wondering “why there’s a dog among all that produce”.

That’s the toughest one to get right, though, because there is a gazillion of ways to get it wrong.

Here are a couple of typical “don’t do it like this” examples.

Bullet points that start with different parts of speech

“Options” – a noun. “Easy to understand”, “clear” – adjectives. Just add an adjective to the first bullet point making it “bespoke options”, and you’re good.

An even more common mistake is to mix an infinitive of a verb (“to do”) with its inflected form (“doing”).

Below, is a list of services a law firm provides.

Bullet points that answer different questions

Here’s a bulleted list on an About page of a company that installs security equipment. Can you spot the odd one here?

The question the first 3 bullet points answer is “What are your company’s values?”. But #4 answers to “Where is your company based?” Obviously, “based in London” doesn’t belong on this list.

Bullet points that overlap

Sometimes, you may get so carried away listing the benefits of your offer in a bulleted list that you start listing things that either overlap, as in “I have apples, carrots and veggies in my fridge”.

Consider this list of bullet points that tells the participants of the course called “How to Build a Successful Business with Less Hustle” what topics the presentations cover.

See the problem?

Finding your niche or finding new clients sound like topics one could cover in a presentation, but “Build a successful business” is much broader. Moreover, it’s the title of the course itself – something all those 3 bullet points above are already a part of.

The last bullet doesn’t fit this list. Remove it or substitute with a narrower topic.

What? I told you these are the toughest ones to get right.

Useless bullet points

Ok, you’ve got the eyeballs on your neat bullet point list. It would be a shame if you waste this attention with something trivial that your prospects don’t find valuable.

Since bullet point lists are often used to list the benefits of your services or product, you need to make sure it’s a real benefit and not a fake one.

To spot a fake benefit, ask yourself whether you can imagine your prospects lying sleepless at night thinking, “Man, I need X”.

Let’s say you list all the ways your services help your clients, and one of them is “Make your SEO work harder”. Do you really think your prospects lie sleepless at night thinking, “Man, I need to make my SEO work harder.”? I doubt that. Instead, they probably think “I need more organic traffic”.

To convert a fake benefit into a real one, use the So what?” test.

***

So much about using bullet points on a website. But since it’s not the only place you’re using bullet points to market your products and services, it makes sense to talk about using them in your email newsletters and social posts, too.

Using bullet points in emails

All things mentioned above also apply to bullet points in emails. Yet, there are two more things to be aware of.

Mind the spacing

You may have noticed that when you try to add bullet points to an email newsletter they, too, don’t have any space between them and are glued together in one large block of text.

You can quickly correct that manually adding spacing between them, either in your email template (once and for all) or, if you don’t use them that often, just for that particular newsletter.

How to add space between the bullet points in your email newsletter:

1. Add bullet points as usual.
2. In your newsletter editor, open its HTML version.
3. Copy-paste newsletter HTML into a text editor (I use Notepad++).
4. Substitute all occurrences of <li> with <li style="margin-top:12px">.
5. Copy-paste the HTML back into your newsletter editor and click “ok”.

Mind the design on mobile

Most of your subscribers will be checking their email on mobile. Which means, narrower screen. Which means, if you use longer bullet points with the default indentation, your bullet points may end up looking like this:

Unless you know what you’re doing, I won’t recommend messing with default indent. Instead, double-check how your bullet points appear on mobile and if necessary, keep your bullet points short.

Another solution could be making the font size for the whole email newsletter smaller on mobile to shorten the bullet point paragraphs. Yet, make sure your text is easy to read without a magnifying glass at all times.

Using bullet points on social media

Although you can’t add any rich styles to your social media posts and make all your bullet points automatically have those dots on the side, you can (and should) use bullet points to make your posts stand out.

Even a simple asterisk as a bullet point symbol is often enough to break the visual monotony and even deliver a cliffhanger:

And if you can find a suitable emoji for every of your bullet points, even better. SemRush is a champion of using emojis in bulleted lists on Twitter:

Final words of wisdom

Bullet points are your secret warriors against skimmers and attention deficit. They can break visual monotony and feed your prospects bite-size information about your offer and its benefits to make it easier to understand and remember.

But only if you know how to use them.

Next time you add bullet points to your website, email newsletter or social media update make sure to:

• Separate individual list items with enough white space
• Keep the punctuation consistent
• Start your bullet points with the most valuable words
• Start them with the same part of speech
• Make sure all bullet points from one list logically belong together
• Keep in mind how they’ll display on different devices

And for the quick check of your existing lists, think of that childhood riddle and ask yourself, “Do I have something here that doesn’t belong?”