Email Building Guide

Table of Contents Why is email display an issue in email marketing? .......................................................................................................... 2 Expert Email Design .............................................................................................................................................................. 3 Windows PC and Apple Mac desktop email programs .................................................................................................. 4 Webmail and mobile device email apps ............................................................................................................................ 5 Creating your HTML email structure ................................................................................................................................. 6 Introduction ........................................................................................................................................................................ 6 What to include in your email <head> tag ........................................................................................................................ 7 <!doctype html> tag .......................................................................................................................................................... 7 Key <meta> tags ................................................................................................................................................................ 8 Essential CSS <style> declarations ................................................................................................................................. 9 CSS Media queries for responsive emails ................................................................................................................... 11 Using HTML tables to lay out your email ....................................................................................................................... 13 Stretching container table .............................................................................................................................................. 13 Use <table>s with multiple <th> and <td> cells in your layout .............................................................................. 14 Setting horizontal and vertical spacing between elements ..................................................................................... 16 Using background colour fills in your email layout ................................................................................................... 18 Creating colour borders around table cells ................................................................................................................ 19 Adding graphic content to your email ............................................................................................................................. 21 Inserting images into your email layout ...................................................................................................................... 21 Using background images in your email layout ......................................................................................................... 23 Styling and other features .................................................................................................................................................. 25 Formatting your email’s content ....................................................................................................................................... 26 Setting styles for HTML ‘real text’ content ................................................................................................................ 26 Setting font-family for HTML text content ................................................................................................................ 28 Setting font-size for HTML text content .................................................................................................................... 29 Setting color for HTML text content ........................................................................................................................... 30 Setting line-height for HTML text content ................................................................................................................. 31 Setting text link styling ................................................................................................................................................... 32 Extra reading ......................................................................................................................................................................... 33 1 Why is email display an issue in email marketing? Businesses and consumers use a wide variety of devices, email programs and apps (also called email clients or readers) including: • Microsoft Outlook desktop program (Windows & Mac OS) • Microsoft Outlook.com webmail • Microsoft Office 365 Mail webmail • Windows Phone Mail app • Apple Mail desktop program (Mac OS) • IBM Notes desktop program (Windows & Mac OS) • Google Gmail, G Suite and Inbox webmail • Google Gmail, G Suite and Inbox apps (Android & iOS) • Android device manufacturers’ own email apps • Yahoo! Mail webmail • Virgin Media Mail (uses Yahoo! Mail’s rendering engine) • AOL Mail webmail • Opera Mail desktop program • Mozilla Thunderbird desktop program ... and many more! Email marketing is delivered as HTML and CSS code, and each email program or app interprets this code slightly differently. As a designer, the challenge is to create email campaigns that are displayed as consistently as possible across as many email readers as possible. So, it makes sense that your emails are tested thoroughly before sending in as many different email readers as possible. Online testing services, such as Litmus or Email on Acid, are a great way to do this without having multiple testing accounts, programs and devices of your own. However, bear in mind these tend to just present screenshots, which is great for checking layouts, but you will still need test in a few ‘live’ readers to check web links, sharing links etc. work correctly. With live webmail testing, you can use browser Code Inspectors to troubleshoot particularly tricky issues, and for responsive emails, sending test campaigns to various mobile devices will give you a better picture of how your email will actually behave in varying viewport sizes, operating systems, and apps. 2 Expert Email Design There are quite a few pitfalls to be aware of when creating and sending HTML email campaigns, and the NewZapp Design Team’s many years of experience helps us to ensure the best results across all major email readers when designing and building editable (re-usable) email templates for your NewZapp account. In this guide we use this experience to take a look at the best practices for avoiding or working around some of the most common display issues encountered when creating any HTML email for sending via an Email Marketing System (ESP). NewZapp, like most ESPs, gives you the ability to upload and test send your email to all your live or email tester proofing email addresses. A good level of HTML and CSS knowledge is assumed, including things like Media Queries, embedded and inline CSS styles, and using HTML tables for page layout. We also offer supporting guides for Email Marketers editing their email campaigns, and Designers and Coders looking to create or edit their own HTML emails, particularly for use in the NewZapp email marketing system. Download a PDF Plus download the PDF copy of: containing the complete A-Z Best Practice for of everything we know! Marketers – Email How to… Building Display Issues Templates 3 Windows PC and Apple Mac desktop email programs Most Windows PCs and Apple Macs come with a default email program pre-installed, which can then be configured to collect and display emails for any email address from any mail server. Microsoft Mail comes as a standard installation with Microsoft Windows 10, but a lot of businesses install and use Microsoft Mail and some version of Microsoft Outlook instead. The latest Outlook 2007, 2010, 2011, 2013 & 2016 versions of Outlook, which use Microsoft Word to render HTML emails, are some of the more challenging readers to create emails for. Comes as the standard installation with Apple Mac OS. The Apple Mail latest version is Apple Mail 10 and, from experience, tends to be less troublesome than most other email programs. There are also third-party desktop applications available including: Widely used by medium-to-large sized businesses, IBM Notes (formerly Lotus Notes) is just one part of IBM’s database- IBM Notes driven Domino suite. It uses its own HTML display engine for emails, and since version 8.5 is less problematic than earlier incarnations. This free email reader counterpart to the Mozilla Firefox Mozilla Thunderbird browser is available across a range of operating systems. No significant email display issues are reported at this time. The latest version of the Opera web browser has the separate Opera Mail desktop application as its counterpart (previously Opera Mail it was an integral part of the Opera browser). Email display is generally fine, albeit with a few small foibles. 4 Webmail and mobile device email apps As mentioned previously, there are a number of free or subscription-based browser-based email readers available to use directly in your

Email Building Guide

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support