Email Coder Tips

Responsive design uses media queries with CSS so that the layout of emails can adapt to the size of display app or device.

There are no email standards and this leads to headaches when it comes to email design. For example, the Gmail app on mobile devices does not support the use media queries and therefore responsive emails do not display correctly.

This post on the Litmus blog explains more about what media queries are, how they are implemented and how much support there is for them.

Image Dimensions in Fluid Templates

When building an Email Template with responsive design in mind, there are some important things to consider with image sizes. Being able to resize images when the email is viewed on small screens is one of the main features of using media queries in responsive design. In order for the image to remain crisp on high dpi mobile devices, it is worth considering the following:

• Images Displayed on mobile devices are often full width, depending on properties set in your media query
• Mobile devices often have very high resolution displays
• Outlook 2003/2007/2010 will only display images at their natural size or at the dimensions specified by the image width and height attributes - you can't rely on percentage widths on desktop
• For important graphics create images at twice the size than what they will be shown in the Template to look sharp on retina/high resolution mobile displays
• Ensure you check the final file size when using the above technique as all email apps will be forced to download the high resolution image and it could slow down loading times on slow connections

Screen Size Affecting Image Width

For example, you may have a three column layout of images on desktop whereby the images displayed are 180px wide. However, when stacked into a fluid single column in your media query at 100% width they could appear much wider than the original size.

Email Designer Templates

When coding a Template for use with our Email Designer, it's possible to specify the width of an image, so inserted images are the correct size. Use the data-ed-size attribute on the <img> tag to specify. View the HTML Markup Guide for further details.

Email Designer Fonts

The drag & drop Email Designer supports all of the standard web fonts and a select number of Google Web Fonts also. A full list of supported fonts is detailed below.

You can select any of the above fonts via the User Interface in the Email Designer when creating and editing templates. It is also possible to include and embed your own custom fonts when uploading custom created Template Library designs and the font UI controls will degrade appropriately.

Web Font Support in different Email Clients

Google Web fonts are not supported in all email clients. Notably Gmail, Outlook, and Yahoo. Each Google Web Font will fall back to the closest matched system font. It is recommended to use the Inbox Tests features or external testing services, such as Litmus and Email on Acid, to see how these fonts will appear across email clients.

This is likely to be an issue with character encoding. Character encoding issues will be displayed as errors in the 'Content Validation' panel when viewing the Template. To resolve, make sure your HTML editor has it's character encoding set to 'UTF-8' and re-upload the HTML.

This can usually be fixed by declaring all images to have the style attribute display:block;. If your Template has an external CSS file, add the following to your CSS file:

img {display:block} 

If your Template is a single HTML file, add style="display:block;" to each image like this example:

<img src="image.jpg" alt="" style="display: block;" /> 

This can usually be fixed by declaring all images to have the style attribute border:0;. You can add the following to your CSS styles:

img {border:0} 

An alternative approach is to add the attribute border="0" to each image, as seen in the below example:

<img src="image.jpg" alt="" border="0" /> 

Use CSS to target the Opt-out Link

or

Use the {?$optout_link} merge tag