īut one of the most important parts is your content. 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.Love them or hate them, there are times you just can’t avoid giving them.Īnd if you’ve been in the game long enough, you know that a lot goes into creating and delivering an impactful presentation. ![]() However, the examples above are proof that we don’t have to settle for the default. When it comes to adding lists to our content, well, they often leave a lot to be desired. When you take a deeper look, it’s quite amazing to think of just how much we use them. HTML lists are one of the most flexible and indispensable design elements. 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. It’s a good lesson in taking advantage of whatever screen real estate is available.ĬSS features a number of built in list style options – more than you might think. On large viewports they split into multiple columns, while collapsing down to a single column on smaller screens. This example demonstrates the ability to create lists that are fully responsive. Along with indentation, this makes it even easier to distinguish between the nested levels – and it’s incredibly easy to do via CSS.ĬSS Grid is changing the way we build layouts – and lists. Not only are the numbers given a circular background, the background color changes based on level. Here’s another little enhancement that can make nested lists easier for users to digest. In this example, the list goes four levels deep while the numbering follows suit. Thankfully, CSS counter-reset is there to make automatic numbering a breeze. There are times when an ordered list needs to include multiple nested levels, while following a consistent numeric pattern. Using CSS pseudo elements to add a connecting line ties the whole thing together. A timeline, for instance, doesn’t need any fancy scripts – a basic one can be created with just a simple unordered list. When it comes to creating a design feature, it’s easy to overthink the process. It could be a great compliment to an online presentation or landing page. It combines SVG and JavaScript to make this short group of bullet points anything but ordinary. This one is an attention-getter (in a good way). Think of this animated 3D list as the very opposite of the above. It’s the perfect inspiration for a buttoned-down corporate or non-profit website. They use basic shapes, color and sizing to improve the overall readability. ![]() ![]() You don’t need to go wild with style to improve upon the default look of your lists. This saves users time and effort that can be better spent elsewhere (like scrolling through their Facebook feed). What displays on large screens as a multi-column unordered list turns into a simple comma-separated paragraph on mobile devices. That’s where this experiment gets interesting. The more we see people blankly staring at their phones, endlessly scrolling into the abyss, the easier it is to justify building long pages. ![]() The result is something that is attractive and easy to read. What’s more, each piece of content utilizes a CSS box-shadow to add depth. Each number is highlighted with a bold font and gradient background. One potential problem for a long list is that it can be difficult to make each item stand out. It turns out that some talented designers are indeed going beyond simple bullets and numbers. We formed a search party to scour the web, looking for signs of creative HTML lists. But there is a ton of potential to do more (and we have proof). Even with a little bit of basic CSS applied, they don’t really quicken the pulse. 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). Trends come and go, but both ordered and unordered lists are still as useful as ever. The HTML list is one of the true survivors in the throwaway world of web design.
0 Comments
Leave a Reply. |