Today we’re talking “all about the bullets”. We’ll discuss places where you should you use bullet points and unordered lists and we’ll also discuss how you can modify these bullets using CSS. So without further ado, let’s get to it.
Please consider the following when using unordered lists and bullet points:
- Technical specifications on product pages should always be listed or bulleted. This makes them easier for reading consumption and helps these points stand out more to convince consumers of each product’s value and help close the sale. The size, weight, color, material and manufacturer are some of the most important specs on many types of products.
- In addition, Bullets — which can be replaced with images — can also be used when you don’t want to use graphics for key information, such as “Free Shipping” and “International Shipping.” Checkmarks are a common image you can use in place of bullets for these types of promotions.
- Another thing, when creating these bullets, please consider using common search terms people use when trying to find products. Seasoned shoppers will enter sizes and other key information into search engines that can relate directly to these bulletted items.
- Bullets and lists can also help with the design flow of a page. This type of formatting can help ease issues of unnecessary white space and textual “cluttering,” making the text and the page more attractive in both the design and selling phases.
In the following slides we’ll look at the HTML Makeup of bulletted lists, and how CSS can be used to modify and change their makeup.
So here are 2 examples of a basic Bullet List’s HTML Code and Ordered List’s HTML Code with Results.
Now if you want to modify a list like this there are a couple of ways you can go about it. You can replace the actual bullets with other shapes, you can replace the bullets with several types of numbering, you can replace the bullets with an image, or you can change the padding or margins around each bullet. I’ll go into more detail for each of these changes in the next slide.
Here is the actual CSS for each of these changes.
- You’ll notice that for the “Shapes” change all you need to do is add a “list-style-type” command for the “ul” element and then specify the type as “square”. There are many other shapes you can use for this as well.
- For the “Numbering” change, all you do is add the same “list-style-type” command to the “ol” element and then specify the type of numbering (in this case “upper-roman”). There are many other standardized numbering types too.
- For the “Imagery” change, all you do is add a “list-style-image” command and then after the command, place the image’s url inside of a url(parenthesese).
- And Lastly, for any padding or margin changes to your list just add a “padding” or “margin” command to either the “li” or “ul” or “ol” tags.
Here is a List of Standard Shapes and Number Value Changes You can use with the “list-style-stype” CSS command.
And there you have it. Now you know “All about the Bullets”. Did you learn anything today you would like to explore for your site? If you don’t have the time or effort to put into researching or making these changes to your site. Please consider asking us for a free audit to help you out! We can comb your site and pick out all of the major outlying issues. And then offer to repair them with specific tests for your site, and then procure and analyze the change’s overall effect, and present you with the winning changes. It’s that easy!