Carousel-Based Web Design

It’s time to stop this ridiculous talk about semantics, multi-platform, accessibility and universal web bullshit and start talking about… carousels. That’s right. Carousels.

No one actually expected a new solution to the problems of stakeholder pacification and attention-grabification after the untimely demise of blink and marquee, but we certainly found it. The carousel. Beautiful. Dynamic. There’s no getting around the carousel. It’s here to stay. Let’s talk about why.

Departments, stakeholders, and the push mentality

You can blah blah blah all you want, but the only responsible way to make every single stakeholder happy is to put all of their stuff on the home page, and do you really want to make the home page that big? No way in hell. The answer is, as you might have guessed: a carousel. Works just as well for three departments as for 15. All of these stakeholders get their Very Important Information on the home page.

That said, you can’t simply create a normal carousel and call it a day. Forward-thinking web developers always write some kind of algorithm to make sure that each department gets the proper amount of “first views” on the carousel. Stop the Math.random madness before it gets out of hand.

Sites need movement

This isn’t 1996. With billions of sites that the user is not looking at while they’re looking at yours by choice without any goals in their mind whatsoever, we need to use movement to turn their attention to the things they’re not looking for. And what better way to do that than use some kind of jQuery plugin. Experienced developers choose a plugin that will slow the page down a bit, giving users time to read the stuff in the carousel. All that bullshit about performance simply makes it harder for users to read the copy that people painstakingly write to fill the same amount of characters that was in the design’s Lorem Ipsum.

Good design has movement, which makes it “dynamic”. All clients want a dynamic site, since dynamic is the opposite of static. When you think about it, this makes perfect sense. Without light, there is no dark.

What the critics say

Some (ignorant) critics will say that users don’t want to sit there and wait to see the next item in the carousel. This is, well, just plain stupidity. Obviously, that’s why we have those little dots in there, but the skeptics fail to notice the thought that has gone into that.

And to those who say that those dots only tell us how many items there are but nothing about the content, forcing users to click on each one, well… isn’t that the whole point? We are the ninjas of the user experience, the conjurors of marketing. We are leading the users into the experience we want them to have.

At the end of the day, users don’t just want to get the information they want. They want an experience. We know this because we present statistics in such a way that they support our opinions on these matters. It’s called research, and you can’t argue with research.

Carousels save money

Let’s face facts: carousels are easy to make because the Not Invented Here syndrome means that we have 12,347 different carousel options to choose from, depending on the size of dots we want and if they are presented horizontally or vertically. Almost all of these are free to use, so we can charge our clients for implementation. They are okay with these charges because of the value the carousel brings to the project. Carousels allow us to present all of the content the client wants to present, which saves the client money because they no longer need a content strategist.

The mobile problem

The whole idea that carousels might be a problem on mobile is debatable. On the other hand, we know based on factual guesswork that mobile users (as opposed to desktop users) prefer to get straight to the information they need, so we can simply use browser detection and use display:none for carousels on mobile devices. Mobile users are in a hurry and need information, not entertainment, so in this case, CSS is our friend. Stakeholders accept this, and are usually willing to accept hiding carousels, although as mobile browsers become more capable, we might consider supporting more of them.

Use carousels for the serious stuff

If we want to do things right, we need to start putting other content into carousels as well. As we say in the industry, “carousels are the new tabs”. Why not put sections of the main content into carousels? And yes, I will even go so far as to suggest that navigation be placed a carousel. We need to encourage users to really think about what information they need. Seeing “Products” for a few seconds before seeing “About Us” really gives them the opportunity to think about their navigational choices. Seriously, our world’s fast enough as it is. Give the users some time to think, for goodness’ sake.

In conclusion

In summary, this approach, which we’ll call CBWD (Carousel-Based Web Design) for easy remembering, can help you please your clients by giving them more opportunity for publishing trivial content in less space. It will save money by eliminating tiresome considerations like content relevance and importance, accessibility (oh man talk about time-consuming), and website performance (as trendy and overrated as the whole “standards” thing, which has made it almost impossible to sell good Flash intros nowadays).

Be sure to follow us on Twitter, and check out our GitHub repo for the newest code. A one-page site with a cute logo of a cartoon animal and the text npm install cbwd in a low-vision user font is coming soon. CBWD is node.js based but we’ve got ports in ruby, python, even C++ and SWI Prolog. Proudly using Sass, Compass, Grunt, Yeoman, Angular.js, offered as a Flask, Django, or Rails app, with some Ember.js, D3, and we’re using HTML5 localStorage instead of cookies to store carousel view user info. All of this is packed into a fork of Bootstrap weighing a tiny 6MB (minified, gzipped and microwaved).

Enjoy!

(2013-09-22) Just to be on the safe side: This article is sarcasm. I do not advocate using carousels. Read that again. It pains me to have to point out what I think is obvious, but English is not everyone’s first language, and my sense of humor is hit-or-miss on some people. The last thing we want is for this post to land in someone’s web design curriculum. Now relax and have a nice day.