Our system now allows for less restrictive coding allowing your designers to unleash their marketing and programming genius!
However, the world wide web is still an inconsistent arena in some areas so being selective on how you design and develop your eBlast content. Although the new system will convert your header based style tags into inline tags, and responsive is usable in most cases, we still recommend using the style guides and information below. Limiting responsive design to regular and mobile versions is probably quite enough in most cases.
Creating a good marketing message is key. We cannot guarantee any open or click through rate because that is solely dependent on what your subject line and content is, and whether or not it will entice potential customers to read and click through for more information. If you need some assistance with this, please feel free to contact your sales representative or the design department and we will assist in any way we can.
HTML and Text Versions
- Using HTML 4 Strict avoids issues on most browsers and mobile devices
- Keep the code as simple and clean as possible, tables work best for layout consistency.
- Images need to be external, hosted on your web server and linked to with a full url including the http:// Sample: http://www.ajot.com/images/logo.jpg
- Links need to be a full URL and valid including the http:// Sample: http://www.ajot.com
- Provide an alternative plain text version of the E-Blast as a separate file and be sure to provide the links and other contact information
- Inline styles are the safest and easiest to convert into a safe E-Blast
- Internal Stylesheets can be used, only use Classes and NOT IDs
- Class names should all be in camel case (camelCase) no dashes or underscores
- Use styles that are compatible with older browsers and mobile devices
Design and Content
The screen size varies from device to device, but you have much less real estate on a mobile device than on a computer monitor. Consider this when designing an E-Blast.
- Use single column templates to make your content friendlier to small screen sizes.
- Keep your standard template width around 600px
- Put your call-to-action near the top of your email and leave enough space around it so it is easy to touch.
- Have a clear and concise message to get your point across in a glance.
Fonts and Colors
- Avoid using tiny fonts that won’t be easy to read on small screens. Use a minimum of 11 pt for your email’s body and 22 pt for headlines.
- Use a strong contrast of colors so it is easier to read in bright sunlight or when the brightness level on the device has been turned down to conserve battery power.
- Avoid white text; if the email client doesn’t render a background color, you might end up with white text on a white background.
- Include images that are essential to your email and leave the rest out.
- Always include a description of your image to let folks know what is there when it isn’t being displayed.
- Avoid emails containing your content in a single image; if the image isn’t displayed, your recipient will miss your entire message!
Sample HTML (ZIP)
Some Helpful Articles from SitePoint.com
Coding HTML Email Newsletters
The Principles of Beautiful HTML Email
A Designer’s Guide to HTML Email