E-Blast: Technical Dos and Don'ts

OVERVIEW

BevNET's E-blasts are intended to deliver a simple, formatted message to our email subscribers. 

While there is often a desire to send something that is formatted similarly to a web page, it is best to keep the formatting simple. This will ensure that the formatting is clean and delivered consistently, regardless of the subscriber's email clients.

NOTES ABOUT DESIGNING FOR EMAIL

Designing an HTML "page" to be sent via email is NOT the same as designing for a web site. Email clients, unlike standard web browsers, render HTML very differently from one platform to another. The more complex your design/html becomes, the more difficult (and, in some cases, impossible) it will be to achieve a consistent look across all platforms. So, we strongly recommend that you focus on simple & clean design. 

HTML that is used by email clients in some cases defies modern HTML guidelines. For example, inline CSS code and tables are better to use than <style> and divs. See below for additional suggestions as well as things that are / aren't supported.

While we recommend that our clients use our web-based eblast portal and it's e-blast editor, it is possible to build your own e-blast HTML code using other programs.

E-BLAST HTML BEST PRACTICES:
If you are building your own, please follow these guidelines:

• Use a basic HTML tool rather than a Microsoft Office product or an export from Photoshop
• Max width is 650px
• Use tables rather than divs
• Place your CSS inline in style attributes on your HTML tags
• Keep images to a minimum and keep them free from text elements
• Clean your HTML to eliminate unnecessary code (we recommend https://html-online.com/editor/)

ABSOLUTELY NOT SUPPORTED
These are limitations of ALL email clients:

• CSS that applies to base html tags (e.g. <table><p>). You MUST use strongly named CSS classes.
• Javascript
• Embedded videos
• External style sheets
• Media queries

NOT SUPPORTED / MAY PRODUCE UNDESIRED RESULTS
Avoid using the following as it may produce undesired results in some email clients:

• CSS that applies to the body tag
• Fixed-width formats (will break your eblast on mobile clients)

ADDITIONAL RESOURCES
These are third party resources:

• Guide to CSS support in email clients 
  https://www.campaignmonitor.com/css/
  
• Explanation of design issues for Outlook mail clients
  https://mailchimp.com/help/my-email-looks-different-in-outlook/