Version 4.0.1
Table of Contents THE DESIGNER S GUIDE TO CREATING NEWZAPP DRAG AND DROP TEMPLATES... 6 THE NEWZAPP SYSTEM... 7 HOW THE SYSTEM WORKS... 7 THE TWO MAIN HTML EMAIL DESIGN OPTIONS FOR NEWZAPP... 8 BASIC STRUCTURE OF A NEWZAPP HTML TEMPLATE... 9 WRITING AND EDITING HTML FOR NEWZAPP... 9 NAMING OF HTML FILES... 10 AT THE START OF THE HTML EMAIL CODE... 10 USING <META> TAGS... 10 CSS STYLE FORMATTING IN EMAILS... 11 HTML BODY ATTRIBUTES... 12 EMAIL DISPLAY ON MOBILE DEVICES... 13 BUILDING EMAIL TEMPLATES USING HTML TABLES... 14 SHOULD YOU USE AN HTML <TABLE> OR <DIV> LAYOUT?... 14 THE <TABLE> TAG... 14 THE TABLE ROW <TR> TAG... 14 THE TABLE CELL <TD> TAG... 14 STRETCHING BACKGROUND COLOUR FILLS... 15 USING TABLE CELL PADDING/SPACING... 15 SETTING TABLE BORDERS... 15 SETTING INLINE STYLE BORDERS... 17 AVOIDING GAPS APPEARING IN OUTLOOK 07+... 18 AVOIDING GREY BACKGROUND COLOUR SHOWING THROUGH ON ANDROID MOBILE DEVICES... 18 AVOIDING UNWANTED COLOURED BORDERS ON IOS MOBILE DEVICES... 18 CREATING A NEWZAPP HTML EDITABLE TEMPLATE... 20 DECLARING A NEWZAPP EDITABLE HTML TEMPLATE... 20 NEWZAPP CUSTOM VIEW ONLINE LINK... 20 NEWZAPP CUSTOM UNSUBSCRIBE LINK... 21 2
THE NEWZAPP FORWARD TO A FRIEND FUNCTION... 21 DEFINING FIXED DROP ZONES FOR INSERTING BLOCKS INTO A NEWZAPP HTML TEMPLATE... 22 EMAIL PERSONALISATION... 23 CREATING A NON-EDITABLE HTML TEMPLATE... 24 USING COLOURS IN HTML EMAIL TEMPLATES... 25 ADDING COLOURS TO HTML EMAILS... 25 THE NEWZAPP COLOUR PICKER... 25 SETTING CELL BACKGROUND COLOUR FILL... 25 SETTING TEXT COLOUR... 25 ENSURING TEXT HAS SUFFICIENT CONTRAST AGAINST A BACKGROUND COLOUR... 26 SETTING FONT STYLES IN HTML EMAIL TEMPLATES... 26 TEXT FORMATTING... 26 COMMONLY USED WEB-FRIENDLY FONTS... 27 ENSURING ARIAL BLACK DISPLAYS IN ALL READERS... 28 COMMONLY USED WEB-FRIENDLY FONT SIZES... 28 CHANGING TEXT ATTRIBUTES WITHIN A SENTENCE... 29 PREVENTING MOBILE DEVICES FROM ENLARGING YOUR TEXT... 29 IMAGES IN HTML EMAIL TEMPLATES... 30 RECOMMENDED IMAGE FILE FORMATS... 30 SOURCING IMAGES FROM WITHIN SYSTEM.NEWZAPP.CO.UK... 30 SOURCING IMAGES FROM A LOCATION OUTSIDE SYSTEM.NEWZAPP.CO.UK... 30 CORRECT IMAGE DIMENSIONS... 31 TABLES AND IMAGE PLACEMENT... 31 AVOIDING GAPS APPEARING ABOVE AND BELOW IMAGES... 31 IMAGES FOR USE IN EDITABLE AREAS... 32 BACKGROUND FILLS AND IMAGES... 33 SETTING A FLAT BACKGROUND COLOUR FILL... 33 USING BACKGROUND IMAGES IN HTML EMAILS... 34 SETTING A SINGLE OVERALL BACKGROUND IMAGE IN A HTML EMAIL... 34 SETTING EXTERNAL LINKS ON TEXT AND IMAGES... 36 3
SETTING LINK STYLING ON TEXT CONTENT... 36 SETTING LINK STYLING ON DYNAMIC CONTENT... 36 PREVENTING LINKS FROM APPEARING ON TELEPHONE NUMBERS... 37 LINK BORDERS AROUND IMAGES... 39 LINKS CREATED USING IMAGE MAPS... 39 ADDING INTERNAL LINKS TO TEXT AND IMAGES... 40 INCLUDING A JOHNSON BOX ABOVE YOUR TEMPLATE DESIGN... 40 ADDING SOCIAL MEDIA BUTTONS... 41 TWITTER TWEET BUTTON OR LINK... 41 FACEBOOK SHARE BUTTON OR LINK... 41 LINKEDIN SHARE BUTTON OR LINK... 41 GOOGLE+ SHARE BUTTON OR LINK... 41 ADDING AN HTML UNSUBSCRIBE FOOTER... 42 UPLOADING AND TESTING TEMPLATES IN A NEWZAPP ACCOUNT... 43 UPLOADING EMAILS... 43 TESTING YOUR TEMPLATES - IMPORTANT GUIDELINES... 44 EMAIL READER TESTING ACCOUNTS... 44 CREATING A TEST EDITABLE EMAIL... 44 SENDING TEST EMAILS... 45 CODE EXAMPLES FOR TYPICAL NEWZAPP HTML TEMPLATES... 46 NEWZAPP TEMPLATE TYPICAL <HEAD> CODE... 46 NEWZAPP HTML TEMPLATE TYPICAL VIEW ONLINE CODE... 47 NEWZAPP TEMPLATE TYPICAL [FORWARDTEXT] CODE... 47 TYPICAL WEB-FRIENDLY FONT-FAMILIES... 47 FONTS COMMONLY INSTALLED ON CURRENT OPERATING SYSTEMS... 47 MOBILE DEVICE INLINE CSS FOR STOPPING TEXT-SIZE ADJUSTMENT... 48 FONT SIZES COMMONLY USED IN EMAIL TEMPLATES... 48 TYPICAL INLINE STYLE FOR HTML TEXT... 48 4
TYPICAL INLINE STYLE FOR HTML TEXT LINKS... 48 INTERNAL ANCHOR LINKS... 49 NEWZAPP FORWARD TO A FRIEND LINK URL... 49 COPY AND PASTE AS REQUIRED.... 49 NEWZAPP UNSUBSCRIBE LINK URL... 49 TYPICAL INLINE STYLE FOR BORDER... 49 EMAIL CAMPAIGN DYNAMIC TWITTER TWEET LINK... 50 EMAIL CAMPAIGN DYNAMIC FACEBOOK SHARE LINK... 50 EMAIL CAMPAIGN DYNAMIC LINKEDIN SHARE LINK... 50 EMAIL CAMPAIGN DYNAMIC GOOGLE+ SHARE LINK... 50 NEWZAPP COLOUR PICKER HEXADECIMAL VALUES... 51 5
Overview The Designer s Guide to creating NewZapp Drag and Drop templates This guide is aimed primarily at anyone wanting to create an email template that will be delivered using the NewZapp Drag and Drop editor. A good understanding of hand-coding in HTML and CSS is assumed as well as a good understanding of image editing. Before you start, it is a good idea to download these 4 example templates and have them open in your HTML code editor to refer back to they will make the Designers Guide easier to understand. Because email readers and mail filters are constantly changing, this document is subject to ongoing updates. To be sure that you are using the latest version, please visit: http://www.newzapp.com/docs/newzapp-designers-guide-to-dnd-templates.pdf 6
The NewZapp System How the system works NewZapp is designed to allow users to create and send email campaigns using editable.html templates. The.html template file contains the email design, structure, fixed and editable content. 7
The HTML Template Structure Your emails will be handled by readers using their own proprietary email display software. They will likely be opened on machines running antivirus scanners and mail filters operating behind secure client firewalls. Simple text and RGB Colour Mode graphics should be used in HTML emails. The CMYK Colour Mode is designed for print use, and is incompatible with digital output. We recommend images are either.jpg,.gif or.png format. Other formats are not widely supported by all readers. Please note that.png images are not supported in some legacy readers. Animated.gif images will work as expected in all readers except Outlook 2007+ and Windows Phone, which display just the first frame. They also tend to have large file sizes, so optimise as much as possible if creating them. Dynamically coded elements such as JavaScript, Java, Flash, Shockwave etc will cause emails to be rejected by most readers, and therefore should not be used. <form> elements also do not work in HTML emails. The two main HTML email design options for NewZapp The first option is to create a re-usable NewZapp template with pre-defined editable areas. This can then be used to create new emails within a NewZapp account which are filled with content using the editing tools and sent to multiple recipients via the NewZapp email delivery system. The second option is to create a non-editable email with fixed content, which may then be uploaded into a NewZapp account and sent to multiple recipients via the NewZapp email delivery system. The choice is entirely yours. In the following sections we offer guidance on creating both editable and non-editable templates for use with the NewZapp system. 8
Basic structure of a NewZapp HTML template In the following sections we will discuss how to build a NewZapp-ready HTML email template using simple <table> elements, images, inline CSS, and CSS in the <head> of the email. Writing and editing HTML for NewZapp it is recommended that you use a code editor that does not add any additional formatting or proprietary code of its own to yours. The simplest HTML editor would be something like Notepad (Windows) or SimpleText (Mac). These are also useful for simple code cleaning formatted text can be converted back to plain text just by pasting into Notepad or SimpleText, then selecting and copying again. There are many other purpose-built HTML editors available that have additional useful features such as line-numbering, syntax colouring, code hinting, design previewing, automatic file managing and so forth. Complex Microsoft products (such as Word or FrontPage) are not recommended for designing your HTML email as these introduce unwanted extra code that causes issues both in NewZapp and many email readers. You can design the HTML template in a similar way to a simple HTML page. It is important that you decide on the areas and elements that need to be editable and which need to be fixed. You will have little control over the vertical size that editable areas will grow to, so keep this in mind and design a layout that will look good with varying amounts and sizes of content in each area. In areas such as editable email titles, date fields, taglines, contact details, product images etc, if you need to set a limit on the size a field grows to, ensure the end user is aware of this and make it as easy as possible to keep within these limits. Design emails to be between 600-700px wide to fit comfortably onto most screens. The main part of the email is typically centre-aligned, although you can just as easily set it to be left or right-aligned as required. Please download and refer to these 4 example templates 9
Naming of HTML files Normal web file extension naming procedures apply when creating an HTML email template. Do not use any spaces in the names of files or folders. At the start of the HTML email code Many commonly used standard HTML declarations can cause issues in different readers, for example the <!DOCTYPE > declaration, extra attributes within the <html> tag, <link> or <script> etc. For the doctype we advise you simply use <!doctype html> Within the <head> tag we recommend everything is removed apart from the <meta>, <title> and <style> tags specified below. <form> tags will be stripped out by most email readers and will not work at all in any of the others. Using <meta> tags You should include the Content-Type <meta> tag as shown here: <meta http-equiv="content-type" content="text/html; charset=utf-8"> This ensures the correct character set is displayed in all email readers. Mail filters also commonly require that this <meta> tag should be in place. Only include one Content-Type <meta> tag otherwise there will be problems displaying Special Characters e.g., %, @ For mobile device rendering we advise you use a <meta> tag to reset initial scaling where necessary: <meta name="viewport" content="initial-scale=1.0, width=device-width" /> And an important addition for Windows Phone devices: <meta http-equiv="x-ua-compatible" content="ie=edge" /> Should you wish to suppress ios detection of telephone numbers, include this ios-specific Format-Detection <meta> tag as below: 10
<meta name="format-detection" content="telephone=no" /> This will prevent ios devices turning phone numbers into instant-dial links and thus displaying them in the ios Mail default link style. see Setting external links on text and images CSS style formatting in emails HTML emails cannot have links to external stylesheets, and most desktop or web-based email readers either remove or will only use a limited subset of CSS when placed in the <style> declaration in the <head>. There are some CSS workarounds that have been found worth including in templates to target specific email readers whilst having no adverse effects on others. These will be mentioned in the pertinent sections. For example, single-cell tables with 100% widths are recommended for use where a stretching background colour fill is required for your email. In order for this to work in Outlook.com webmail, it is recommended the following style declaration is placed in the <head> of the email - otherwise, tables set to have 100% widths will collapse: <style type= text/css >.ReadMsgBody { width: 100%;}.ExternalClass { width: 100%;} </style> - see Adding background fills and images Another CSS style worth including: the following overrides most (but not all) email readers default link colours: <style type= text/css > td a, td a:link, td a:visited, td a:hover, td a:active, div a, div a:link, div a:visited, div a:hover, div a:active {color:#808080 } </style> 11
- see next and Setting external links on text and images Most mobile or handheld devices, however, do recognise CSS styles in the <head> and the use of these along with media queries are key to creating a responsive email layout. - see Email display on mobile devices For consistent formatting of text and other content across all email readers, though, we recommend the use of inline CSS styles directly around content as standard. - see Setting font styles in HTML email templates HTML body attributes It is recommended that all default margins are set to 0 i.e. leftmargin= 0 topmargin= 0 marginwidth= 0 marginheight= 0 You should also set your email s default text and link colours here. We recommend that all link variants (link=, vlink= and alink=) should be set to the same colour, as different link states are not recognised by all email readers. Be careful that you do not set your default link colour to be the same as the background colour anywhere an automatically-generated fixed text link is likely to appear. For example if the view online or unsubscribe link is on a white background, setting white as a default link colour means that the recipient will not be able to see them. Any text hidden this way may cause the email to be flagged as spam. Note that some online readers impose their own default link and text colours regardless. see Setting external links on text and images It is also useful to set a default font-family and font-size in the <body> as a fall-back for where tables are inserted that have no font styling set on them e.g. style="font-family:arial, Helvetica, sans-serif; font-size:13px;" 12
Email display on mobile devices If you are not designing your email to be responsive on narrower viewports, it is recommended that a mobile shim graphic is used in the HTML template to ensure emails scale correctly on mobile devices such as smartphones and tablets. NewZapp-designed templates commonly use a transparent 12px high.gif file set to be slightly wider than the width of the main email. In the 4 example templates they are in the foot of the code and called Mobile_Placeholder_640px.gif. 12px high images are used as a minimum to avoid nasty gaps appearing in certain email readers. see Images in HTML email templates Mobile device email readers then use this mobile shim as a minimum width when scaling your email to fit on the screen. The ability to zoom in or out of the email is not affected. If you are creating a responsive email layout, it is recommended you see this series of blog articles on Essential responsive email code and refer to the code used in the <head> of the 4 example templates. 13
Building email templates using HTML tables Should you use an HTML <table> or <div> layout? Although <div> tags are required in several places for the NewZapp system, the overall structure must be created in tables. The simpler the table structure the better. Do not use merged cells. The <table> tag Each <table> tag needs to contain the following HTML attributes: width border (set to 0 - see later) cellpadding (set to 0 see later) cellspacing (set to 0 see later) e.g. <table width="650" border="0" cellpadding="0" cellspacing="0"> The align= attribute on a <table> tag should not be required when using 100% width singlecell tables for backgrounds, as the alignment should be set on the stretching table cell. Please note that support for inline styles placed inside the <table> tag is inconsistent in most desktop and web email readers. The table row <tr> tag You can use as many rows as you like, but it is good practice to use as few columns within each table as possible, as some email readers expand table widths uncontrollably when multiple columns are used. The table cell <td> tag For non-responsive emails it is recommended that table cell widths (and heights where required) should be clearly defined in pixels. For responsive emails it is only necessary to define pixel widths on tables and table-cells that require them for desktop layouts. On narrower mobile layouts generally reverting table widths to percentages and leaving widths off table cells gives best results. All table cells that contain a HTML element and/or text should have clearly defined horizontal align= and vertical valign= alignments set. Do not rely on the default alignment setting, as this varies from reader to reader. 14
Stretching background colour fills Where a stretching background colour fill is required behind or above/below your email, use 100% width single-cell tables rather than placing a bgcolor= in the <body> tag, which can cause problems or be ignored altogether by many email readers see Using colours in HTML email templates Using table cell padding/spacing We do not advise the use of either HTML or CSS table padding or spacing these either give unpredictable results or are ignored in many readers. It is recommended that for consistent results, the following methods are used for creating padding within your layout: Empty rows with set heights for vertical padding - To work best across all readers we recommend using table rows by setting heights in the <td>. For best display in Outlook 2013, you also need to: o o o use in the cell <td> to help prop it open for rows 19px high or less you need to add an inline style with font-size and lineheight set to be the same as the cell height you also need to use -webkit-text-size-adjust:none; and -ms-text-sizeadjust:none; to prevent browsers from adjusting the font-size and line-height e.g. <td height= 12 align= left valign= top style= -webkittext-size-adjust:none; -ms-text-size-adjust:none; font-size:12px; line-height:12px; > </td> Please note that the inside the <td> is required for this technique to work. Also, the space in front of -webkit-text-size-adjust:none; is important. Empty columns with set widths for horizontal padding - Set-width graphics called shims may be required inside these instead of the non-breaking space in order to maintain thinner column widths where editable content may crush them down. Setting table borders HTML table border= attributes display unpredictably in many email readers. 15
It is recommended that a combination of empty cells with background fills and nested tables are used if possible. e.g. to create a 3px purple border all round as shown: <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="150" align="center" valign="top" bgcolor="#663399"> <table width="144" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="144" height="3" align="center" valign="middle" style= -webkit-text-size-adjust:none; -ms-text-size-adjust:none; font-size:3px; line-height:3px; > </td> </tr> <tr> <td width="144" align="center" valign="top" bgcolor="#ffffff"> <table width="124" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="124" height="10" align="center" valign="middle" style= -webkit-text-size-adjust:none; -ms-text-size-adjust:none; fontsize:10px; line-height:10px; > </td> </tr> <tr> <td width="124" align="center" valign="top">text and image content here</td> </tr> <tr> <td width="124" height="10" align="center" valign="middle" style= -webkit-text-size-adjust:none; -ms-text-size-adjust:none; fontsize:10px; line-height:10px; > </td> </tr> </table> </td> </tr> <tr> <td width="144" height="3" align="center" valign="middle" style= - webkit-text-size-adjust:none; -ms-text-size-adjust:none; font-size:3px; lineheight:3px; > </td> </tr> 16
</table> </td> </tr> </table> Setting inline style borders It is possible to use inline style borders on table cells provided it is a full border of a single colour and thickness. Please note that some email readers may show a slightly different colour or revert the border colour to black. The border thickness must also be taken into account when calculating the cell width as part of the overall table width. This avoids issues in readers such as Outlook 07+. Style borders work best on single-cell tables. This is one instance where a shorthand style declaration seems to work correctly e.g. to create a 4px red border all round as shown: <table width="264" border="0" cellspacing="0" cellpadding="0" > <tr> <td width="256" align="center" valign="top" bgcolor="#f1f1f1" style="border:4px solid #FF0000;"> <table width="216" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="216" height="20" align="center" valign="top"> </td> </tr> <tr> <td width="216" align="center" valign="top">text and image content here</td> </tr> <tr> <td width="216" height="20" align="center" valign="top"> </td> </tr> </table> </td> </tr> </table> 17
Avoiding gaps appearing in Outlook 07+ This issue affects email campaigns that have an unusually large amount of content. The Microsoft Word rendering engine used by Outlook 07+ places a limit on the height of content within each table and can insert ugly blank spaces where this limit is exceeded. With this in mind, using several tables one under the other to break up content makes it easier to avoid any one table getting overly long. Please note that this may conflict with another issue in ios mobile devices see below Avoiding grey background colour showing through on Android mobile devices The default background colour for the body of an email in Android is a light grey rather than white. This colour will show through any table cells that do not have a colour set on them. It is recommended that a 100% width single-cell table is used as a container for the rest of the email layout, with a cell background colour set of white #FFFFFF. Android s default grey background will show through uncoloured table cells Cell colours in ios will show through as border colours when a multi-cell table is placed on top. Avoiding unwanted coloured borders on ios mobile devices An additional issue is that the internal borders on multi-cell tables in an email can show in ios devices. 18
These will be the colour of the background the table is sitting on, even if the border is set to zero. The only solution is to ensure that tables containing multiple cells that are meant to be the same colour are placed on an appropriately-coloured cell background. You may need to create a singlecell table for the purpose. There is no need to apply colour to the table s individual cells. 19
Creating a NewZapp HTML editable template If you are creating a NewZapp HTML editable template, the next step is to add the NewZapp custom tags and URLs to your layout. These will enable the template to have editable areas, advanced functionality and dynamic content once it is within and sent from the NewZapp account. Please download and refer to these 4 example templates Declaring a NewZapp editable HTML template At the very start of the code you need to add <!--editorversion_3--> for the NewZapp system to recognise the file as an editable template. Your email structure should be contained in a 100% wide wrapping <table> with a single <tr> and single 100% wide <td> inside that. The100% wide wrapping table requires the following attributes: id="pagecontainer" class="editor_content" The 100% wide <td> inside requires the background colour to be specified (i.e. bgcolor="#ffffff"). This sets the background colour for the email background and can be edited in the NewZapp system. You also need a <div> inside this <td> with the background colour repeated in CSS in the style attribute and id="page" i.e. <div id="page" style="background-color:#ffffff;"> The rest of your <table> based structure sits inside this <div> NewZapp custom view online link The NewZapp system offers a hosted online copy of each email campaign for recipients who experience difficulties seeing it in their viewers. The link to this online copy is inserted wherever the [link] placeholder tag is placed. NewZappdesigned templates generally have these at the top of the design e.g. To view this email online, [link]. 20
NewZapp will convert the [link] tag as the email is sent to the words follow this link with a dynamically generated link to the online version of the email. Please note the hyperlink text will always say follow this link but the text around it can be whatever you choose. NewZapp custom unsubscribe link By law all commercial email campaigns must provide the recipient with a clear means of unsubscribing from the sender. The NewZapp system creates an automatic means of unsubscribing from the sending account using the following URL: http://system.newzapp.co.uk/remove.asp?cid=@cid@ The @CID@ custom placeholder tag ensures that the unsubscriber is removed from the correct NewZapp account. see Adding an HTML unsubscribe footer This URL can be used on fixed content in the HTML and Text version templates, or on editable text or image content with the NewZapp account. The NewZapp Forward to a Friend function The NewZapp system gives you the option of including a link in HTML emails which allows recipients to forward a copy of the email campaign to other email addresses, along with a short text message. The forwarded email also gives the new recipients the chance to subscribe to the sender s NewZapp account. These forwarded emails are sent directly from the senders account as additional sends on the original campaign and are tracked in Track > Reports, however the forward recipient s email address is kept anonymous until they subscribe. The link URL is: http://system.newzapp.co.uk/addftaf.asp?cid=@cid@ 21
The @CID@ custom placeholder tag ensures that the recipient receives the correct email campaign from the correct account. This URL can be used on fixed content, editable text or image content with the NewZapp account. This link works in conjunction with the [forwardtext] custom placeholder tag. Normally unseen, the [forwardtext] tag is only activated in forwarded emails, and is used to show details of: the email address of the forwarder, a short message from the forwarder, and a link to subscribe to the NewZapp account that sent the campaign The [forwardtext] tag must always be surrounded by a <div> or other element with the following class set in it: class="forward-text" Even if a Forward to a Friend link isn t fixed in an HTML template, it is a good idea to include the [forwardtext] custom placeholder tag somewhere in the HTML template so that you have the option of adding the link to editable text or image content if required later on. Defining fixed drop zones for inserting Blocks into a NewZapp HTML template The use of specific <div> tags define drop zones for all elements that you expect to change per email campaign, such as: Date/Issue number Taglines/slogans Email Title A list of contents Headings and body content Contact information Specific hyperlinks Logos and images Adverts The drop zone <div> tag is placed inside a <td> - we recommend that inline styles should be set in case text content is added to this area in the NewZapp editor. see Setting font styles in HTML email templates 22
The structure for a drop zone is as follows: <div class="editor_block_area"> <div class="editor_block_area_defaulttext"> </div> </div> You don t need to add anything inside the <div> tag. You only need one set of these <div> tags per drop zone you will then be able to drag and drop an unlimited number of Blocks into this area from the default selection in the Blocks panel - or you can create your own in the email then save them to the Custom Blocks panel. Unless your design dictates otherwise, each editable area on a template will accommodate Layout Blocks, Text Content Blocks and Image Content Blocks to suit your email campaign. For further ideas, see the NewZapp Portfolio and these 4 example templates. Email personalisation Particular details about each email recipient may be included in the HTML and Text templates using the following standard NewZapp custom placeholder tags: [emailaddress] includes the recipient s email address [firstname] includes the recipient s first name [lastname] includes the recipient s last name [companyname] includes the recipient s company s name These details are derived from the subscriber database in the NewZapp account. Personalisation can be included in your design as a fixed element, or it can be added by the account user to an editable field within a template. Personalisation also works in the subject line of an email campaign, can be passed along in link URL queries, and can even appear in ALT tags. If any of the recipient s details are not available, the custom tag will be replaced in their email with a dash - by default. You can, however, define different default values for each personalisation tag in the NewZapp account s Settings > Preferences section. 23
It is also possible to create your own custom personalisation tags to insert additional data associated with your subscribers in Settings > Custom Fields. Creating a non-editable HTML template Rather than create dynamic areas for editable content, you can skip this step altogether and insert fixed text and image content instead. This means you can place text directly inside cells without using the <div> tags required for the NewZapp drag and drop editor. Depending on the complexity of your design it may actually be quicker to setup the basic structure of your email in HTML, then create the entire body content from a single editable area using NewZapp. Experiment with an existing Basic template within NewZapp and decide which approach best suits your purpose. It is recommended that you retain the elements that use these other custom placeholder tags: @CID@, [link], [emailaddress] All the personalisation tags may be fixed where required too. All other email design advice stands for getting best results in all readers. - see also Testing your templates important guidelines 24
Using colours in HTML email templates Adding colours to HTML emails It is recommended that colour values themselves are defined using either the RGB standard or the Hexadecimal standard e.g. for Websafe Basic Red: Hexadecimal = #FF0000 RGB = rgb(255, 0, 0) NewZapp-designed HTML emails and the NewZapp system use the Hexadecimal standard. The NewZapp colour picker Colours within the NewZapp editor are applied directly to text, as a highlight, or to table and image borders using the colour picker (right). The colours are defined using Hexadecimal ( Hex ). It is often useful when creating a HTML template to use the hexadecimal values of these 220 web-safe colours as a basis when setting colours. see NewZapp colour picker hexadecimal values Setting cell background colour fill Default colours for cell backgrounds are best set as the cells own HTML bgcolor= attribute e.g. bgcolor="#990000" - see Background fills and images Setting Text colour Default colours for both fixed and editable text may be set using the inline CSS color: attribute e.g. color:#ff0000; - see Setting font styles in HTML email templates 25
Ensuring text has sufficient contrast against a background colour Web Accessibility Standards require a minimum level of contrast between the text and background colour, which may be enforced by some email readers. With certain tonally similar colour combinations, the reader may change text colour to either white or black for better readability. One way to ensure you pick a colour combination with sufficient contrast is to use a contrast checking tool such as WebAIM. Setting font styles in HTML email templates You cannot include links to external stylesheets in HTML emails and only a handful of desktop email readers (web readers are better but have a few notable absences) will recognise an internal stylesheet in the <head> of your document. It is recommended that Inline CSS styles are used within <td>, <a>, <span> or <font> tags only. Text formatting In most instances you will need to insert an inline style declaration within a table cell <td> to define the text formatting e.g. <td width= 300 align="left" valign="top" style= font-family: Arial, Helvetica, sans-serif; font-size:13px; color:#336699; font-weight: bold; font-style: italic; > Do ensure all required style attributes are included, such as font-family color font-size font-weight text-decoration Many email readers will otherwise replace any missing attributes with their own defaults. All HTML and CSS attributes must use double quotes ( ) rather than single quotes ( ) around their values. Any nested styles that need them should then use single quotes 26
e.g. style= font-family: Lucida Grande, Arial, Helvetica, sans-serif; font-size:13px; color:#336699; not style= font-family: Lucida Grande, Arial, Helvetica, sans-serif; fontsize:13px; color:#336699; Commonly used web-friendly fonts Although any font can technically be added to a CSS inline style, it cannot be guaranteed that all email recipients will have it installed on their computer or mobile device. In addition, it should be noted that some email readers (e.g. Yahoo! webmail) won t necessarily display fonts correctly even when the font in question is actually available on the recipient s machine, instead substituting their own font. see Advanced email rendering issues It is recommended that inline CSS font-family: declarations should use web-friendly fonts that are commonly installed on all web devices. NewZapp currently has the following set of standard web fonts available on the editor toolbar for the styling of content when creating an email campaign with an editable template. These are a good starting point for font families used in HTML emails: Arial Arial Black *see special note below Comic Sans MS Courier New Georgia Impact Tahoma Times New Roman Verdana - see also Typical web-friendly font--families, Fonts commonly installed on current operating systems At the very least, the style declaration should always have web-friendly fallback fonts included so that you can be sure of how the text will display to all recipients e.g. style= font-family: Helvetica, Arial, sans-serif; 27
or style= font-family: Georgia, 'Times New Roman', Times, serif; Note that fonts with one or more spaces in their name must be contained within single quotes. Ensuring Arial Black displays in all readers Some email readers will not display the Arial Black font, instead reverting back to Arial Regular. It is therefore recommended that Arial Black should be generally avoided as a default font. However, if Arial Black is really needed a good workaround is to also set font-weight:900; in the CSS inline style so that Arial Regular will become as bold as possible if shown e.g. style= font-family: Arial Black, Arial, Helvetica, sans serif; fontsize: 18px; font-weight:900; Where Arial Black is shown, the extra font-weight is barely noticeable. Commonly used web-friendly font sizes Whilst you can technically set the font-size to be anything you like, for consistency, deliverability and readability you should be aware of the following: A font-size of 10px or under is liable to have inconsistent formatting in different readers many adjust letter spacing or line-height, some even increase the size to 11px by default. With font-sizes above 18px, spam filters can score negatively if they think you are using shouting text, so it d a good idea to restrict any use of larger sizes to shorter headings if possible. It is recommended that inline CSS fonts should be defined in pixel units, as other units can give inconsistent results. The NewZapp editor currently offers the following standard web-friendly font sizes on the toolbar for text added to editable areas. It is recommended that these are followed when setting default font-sizes for fixed and editable text areas in your HTML template. 8px 9px 10px 11px 12px 13px 14px 16px 18px 20px 22px 24px 30px 36px 48px 72px 28
Please note that certain font-sizes are omitted from the list - experience has shown that these do not render consistently across all readers. In NewZapp, you can always reset any formatting applied to editable content back to default values by using the remove formatting button. Changing text attributes within a sentence To change text attributes mid-sentence, it is recommended to use <span> or <font> tags e.g. <td width= 300 align="left" valign="top" style= font-family: Arial, Helvetica, sans-serif; font-size:13px; color:#336699; >Lorem ipsum dolor <span style= color:#ff6600; font-weight: bold; >sit amet</span>, consetetur sadipscing elitr</td> - See also Setting external links on text and images for applying inline styles to anchor tags. Preventing mobile devices from enlarging your text Mobile devices, especially smartphones, will often increase the size of text in emails to make them easier to read. If it is crucial to your design that this should not happen, for example if increased text size in particular fields would break apart the design, you should also include these attributes in the inline style: -webkit-text-size-adjust:none; -ms-text-size-adjust:none; e.g. style= -webkit-text-size-adjust:none; -ms-text-size-adjust:none; fontfamily: Arial, Helvetica, sans-serif; font-size:13px; color:#336699; Please note that these style rules need to be listed first and have a space before each hyphen to work correctly. 29
Images in HTML email templates Recommended image file formats Web-standard 72dpi.jpg,.gif or.png image file formats should be used for best results in all readers. Other file types (e.g..bmp or.tiff) are not supported by all email readers. Please ensure the Colour Mode for images is set to RGB rather than CMYK. Images using the CMYK colour mode will still work but may show colours inconsistently as this mode is for print use. To avoid long image download times, it is advisable to optimise your images to the smallest possible file size whilst still maintaining a good quality. Typically the.gif format is best for images containing text and areas of flat and crisp-edged colour e.g. logos, vector graphics. The.jpg format is best for images with smooth and subtle graduations in colour e.g. photographic imagery, 3D models. The.png format is best for images that would otherwise have been created in.gif format, but that use transparency, e.g. drop shadows, rounded corners. Do not use spaces in image names as the images will then not display at all in some email readers. Sourcing images from within system.newzapp.co.uk Every NewZapp account comes with hosted space to store images and it is highly recommended that this is taken advantage of when building HTML templates. When creating your template simply save all the images in the same folder as your HTML file and upload these at the same time. Within your template you need to use relative paths for your images as the template upload system will automatically save your images in your account and create the correct paths to them in your template. e.g. src="example.jpg" Sourcing images from a location outside system.newzapp.co.uk It is possible to source fixed template imagery (i.e. not for use in editable areas) from an online location of your choice. 30
Be aware, however, that will you need to ensure the images remain there for as long as they are needed and you need the full URL to use as the image source path. Correct image dimensions When inserting fixed template images ensure that the image has the correct HTML width= and height= attributes e.g. <img src= example.jpg width= 100 height= 100 /> Having the correct width and height attributes set on each image prevents long ALT text content from distorting image placeholders in the preview pane of some email readers (e.g. Outlook 07+). Always ensure your images are used at their correct original dimensions. Resizing an image by altering the dimensions in the HTML code will not be recognised by some email readers. Many will revert back to their original size by default, thus breaking your layout. Tables and image placement For best results, each image within a NewZapp HTML template should always be contained within its own individual HTML table cell, particularly if they are part of a group of images that need to be flush and without gaps. Avoid placing several images in the same cell, as wrapping onto the next line may occur. Avoiding gaps appearing above and below images In Outlook 2013 if an image is 19px tall or less then the height of the table cell it is placed in will be increased to be at least 19px, placing space above the image. Additionally in readers like Lotus Notes if an image placed in a table cell is less than 12px tall, a gap will be added underneath or above it to make the height of that cell up to 12px. The best way to allow images with heights of 19px or less to display consistently in all readers is to: always ensure your images are at least 12px high use the method as outlined below: o set the image height in the <td> 31
o add an inline style with font-size and line-height set to be the same as the cell height e.g. <td height= 12 align= left valign= bottom style= fontsize:12px; line-height:12px; ><img src= example.jpg hspace="0" vspace="0" border="0" width= 600 height= 12 /></td> Other readers (e.g. Gmail, Hotmail) require an inline style fix to be added to each <img /> tag within a <td> to prevent white gaps appearing below them: style= display:block e.g. <td with= 100 height= 100 align= center valign= top ><img src= example.jpg width= 100 height= 100 style= display:block /></td> This is particularly important if you are slicing up an image in order to incorporate separate hyperlinks on each slice and you need the finished group of images to be flush and without gaps. Images for use in editable areas If you are designing the template to be used by one of your clients, you may wish to consider your client s image editing expertise. It may be useful to provide the client with stock images e.g. horizontal and vertical separators or buttons designed as calls to action. Upload these stock images directly into the client s NewZapp account Image Manager. Try to name images so they are easily found in the Image Manager e.g. banner_01.jpg or button-more-info.gif Do not use spaces in image names as they will not be displayed in some email readers - see Testing your templates important guidelines 32
Background fills and images Background fill colours and images are as essential a part of any HTML email design as fixed images and text content. They allow you to make the email much easier to read and help direct attention to specific messages you want to get across. Whilst flat colour fills set in tables <table> and table cells <td> are supported in most email readers, the support for colour fills set in any other HTML element is patchy. The same is true of background images - some email readers do not display them at all, or will display them in only one element. Setting a flat background colour fill It is recommended colour fills are set in the <table> or <td> for best results rather than any other tags e.g. <body>, <div> or <tr> Many email readers ignore background colours defined in the <body> tag, and some even apply their own default colours (e.g. mobile devices). If you need to have an overall background fill colour for your email, using a 100% width stretching single-cell table as a container gives the most consistent results. Use the HTML bgcolor= attribute in <table> or <td> tags rather than the inline CSS background-color: attribute. In <div> tags you can use the inline CSS background-color: attribute, but be aware this is not supported in all readers. It is recommended the colour is set as a Hexadecimal value (e.g. #FF6600, #CCCCCC). Do not use the shorthand version (e.g. #F60, #CCC) as many email readers will not recognise it. You can set any colour, but be aware that some shades are not supported by some email readers - see NewZapp colour picker hexadecimal values for a list of the standard web colours used in NewZapp editor colour pickers. 33
Using background images in HTML emails As mentioned, you need to bear in mind that email readers (including Outlook 07+ and Lotus Notes) do not support background images set in <table>, <tr> or <td> tags. Even more email readers do not support background images set in the <body> tag. Where possible, it is recommended to use fixed images and graphics inserted into table cells instead. see Images in HTML email templates If you need to use background images in tables, always insert them into a <td> tag. Think carefully about using them in cells that are expected to change in size (e.g. in an editable field). It may be necessary to use an extra-long image that is gradually revealed, or a shorter image that will repeat vertically or horizontally. Set the image in the HTML background= attribute for the <td> tag. The inline CSS background: is not supported in many email readers. Bear in mind also that inline CSS attributes that control how background images repeat e.g. style= background-repeat: repeat-y; are not widely supported either. In all cases always set a suitable flat background colour fill for each table cell to fall back to if images are not displayed. Setting a single overall background image in a HTML email Bearing in mind the above, it is still possible to set a single overall large or repeating background image effect so it appears in Outlook 07+ and Lotus Notes as well as other email readers. In the first instance, set an image as the background of the <td> for a single-cell 100% width stretching table. This will be displayed by the majority of email readers but ignored by Outlook 07+ and Lotus Notes. Set a similar image as the background of the <body> tag. This will tend to be ignored by most email readers but shown by Outlook 07+ and Lotus Notes. 34
Please note however that there are some readers that will show both images, with the background image in the table <td> sitting on top of the one in the <body>. Background image in table cell <td> You will therefore need to adjust one of the background image versions slightly to allow for any slight mismatch between the two methods that tends to occur. Background image in <body> tag Test thoroughly in multiple email readers to make sure you are happy with the results see Testing your templates important guidelines 35
Setting external links on text and images The default link colour for the whole email is set in the <body> tag. This means that any fixed or editable text or images that have links applied to them will use this colour in the first instance to colour the link text, link text underlines and image link borders. However, many email readers will try to override any text link characteristics that may be defined in the <body> tag and use their own formatting (e.g. blue underlined text, different font-size, different font-family etc). This is in effect what the Colour Picker does for editable text within the NewZapp editor. see Using colours in HTML email templates Setting link styling on text content For text links it is recommended that full inline CSS styles should be applied on the <a> tag around each fixed or editable piece of text too, even if it is already set on the <td> for that content. The inline CSS for text links is the same as that for any other formatted text area, except that it is placed within the <a> tag itself and has an extra text-decoration: attribute to define whether or not the link has an underline e.g. <a href= http://www.example.com style= font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #0000FF; font-weight: bold; text-decoration: underline; target= _blank >example link</a> It is important to include all the attributes within the style declaration to prevent email readers inserting their own. Setting text-decoration:underline; keeps the link underline the same colour as the link text. You can of course also set this to be text-decoration:none;. It is recommended that all links to external web pages have a target= _blank attribute. This is not really necessary for email links (mailto:). Setting link styling on dynamic content You cannot set a fixed text style on for custom placeholder tags like 36
@link@, [emailaddress], [forwardtext] using the above method as they don t actually have an <a> tag until they are replaced by a dynamically-generated link on sending. One workaround that works for most readers is to place this <style> declaration in the <head> of the HTML template: <style type="text/css"> td a, td a:link, td a:visited, td a:hover, td a:active, div a, div a:link, div a:visited, div a:hover, div a:active {color:#808080} </style> You will need to update the color:#808080 with the hex value of the link colours in the <body> tag. This style declaration targets any links that lie within a <td> or a <div>, but be aware that this does not work for all email readers. Preventing links from appearing on telephone numbers A growing trend amongst email readers that are also aimed at smartphones and other mobile devices is that they now detect and convert telephone numbers into hyperlinks that can be used for instant dialling. These are formatted the same way as a text link using the default link styling. If you do not wish telephone numbers to display as underlined links in this way, setting an empty (un-linked) <a> tag (no href= ) around the telephone number often works. The full inline CSS styling will then need to be inserted as previously described for within the <td> e.g. <a style= font-family: Verdana, Arial, Helvetica, sans-serif; fontsize: 13px; color: #0000FF; font-weight: bold; text-decoration: none; > +44 01234 567 8900 </a> The text-decoration:none; is important to stop the telephone number appearing to be an underlined link. However, in many mobile devices it will still actually be a smart link when clicked on. 37
You will also need to have this style in the containing table cell <td>, otherwise email readers like Outlook 2007+ will revert to using default font styles e.g. Times New Roman e.g. <td align= right valign= top style= font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #0000FF; font-weight: bold;><a style= font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #0000FF; font-weight: bold; text-decoration: none; > +44 01234 567 8900 </a></td> Mobile devices using ios also detect and convert telephone numbers into hyperlinks that can then be used for instant dialling. However, the solution shown above does not work for these. As mentioned in previous sections a slightly different workaround is required in this case - you will need to also insert this Mac-specific <meta> tag into the <head> of the template: <meta name="format-detection" content="telephone=no" /> 38