HTML Emails and CSS

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!

More Lessons from SXSW

Two design-oriented panels at SXSW 2005 really made an impact on this web design studio.

If you have read more than 1 or 2 posts on 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!

Design for the Rest of Us

Tips from design greats Doug Bowman and Dave Shea.

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.

Flash versus HTML

There has been a bit of recent talk about Flash user-centered design versus designing a web application interface with web standards.

There has been a bit of recent talk about the benefits of Flash-based user-centered design versus designing a web application interface with web standards technology such as AJAX or DHTML. One great showdown and discussion-starter was at the 2005 SXSWi conference with the Flash vs HTML Game Show. It was a great panel where popular web apps like Flickr and Gmail were re-engineered in Flash or HTML. The panel even garnered a write-up by the great Zeldman on’s Daily Report.

The best result of the panel and other online discussion is the subsequent questioning of usability of the Flash interface for a web application. In this case it was Flickr that got some attention when they announced they were going to convert parts of their popular online photo gallery application to run with DHTML instead of Flash.

Recently this topic came up with a client here at simpledream web studio who wanted to know the benefits and drawbacks of presenting photos and content with Flash instead of HTML. Since the MO of simpledream web studio is web standards, the discussion was one-sided—it was pretty much a "Flash bash" from my perspective. The most important thing that came out of it, however, was the fact that Flash and HTML/CSS are both tools. How you choose to use them is up to you—I decided to pitch for using standards-based design with CSS because that is the tool I feel the best about on all levels of design and development. If a Flash developer were to have been in the meeting with us, he/she would probably have said the same thing about Flash and would have had the same thoughts as me about their way of doing things.

I think the panel at SWSX proved that for any given application you can use either tool effectively and achieve great results. Of course, in the case of the panel and Flickr's recent change, the comparison is between Flash and either DHTML or AJAX and not just CSS design versus a Flash rendering of content. Regardless, both camps have strengths and weaknesses. Since we have a choice as developers, my recommendation would be to use the tool that fits the project well and will use your skills to their maximum capability. If I have my druthers on every web project from now on then it will always be web standards for me: CSS, (X)HTML, and the DOM. But for the many great Flash developers out there, I say "more power to you." Make me a believer!

New Blue

Small changes in color at

You will notice that simpledream is coming at you in full blue now! The original site was supposed to be blue, but version 1.0 got changed to “shades of grey” at the last minute due to some time constraints for the launch date. It was actually weird how it happened. I read an article on “grey shadow” method for designing a website and thought is was so neat that I used it on the rough drafts for in Illustrator and Photoshop. Then the time crunch for launch came, and I said: “why not just launch it as it is?” The grey look was cool, and looked sharp with the logo and textmark. The grey look was never intended to last though, sad to say.

Anyway, as of tonight the version 2.0 in blue is officially live. The biggest difference is the blue color palette, but you might also notice the top banner is changed as well to reflect the true simpledream logo. The only other things added were some graphical elements and icons to spice up the design.

Hope you like it!

El Cortez Heights Redesign

New look and feel for El Cortez Heights Neighborhood website.

This week simpledream web studio launched another standards-based web project: El Cortez Heights Neighborhood Association website. The group, ECHNA for short, is located in Tucson, Arizona. If you can’t wait to see it, then just visit site! If you want to know the why and how of the redesign, keep reading.

Why redesign?

To allow for greater control over the background technology and to streamline content production for the community-based website. The website had outgrown the previous setup and was ready to for change.

How was this accomplished?

By making a few big changes to the hosting, file management, and domain name as well as several smaller, much-needed changes to the visual design.

Here are the big changes:

  • Move to new host, Dreamhost. ECHNA was very tired of the Geocities ads that cluttered up the sidebar and the source code.
  • New domain name now: Easier to remember and tell people.
  • The move to WordPress for site management allows a lot more control over the production and behind-the-scenes programming now. This is a huge improvement for site maintenance, stat monitoring, error pages, etc.

Now for some small changes:

  • Some basic improvements to the site were made, including ease of use and navigation. We tried to leave the look and feel the same, but update the design to be more professional and engaging. Still very simple and easy to use, though, and not complicated for someone to get around and find interesting and useful content.
  • Graphic elements were polished and updated.

You can view the old site (which is still up) for comparison. Also, compare it with a view of the original design from 2002. Needless to say, ECHNA has come a long way.

Making Simpler Web Sites Makes Sense

The idea that flashier is better simply must go. Will handhelds help us design lighter?

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.