Jarrod Medrano // Mar 1 2012
Though not as popular as it used to be, email remains a viable component of a good marketing strategy. When designing email templates, it’s important to consider the wide array of devices and email clients available. Follow these simple tips to make sure your message is coming across clearly on every platform and not making any common email marketing mistakes.
Due to the unpredictable nature of email clients, it’s better to keep your emails thin. Between 480-600 pixels wide is a safe bet. You don’t want your users to be scrolling horizontally, especially if they’re viewing your email on a phone.
Email is pretty far behind when it comes to following web standards. Most of the fancy CSS3 tricks and HTML5 features you enjoy on the regular browser are not going to work in email.
CSS tags like float and position are unpredictable in email clients, so you’re going to rely on tables for most of your layout. I know this is contrary to what many web designers have been taught, but until email clients catch up to the rest of the Internet, that’s the way it’s going to have to be.
It’s safe to assume that when someone opens up your email, they’re not going to see any images. Design your email with this in mind. Always provide alt text for your images, and never use one large image for your whole email. All the user will see is a blank screen.
Though there are some hacks and workarounds, most email clients will not display background images of any kind. Don’t rely on background images in your design. Background colors however, will always work.
Some email clients will prevent any non-html from rendering, so you’re going to have to keep all of your css inline. If you want your links to be something other than blue, you need to declare the color on every link. I recommend coding your email the traditional way, and using Premailer to move the css inline automatically.
The CAN-SPAM act of 2003 lays out some rules you must follow if you don’t want your emails to end up in the trash can. To be safe, follow these rules:
Read more about the CAN-SPAM Act of 2003.
Just because your email looks good in Mozilla in your gmail account on your 15 hundred-dollar iMac, doesn’t mean it’s going to look the same to someone on a hotmail account. Always send test emails. If you are a hardcore email marketer, there are various services that will help you test every eventuality.
Did you find this post helpful, or do you have any other tips for good email design? Let me know in the comments.
Jarrod has lent his extensive experience in web design, HTML, CSS and more to Portent for over 6 years. Read More