Beyond Bland: HTML Lists with Style

The HTML list is one of the true survivors in the throwaway world of web design. Trends come and go, but both ordered <ol> and unordered <ul> lists are still as useful as ever.

Like most basic HTML elements, these old-timers are quite boring to look at when used within a site’s content (as opposed to navigation, where much more effort goes into styling). Even with a little bit of basic CSS applied, they don’t really quicken the pulse. But there is a ton of potential to do more (and we have proof).

We formed a search party to scour the web, looking for signs of creative HTML lists. It turns out that some talented designers are indeed going beyond simple bullets and numbers. Take a look!

Color and Dimension

One potential problem for a long list is that it can be difficult to make each item stand out. That’s the beauty of this example. Each number is highlighted with a bold font and gradient background. What’s more, each piece of content utilizes a CSS box-shadow to add depth. The result is something that is attractive and easy to read.

A Mobile Solution

The more we see people blankly staring at their phones, endlessly scrolling into the abyss, the easier it is to justify building long pages. Yet each bit of scrolling takes time. That’s where this experiment gets interesting. What displays on large screens as a multi-column unordered list turns into a simple comma-separated paragraph on mobile devices. This saves users time and effort that can be better spent elsewhere (like scrolling through their Facebook feed).

Keeping It Simple

You don’t need to go wild with style to improve upon the default look of your lists. Take this collection of custom numbers. They use basic shapes, color and sizing to improve the overall readability. It’s the perfect inspiration for a buttoned-down corporate or non-profit website.

On the Other Hand…

Think of this animated 3D list as the very opposite of the above. This one is an attention-getter (in a good way). It combines SVG and JavaScript to make this short group of bullet points anything but ordinary. It could be a great compliment to an online presentation or landing page.

A Simple Timeline

When it comes to creating a design feature, it’s easy to overthink the process. A timeline, for instance, doesn’t need any fancy scripts – a basic one can be created with just a simple unordered list. Using CSS pseudo elements to add a connecting line ties the whole thing together.

Nested Numbers

There are times when an ordered list needs to include multiple nested levels, while following a consistent numeric pattern. Thankfully, CSS counter-reset is there to make automatic numbering a breeze. In this example, the list goes four levels deep while the numbering follows suit.

A More Stylish Nest

Here’s another little enhancement that can make nested lists easier for users to digest. Not only are the numbers given a circular background, the background color changes based on level. Along with indentation, this makes it even easier to distinguish between the nested levels – and it’s incredibly easy to do via CSS.

The Goodness of Grid

CSS Grid is changing the way we build layouts – and lists. This example demonstrates the ability to create lists that are fully responsive. On large viewports they split into multiple columns, while collapsing down to a single column on smaller screens. It’s a good lesson in taking advantage of whatever screen real estate is available.

Bonus: All the Lists

CSS features a number of built in list style options – more than you might think. This pen offers a handy rundown of the different styles, as well as examples of using images and Font Awesome icons in place of traditional bullet points.

Top Listings

HTML lists are one of the most flexible and indispensable design elements. When you take a deeper look, it’s quite amazing to think of just how much we use them.

When it comes to adding lists to our content, well, they often leave a lot to be desired. However, the examples above are proof that we don’t have to settle for the default. Just a little bit of CSS (and even a sprinkle of JavaScript) can go a long way towards making list content more interesting and easier to read.

By Eric Karkovack