CSS media queries are about the coolest thing to come along in a long time. What are they? Simple, really. Snippets of CSS code that sniff the browser width and adjust what's presented in real-time. If you have a huge browser window, the site is displayed as it was originally designed. As you resize your browser and make it smaller, or you are using an iPad or even an iPhone, the existing content re-arranges.

Take a look at the set of images above. On the far right is the site as it was originally designed. As the browser gets smaller (left) on all the way down to the very narrow mobile version (far left) you'll see some of the content has dropped off. This is not a bad thing! This just respects the smaller browser window and optimizes the experience. Great stuff!

In other words, you really don't have to create a "mobile-friendly" site per se, you can just present what you have in a mobile-optimized way.

Frankly it's quite fun to resize these sites down and see what they think are important, and what is getting dropped off.

Try it on hundreds of examples which can be found at the Media Queries showcase site.

Why do Denmark, Netherlands, the UK and Germany have such small organ donor rates? It turns out it has to do with the organ donor form. For the countries with low donor rates, the form says this:

This requires an active decision to join the program. You  have to opt-in. By doing nothing, you opt-out. Even though you are dead, and don't need your body anymore or your organs, very few people ever check that box. The only reason the Netherlands got 28% was the government sent a letter to every single driver, begging them to donate their organs.

Now, how about Austria, Belgium, France, Hungary, etc? How come they have nearly 100% donor rates? Take a look at what their organ donor form says:

See that? If you take no action, you are enrolled in the program! You opt-in by doing nothing. Sneaky and clever? Probably not. It's just human behavior. By taking no action - making no decision - we've made one. And that's less complicated, taxing, and mentally straining.

People don't check either box.

So as a result, try changing your forms so that by taking no action, that's the action you want them to take.

Source: Dan Ariely, 2008

When I was at B&H Photo years ago, there were lots of bugs and clunky behavior to the website. We did our best to prioritize and squash these annoyances, but there are still plenty today. However, sales were always consistently high and the company does an astounding business online. More curious is that there are a million other places to buy a digital camera.

It doesn't make sense. What's going on?

At Artspace.com, where I am now, we also have our share of site quirks we're working through, yet that doesn't seem to stop people from purchasing $6,000 paintings. People are successfully searching and finding works, adding them to their cart and checking out.

I wonder if, as a UX geek, I underestimate customer's emotional attachments to products they really want. Sure, the search results page might be a tad clunky or not work quite right and it might annoy the heck out of you. Or after you sign in, everything in your shopping cart disappears.

But if you really want your $4,300 Canon 5D Mark III or your $36,000 Stephen Westfall artwork, does a few shopping cart bugs really matter? Do people expect things to be buggy anyway? Where's the threshold between when annoyances actually drive away sales of premium or rare items? Is there such a thing?

In the case of Artspace.com, you can't buy a lot of artwork elsewhere - it's exclusive. What do you do if you don't like the experience? What about airlines? If you hate flying on ABC Airline but they're the only one that goes there, do you drive instead or put up with them?

I do wonder how many borderline cases where impatience with bad UX actually causes customers to lose interest in an item altogether. And is the opposite true? Does really great UX enable people to purchase things they're not so sure of, but because its so dang easy, they do?

I'm dying to know the answers to these questions.

Until then, I'll keep doing the best I can to design awesome user experiences and interfaces. Period. Removing all barriers and frustrations from the e-commerce experience is the least we can do for customers!

Frame Selection

When selecting the size of a work via a radio button, the frame selection slides smoothly into view. The white frame is default by business requirement. As a customer, you can select any other frame color, or no frame at all. Here's a screenshot but it's better to see it in action.

Note that when you are selecting a frame, you don't just have to click the radio button; the entire area is clickable. These padded links and the reasoning behind this is best explained by the good folks at 37 Signals. If you select Print Only, you'll see the arrow slide over to that price and highlight it. So you're given a lot of reinforcement to your actions.You'll also see a slight gray background on the selected item.

