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

Last updated:

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 them 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 “Unprofessional 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 a periods after the bullet points that are independent sentences or longer phrases.

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

Example #1: Complete sentences as bullet points

  • The way you format your web content – highlights, font sizes, paragraph length, space, images, etc. – can make or break your landing pages and blog posts. And by “break” I mean screw up your bounce rate, time on page and, ultimately, conversions.
  • If your content makes a great first impression and is easy to scan and process, you’ll get trust brownie points from your visitors.
  • In this post, I list 9 painful blog formatting mistakes and provide ultra-specific ways to fix them.

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 complete 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 things 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 individual bullet points

bullet-points-with-no-space-example
You say “bullet points”? I say “a huge paragraph with dots on the side”. (Source)

Here goes your readability out of the window! There is no spacing between individual bullet points, and it all looks like a giant paragraph 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:

ul.custom li, ol.custom li {margin-top: 24px;}
ul.custom >:last-child {padding-bottom: 24px;}

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:

ul.custom li, ol.custom li {margin-top: 24px !important;}
ul.custom >:last-child {padding-bottom: 24px !important;}

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:

<ul class="custom">
<li>Bullet point 1</li>
<li>Bullet point 2</li>
<li>Bullet point 3</li>
</ul>

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.

Anti-example #2: Numbers in the beginning of each bullet point

Register now to get exclusive assess to:

  • 19 pre-recorded presentations created specifically for this event
  • 4 pre-recorded interviews with our speakers
  • 8 live workshops and workbooks
  • 4 live Q&A sessions with our speakers
  • 6-month access to all materials

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 bullet point 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.

Anti-example #2 (improved):

Register now to get exclusive assess to:

  • Pre-recorded presentations created specifically for this event
  • Pre-recorded interviews with our speakers
  • Live workshops and Q&A sessions with our speakers
  • 6-month access to all materials

“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.

Anti-example #3: Starting bullet points with the same phrase

You’ll learn:

  • How to structure your sales pages
  • How to write copy that resonates
  • How to make sure your web design doesn’t get in the way
  • How to improve your pages after they are live

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.

Anti-example #3 (improved):

You’ll learn how to:

  • Structure your sales pages
  • Write copy that resonates
  • Make sure your web design doesn’t get in the way
  • Improve your pages after they are live

Beware of cognitive dissonance

Remember this riddle from your childhood?

Which-one-doesnt-belong-here
Grapes, cabbage, dog, pum.. wait, what?

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 wodering “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

Anti-example #4: Starting bullet points with adjectives and one noun

We’ll provide you with:

  • Options designed for your property
  • Easy to understand installation instructions
  • Clear drawings of equipment location

“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.

Anti-example #5: Starting bullet points with different form of a verb

Our services:

  • Review of business plans
  • Choice of appropriate equity structure
  • Negotiating Negotiation of shareholders’ agreements

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 an odd one here?

Anti-example #6: Bullet points answering different questions

We are:

  • Passionate about meeting deadlines
  • Obsessed with security
  • Driven by perfection
  • Based in London

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.

Anti-example #7: Bullet points that overlap

You’ll learn how to:

  • Find your niche
  • Create and market your courses and books
  • Find new clients
  • Build a successful business

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.

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 a huge paragraph.

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.

add-bullet-points-to-email-small

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.
  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:

bullet-points-in-email
These are some long paragraphs!

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:

bullet-points-example-twitter-5

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 in a memorable way.

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 bullet points with enough white space
  • Keep the punctuation consistent
  • Start your bullet points with most valuable words
  • Start them with the same part of speech
  • Make sure all bullet points from one list 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?”

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. A brilliant blog as always! A really helpful guide with added value! i.e. More than just the core subject of the purpose and content of bullet points… added value with tips on:
    – grammar and punctuation
    – adjusting layouts and spacing
    Thanks Gill!