Back in the day web designers may have resorted to using inline styles and tables to lay out a web page. This was a time before we were all glued to our smart phones which has never been experienced by some (the 90s were rough). 

However, the ancient art of tables and inline styles still exists in email. 

We are going to discuss how to develop responsive, beautiful HTML emails that will convert leads. 

Emails That Convert

While plain text emails do benefit from feeling like a personal message, HTML emails give a professional edge to your campaign. 

HTML Benefits

• Branded design
• Professional look and feel
• Use of images
• Use of links instead of full URLs
• Columns to divide text
• Scannability 

But wait, you don't even use email marketing, why do you care? Well, the stats below may change your mind. 

• For every $1 spent on email marketing, the average return on investment is $44.25
• Marketers consistently ranked email as the single most effective tactic for awareness, acquisition, conversion, and retention
• Email conversion rates are three times higher than social media, with a 17% higher value in the conversion
• Email is nearly 40 times better than Facebook and Twitter at acquiring customers
• 70% of people say they always open emails from their favorite companies
• 95% of those who opt into email messages from brands find these messages somewhat or very useful
• Emails with social sharing buttons increase click through rates by 158%

Tables & Inline Styles

We may have won you over with the information above, but where do you start? You should always consult with the professionals first if you are not familar with programming. 

As mentioned before, tables are outdated when it comes to web design, but crucial for email development. This is due to the processing systems that display different emails. Some platforms rely on browsers while others make use of Microsoft Word. 

A properly designed email should display no matter what. 

If there’s only one thing you to know about coding email, it’s that tables rule the day. Forget that old “separation of structure, presentation, and behavior” nonsense you learned in standards-based web design. Unlike modern web design the element isn’t used just for tabular data, it’s all there is for consistent structure. External CSS doesn’t drive the styling, either; emails depend on inlined CSS.

Mail Chimp

What To Keep In Mind

• Keep width between 600-800 pixels
• Stay Simple
• Images may be blocked with some email clients
  • Do not rely heavily on giant background images

Responsive Messages 

Many of us have our email synced to our smart phones. We even covered how this abolished the 40 hour work week.

An email campaign needs to function properly on mobile devices, especially if people are doing business on their phones. 

We can achieve this using media queries to ensure the email displays properly across a variety of devices. 

Tips in Addition:

• Make sure links are clickable
  • They should have 45x45 padding to make it easier to press
• Optimize images for a quicker load time
• Can you read your email without holding the phone inches away from your eyes?
  • Arm's length would be ideal

Send

Launch your campaign and start converting those leads. As always, we are here if you get stuck. If you have any ideas or advice for email, let us know!