About six months ago I moved out of my suburban house and into an apartment in a 35 story building in downtown Dallas. This of course necessitated the use of an elevator 5-6 times a day to walk the dog, go to lunch, meetings, etc. Any time I need to go anywhere, the trip starts with an elevator. It’s a typical elevator, lots of round buttons for the floors, buttons for opening and closing the door, etc. It’s pretty much just like every other elevator I’ve ever used, but something about using it all the time has made me realize how poorly designed elevators are in terms of interface, particularly this one. More

Dave McClure at Business Week recently published an article about the value of design to startups, in which I thought he made some good points about how important designers and marketers are to the success of startups and applications. Predictably, this didn’t sit so well with developers like Steve at Big Dumb Dev, whose sarcastic response mockingly fails to think of a single startup where design trumped development. As is so often the case, I think the answer lies somewhere in between.

I disagree with Steve that the success of many/all startups was due to stunning technical achievement. While that’s important, and indeed at the heart of many startups, I think design is too often taken for granted. Perhaps I’m a bit bias being a designer myself, but nobody would want to use your awesome new app if there wasn’t a designer on the front end designing a quality UI. In the case where developers are left to their own devices, usually the app is ugly and unusable. Google as the example of a company that doesn’t need designers or marketers is disingenuous. Google is really a case where they are successful despite poor UI/UX design simply because they are reliable and free. Google Analytics, for example, has serious usability problems and a pretty steep learning curve, but it’s popular because it’s free. If it were not free, it would have a big vulnerability from a competitor who invested in a good UX designer, and it’s one of the reasons John P over at Woopra has a business that can compete with free.

Lets look at Flickr as another example. There’s nothing technically amazing about a photo sharing site (I’m sure there are some achievements in there for scaling and performance, but those apply to any large app), and Flickr wasn’t the first. What made Flickr work was design and marketing. It was EASY, you could make friends and comment on photos, and the result was a social network around a hobby. You wouldn’t need a team of MIT grads to build Flickr, but you would need a team of designers driving product development, making careful decisions about whats needed and whats not, where everything on the site goes, what the interface elements are, etc. Those are key advantages Flickr has over other photo sharing sites, and it’s why Flickr actually makes money while other sites struggle to attract members for a free service.

I’m currently working on a startup myself, 1FTP, where we’re rethinking how we can use FTP connections. FTP has been around forever, and has become a commodity, but it has a tender soft underbelly when it comes to usability because the only people who have been working on FTP products to date are developers. We have an awesome developer on our team, but technical achievement isn’t what’s needed to make a better FTP service. What’s needed is to make FTP simpler, easier, and idiot proof. It should be something that is natural to use, not something we loathe to use. Anyone who’s tried to walk an FTP newbie through the process of connecting to a server over the phone will understand where the difficulty is. The 1FTP team is 1 developer, 2 designers, and that ratio reflects the needs of the product.

I think it’s only natural for everyone on a team to view themselves as indispensable, and that is often the case. Design and marketing alone won’t take 1FTP anywhere without a developer. But in today’s market the inverse is also true – development alone is not enough to make a product people want to use, and designers are a critical part of a product’s success. If you’re building a startup for consumers it’s essential to make an investment in a good UI designer, and the earlier you bring them into the process the better.

This is a story of what not to do on the internet. It’s a story of theft, of law suits, of a community coming together to fight a common foe. It’s a story that I thought was over years ago (2006 is ancient history in internet time). It may yet turn out to be a story of forgiveness. But before we get to the story, let me share with you the email that prompted this post:

Brian,

My name is [Kevin C].  A few years ago you posted a photo about me stealing photos on the internet. I am looking for you to delete the photo on flickr:

