Banner Specification - Responsive Email Template

Our goal is to help our customers have successful email broadcast campaigns. An important part of a successful campaign is ensuring that the message of your broadcast is easily read and understood by the widest possible audience using a wide variety of desktop and mobile devices. In order to ensure readability of your message, we highly encourage you to use a responsive email template.

Responsive email templates are available from a number of sources. We are happy to provide a couple different single column templates for you to use for your broadcast. You can use one of the templates as is by plugging in your message and your images, or you can modify it extensively to meet your needs. We have no restrictions on how you want to use it. (Our lawyers want us to also mention that we make no guarantees that it will fit your needs, sorry.)

The rest of this article is targeted to the actual HTML designer and coder as we walk you through the details of the email template.

Start by downloading one of the templates

View and Save Responsive template using media queries.
View and Save Responsive template using a fluid design.

(You may want to try a "right-click, save-as" to download the template to your local workspace.)

Open the the template in your favorite HTML editor, and let's begin.

The template is broken up into 3 main parts;

Identified in the template as Template Main 1
The substance of the first section defines the styles used within the broadcast. Some of which should simply be left alone and some are identified as styles for you to modify for your purposes.

Identified in the template as Template Main 2
Media Queries, this is the real magic of a responsive email. Responsive design is primarily based upon the use of media queries that define layout attributes (CSS styling) respective of screen or device width. Within our template there are two media queries: [[ @media (max-width: 599px) ]] and [[ @media (max-width: 321px) ]]. These media queries function as conditional statements that regulate the CSS formatting when the width of the email’s content is less than 599 pixels or less than 321 pixels. If the email is viewed on a mobile device with a maximum display width of 599 pixels, the following CSS declarative [[ @media (max-width: 599px) ]] will activate unique CSS styles specifically declared for mobile devices consisting of a width of 599 pixel or less. Additional email CSS formatting also occurs when the email is viewed on a mobile device with a maximum display width of 321 pixels.

It should be noted that media queries not only activate CSS styles declared for mobile devices or a “width determined” viewing experience, but the media queries also negate or override pre-existing CSS formatting. Within the template the following media query [[ @media (max-width: 599px) ]] is used to override the default inline CSS formatting used for desktop displays and devices with a screen width larger than 599 pixels. Overriding of CSS styles occurs again within the template when the following media query [[ @media (max-width: 321px) ]] is used to negate and override both the default inline desktop styles and the styles declared by [[ @media (max-width: 599px) ]] that will be active for viewing widths of at least 599 pixels wide.

The template has two distinct layouts. The initial layout of the email template is designed for mobile devices and non-mobile devices with display widths of at least 322 pixels wide. The initial layout will be visible on desktops, tablets, and large phones (for tablets and large iPhones the email content will be set to display at a width 100% if the device is less than or equal to 599 pixels wide). The secondary layout will only be visible on mobile devices that have a display width that is less than or equal to 321 pixels.

Identified in the template as Template Main 3
This is the body of the email, and where you will insert your images and text. If you search for the string "###" you will find the needed replacements.

1. Replace the full-sized image at the top. Here you will add the URL for your image, and the destination URL if the reader clicks the image, and the alt-text..
2. Replace the small version of the top image.
3. Replace the text that is below the top image.
4. Replace the small image on the left side. For this image you need to specify the width.
5. Replace the text in the bottom half of the template.
6. Put the subject line for the email on the last line inside the comment tags.

At this point you are ready to review you html email in a browser. When you are finished, send the final HTML to [email protected].