DEEP (Direct Engagement Email Program) Specs

Press enter to search
Close search
Open Menu

DEEP (Direct Engagement Email Program) Specs

By EnsembleIQ - 02/04/2019

Option A – Client Provided HTML:

  1. HTML (complete with hosted images, “in line style,” live URL links and all necessary closing tags are required). HTML size must be under 102K to avoid clipping in Gmail. See Email Design Basics below for more information.
  2. Subject Line (50 characters)
  3. Seed names and e-mail addresses of who needs to see the test and final blasts. We ask that only one of the seed names be responsible for sending final approval of the test blast.

 

Option B – EnsembleIQ Produces HTML:

  1. Copy of a previous e-mail or a “mock-up” so our designers know how to put the html together.
  2. Logos/images should be in a .jpeg, .gif, .png, .psd, or .eps format
  3. Client supplied content in Word format
  4. Click-thru URLs for all links in the email
  5. Subject Line (50 characters)
  6. Seed names and e-mail addresses of who needs to see the test and final blasts. We ask that only one of the seed names be responsible for sending final approval of the test blast.

Production Timeline:

  1. Deployment dates MUST be suggested or approved by EnsembleIQ. When material is past due, deployment will be rescheduled (dependent upon availability).
  2. OPTION B ONLY: There is a minimum 72 hour turnaround time. There will be a $100 fee for additional revisions after the first two rounds.
  3. Test blasts are sent out at least one day prior to the final deployment to ensure proper HTML rendering. Send changes/approval by the end of the day in which it was received.
  4. Email deployment reports will be sent to the sales representative within one week of the deployment.

** Any deviation of the timeline runs the risk of having to reschedule the final deployment date at EnsembleIQ’s discretion.

 

EMAIL DESIGN BASICS

Designing for email is often more challenging than designing a web page as the various email clients your readers use render email differently. The greatest tip we can provide is to keep your design as basic as possible. Refrain from using CSS (inline styles are best). Your email will render best if you stick to table based HTML designs. Below are some additional tips for effective email design.

Width of emails:
Design your email so that the email can be viewed without having to scroll from side to side.
This can be accomplished by assuring that your HTML is no more than 600 pixels wide. If you are using a template that has two side by side slots, the total of both slots should be no wider than 600 pixels.

Image formats:
All images must be in JPEG, GIF or PNG format.

Resolution of images:
Computer screens can produce a maximum resolution of 72 DPI. Graphics with a resolution
larger than 72 DPI may cause unpredictable results.

Image Creation Software:
There are a number of image creation software packages on the market, and most of these can create or size JPEG, GIF or PNG images. We recommend Adobe Photoshop, because it is widely used and provides the functionality required for image editing.

Things to Avoid for Outlook:

  • Flash
  • Animated gifs
  • Background colors/images
  • Nested tables
  • Style Sheets
  • List style images
  • Javascript
  • Div tags

For more info on how Outlook renders HTML,
visit: http://support.microsoft.com/support/kb/articles/q249/9/72.asp

EMAIL DESIGN TIPS & TRICKS
The biggest challenge for HTML email designers is building an email that renders well in all
popular email applications. Building an HTML email is not like building an HTML web page.
HTML emails look different depending upon the email application used to view the email.
Use tables to layout your HTML email. Instead of setting the width of the entire table, set the
width of each cell individually. Use nested tables, but not more than five deep.

ALWAYS USE INLINE STYLES. Though on a website you might create a class, most browsers will block this out. Gmail is the culprit for this one. By stripping the CSS from the <head> and <body> of any email, we’re left with no choice but to move all CSS inline. The good news is this is something you can almost completely automate. Free services, like Premailer, will move all CSS inline with the click of a button. We recommend leaving this step to the end of your build process so you can utilize all the benefits of CSS.

Post your images on your publicly accessible web server. In your HTML code, use absolute paths to point to images. Do not set widths or heights to your images. Avoid Background Images. 

Give all images Alt tags. Do not set widths or heights to images.

Wrap the entire email in a 100% width table. Email clients only take the code within the body tags, not the body tags themselves. In order to use a background color, you must create a 100% width table to "fake" the background effect.

