Scott Bush

If you’ve never had the pleasure of using a web application by 37signals… well, you should. My first introduction to them was Basecamp, a project-management tool that actually helps facilitate the project. They also offer tools for collaborative writing, information sharing, and customer-relationship management.

The reason I like Basecamp is because the site was clearly designed to work with the web browser. Rather than drowning under tons of images and page loads for every click, it employs a snappy interface relying on true interface design concepts like size, color, and hierarchy. The scriptaculous-style visual cues like fading colors and sliding elements provide a slickness that’s hard not to love.

I mention all that because 37signals recently posted a blog entry about why they don’t use Photoshop to mock-up their interfaces. In my job I’ve had to work with websites “built” by ad agencies in Photoshop and then sliced up into an image-laden table. 37signals’ entry outlines all the reasons why this approach doesn’t work well. To be clear, they’re mostly referring to interaction-heavy web applications rather than interaction-light brochure-style web sites of the sort I’ve been given to publish. But it’s so refreshing to read some of the reasons they present for not using Photoshop when I recall so clearly shaking my head saying “jeeze, why do people build sites in Photoshop?!” For example:

The text in Photoshop is not the text on the web. Once you’re looking at a static Photoshop mockup you can’t quickly change the text without going back into Photoshop, changing the text, saving the file, exporting it as a gif/png/jpg, etc. You can’t post it online and tell someone to “reload in 5 seconds” like you can when you quickly edit HTML. You have to say “Give me a few minutes…”. Also, type in Photoshop never seems to be the right size as type in HTML. It just never seems to feel the same. It doesn’t wrap the same, it doesn’t space out the same.

That’s the reason why, when asked to make changes on such a site, I mentally cringe and think about the time and frustration it’ll cause me to implement those changes. It’s a real mess, but to people just looking at the site it’s not readily apparent—it just looks like a pretty site. The next time this situation arises I’m going to give one of those Photoshop document-to-valid, semantic XHTML from it. Now that’s something I’d like to see.