Creating HTML Emails – How To And Design Inspiration

Creating html emails is not as easy as most people think. This little thing may cause problems even to experienced coders who are working on a new layout on a daily basis. I know some of you are asking yourselves why on world would anybody invest time and resources in html emails. The answer to that is very simple: efficiency. According to a study, for every dollar invested in html email marketing, aprox. $40 came in return. You don’t have to be an economist to realize that this rate is extraordinary.

The first step

Before even designing the email template, you should write the email in plain text. It will provide you a more clear approach on how to create its design. Also, you will have to offer this as an alternative to the people who don’t want to read their emails in html.

You have to keep in mind that you can send both plain-text and html email in a singel email using a Multipart/Alternative email format or MIME. For those of you who don’t know what this is, it’s that pop-up which asks you if you want to send it in plain text, html or both.

Thoughts before designing

If you haven’t figured it out from what I said in the intro of this article, designing a html email is not like designing a web page. If you’re a CSS3 and HTML5 enthusiast, forget about those when wanting to create a html email cause the mail clients don’t even support basic CSS attributes, let alone advanced ones.

• Make the design simple! Overcrowding it may make it not viewable for some email clients with poor standard support so don’t abuse images
• Using tables is a must so do it oldschool style, with CSS inline as one of the most used techniques.
• Test your templates in as much email clients as you can. You must be sure that you don’t lose potential clients because of your design. Some of the email clients that you should consider are: AOL (multiple versions), Comcast, Earthlink, Gmail, Hotmail, Yahoo!, Thunderbird, Lotus Notes, Mail.com, Outlook (multiple versions), Windows Live, Mail.app

Techniques you can use

Use images from your server

Don’t embed images in the article cause you’ll make the email heavier and it’s possible that the email client will block those. The solution is using an image hosted on your server, included in the email with an absolute path like this:

http://www.designyourway.net/diverse/flport/edankwan_com.jpg

Use inline styles

This is so 1999, but for emails coding it is the best thing you can do.

<h3 style="color: #990000;">Your long awaited vacation</h3>

Don’t use shortcodes for fonts and hex notation

Avoid this:

<p style="font:bold 1em/1.2em arial,helvetica,sans-serif;"</p>

And instead, write it detailed:

<p style="font-weight: bold; font-size: 1em; line-height: 1.2em; font-family: arial,helvetica,sans-serif;" </p> <!-- the code will look huge comparing to what you are used to but the email will look awesome to the client -->

Declare width, cellpadding, and cellspacing for all tables and table cells.

Don’t leave widths undefined cause some clients tend to add their own values and this will break your design. Having a fixed template will save you the trouble.

Link styling

You probably noticed that some clients overwrite your link colors with their own. That’s pretty annoying but it can be avoided. The thing that you need to do is setting the color for each link inline. Note: you can also use a span.

<a href="http://www.designyourway.net" style="color:#990000">A useful resource<span style="color:#cccccc">for designers</span></a> <!-- Styling links is really important for the design. You wouldn't want blue links on a red, white and yellow design, for example. -->

Layout width

Under no circumstances, don’t go over 600px in width. You don’t want to have displayed just half of your email. The recommended width would be 440px.

Images width and height

Don’t forget to assign to every image its proper width and height, or else you will see your layout broken by the email clients and this will lead to a zero conversion rate which is not the thing you are after.

Hotmail hack

For some bizarre reason, Hotmail adds some pixels of padding below images. To overwrite this you can add the display:block code to the image style.

Don’t use background images

Some clients, including the popular Gmail, will ignore even the background= attribute. Simply use background colors with the bgcolor tag or background-color: style tag.

Floats no, align yes

Don’t use floats for images. This is not a solution considering that some clients like Outlook and Notes don’t support this property. Instead use the align property.

<img src="thumb.jpg" align="right" />

Don’t use javascript

Although it may be look cool in your mind to use javascript, try not to. This will surely result in having your email marked as spam.

Avoid using images for call to action buttons

Always keep in mind that Gmail or Outlook will turn off images until allowed by user so you have to minimize this setting’s impact. Looking at a broken layout is not at all encouraging. At least keep the important parts to be seen by the user.

Avoid using forms

Although the forms are displayed in most of the email clients, they will only work in a few of them. The recommended thing to do is linking to a form on a website. It’s the only way you can be sure that it can be used by the readers.

Try not to make it look like spam

Make sure you include in your email design a physical email address and a working unsubscribe link. There are certain rules that you have to obey when sending commercial emails since the CAN-SPAM act became a law.

Track conversions with Google Analytics

Tracking your conversions is a must when thinking of monitoring your newsletters. This can be done by modifying the links that you are adding in the newsletter.

http://www.mysite.com/page.php?utm_campaign=fall-sale&utm_medium=email&utm_source=female-list <!-- Each parameter represents a different attribute of your email utm_campaign=fall-sale utm_medium=email utm_source=female-list -->

All the information you can get on this subject can be read in a comprehensive article written by Justin Cutroni called Tracking Email with Google Analytics

Useful Photoshop Tips And Tricks For Photo Retouching

When it comes to designing in Photoshop, there is a myriad of ways one could use to achieve a certain result, especially when it comes to photo retouching. Designers use technique they are most confident as well as comfortable with, which is great because it’s always useful to peek into the workflow of our colleagues and learn new design approaches. We have had articles on cloning, compositing, masks and obscure Photoshop time-savers in the past. This article is different.

I’ll be covering some of the useful techniques and tricks which I’ve learned from my experience. You may know some of them, but hopefully not all of them. All images used in this article were purchased and are used according to their licenses. The second part of this post will be published in 2 weeks.

Here is a short overview of the techniques we’ll be covering:

• Naturally Increased Light
• Simulate Infrared Images
• Levels
• Color Look With An Adjustment Layer
• Controlling Mid-Tone Contrasts
• Sunset
• Creating Smiles
• Colorful Water Drops
• Skin Color
• Matching Skin Tones
• Reducing Noise
• Retro Look With Curves
• Identifying Layers
• Conserving Resources
• Classy Sepia Look
• Precise Positioning
• Applying Layer Styles Multiple Times