Much like Roger Johansson, I don’t like getting HTML emails. They don’t show well in Gmail, which I use exclusively, and often are buggy and spam-related.

Recently, though, a simpledream client asked me to design an HTML email for their monthly newsletters. At first it seemed to be an easy task , but the further the project went the more complicated it became. “HTML emails shouldn’t be this tough”, I was heard muttering as I tried my first efforts. As I found out, they are not difficult but do require some careful coding and attention to detail. Testing is also essential to make sure that the major email software programs are treating the HTML design well.

First of all, there are lots of different email programs (Hotmail, Outlook, AOL, etc) and they all render HTML emails differently. Some respect your HTML code, others like to strip off certain important tags. To add complexity to the problem, I was bent on using Cascading Style Sheets for the presentation even though I knew from experience that a table would have to be used as the layout container. Email software support for CSS is even more spotty than its support for HTML rendering. I also wanted the design to match the online version that was already formatted with CSS.

After some initial frustration, I went to Google to find out how other designers were dealing with the problem. I didn’t find very many articles, to be honest. One great article was on A List Apart: CSS and Email, Kissing in a Tree by Mark Wyner. This is a good start if you are thinking of designing HTML emails with CSS. Mark explained a lot of CSS issues, which was nice. He also wrote another article recently that is worth reading: Optimizing CSS presentation in HTML emails. Another good resource was on Site Point: How To Code HTML Email Newsletters. It offered practical advice on improving HTML email delivery and also had some sample code that was very useful.

All in all, HTML emails are worth doing well if you are asked to. By using the tips and tricks in the above articles I was able to get a reasonably good-looking HTML email template built. I am assuming that most folks wouldn’t use HTML emails voluntarily, though. What do you think? Also, if you have any tips regarding HTML emails with CSS, leave them in the comments. Thanks!

If you have read more than 1 or 2 posts on simpledream.net than you will know that SXSWi 2005 was a big hit for this web design studio…

The biggest lessons learned in Austin are just now starting to hit home as new projects roll in. Since the experience of good and bad design is essential to this business, I wanted to share some brief design lessons that I learned on web design from SXSW panels this year.

Panel: Does design matter?

Important question #1 posed in the panel: why do sites with ugly/bad design enjoy great success?

This is a great question! Many times I've assumed that spectacular, cutting-edge design would automatically boost a site's success and therefore the business behind it. Not so fast, Mister!

The key answer that was aired in the panel was that the target audience is the key to a good use of design. The design should match that particular group or person that is being targeted by the site or print material. The example used in the panel was that of a bland consumer design on a cereal box – it works perfectly for what it is intended for! So even a very simple and seemingly boring design can be very successful if used in the right way.

Important question #2 posed in the panel: What can we do for current sites with bad/ugly design?

Answers include:

• Turn bad design into a comfortable experience for the customer by keeping a tight and simple approach to design
• Redesign with new typefaces and make the overall design appropriate for the audience
• Try to change bad design into a more successful one

My take on these answers is usually something like: “a better looking and working web site equals better success for the business.” Just like with the cereal box idea, though, the design has to be appropriate for the goals and audience of the site.

Panel: How to inform design?

Surprisingly, this was a great session on how to improve your site by learning from usability, statistics, and other web-based metrics.

Good ideas I gleaned from this panel include:

• Research much and early, as the cost of change goes up as the project progresses
• Match user needs and business needs : "use your own site"

This is a very superficial touch on the material covered in this great panel. But these two really made be think about how I approach the analysis and brainstorming stage of a project. The goal is: “work very hard at this part of the project and it will pay off later!.” Secondly, the “use your own site” idea is also great and makes sense. The key here for me is to remember that I am not a typical web site visitor; I have to not make the assumptions that the true site visitors will know what to do and when to do it. I know these things by default because I designed it that way!

Both panels opened my eyes to techniques and ideas I hadn't considered before, and also helped reinforce practices simpledream was already doing on most projects. If you were at either of these panels, let me know if I missed anything important!

Two things that I get asked a lot are: “What makes good design?” and “How do I learn good design?”

I spend a lot of my own time thinking about these questions, both personally and professionally. While going through some notes from this year’s SXSW festival (Austin, TX last March) I realized that I had a few good answers tucked away from the “Hi-Fi Design with CSS” panel. If you want to see the full slide shows from the panel (and ignore the rest of my post!) go to:

» Doug Bowman’s presentation
» Dave Shea’s presentation
» Dan Cederholm’s presentation

From Dave Shea’s panel session, I learned about important design concepts to master if you want to learn and practice good design:

Color theory

• Typography
• Form and shape
• Spacing
• Texture
• Dimension

But, how to grasp these concepts? Some very good practical tips from Dave Shea:

• Know your tools
• Find imagery sources
• Practice
• Study inspiring design
• Keep your eyes open
• Study typography

From Doug Bowman, more great advice: Spend time looking for beautiful examples of design in nature.

I hope that I can improve my existing design skills and learn more as the year goes on. As far as inspiration, look no farther than the Garden.

Tim Berners-Lee said in a recent Reuters article:

“A mass market exists for the mobile Internet, but it will remain untapped until designers make simpler Web pages that can be viewed properly on handsets…”

This is exactly what we need! In a time where broadband users are well over the 50% mark in America, web designers are eschewing the light and fast-loading sites of the dial-up modem days. We are loading up our sites with huge images, animations, and behaviors that do not necessarily help a typical website’s goals. Certainly this bloating effect does not help the other half of the population that is on a slow connection or the people who use an alternate device to access the site.

Do not get me wrong, I think there is a time and a place for Flash, lots of DOM scripting, and animations. It seems, however, like these things are being built and published just because we can, and we know so-and-so client can view it on their huge monitor and nice T1 connection. My philosophy is: do not use technology, images, or other web paraphernalia unless it directly enhances your site’s goals. Otherwise you are wasting time and energy, and you are also frustrating a lot of potential customers and site visitors.

The Berners-Lee quote above and the rest of his comments in the Reuters piece bring up an important question: is the handheld era going to be another bottleneck that forces web designers to design light and fast pages? My answer is a hopeful “yes”.

That future notwithstanding, I wish more web designers and developers would build simpler and lighter web sites and applications. Then the device limitation or end users’ connection speed will be of little importance, and the site’s message will be broadcast swiftly to all.

Article and quotes via Slashdot.