HTML emails continue to be a popular way of marketing. While social media is definitely a force to be reckoned with, emails are still considered the official way of communicating with customers and clients. In fact, social networks rely on emails to communicate with their subscribers and to push other important information to users. In addition, more and more people are accessing their emails on their mobile devices than at any other time in history. That being the case, let’s see how we can develop HTML emails that render well on different browsers and on the different mobile devices.
What to avoid
Almost every website you come across today uses some CSS in one way or another. Email clients like Gmail, however, are wary of CSS and in most cases will cut everything above the body tag and disable external style sheets. If you’ll be using CSS in your layout, make sure that it’s embedded CSS as opposed to external style sheets that use the <link rel=”stylesheet”> designation.
Working with images
Images are rendered differently on different email clients. Gmail, for example, does not support background images and will ignore any url() attribute in an inline style that points to an image. By Default, most email clients will turn off images. To counter this, use background colors to act as fallbacks to ensure that our message remains readable even with the images disabled. With most users choosing not to display images, always use the Alt attribute to describe the image to ensure that your recipients do not lose out entirely.
When calling images, use absolute url paths as shown below:
<img src= http://www.e-labz.com/images/davgit.jpg alt= "David" />
If you are designing in Photoshop, you can use the Slice Tool to help you chop up your HTML layout into several components. Be sure to save the final layout as “HTML and Images” under the “Save as Type” dialog box.
What should be the width of your layout? With too many possible email clients to code for every scenario, the consensus in the Web community is to keep layouts fairly narrow by staying under 600px wise.
If you are still a newbie, using a template and modifying it rather than designing from scratch will get you the same results. As long as you have a specific design in mind, you can always turn around any template to fit your specs.
Most email clients have a difficult time rendering CSS and if you can design without it, the better. If you do have to employ some CSS, however, ensure that you specify it inline as opposed to making CSS declarations in the <head> section. For example, if you’ll be adding some CSS to table cells, rather than specifying it in the <table> tag, you can instead specify it in the <td> tag. Notice how this has been done in the code below:
The above code will render more consistently across major email clients. Keeping things simple will ensure your content remains readable across a variety of devices and orientations.