Category Archives: Satire

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.

Great Works of Fiction Presents: The Mobile Context

I love fiction. UFOs, unicorns, faith healing, the Mobile Web, the Mobile Context, psychics. Speaking of which…

I’m sure many of you have heard of cold reading. Cold reading is one of many toolkits used by psychics to convince others (and often themselves) that they know more about a person than they actually do. One of the more well-known and obvious cold reading techniques is the use of simple, broad-stroke statistics. There are lots of people in the world named John. Chances are, if I looked you in the eye, contorted my face, feigned mind-agony and said, “I see a J. Someone in your life… James? John? Someone is having some serious financial trouble,” I’d have a good chance of being technically correct. And that’s not even a good read. But the thing that makes ruses like this work is that you, the user, are filling in the blanks for me. You search your brain and you find John. Or James. Oh you mean Jason, my cousin’s sister’s boyfriend, who does have financial trouble.” Two weeks later, you’ll swear I knew about Jason’s stolen credit card.

In the Mobile Context—you know, that magical fairy-tale place we go whenever we use the Web on our tablets or phones—users apparently don’t need to fill in the blanks. The People Who Make Websites make these decisions. In the Mobile Context, you see, people change. The slide lock on their phone transforms them into beings with different needs. And I use an Android phone, which means my needs are different than an iOS user, because the user experience is obviously not as important to me. Cough.

Cold reading happens in the Mobile Context. Some might find the above sarcasm a rehash of Mark Kirby’s wonderful mind reading assertion. But it’s not, because if I could really mind-read, I would really know what you’re thinking. But I don’t. So I’m not mind-reading, I’m cold reading. And you’re not able to fill in the blanks for me, because a web page is mostly a one-way thing. I can’t quickly change my story by watching your face for signs that I’m on the right track. So when I decide to make decisions for you, I’m potentially sabotaging the experience for the both of us.

So what do we Web-makers do? We infer things based on the device you’re using. And statistics. Analytics. Which means we’ll probably be right much of the time, or some of the time. But there is someone who is right all of the time when it comes to knowing which task a user wants to do in a given situation, even in pretend-universes like Mobile Context: the user, right? If I walk into a coffee shop where they also sell sandwiches, you might be wrong to assume I want a coffee. But if you ask me what I want, and I say, “I’d like a sandwich,” there’s a pretty decent chance that I want a sandwich, yes? And you didn’t get distracted by the fact that 87% of your clients order coffee. And the most beautiful part is this: you didn’t have to put up new menus and change the furniture because I’m a sandwich person. You just need to offer me the choice of a sandwich or a coffee and guess what? I’ll make the choice and order my sandwich.

At Mobilism this year I met Christiaan Lustig, a nice guy and web professional who’s doing a lot of research into responsive design related subjects. He recently wrote an article about top task analysis. The article was actually about many things and it seems so fair to each point of view that I may be missing a single defined argument, but prioritizing top tasks based on user’s needs seems to be the gist of the article. I can agree with that. However, the article also used some examples that really show some current industry thinking I strongly disagree with. Here’s an excerpt from an example about a bank site (go take a look) that just kills me:

“More than 50 per cent of their website visitors are on a mobile device. And 98 per cent of those users go directly to the online banking login.”

That means 49 per cent of all visitors go directly to the online banking login.[…]

First, take a minute to recover from the shock that a majority of banking customers actually plan to do some banking on a bank website. Then notice that we’re provided with only the mobile side of the statistics. 49 percent of all visitors is just plain wrong, unless none of the desktop users go directly to the banking login. We can’t learn from conclusions unless we know what led to them. What do the desktop users do on the site?

To be clear, I’m not criticizing the author of the article at all. I am criticizing the thinking and assumptions behind what many organizations are doing in and around content and responsive web design.

Looking at the screenshots next to the article’s bank example, you can’t help but agree with the author that the mobile rendering of the site seems to be more task oriented. But is that because desktop users really want stupid fluff over tasks? Or is the mobile version of the page the only one for which the Web People seriously considered the needs of the user? In other words, does content really need to change for a mobile context, or do we simply need better content all across the board? I bet the desktop site would be better if they just chucked it and used the “mobile” site for everything. Is the mobile view better because it’s better? Or is it simply better in contrast to a sucky desktop view with irrelevant content?

This example whittles existing content down to a small series of possible tasks on the mobile view. If these are all the tasks a user can do on the site, great. If not, why not? Is it cold in here? Is it cold reading in here?

Let me make a long story short: just make quality, relevant content with appropriate tasks, and offer all of these to all users, unless said content or functionality is dependent upon device capabilities (such as a camera). Then make it easy for the user to decide what it is they want to do. It’s like… web development all over again, isn’t it?

I really don’t see any reasons for the content of a page to change completely under any device-related circumstances. In fact, for purposes of clarity and findability, why not go out on a limb and actually use URLs to refer to specific content or functionality, instead of trying to morph homepage content into something different on a phone and hoping you get the assumptions right? example.com/login, example.com/plan, example.com/status. You’re allowed to have a page which simply contains the tasks and content it contains. Really, it’s okay. It’s responsive design; we’re not making shapeshifters.

Alter the design as you will. Visually, content order is most likely linear on phones, so you’ll account for that. Text size, link and button size, image (file) size… there are plenty of things to consider. Of course you might not be able to have that Really Important Canvas Animation. Of course you’ll want to be able to use some device capabilities like your phone’s camera if that’s available. That’s logical and fine. But if something is essential content, functionality, or common sense on all platforms and you’re only providing it on some, you’re doing it wrong, unless your site or app is unavailable on other platforms.

Users are ultimately the experts in deciding what they want to do on your site. Make it possible, make it easy, then get out of the way and let them fill in the blanks. They’ll attribute the good experience to you.

New HTML5 beer logo

Update: The W3C have updated their stance on this subject.

Finally, the moment we’ve all been waiting for: drinking beer is now part of HTML5! This puts drinking beer just ahead of cooking, and right alongside CSS3 as a “technology class” of HTML5.

HTML5 beer logo

Obviously, this means a lot for your expense reports while traveling, as the blob that is HTML5 slowly assimilates all of your activities, allowing you to claim you were working on web stuff the whole time.

To celebrate this milestone in web development, we here at the Haystack decided to step up and use Creative Commons to its full extent by giving beer the logo it deserves. The t-shirts are in the works, so stay tuned!

Background information

The HTML5 logo (excluding the beer) is licensed by the W3C under a CC-BY license.