How wide should my email be?

Thin is in! This email weighs in at a scant 484 pixels wide.

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

This email looks good, even 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

Premailer takes the frustration out of email coding

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

Services like Litmus take the guess-work out of email testing

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.

The post Basic Guide to Email Design appeared first on Portent.