Limit email width to 600px. Many people don't actually open their email; they instead view
them in the preview panel. On average the smallest preview panel is around 600px, so always design your emails accordingly, unless you don't want your full email viewable in the preview panel, of course.

Link Styling. Don’t forget to style the <a> tag. This will overwrite the email client's standard link tags. Example: <a href="#" style="color:#000000; text-decoration:none;">Link</a>
Encode All Characters. Although we don’t technically have to encode characters, it’s best we do. When viewing emails in various email clients, we cannot guarantee the charset every website is using, so encoding characters allows us to be certain that all characters are being displayed as they should.

Example:
May Work: "Some sample code - with special characters"

Will Definitely Work: &quot;Some sample code &#45; with special characters&quot;
Use codes for all characters. This ensures all characters are displayed correctly by all web
browsers and email applications.

For example: For quotes, use &quot; in the HTML

Do not use Javascript. Most emails that contain Javascript will end up in the spam folder. Avoid shorthand for fonts and hex notation. A number of email clients reject CSS shorthand for the font property. Use web-safe fonts. When declaring the color property in your CSS, some email clients don’t support shorthand hexadecimal colors like color :#f60; instead of color:#ff6600;. Stick to the longhand approach for the best results.

 

CONTENT BEST PRACTICES


Be creative with Subject Lines without overselling

  • Set realistic expectations and readers will be more likely absorb or take action with the information presented in the email body
  • Avoid the word “free” which tends to trigger spam filters
  • “Help”, “percent off” and “reminder” do not trigger spam filters but tend to negatively impact performance


Include a Call to Action

  • The call-to-action link should stand out from the rest of the copy – perhaps code it in a table cell and format it to look like a button
  • Use an appropriate font size in a contrasting but complimentary color - perhaps a secondary color in your branding
  • Make images linked and clickable - People like to interact with images, it will increase Click to Open rates
  • Having more than 1 link in the mailing tends to increase Click to Open rates


Convey your key message "above the fold" within the top 400 pixels of the email

  • Readers are bombarded with many emails and distractions in their work environment – do not waste their time, show them why your message is worth reading right away
  • It is a good idea to include a call to action within this area for optimal click-through performance


Use text to convey key message

  • Bold graphics are eye catching but image blockers are on by default in various email systems and images will not show until user prompts the system (i.e., Outlook, Gmail, Lotus Notes)

 

RESPONSIVE EMAIL DESIGN

  • Single column layouts are easier to adjust for smaller resolutions.
  • Media queries can be used to include styles specific for mobile devices:
    @media only screen and (max-device-width: 480px) { }
    @media only screen and (max-width: 480px) { }
    Note: Media queries do not work on all devices and email clients. 
  • The outer table and nested tables of the email should have the widths set in pixels:
    <table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" class="email-container">
    This width can be modified in the media query:
    table[class=email-container] {width:98% !important; min-width:300px; margin:0 5px; }
  • For multi-column layouts, each column can be coded as one table and then aligned to the left or right for desktop resolutions. Note: MS Outlook requires 25 pixels of space around tables otherwise the second table will be pushed below the first  
  • Links and buttons should have a minimum target area of 44×44 pixels
  • The minimum font size displayed on iPhones is 13 pixels; anything smaller will be upscaled and could break your layout. Alternately, you can override this behavior in your style sheet (do so with care) 
  • When possible, use display: none; to hide extraneous details in your mobile layout. Elements like social sharing buttons may be great in the desktop inbox, but aren’t always easy to use by the recipient on mobile devices. Keep in mind that this content will still be downloaded.
    td[class= remove] {display:none !important;}
  • All images should include both width and height for desktop email clients, however the image can be scaled for mobile using CSS. Setting a max-width prevents the image from looking pixelated.
    td[class= logo] img {width:100% !important; height:auto !important; max- width:150px;}
  • Retina display images that are not optimized for them appear to be fuzzy or blurred. To make images appear crisp on retina displays, create the image at twice the size required for mobile and scale the image to the correct size using the width and height properties or CSS.
    Example: Required size = 150x50 pixels; Actual image size = 300x100 pixels.
    Note: Increasing image size will increase file size, too.