carousel pt1

a carousel you say?

I assume we all know what a carousel is, these days you find them almost everywhere (except for blogs). Still, there is quite a big difference between recognizing a pattern and properly describing one. A good way to start doing that is by establishing what it is not first, pinpointing the exact differences between a carousel its related patterns and going from there.

A very close relative of the carousel is the slideshow. A slideshow often features the same content transitions and it has almost identical navigational controls. Depending on how advanced your slideshow is, you'll have prev/next links, a set of links to show each separate entry and automatic rotation. The difference between these two patterns lies with the content itself. A slideshow is a decorative element or an element where the content (most likely images) has a logical relation to its contextual content. For example, if you're checking out hotel rooms you may find a slideshow showcasing various pictures of the interior design.

Then there are tabs. The link between tabs and carousels might not be as obvious at first, but apart from typical graphical implementations both patterns actually share a lot of common ground. Both patterns offer an economical way of offering plenty of content on a very limited space. Both patterns have similar navigational controls, though it must be noted that tabs never feature prev/next links. Also, tabs never auto-rotate. Very important differences right there. The inner content is also different. Tabs are used to section main content on a page in different logical groups and visualize them one by one.

So what does that tell us about carousels? For one, all elements within a carousel are from the same (repeatable) semantic content type. They can be traversed in either sequential or user-preferred order and serve as gateways to other sections within the site (or even content on external sites). Carousels are effectively displaying what I usually refer to as "focus blocks", promotional blocks for content you want your visitors to notice. This description differentiates the carousel from slideshows and tabs in an clear way. With that (admittedly concise) definition, we can finally go to work.

translating text to html

Now we know what a carousel really is, we can translate this information to a html pattern. You already know html is all about semantics and since we defined the carousel as a selection of focus blocks, it makes sense to see that return in our html pattern. To start of easy though, let's define the base component identifier:

This element will identify the component as being a carousel. If you go a little deeper we notice two important elements. First there are the navigational controls, then there is the content itself. This separation should be visible in the html, which translates to the following code:

The carousel navigation should be constructed like the other navigational elements on your site, so I won't go in further detail about that here. The content area is more interesting to explore. As I've said before, the content of a carousel is a list of focus blocks. Whether you use the actual list element is up to you (as you might have read elsewhere, everything can be a list so it's all about balance). I for one believe that a carousel is a clear summation of elements, so a ul/li construction is probably a fair option here:

If you want to go html5 you could opt to use the section element for each .focusBlock, though in that case I would drop the ul/li structure altogether. Also, the article element would be quite suitable as base element for our carousel pattern. And ideally, the inner html of the focus blocks should be identical to other focus blocks on your site.

One other thing to note is that there are some variations of focus blocks that can be found in carousels. Most carousels showcase one item at at time, but if you consider related products patterns you'll see that certain variations are essentially the same as carousels. They fit the description we established above, only the content itself is a more specific form of focus block (not just any content type but a related product). This variant can easily be defined by adding a second class on the base element, if you want more direct semantics you'll also need an extra "related" class on each focus block element in your carousel.

the finished html pattern

Putting all that together, we come to the following examples. The first example is using (x)html, a list and simple focus blocks.

The second example uses html5 for a related items carousel:

Further comments, additions and reservations are welcomed, some critical feedback never hurt anyone. That's what the comment section is for.

what's next?

Apart from working out the actual code, I hope this article also illustrates the process of writing semantic html and how components and design patterns play quite an important role when developing a piece of html code. There's more to it than simply slugging out some tags for a specific project in order to style and animate it.

There are so many functional and graphical carousel variations that it's hardly interesting to go through all of them, but there is one other aspect of a carousel that deserves some extra attention. Like all javascript components there is graceful degradation involved, so next time I'll be looking at different ways to handle this properly for a carousel. Stay tuned.