Instead of a generic error message that told me the card was declined or couldn’t be accepted, I got this very specific error message that includes a detailed graphic. A graphic! What a pleasant failure message.

Backpack
CSS tip for customizing the appearance of Backpack pages
“You may sometimes wish you could modify the text on a page to fit a little more information on it. I have a page where I collect code snippets and terminal commands and the default font seems a bit large with so much content. Turns out there’s an easy solution to this: simply add a small amount of CSS to the page in the form of a note and you can change the formatting to meet your needs.”

Use Jott to transcribe a voice message and post it to your Backpack homepage
Jott converts your voice into emails, text messages, reminders, lists and appointments. You can even use it to transcribe a voice message and post it to your Backpack homepage.

Highrise
New Highrise Feature: Better contact filtering
We recently launched an improved contact filter in Highrise:

Multiple products
[Case Study] Trigger brings Los Angeles and Shanghai offices together with 37signals products
“The best feature of Highrise, though, is the little line that appears after I’ve added a note, reminding me to add a follow-up task. I can’t think of how many times that’s prompted me to set a reminder for myself or schedule a follow-up with a client. When we’re busy, it’s so easy to forget to set a ‘next action’ that having it built-in is a lifesaver.”

How to use Fluid to “create a kick ass intranet app using 37signals”
“Create a Kick Ass Intranet App using 37signals” explains how to use Open Bar and Fluid to create “a stylish intranet app that lives in your dock, complete with all of your 37signals services.”

Subscribe to the Product Blog RSS feed.

Problem is that the reverse is also often true. If you just put MBAs in place — or other professional managers without deep subject matter expertise — you’re equally unlikely to end up with an uninspiring business that fails to be passionate about the right things. To stay on the ball you need to know what’s a good pass and the best way to do that is to be able to make one yourself.

Many of my favorite companies are driven by people at the top who intimately know how things should be because they could make them so. The obvious example is the detail-oriented nature of Steve Jobs at Apple. But a few other examples I like are Ulrich Bez at Aston Martin who’s not only the CEO but also part of the company racing team at places like Le Mans. Or Thierry Nataf at Zenith who’s CEO and head designer of their luxury watches as well.

But what made me think about all this was Joel Spolsky’s tale of a technical review with Bill Gates back in the 90’s:

Bill Gates was amazingly technical, and he knew more about the details of his company’s software than most of the people who worked on those details day in and day out. He understood Variants and COM objects and IDispatch and why Automation is different than vtables—and why this might lead to dual interfaces. He worried about date and time functions. He didn’t meddle in software if he trusted the people who were working on it, but you couldn’t bullshit him for a minute because he was a programmer. A real, actual programmer.

For people who love what they do, whether that’s programming, design, designing watches, or building cars, that’s a great motivation to not grow your company too quickly. Enjoy the time when you can actually be a full participant in the actual activities themselves, rather than just managing them.

It’s worked really well so far too. But the last question in the original form was missing the mark:

We wanted to know how important the problem was and gauge the emotional state of the person writing to us. But this pulldown just didn’t cut it.

First off, it required too much reading for a pulldown menu. Who wants to process this much info when there’s a problem? Also bad: It’s a pulldown but the options aren’t mutually exclusive. Someone could very well be confused AND worried AND upset. This pulldown just muddies the waters.

So we decided to change it to an actual scale. 1 = not a big deal, 4 = I need help ASAP.

Much easier to process but it still wasn’t helping us learn whether or not this query was a top priority or not. Why? Because everyone’s problem is urgent.

For example, let’s say someone’s having trouble uploading a file. If they can’t figure out how to upload a file, they’ll say it’s urgent. If file uploading is broken, they’ll still say it’s urgent.

That’s no help to us. Of course, we’ll get back to them either way. But if file uploading is broken, we need to know that immediately so we can fix it. If it’s just confusing someone, that’s a different ballgame. We’ll still quickly resolve the issue, but it’s not a fire that has to be put out instantly.

We thought about adding in a radio button question that asked “Is something broken?” But we didn’t want to make the form any longer. (No one likes feeling interrogated while seeking help.)

So we went back to the drawing board and came up with this solution:

This gets at what we really want to know here: What kind of problem is this? We lost the subjective nature of the original “give us your emotional state” question and replaced it with a clear question with a clear answer. It’s better to ask for facts than emotions.

Now, if something’s broken, we can spot it and fix it right away. A system failure is much more important to us (and our customers) than a feature request or general feedback. This method lets us prioritize these queries accordingly, instead of treating them like they’re all the same.