(link withheld, here's a screenshot)

What I did was extremely wrong and I was able to apologize to the other photographers and mend fences a week after the incident happened. I was younger at that time and much more immature than I am now after a few years.  I’m not a photographer by any means – in fact I sold my last camera last year and have no intention of doing any photography work in the future.

However, the internet is not as forgiving and that image has sat at the top of Google results for my name for at least four years.  In this time I have struggled to find adequate employment and do simple things like form new friendships with people in fear of them finding out my last name.   It has been mentally draining on my psyche to say the least.

In 2010, I am looking to get a new start in life and looking for a second chance.  I am asking for you to look into your heart and help me move forward in my life.  This will give me greater peace of mind and help with future employment opportunities which will lead me to live a meaningful and fulfilling life which is what I want more than anything.

Thank you for your time and consideration, please write me back when you get a chance.

- [Kevin C]

It’s a very nice letter, and a lot nicer than what some of my photographer friends received from him when they blogged about him stealing their work in 2006. Back then he had a lawyer send them letters threatening a defamation lawsuit if they didn’t take down posts showing that he had stolen their photos. Of course they wisely responded by posting the threatening letters, resulting in a flood of attention to the matter that spread over the internet in dozens of blogs (see: Streisand effect).

Kevin felt the full wrath of the internet, and rightly so. He was blatantly taking credit for work he did not do, and then had the balls to sue those who called him on it. I commented at the time that this mistake would haunt him forever, and he’d likely have to legally change his name if he ever wanted to work in the creative industry. Looks like I was right, because here we are 4 years later and he’s still trying to recover.

Kevin’s email this morning asking me to help him put all this behind him stirred up a mix of feelings for me. One the one hand, I am not sure the punishment of a scarlet letter for the rest of his life is fair. We were all young and stupid once. I was actually guilty of plagiarism when I was young as well, but  fortunately for me I learned my lesson in third grade, not in college.

On the other hand, he really should have known better. He wasn’t in the third grade, he was an adult, and should have the foresight of consequences. It was a real dick move, compounded by the fact that he stole from really high profile people with really high profile friends. By all standards he deserves to have a hard time finding work in a field where this sort of thing is not just embarrassing, but potentially a multi-million dollar liability for an employer.

Crime and punishment on the internet is a strange thing. There’s no judge, no sentence, no debt to repay. You’re judged by everyone, perpetually, forever.

Crime and punishment on the internet is a strange thing. There’s no judge, no sentence, no debt to repay. You’re judged by everyone, perpetually, forever. I don’t think that’s really a good thing. Maybe Kevin deserves the consequences he’s served in the last 4 years, but does he deserve them in the next 4? Or 40?
So I still haven’t figured out what I’m going to do with my little piece of his sins. I’m not sure it should be entirely up to me. His punishment was doled out by the community, perhaps the community should be involved in lifting it.

So what do we think, viewers? Should Kevin get a fresh start, or should the scars of lessons learned remain as a reminder and as a warning to others? Sound off in the comments.

(Please note that I have withheld Kevin’s full name in the hope that this post will not add anything more about him to Google. If you know his full name, please just keep it to first name only in the comments. I’ll edit it if you don’t)

While Microsoft has been making great improvements on the web standards front in IE, they’ve been seemingly rolling backwards with HTML support in Outlook. For the 2007 version they switched from the IE rendering engine to the Word engine (apparently for security reasons), which is completely crippled compared to IE. For anyone who does email marketing and designs and codes attractive HTML emails, this decision has no doubt had you shaking your fist and cursing Bill Gates’ mother.

We were all hoping that for the upcoming Outlook 2010 release Microsoft would go back to IE, but they have announced that they are sticking with Word. The pitchforks and torches are waving, but it looks like we’ll be dealing with the Word engine for emails for many years. Even if they switch to IE for 2012, we’ll have clients using 2007 and 2010 for years. So if you haven’t yet learned the ins and outs of designing emails for Outlook, now’s the time to learn!

Forget all your best practices for CSS – go back to 2001 coding practices for an idea of where your head should be.

Mural does a lot of HTML email work for some of our bread and butter clients, and we literally have thousands of campaigns in our archive dating back many years, so we have a lot of experience testing for lots of different clients and learning the various techniques needed for each. With Outlook 2007 we have our most challenging client, and in general if your email works well in Outlook it’s probably working well everywhere.

Limitations

The first thing you need to understand when designing and coding for Outlook is that the usual rules do not apply. Forget all your best practices for CSS – go back to 2001 coding practices for an idea of where your head should be. Note that some of these things might work in Outlook, but I advise against them because in my experience they do not work consistently, and it’s embarrassing to get an email back from your client asking why it broke when they sent it, so just trust me.

General “best practices” for Outlook 2007:

• Forget about separating content from design with CSS. Build your emails with tables and spacer gifs. No divs. See example below…
• No background images, only background colors. If you want to have HTML text over an image area, you’ll have to make the area behind it a solid color so you can slice it out of the layout.
• You can use basic styles, but use them inline attached to each tag, not in the header. Don’t get fancy – a lot of what works in a browser will not work in Outlook.
• Don’t use padding, only margins. Padding does not work properly.
• Keep your code as simple as possible.
• Optimize your email for ‘images off’ mode, which is likely to be default for your recipients. If you don’t define a height for images, they’ll collapse vertically, moving your text content up. Do specify width though.

Lets take a look at a sample email:

View the HTML version for code.

Lets take a look at the first paragraph of HTML text for an example of how the email should be coded for outlook.

<tr>
<td ”20″>
<img src="/img/spacer.gif"> </td>
<td bgcolor=”#ffffff” ”530″>
<p style=”font: 14px/20px Arial, Helvetica, sans-serif; color: #002765; margin-bottom:10px;”>
<strong>Budgets are tight, yet your customers’ demands for high performance from your online service are growing.</strong> The good news is that you don’t need to spend a lot of money to make your web applications faster&hellip; if you know where to look!</p>
</td>
<td ”20″>
<img src="/img/spacer.gif"> </td>
</tr>

Note that we’re using tables to define the layout, not css, and we’re reinforcing cells with spacer gifs. All the styling is attached inline to the individual <p> tag itself, and not as a global p. Also note that we’re controlling vertical space with margins, not padding.

While many web designers and coders frown on tools like Dreamweaver for not providing accurate design modes for advanced CSS, Dreamweaver is actually a really good tool for emails, and can display them quite accurately. It was originally designed for building websites before the semantic web was popular, so it does old-school well. It definitely helps when building tables, so don’t be afraid to use it.

Testing your emails

There are three ways to test your emails: Sending it to yourself on a lot of different computers and clients, using a testing service like Litmus, and the ‘send page as email’ trick (Windows/IE only). While I don’t really recommend the former for practical reasons, the latter two are essential.

If you’re  using windows and have Outlook on your machine, the quick and dirty way to test is to open your email in IE, and then go to File > Send > Page by email. This will open a new Outlook email and insert the code faithfully into it. Don’t trust the compose view though, send it to yourself, and then you can see how it will appear when it arrives.

If you’re a Mac user, that will not work for you, and you’ll probably want to use a browser testing service that includes email testing. We use Litmus, which lets you test emails in a dozen web and desktop clients to ensure that it works properly. It also lets you test things like the fold, and turning images on and off. It’s expensive, but if you do this a lot it’s worthwhile. HTML clients can have even more compatibility issues than their browser counterparts, and can require just as much testing.

Certainly this is not an exhaustive article about all the ins and outs of Outlook emails, but it should give you a good working foundation. Like anything on the web, you’re bound to find more quirks, but following the guidelines here should get you 90% there.

Never underestimate the creativity of your customers. You may think you have a great product, but don’t get married to your intended purpose for it. It’s quite possible that customers will find alternative uses you may not have even thought of, maybe even better uses. If you’re launching a new product, particularly a web app, be prepared to adapt it to the way your customers actually use it, and not necessarily the way you designed it.

Original sketch of what would become Twitter

The most recent, and high profile example of this is Twitter. Twitter was originally designed as a “what are you doing/thinking/status” feed for friends. 140 character limits forced you to keep it short and sweet, and post more often. At first, this is how people used it, but after a while we all grew bored reading about how so and so was heading to the mall, or feeling a bit down today, or enjoying the rain.

Looking at twitter today, I think celebrities are the only ones left posting the mundane details of their daily activities. The rest of us have re-purposed Twitter for other uses. We have conversations, we share the latest news with shortened URLs, we plug our latest blog posts and company announcements, and then we ‘retweet’ anything we think our followers would think is interesting. Twitter is being used as a gauge for measuring hot topics, and for insight into consumer opinion and behavior. Brands are engaging with customers, providing technical support, hawking their wares, and turning their customer service reps loose. Then there are those who use Twitter as an alternative to RSS. And on the dark side, some users are trying to establish a Twitter beachhead for their “make money from home” affiliate businesses.

The reason there isn’t a plan for monetizing Twitter is that the primary use of Twitter has not really been established yet – it’s in constant flux.

Twitter has done a good job at adapting to these new uses. They have adopted the @user nomenclature for mentions, added top 10 trending lists, and opened up an API for data mining, spawning a whole industry of satellite businesses built around the information in the Twitter network. A new Twitter app shows up about every 3 days. Twitter would be nowhere if they had insisted that their service just be used for stream of conscious updates from teenagers.

At Mural, we’re close to officially launching a new site called CloudProfile, with sister company SMBLive. We’ve designed it with a specific purpose in mind – connecting small businesses with customers on the web, and in particular with social networks. But we’re already thinking of alternative uses, just for ourselves. Instead of setting up a central company blog, for example, we’re planning to simply give every employee their own CloudProfile, and then setting up a page on our site that aggregates the collective wisdom of all of our employees. It means everyone is connected to their own networks, as well as the corporate network, and upkeep of the blog doesn’t fall to one person or become a laborious task.

I love the idea of building tools that can be used in a myriad of new ways, and can’t wait to see what the world does with CloudProfile. As you build your apps, make sure that you’re building tools that empower users, not restrict them. Don’t spend forever building the perfect feature-complete app, but get an initial version out early and watch what people do with it. It may be used in ways you didn’t expect, and you should be nimble enough to assign development resources to supporting those unexpected uses. Connect your users together so they can share how they use it and allow good ideas to spread. The more uses your app has, the more valuable it becomes to more customers, so embrace it!

The web is abuzz lately with mounting campaigns against IE6. Web designers and producers have been moaning about it for years, but the reality has been that 20%+ of internet users have still used the old browser, avoiding the upgrade to 7 for whatever reason. There’s a reason it’s stuck around so long, even now, 8 years later, and a twitter campaign is not going to kill it. I do have a suggestion for easing development pain, though, and ultimately ending the bane of IE6.

"IE6 Must Die"

Before we can kill IE6, we need to understand why it’s still alive. Your mother already upgraded, she’s not the problem anymore. The problem is IT managers at really big companies. For the sake of personification, we’ll call them ‘Chet.’ Many years ago when IE6 was released, Microsoft added a lot of proprietary features that turned the browser into a development platform. Netscape had been defeated, and IE had over 90% browsershare. A lot of IT departments took great advantage of this, building custom software for their companies, intranets, and so on. But then we had a bit of a revolution on the internet – a huge shift toward open source and standards based development practices that would work across all browsers. The rise of alternative browsers like Firefox and Safari has fueled this trend, forcing developers to take other browsers into consideration. Even Microsoft has joined the game, abandoning their proprietary code in favor of standards.

The remaining IE6 users are not voluntary IE6 users, but shackled IE6 users. Thanks, Chet.

Unfortunately, Chet has been a bit oblivious to this trend. Chet is old-school, and he expects the software that his team developed to last a long time. It’s expensive to rebuild these things, especially after they have years of additional code stacked on top of them. Chet wasn’t really forward looking, and didn’t expect the browser world to leave him behind. No problem though – as long as we mandate IE6 for all users in the company and never upgrade, nothing breaks. Nice thinking, Chet.

I have first hand experience with these companies, and there’s more of them than you think. And they’re really big ones,  with tens of thousands of employees, all using outdated legacy software built on top of archaic software, virtualized and VPN’d. The remaining IE6 users are not voluntary IE6 users, but shackled IE6 users (as Digg recently discovered). Thanks, Chet.

So what can we do about it?

At Mural, we would love to drop support for IE6, but when your clients are companies where Chet works, you can’t build a site for them that nobody at their office can use. I was working on a proposal today in fact for a certain giant internet retailer, and of course we get to estimating production and have to start thinking about how much time we expect we’ll need for IE6 debugging. We had been toying with the idea of leaving IE6 out of our SOW, thinking that the main audience for this site probably would be on IE7 or greater. But instead of just leaving it out and having the inevitable conversation about it later when they insist they need it, we decided to take another approach: make it a line item.

Instead of a line item for all development/production, make another line item for ‘legacy IE6 compatibility.’… For clients, it forces them to consider exactly how much that 5-10% is worth.

The reason most clients insist they want their sites to cater to the remaining 5-10% of users using IE6 is that they don’t really know how much development time that adds to their project. So make it real for them. Instead of a line item for all development/production, make another line item for ‘legacy IE6 compatibility.’ If you’re anything like us, that line item probably adds 30% or more to the cost. For clients, it forces them to consider exactly how much that 5-10% is worth. More importantly, it creates awareness inside those companies that Chet is costing them money, and is going to continue to cost them money as long as his systems are dependent on IE6. It helps build an ROI case for updating their systems.

So complain all you want on blogs. Add an anti-IE icon to  your twitter avatar. But if you really want to help make a difference in the campaign against IE6, it’s up to you (agencies, designers, developers) to make the case to your clients to move forward, and it’s up to you (clients and employees at large companies) to go tell Chet how much he’s costing you.

Update: TechCrunch points out a new campaign pointed at IT managers, Hey IT!