Basic Guide to Email Design
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.
How wide should my email be?
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.
Use Tables for email layout
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.
Design emails without images
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.
Don’t Use Background Images
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.
Use Inline CSS
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.
Adhere to the CAN-SPAM Act
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:
- Don’t lie or be deceptive in your header or subject line
- Make it clear that your email is an advertisement
- List your company’s address somewhere in the email
- Provide a clear unsubscribe function
Read more about the CAN-SPAM Act of 2003.
Test, test test
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
- How to use Intention.js for Responsive Design
- What Does a Degree in Architecture Have to Do with Web Design & Development?
- A Front-End Workflow For The Evolving Web
- Stop Writing Blog Posts: Ideas for Interactive Content
- Parallax Scrolling? HTML5 Animations? Why We’re Falling for New Design Techniques
- Portent.com: They’ve gone to plaid