Related: Copywriting is Interface Design [Getting Real]

The Chicago Reader was also at SEED 3 and published this profile: “How to Make Money on the Internet: Do what you love, and other tips from the Web cowboys at the Seed Conference.” Includes this great quote from Gary V:

Don’t quit your job to become the queen of cheese. But if you’re doing something that blows and you hate it, go work at 7-Eleven to pay your bills and spend every other hour building your personal plan. If you work 9 AM to 6 PM and get home at 7, whatever you put in between 7 and 3 AM is what you’re gonna get in return. You want to watch Lost? Knock yourself out. I don’t watch shit. I don’t read shit. I’m all about my community and putting out content. I don’t consume. I put out.

Related: Mike Rohde’s SEED Conference 2007 sketchbook notes [SvN]

This is the template code that calls the helper method.

<% people_without_access_from(company).each do |person| %>
  <%= add_person_to_project_check_box(person, company) %>
<% end %>

Next I pulled up the helper method to see if it really is responsible for producing a chunk of HTML with the label and checkbox.

def add_person_to_project_check_box(person, company)
  content_tag(:label, 
    check_box_tag("people_ids[]", person.id, false, { :class => "company_#{company.id}_person" }) +
    " " + person.name
  ) + tag(:br)
end

Yup, it’s generating the HTML. Right away this smells bad to me. The helper is first generating a label tag. Inside that label, there is a checkbox followed by a space character and the person’s name. Finally a break is appended after the label. This smells bad for two reasons. First, it’s just not so nice for helpers to cook out HTML when they don’t have a good reason to. Second, it’s harder to locate and change HTML when it’s hidden inside a helper.

Returning to my original goal, I wanted to add a class name to the label around this checkbox. If I add the class name to the existing helper, it’s going to get even more messy and complicated because I have to give content_tag an attribute with the class name I want. It would look like this:

def add_person_to_project_check_box(person, company)
  content_tag(:label, 
    (check_box_tag("people_ids[]", person.id, false, { :class => "company_#{company.id}_person" }) +
    " " + person.name
    ), :class => 'checkbox') + tag(:br)
end

To find a better solution, we should rethink what the helper should be responsible for. Helpers are useful when they hide complexity that isn’t relevant to the template. Looking at this helper method, I see that it’s useful to hide away check_box_tag with all those params. But the label, the break, and even the person’s name could all be in the HTML and the template would be clearer. Let’s do that.

Here’s the new helper. Now it only produces the checkbox.

def add_person_to_project_check_box(person, company)
  check_box_tag("people_ids[]", person.id, false, { :class => "company_#{company.id}_person" })
end

And here’s the updated template code, with the label, person name, and break moved over.

<% people_without_access_from(company).each do |person| %>
  <label class="checkbox">
    <%= add_person_to_project_check_box(person, company) %> <%= person.name %>
  </label><br />
<% end %>

Now that’s a lot easier to read. Generally speaking, it’s a good idea to keep your HTML in your templates and out of your helpers. Helpers are useful when they hide implementation details that are irrelevant to your template, or when they allow you to abstract common template code to avoid repetition. If you find yourself generating a lot of HTML in a helper, think twice and try to keep as much HTML in your template as possible.

Great quote. From the book Small Giants: Companies That Choose to Be Great Instead of Big. More about the book:

It’s a widely accepted axiom of business that great companies grow their revenues and profits year after year. Yet quietly, under the radar, some entrepreneurs have rejected the pressure of endless growth to focus on more satisfying business goals. Goals like being great at what they do . . . creating a great place to work . . . provid-ing great customer service . . . making great contributions to their communities . . . and finding great ways to lead their lives.

In Small Giants, veteran journalist Bo Burlingham takes us deep inside fourteen remarkable privately held companies, in widely varying industries across the country, that have chosen to march to their own drummer. He searches for the magic ingredients that give these companies their unique “mojo” and the lessons we can learn from them.

Related: Danny Meyer: Hospitality is king [SvN]

But it’s really so much more than that. Take his museum of gauge clusters:

Or his obsessive collection of brand emblems:

If you dig cars, you really outta check out the new Cartype.

The site is about books and their connections. Each post references one or more books and the referenced books are aggregated in the right-hand sidebar. When you hover over a book title, the crisp tiny type is immediately enveloped in a big cozy hover block.

I particularly like how the hover reinforces the column dimensions. It’s a sudden punch of structure to the otherwise airy layout.

(Found via JSM’s oddities)