Creating good HTML emails

Creating good HTML email is a totally different ball game! All the rules/concepts that apply to creating good web pages do not necessary apply to creating good HTML emails at all.

In fact, none of the theories for creating good HTML web pages holds true for creating good HTML emails!
In this article, David Greiner gives a good idea what should and shouldn't be done. Incidentally, this validated most of the stuff that we had already been doing based on our experience with various webmails & HTML email blasts/campaigns that we worked on.

Here are the summary of points given by him:

• Use tables for layout and as containers for background colors
• Use nested tables instead of margins & alignments
• Set the width of each cell instead of at the table level
• Use pixels instead of percentage widths
• Use inline CSS always
• Design with the assumption that images will not be visible by default
• Use "alt" text for images
• Aviod spacer images
• Always use image widths & heights explicitly
• Prefer JPG & GIF images
• Test, Test & Test more with various clients...

And now, some more considerations for mobile emails:

• Keep the total width to less than 600 pixels
• Be aware & design with consideration that text may be resized
• Test, Test & Test more with various devices...

Read the full article by David Greiner on 24ways.org for the details and the code here.

Beautiful Forms using HTML5 and CSS

Even though HTML Forms are very boring & repetitive work requiring a lot of effort, they can be made really beautiful using the new features of HTML5 and a bit of advanced CSS.

First off, the Disclaimer:

• HTML5 is still a Draft and in the "Last Call" state in the WHAT Working Group.
• Not all browsers support HTML5 equally well - so expect varying results across browsers even for the same element
• Not all browsers support all elements/features yet
• Check out the list of differences between HTML4 and HTML5 here
• Check out the new features of HTML5 Forms here
• Wikipedia entry for HTML5 is here

Now that we have all those points out of our way, lets start with the actual stuff.
In this article on 24ways.org, Yaili explains in great detail how to use HTML5 and advanced CSS with CSS3 features to create really great looking forms.

Here are the most important points:

• Use fieldsets to for enclosing and grouping input elements.
• Use ordered lists to group each label+input pair of elements
• Use automatically generated counters using :before and :after psuedo-elements
• Dollops of CSS styling to make the form & its elements look really kewl

Here is the output as I see it in FF3.5.7 and IE7 on WinXP Pro - the differences are clearly noticeable. Also, the placeholder text does not show up at all!

FF 3.5.7	IE 7
Note the missing placeholder text, rounded edges and credit card images	Note the missing placeholder text, pointed edges and missing credit card images

Read the full article by Yaili on 24ways.org for the details and the code here.