Selecting other sizes gives the same experience - mostly. Some works don't have framing at all, or not for certain sizes.

In later versions of this, I'd like to style the radio buttons, fix the positioning of the arrow (and the arrow size) but overall, I'm quite happy with this, and it tested very, very well.

Facets

One of the holy grails of e-commerce, faceted search or filters are the ability for customers to select only items that are available. For instance, if I search for D" on B&H Photo,  there would be facets like Canon (11), Nikon (8), meaning there are 11 and 8 cameras from those two brands. Further attributes can be filtered on, things like megapixels, screen size, etc. It's a powerful way to shop.

So at Artspace, facets for artwork was something we were interested in. However, it's not easy. Artworks are not cameras. There's only a handful of attributes. So we start small with the basics. And here it is:

You'll notice I put the Color Selector behind a click. When I tested the original version, which had the colors exposed, I noticed the eyes of testers would head straight for that color selector, likely because it was so bright and colorful against the gray background. Since color selection isn't perfect nor is it the primary reason we want people faceting, I added a step in front. So if you want to use color facets, you can, but if you don't, you won't be distracted by them. After this was done I tested again, and it was a vast improvement.

One user task was to "show only paintings with red" and testers completed that task in seconds.

But what if you don't want to facet on anything? And don't want this thing in your way? Well, you can get rid of it, by collapsing it. And you can bring it back easy by expanding it.

Well, enough talk! Go see it in action. It's not without a few hiccups and a handful of bugs here and there. But for a two-week sprint's worth of work, it's pretty good!

Enjoy.

Once in a while I'll be lucky enough to hang out with him and this was an especially fun trip. Of course, it was all on the block I live, so that made it all the more fun for me.

I love how Marty builds a story with snapshots and captions. Come along on our trip to Tompkins Square Bagels and Hifi bar.

Per EV Grieve: "According to the FBI, 28-year-old Hector Xavier Monsegur, an unemployed computer programmer and father of two children, is Sabu, "the head of LulzSec, and the de facto King of Anonymous — easily the most notorious and influential hacker alive today."

Wow. This is absolutely huge, stunning news.

Luckily, I got a job at the Faculty Research Center of University Computing Services, and was at ground zero of a high-tech lab that was allowed to try anything new. Anything. And this WWW stuff was really new, and really exciting.

Gopher was cool, but Mosaic was cooler.

Dr. Rashidi mentored me through the next few years as we embarked upon a fantastic journey of web servers, httpd, Mosaic web browsers, Marc Andreeson, NCSA, Netscape web browsers, Sun Sparc 5 Workstations, Winsock protocols, Solaris, NeXT, and a whole host of other highly technical things that 99.99% of people dismissed.

This was when Yahoo was still a project at Stanford. Google (Googol) was still a word that meant (1) followed by (100) zeroes. Mark Zuckerberg was only 8 years old.

The "world wide what?" people would say as I told them what I was working on. Ha! Boy I wish I had those conversations video taped.

But three years later, in 1995, people like Jeff Bezos realized it was going to be big. Really big.

Perhaps so did Phil Alden Robinson, a writer/director who released a fairly obscure 1992 movie called Sneakers. It's one of my very favorite films, especially for this line of dialog:

The world isn't run by weapons any more, or energy or money. It's run by little ones and zeros, little bits of data - it's all just electrons. There's a war out there old friend, a world war. And its not about who's got the most bullets, it's about who controls the information, what we see and hear, how we work, how we think. It's all about the information.

While he could be talking about media, he's actually talking about computer networks. Email. Web. Facebook. Google. Twitter.

As you can imagine, Phil's prediction turned to be quite correct. Eerily correct. It's all about who controls the information.

In this clip from Sneakers, Robert Redford (Marty) finds an experimental electronic device that can hack into any system by quickly rendering any encryption useless. Ben Kingsley (Cosmo) wants the device for himself. They then discuss the power of who controls the information...