Table of Contents Find out more about NewZapp
|
|
|
- Colleen Hamilton
- 8 years ago
- Views:
Transcription
1
2 Table of Contents Why is display an issue in marketing?... 2 Expert Design... 3 Desktop PC and Apple Mac applications... 4 Web and mobile device readers... 5 Creating your HTML structure... 6 What to include in your <head> tag... 7 Key <meta> tags... 7 Essential CSS <style> declarations... 8 CSS Media queries for responsive s... 9 Using HTML tables to lay out your Stretching container table Using tables with multiple cells in your layout Setting horizontal and vertical spacing between elements Using background colour fills in your layout Creating borders around table cells Adding graphic content to your Inserting images into your layout Using background images in your layout Styling and other features Formatting your s content Setting styles for HTML real text content Setting font-family for HTML text content Setting font-size for HTML text content Setting color for HTML text content Setting line-height for HTML text content Setting text link styling Extra reading Find out more about NewZapp
3 Why is display an issue in marketing? Businesses and consumers use a wide variety of devices and programs and apps (also called clients or readers) including: Microsoft Outlook for Windows desktop Lotus Notes Google Gmail Virgin Media Webmail (uses older Gmail engine) Outlook.com (formerly Windows Live Hotmail) AOL Mail Orange Webmail (now part of EE) Yahoo! Mail Opera Mail Apple Mail for Mac OS X Mozilla Thunderbird Apple Mail for ios Mail for Android Microsoft Outlook for Windows Phone... and more. marketing is delivered as HTML and CSS code, and each program or app interprets this code slightly differently. As a designer, the challenge is to create campaigns that are displayed as consistently as possible across the majority of readers. It is crucial that your s are tested by sending to a wide range of different readers. The easiest way to check layout issues is to use an online testing service such as Litmus or on Acid, which present screenshots within a variety of readers. You should also send test campaigns to at least one or two live desktop or webmail readers (e.g. Outlook 2016, Gmail, Apple Mail) to be able to test things like web and sharing links, and to use browser code inspectors to help troubleshoot issues. For responsive s it is also recommended that you send test campaigns to mobile devices running Apple ios 7+, Android 4.2+ and Windows Phone 7+ to give you a true picture of how your will actually behave in smaller viewports. 2
4 Expert Design There are quite a few pitfalls to be aware of when creating and sending HTML campaigns. The NewZapp Design Team s many years of experience helps ensure the best results across all major readers when designing and building editable (re-usable) templates for your NewZapp account. In this guide we take a look at the best practices for avoiding or working around some of the most common display issues encountered when creating an HTML for sending via an Marketing System (ESP). NewZapp, like most ESPs, gives you the ability to upload and test send your to all your proofing addresses. A good level of HTML and CSS knowledge is assumed, including things like Media Queries, inline CSS styles and using HTML tables for page layout. We also offer supporting guides for Marketers editing their campaigns, and Designers and Coders looking to create or edit their own HTML s, particularly for use in the NewZapp marketing system. Download a PDF copy of: Common display issues - a guide for marketers Plus download the PDF containing the complete A-Z of everything we know! The Designer s Guide to Building Templates 3
5 Desktop PC and Apple Mac applications Most PCs and Apple Macs come with a default program pre-installed, which can then be configured to collect and display s for any address from any mail server. Microsoft Outlook 2007, 2010, 2013 & 2016 Comes as a standard installation with Microsoft Windows as part of the Microsoft Office suite of tools. These latest versions of Outlook are considered to be some of the more challenging readers to create HTML s for. Apple Mail for Mac Comes as a standard installation with the Apple Mac OS X and Apple ios. The latest version on Apple OS X is Apple Mail 8 and is one of the least troublesome programs. There are also third-party desktop applications available including: Lotus Notes 8.5 Widely used by medium-to-large sized businesses, Lotus Notes is just one part of IBM s database-driven Domino suite. It uses its own limited HTML display engine for s, but version 8.5 is less problematic than earlier incarnations. Mozilla Thunderbird This free reader counterpart to the Mozilla Firefox browser is available across a range of operating systems. No significant display issues are reported at this time. Opera Mail The latest version of the Opera web browser has the separate Opera Mail desktop application as its counterpart (previously it was an integral part of the Opera browser). display is generally fine, albeit with a few small foibles. 4
6 Web and mobile device readers There are a number of free or subscription webmail and online readers available to use directly in your browser, each with its own way of interpreting HTML s to consider. With mobile devices as with desktop computers, most come with their own applications pre-installed and specific to each Operating System. Again, there is also the option of installing thirdparty mail applications, usually via app stores. Very often an HTML will need to be designed to behave responsively on mobile devices, at the very least by stacking elements for easier reading on narrower screens. The most popular free web readers include: Google Gmail Virgin Media Webmail (uses an older Gmail engine) Outlook.com (formerly Windows Live Hotmail) AOL Mail Yahoo Mail Orange Webmail (now part of EE) Examples of mobile applications: Apple Mail for ios Mail for Android Outlook for Windows Phone On the following pages we will outline some of the more important best practice techniques for building HTML s that will give the best results in all major readers >> 5
7 Creating your HTML structure When building HTML s it is good practice to start with building and testing the complete template structure before going on to style and add links etc to the actual content. This means: setting the correct content in the <head> of the ; using a 100% width HTML container table in the <body> to set the background fill and alignment in the reader window; using nested tables and multiple table cells to define image and text content layout and spacing; inserting unformatted text and image content; if creating a responsive , adding CSS Media Queries for the desired viewport widths (breakpoints) then adding and testing the required classes on layout elements. On the following pages we will cover best practice when using these key structural elements to start creating your HTML >> 6
8 What to include in your <head> tag Key <meta> tags The following <meta> tag should be included as a matter of course: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> If you are designing a responsive , you should also include these: <meta name="viewport" content="initial-scale=1.0, width=device-width" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> If the Character Encoding (or Character Set) for your is not defined there is the risk that some readers may not display special text characters properly. The viewport attribute allows you to take control of mobile device viewports: Some readers default character encoding may not render special characters correctly o o initial-scale=1.0 sets the initial zoom level to 100% when the is first loaded. width=device-width sets the width of the to follow the screen-width of the device. It should be noted that for Windows Phone devices a separate CSS declaration is used to do the same thing. Setting http-equiv= X-UA-Compatible content= IE=edge targets Windows Phone devices specifically to prevent them rendering in Quirks Mode and interpreting your width incorrectly. 7
9 What to include in your <head> tag Essential CSS <style> declarations The following CSS styles should be included between the <head> and </head> tags of your as a matter of course: <style type="text/css">.readmsgbody {width: 100%}.ExternalClass,.ExternalClass p,.externalclass span,.externalclass font,.externalclass td,.externalclass div {line-height: 100%}.ExternalClass {width: 100%} 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:#000001;text-decoration:underline} img, a img {border:none!important} table, th, td, tr {color:inherit;font-family:inherit;font-size:inherit} </style> For those readers that do support CSS declarations in the <head> of your , these styles ensure that they do not impose their own CSS on your layout..readmsgbody and the.externalclass selectors are specifically for Outlook.com webmail to stop the background fill container collapsing. If no default link colour is set, some readers will impose their own default value The td a and div a selectors stop readers imposing their own link colours on your content - use the link colour value used in the <body> tag here. The img, a img selectors ensure that images display consistently with no borders (e.g. if they have links set on them). The table, th, td, tr selectors ensure that nested tables pick up the text styles set on the next parent element that has an inline style declaration rather than using the browser defaults. 8
10 What to include in your <head> tag CSS Media queries for responsive s CSS and Media Queries should be used in the <style> tag to alter the layout for narrower mobile viewport widths. You must also include class as shown. <style type="text/css"> /* desktop reader CSS here screen and (max-device-width: 645px), screen and (maxwidth: 645px) {width:device-width!important} /* mobile CSS here */ } </style> Use the CSS attribute selector method along with ~= and the!important declaration e.g. table[class~='responsive-table'] {width:100%!important} Support for CSS and Media Queries is almost universal for mobile devices. CSS selector targets Windows Phone 8 devices to ensure s fit the width of their screens correctly. The CSS attribute selector method stops readers that recognise CSS but ignore Media Query rules (e.g. Yahoo! webmail) implementing any responsive styles Using ~= in the attribute selector ensures that you can use multiple classes in HTML elements. The!important declaration prevents readers from imposing their own styles Minimise formatting in the CSS to keep the <style> declaration as short as possible - display on Windows Phone 7 seems to have an issue otherwise. 9
11 Using HTML tables to lay out your Stretching container table Use a single-cell 100% width table as the first element within your s <body> tag. Set the colour you want as a background fill (including white) and the alignment on the <td>. <table width="100%" border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed;"> <tr> <td width="100%" align="center" valign="top" bgcolor="#ffffff"><! // content here //--></td> </tr> </table> Some readers set their own default viewport background fill colour, so a 100% width container table ensures the correct background colour as well as stretching to fill all readers preview panes including on mobile devices. Setting align and valign on the <td> tag is more reliable than adding them to the <table> tag or using <center> tags. Use a 100% width container table to set background colour fill and alignment for inner content The style= table-layout:fixed; declaration is used to fix a bug in Yahoo! Mail which forced s to sit to the left of the preview pane. 10
12 Using HTML tables to lay out your Using tables with multiple cells in your layout Use tables with single or multiple cells to define your s layout. You can nest tables within other tables, but avoid nesting more than 9 tables deep. Never merge cells (i.e. rowspan on <tr> or colspan on <td>). cellpadding, cellspacing and border= on all tables should be set to 0. Always set the alignment for any <td> that has content (e.g. <td align= left valign= top >). Table layouts give the most stable results across all readers. Too many nested tables can give unpredictable results in some readers. HTML attributes like rowspan, colspan, cellpadding, cellspacing and border give mixed results and should be avoided. Each reader s default setting for cell alignment may not be what you expect (e.g. for Outlook.com the default horizontal alignment is align= center ) so it s best to set them in the <td> to avoid any surprises. Default alignment varies from reader to reader For responsive s all these attributes are easily altered using CSS and Media Queries to give a better layout on narrower viewports. 11
13 Using HTML tables to lay out your Setting horizontal and vertical spacing between elements For horizontal spacing, use narrower tables nested inside wider ones or table columns with set widths. For narrower columns you should insert an invisible spacer image of the correct width to prop it open. For vertical spacing, use a fixed-height <td> containing a character entity and CSS style declaration like so: <table width="100" border="0" cellspacing="0" cellpadding="0"> <tr> <td height= 8 style=" -webkit-text-size-adjust:none; -ms-text-size-adjust:none; font-size:8px; lineheight:8px;"> </td> </tr> </table> You should avoid the use of CSS padding and margins as they give inconsistent results. An invisible spacer image is useful to prevent the space being forced to collapse. Fixed-height table cells with an accompanying CSS style declaration was developed as a reliable method for vertical spacing in Outlook and works with all major readers. Note that It is important to use either a entity or an image to prop the cell open vertically. The webkit-text-size-adjust and ms-text-size-adjust CSS properties are crucial for stopping readers resizing cell content and therefore your spacer row height. For responsive s, if you need to create a CSS declaration within a Media Query to alter the height of a row be sure that you update all of the CSS properties i.e. font-size and line-height too. 12
14 Using HTML tables to lay out your Using background colour fills in your layout Set background colour fills only in <td>s. Use the HTML bgcolor attribute in the first instance, not CSS. When nesting tables with multiple cells inside <td>s you need to place the background colour fill on the parent container <td> rather than on the nested table s own individual cells. <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="300" align= center valign= top bgcolor= #CCCCCC > </td> </tr> </table> Background colour fills in <td>s have better support than setting them in the <table>, <tr> or even <body> tags. The HTML attribute bgcolor also has wider support than the CSS background-color property. Some readers (e.g. Mail for Android) have their own default background colour fill for their viewport. It is therefore recommended that for consistent results in all readers you should set a colour fill on the <td> of the 100% width container table. Some readers (like that used in Apple ios) will allow the background fill of a cell to show through as borders on any tables nested inside - especially noticeable on multiple-cell tables. Be aware that background colour fills can bleed through foreground colour fills in ios 13
15 Using HTML tables to lay out your Creating borders around table cells Create consistent borders around table cells by using table nesting and empty row spacing: o set the border colour as a fill in a <td>; Borders can be created purely using nested tables o place a 1 column 3 row table inside that allowing space each side the thickness of the required border; o the top and bottom cell row heights of that table should be the same as the required border thickness - use the vertical spacer method; o finally, set the middle <td> fill colour. Alternatively, it is possible to use an inline CSS style declaration on the <td>: <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="296" align= center valign= top style="border:5px solid #FF4000;"> </td></tr> </table> Support for the HTML border attribute is patchy at best amongst most common s readers. Testing has found the nested table method described above to give the most consistent results. Inline CSS borders work best on single-cell tables, with the same colour, thickness and style all round. Note that this method is known to cause alignment issues in Outlook desktop applications. Other readers may show different border colours or even revert it black. 14
16 Adding graphic content to your Inserting images into your layout Best formats for images are.jpg,.gif and.png. Images should be inserted into their own table cells with style= display:block in the <img> tag. All images should be used at their original size with correct HTML width and height attributes. For images 19px tall or less, the parent <td> needs to be treated as a vertical spacer: <td height= 15 align= center valign= middle style= webkit-text-size-adjust:none; -ms-text-sizeadjust:none; font-size:15px; line-height:15px; display:block > <img src= some-image.png width= 200 height= 15 hspace= 0 vspace= 0 border= 0 style= display:block /> </td> Using style= display:block in <img> tags stop readers inserting a white gap under images. However, images in the same <td> will move to their own line; place each image in its own <td>. Using CSS display:block prevents sliced images from breaking apart Many readers will show images at their original dimensions regardless of the width and height set - ensure they are the right size for your to start with. With images turned off, setting width and height stops the placeholders breaking the . A gap can appear above or below shorter images unless the <td> uses the vertical spacer fix. 15
17 Adding graphic content to your Using background images in your layout Set background images in the <td> using HTML background attribute note that they will tile in some web and desktop readers. A background colour fill should be set as an alternative. In responsive s, a fixed image can be hidden and an alternative background image shown use both the HTML background attribute and CSS background-image property as shown: <td height= 15 align= center valign= middle bgcolor= # background="mobile-bg.png" style="background-image:url('mobile-bg.png');"> </td> You cannot reliably set how the image will tile or be positioned within a cell using CSS. readers such as Outlook desktop application or Lotus Notes will generally ignore background images in a <td> so it is essential that a backup colour fill is set. Ensure you have a fill colour set in the <td> as a fallback if background images are not supported For these applications, a single background image can be set in the s <body> tag. If you use background images in both the 100% container table <td> and the <body> tag be aware that some readers that will show both images. For responsive s, placing the background image in both background and background-image ensures it appears in all major readers. 16
18 Styling and other features Once the s layout structure has been created, fixed content added, the next stage is to go back through and set the following: text and image links where required; text styling font, colour, size, weight etc; alt and title text where required; for editable s, this is the point where you need to define editable areas using custom tags and other elements as specified by your service provider. On the following pages we will cover best practice when adding these crucial properties to elements in your HTML layout >> 17
19 Formatting your s content Setting styles for HTML real text content Set the default text styling for your in the <body> tag using an inline CSS declaration. CSS formatting should be included in the <td> and any other HTML element enclosing content, such as <span>, <p>, <a>, <div> and <font> tags. <body style="font-family:arial, Helvetica, sans-serif; font-size:13px;"> <td align= left valign= top style=" -webkit-text-size-adjust:none; -ms-text-size-adjust:none; fontfamily:arial, Helvetica, sans-serif; font-size:14px; color:#993300; font-weight:normal; text-decoration:none; line-height:18px;">lorem ipsum <span style= color:#ffcc00; font-weight:bold; textdecoration:underline; >sit amet dolore</span> quora.</td> Default text styling set in the <body> tag ensures that any content that does not have any formatting of its own does not revert to browser defaults. Setting text formatting using CSS in the <head> of your doesn t work in all readers - inline CSS style declarations on individual HTML elements is more reliable. reader defaults will take over if inline styles are not included on the <td> and other elements surrounding HTML text Avoid using standard HTML attributes in <font> tags as this is not always recognised. Inline CSS set in elements immediately around content takes precedence over any other styling. Avoid using shorthand CSS notation for text styling the full longhand style declaration with each attribute defined separately and in full is more reliable. In responsive s, you can alter text formatting attributes by adding alternative styles to a Media Query then setting classes on the relevant <td>. 18
20 Formatting your s content Setting font-family for HTML text content Limit your selection of primary and fall-back fonts in the font-family property to web-safe examples for consistent results across most readers e.g. style="font-family:arial, Helvetica, sans-serif; style= font-family: Times New Roman, Georgia, sans-serif; Web-safe fonts are supported by the majority of desktop reader applications and online webmail programs. However, it should be noted that most mobile devices have a very limited range of fonts installed, so your styling may fall-back to each device s own serif or sans-serif font. Example of font-families in Outlook 2016 How they display in Apple Mail ios 8 How they display in Android 4.2 Mail How they display in Windows Phone 8 19
21 Formatting your s content Setting font-size for HTML text content Use only pixel (px) units rather than pt, em or % values. Avoid using sizes below 10px, and limit the use of larger font sizes e.g. 32px or more - consider using a graphic for these instead. <td align= left valign= top style=" -webkit-text-size-adjust:none; -ms-text-size-adjust:none; font-family:arial, Helvetica, sans-serif; font-size:14px; color:#993300; line-height:30px;">lorem ipsum sit amet dolore quora.</td> Font-sizes smaller than 10px are not only difficult to read but may be flagged up by spam filters for this reason. Conversely, over-large font-sizes may be flagged by spam filters for shouting. readers such as the Outlook desktop application will increase the letter-spacing on 11px text, potentially breaking your layout by overflowing onto more lines. readers such as Outlook can add extra white-space in 11px text with unexpected results font-size is easily adjusted for responsive s using CSS and Media Queries. 20
22 Formatting your s content Setting color for HTML text content Use either Hex (e.g. #FFCC00) or RGB (e.g. rgb(192,45,67)) values in the color CSS property. Use longhand CSS notation for Hex values, never the shortened version. Avoid using bright red colours (e.g. #FF0000, rgb(255,0,0)). Ensure that your text colour has sufficient contrast against the background colour for accessibility aim for at least the WCAG AA standard. <td align= left valign= top style=" -webkit-text-size-adjust:none; -ms-text-size-adjust:none; font-family:arial, Helvetica, sans-serif; font-size:14px; color:#993300; line-height:30px;">lorem ipsum sit amet dolore quora.</td> Digital rather than print colour definitions should be used for digital communications. Shorthand Hex values are not supported in the majority of readers. The use of a bright red colour on text can be flagged up on spam filters. Ensure your text color provides sufficient contrast against the background Similarly, text colours that are the same as or very close to the background fill will also flag up on spam filters. It is recommended that an online contrast checker like WebAIM is used. color is easily adjusted for responsive s using CSS and Media Queries. 21
23 Formatting your s content Setting line-height for HTML text content Use the line-height property in the inline CSS of elements containing text or image content. Use only pixel (px) units rather than pt, em or % values. <td align= left valign= top style=" -webkit-text-size-adjust:none; -mstext-size-adjust:none; font-family:arial, Helvetica, sans-serif; fontsize:14px; color:#993300; line-height:30px;">lorem ipsum sit amet dolore quora.</td> For a <td> containing an image under 19px tall, use line-height along with height and font-size to ensure the cell remains the correct height similar to the vertical spacer fix. Using the line-height property with pixel (px) values gives the most consistent results across all the major readers. line-height is easily adjusted for responsive s using CSS and Media Queries especially useful for adjusting vertical spacing when altered along with height and font-size. 22
24 Formatting your s content Setting text link styling Set the default text link colour for your in both the HTML <body> tag and in a style declaration in the <head> see Essential CSS <style> declarations. For fixed text links you will need to copy the inline style declaration from the <td> or other surrounding element into the <a> tag. Add the text-decoration property to control whether the link is underlined or not and ensure any underline is the correct colour. <td align= left valign= top style=" -webkit-text-size-adjust:none; -ms-text-size-adjust:none; font-family:arial, Helvetica, sans-serif; font-size:14px; color:#993300;">lorem ipsum sit <a style=" -webkit-text-sizeadjust:none; -ms-text-size-adjust:none; font-family:arial, Helvetica, sans-serif; font-size:14px; color:#993300; text-decoration:underline;">amet dolore quora</a>.</td> Do not use black (# or rgb(0,0,0)) for your link colour. Setting your s default text link colour in both the <body> and a style declaration in the <head> as well as repeating inline styles in all <a> tags stops readers applying their own default link styling. You can also use different formatting for different links, e.g. you can choose certain links to be underlined and others not, use different colours and font-weights etc. Funny things can happen to your text links if you don t set an inline CSS style on the <a> tag Some readers (e.g. Gmail) will turn a pure black link into their own default link colour. However, a small difference in the colour value (e.g. # or rgb(0,0,1)) is enough fool the reader into ignoring it. 23
25 Extra reading If you would like to know more about designing and coding entire campaigns from scratch, or about editable templates for use within a NewZapp account, contact us and ask for copies of our other related publications: Download a PDF copy of: Common display issues - a guide for marketers Plus download the PDF containing the complete A-Z of everything we know! The Designer s Guide to Building Templates Find out more about NewZapp Visit To find out more about NewZapp Marketing you can: Call us on sales@newzapp.com Contact us online 24
Table of Contents Desktop PC and Apple Mac email applications Web and mobile device email readers Find out more about NewZapp
Table of Contents Why is email display an issue in email marketing?... 2 Expert Email Design... 3 Quick look-up overview... 4 Desktop PC and Apple Mac email applications... 5 Outlook 2007-2016... 6 Content
Email Campaign Guidelines and Best Practices
epromo Guidelines HTML Maximum width 700px (length = N/A) Maximum total file size, including all images = 200KB Only use inline CSS, no stylesheets Use tables, rather than layout Use more TEXT instead
Table of Contents THE DESIGNER S GUIDE TO CREATING NEWZAPP DRAG AND DROP TEMPLATES... 6 THE NEWZAPP SYSTEM... 7
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...
BlueHornet Whitepaper
BlueHornet Whitepaper Best Practices for HTML Email Rendering BlueHornet.com Page Page 1 1 2007 Inc. A wholly owned subsidiary of Digital River, Inc. (619) 295-1856 2150 W. Washington Street #110 San Diego,
GUIDE TO CODE KILLER RESPONSIVE EMAILS
GUIDE TO CODE KILLER RESPONSIVE EMAILS THAT WILL MAKE YOUR EMAILS BEAUTIFUL 3 Create flawless emails with the proper use of HTML, CSS, and Media Queries. But this is only possible if you keep attention
8 STEPS TO CODE KILLER RESPONSIVE EMAILS
8 STEPS TO CODE KILLER RESPONSIVE EMAILS THAT WILL MAKE YOUR EMAILS BEAUTIFUL 3 BUILD RESPONSIVE EMAIL STEP BY STEP Steps to create a simple responsive email template. (fluid image, main content, two
Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages
How to Properly Compose E-Mail HTML Code : 1
How to Properly Compose E-Mail HTML Code : 1 For any successful business, creating and sending great looking e-mail is essential to project a professional image. With the proliferation of numerous e-mail
RESPONSIVE EMAIL DESIGN BY COMMUNIGATOR
RESPONSIVE EMAIL DESIGN BY COMMUNIGATOR RESPONSIVE EMAIL DESIGN According to stats from Litmus, in 2014 at least 53% of emails were opened on a mobile device. That is a huge increase from 2011 when the
Designing HTML Emails for Use in the Advanced Editor
Designing HTML Emails for Use in the Advanced Editor For years, we at Swiftpage have heard a recurring request from our customers: wouldn t it be great if you could create an HTML document, import it into
Coding HTML Email: Tips, Tricks and Best Practices
Before you begin reading PRINT the report out on paper. I assure you that you ll receive much more benefit from studying over the information, rather than simply browsing through it on your computer screen.
Making Responsive Emails
Making Responsive Emails Who Am I? Justine Jordan Wearer of Many Hats, Litmus @meladorri @litmusapp #CSSsummit litmus.com/lp/csssummit Sample HTML, slides, templates, frameworks, and other goodies. Disclaimer:
Creative Guidelines for Emails
Version 2.1 Contents 1 Introduction... 3 1.1 Document Aim and Target Audience... 3 1.2 WYSIWYG editors... 3 1.3 Outlook Overview... 3 2 Quick Reference... 4 3 CSS and Styling... 5 3.1 Positioning... 5
The Essential Guide to HTML Email Design
The Essential Guide to HTML Email Design Index Introduction... 3 Layout... 4 Best Practice HTML Email Example... 5 Images... 6 CSS (Cascading Style Sheets)... 7 Animation and Scripting... 8 How Spam Filters
Outline of CSS: Cascading Style Sheets
Outline of CSS: Cascading Style Sheets nigelbuckner 2014 This is an introduction to CSS showing how styles are written, types of style sheets, CSS selectors, the cascade, grouping styles and how styles
Email Creator Coding Guidelines Toolbox
Email Creator Coding Guidelines Toolbox The following information is needed when coding your own template from html to be imported into the Email Creator. You will need basic html and css knowledge for
How To Design An Email In Html (Html) And Html (Mailbox) Safely
24 WAYS to impress your friends At some stage in your career, it s likely you ll be asked by a client to design a HTML email. Before you rush to explain that all the cool kids are using social media, keep
HTML TIPS FOR DESIGNING
This is the first column. Look at me, I m the second column.
Responsive Email Design
Responsive Email Design For the Hospitality Industry By Arek Klauza, Linda Tran & Carrie Messmore February 2013 Responsive Email Design There has been a lot of chatter in recent months in regards to Responsive
What is CSS? Official W3C standard for controlling presentation Style sheets rely on underlying markup structure
CSS Peter Cho 161A Notes from Jennifer Niederst: Web Design in a Nutshell and Thomas A. Powell: HTML & XHTML, Fourth Edition Based on a tutorials by Prof. Daniel Sauter / Prof. Casey Reas What is CSS?
Mobile Optimise your Emails. Code & examples to make your email campaigns mobile friendly
Mobile Optimise your Emails Code & examples to make your email campaigns mobile friendly Email Marketing Guide June 2013 CONTENTS Introduction...01 The Growing Importance of Mobile...02 Key Mobile Devices...03
MCH Strategic Data Best Practices Review
MCH Strategic Data Best Practices Review Presenters Alex Bardoff Manager, Creative Services abardoff@whatcounts.com Lindsey McFadden Manager, Campaign Production Services lmcfadden@whatcounts.com 2 Creative
{color:blue; font-size: 12px;}
CSS stands for cascading style sheets. Styles define how to display a web page. Styles remove the formatting of a document from the content of the document. There are 3 ways that styles can be applied:
This document will describe how you can create your own, fully responsive. drag and drop email template to use in the email creator.
1 Introduction This document will describe how you can create your own, fully responsive drag and drop email template to use in the email creator. It includes ready-made HTML code that will allow you to
Introduction to Web Design Curriculum Sample
Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic
Chapter 1: Outlook Isn t Going Anywhere... 2. Chapter 2: 17 Must-Know Tricks for Outlook 2007, 2010 & 2013... 3
Table of Contents Chapter 1: Outlook Isn t Going Anywhere... 2 Chapter 2: 17 Must-Know Tricks for Outlook 2007, 2010 & 2013... 3 Chapter 3: 3 Way to Remove Unwanted Gaps Between Tables... 12 Chapter 4:
Web Design and Databases WD: Class 7: HTML and CSS Part 3
Web Design and Databases WD: Class 7: HTML and CSS Part 3 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Recap! HTML
CHAPTER 10. When you complete this chapter, you will be able to:
Data Tables CHAPTER 10 When you complete this chapter, you will be able to: Use table elements Use table headers and footers Group columns Style table borders Apply padding, margins, and fl oats to tables
The Birth of Responsive Email Templates
The Birth of Responsive Email Templates The Birth of Responsive Email Templates The adoption of mobility solution at the enterprise level is simply becoming more relentless in order to engage more and
RESPONSIVE DESIGN FOR MOBILE RENDERING
WHITEPAPER RESPONSIVE DESIGN FOR MOBILE RENDERING DELIVER MOBILE-SPECIFIC CONTENT USING MEDIA QUERIES EXECUTIVE SUMMARY With the widespread adoption of smartphones and tablets, proper email rendering in
The Da Vinci Coding: The Art of HTML
The Da Vinci Coding: The Art of HTML The Da Vinci Coding: The Art of HTML Design Author Graham Gnall LiveIntent Senior Platform Solutions Manager Contributing Editor Nick Dujnic Editors Julia Rieger Dave
The Essential Guide to HTML Email Design
The Essential Guide to HTML Email Design Emailmovers Limited, Pindar House, Thornburgh Road Scarborough, North Yorkshire, YO11 3UY Tel: 0845 226 7181 Fax: 0845 226 7183 Email: enquiries@emailmovers.com
Eloqua Email 101. What is this and why should I read it?
DR Who? Definitive Results is a boutique marketing consulting firm based out of Leesburg, Virginia that specializes in helping Marketers accelerate their efforts using the technologies available to them
customer community Getting started Visual Editor Guide! www.pure360community.co.uk
Getting started! 1 Contents Introduction... 3 Visual Editor Options... 3-5 Advanced Tips... 6-7 Do s and Don ts... 7-9 Testing Messages... 10 2 Welcome The Visual Editor tool is the ideal resource for
Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D
Chapter 7 Page Layout Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 Learning Outcomes float fixed positioning relative positioning absolute positioning two-column page layouts vertical navigation
Contents. Downloading the Data Files... 2. Centering Page Elements... 6
Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...
Web Design with CSS and CSS3. Dr. Jan Stelovsky
Web Design with CSS and CSS3 Dr. Jan Stelovsky CSS Cascading Style Sheets Separate the formatting from the structure Best practice external CSS in a separate file link to a styles from numerous pages Style
Guide to B2B email marketing. Part Three: Building great emails
Guide to B2B email marketing Part Three: Building great emails Executive Summary of Recommendations Take a look at our guidelines for building great emails in this quick, at-a-glance format Technical Email
DESIGNING MOBILE FRIENDLY EMAILS
DESIGNING MOBILE FRIENDLY EMAILS MAKING MOBILE EMAILERS SELECT PLAN CONTEXT CONTENT DESIGN DELIVERY Before you go mobile For optimal usage PICTURES OF DESKTOP VS MOBILE SAME SAME BUT DIFFERENT EMAIL CLIENTS
RESPONSIVE EMAIL DESIGN & DEVELOPMENT THE WHAT, WHY & HOW
RESPONSIVE EMAIL DESIGN & DEVELOPMENT THE WHAT, WHY & HOW December 2014 SUSANNA OLIVER Web Developer Denver Fargo Minneapolis 701.235.5525 888.9.sundog FAX: 701.235.8941 www.sundoginteractive.com Overview
Creating a Resume Webpage with
Creating a Resume Webpage with 6 Cascading Style Sheet Code In this chapter, we will learn the following to World Class CAD standards: Using a Storyboard to Create a Resume Webpage Starting a HTML Resume
Rhetorik Email campaign - Guidelines
Rhetorik Email campaign - Guidelines 18/06/2013 Version: 1.1 Table of contents 1. INTRODUCTION... 2 2. THE PROCESS... 2 3. WHAT WE NEED TO SET UP THE EMAIL BROADCAST... 2 3.1 Email campaign set up brief...
Responsive Email Design. Our guide to helping you get started. August 2012 Version 0.2
Responsive Email Design Our guide to helping you get started August 2012 Version 0.2 Contents Introduction... 3 What is Responsive Design?... 4 What about email?... 5 So what are the pros and cons?...
New Perspectives on Creating Web Pages with HTML. Considerations for Text and Graphical Tables. A Graphical Table. Using Fixed-Width Fonts
A Text Table New Perspectives on Creating Web Pages with HTML This figure shows a text table. Tutorial 4: Designing a Web Page with Tables 1 2 A Graphical Table Considerations for Text and Graphical Tables
ITNP43: HTML Lecture 4
ITNP43: HTML Lecture 4 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and content of a document Style
Caldes CM12: Content Management Software Introduction v1.9
Caldes CM12: Content Management Software Introduction v1.9 Enterprise Version: If you are using Express, please contact us. Background Information This manual assumes that you have some basic knowledge
Caldes CM2: Marketing Emails Support Document v1.12
Caldes CM2: Marketing Emails Support Document v1.12 Caldes Enterprise software can be used to send out marketing email. Due to the nature of these being bespoke designs, Caldes make a one off charge to
Create Your own Company s Design Theme
Create Your own Company s Design Theme A simple yet effective approach to custom design theme INTRODUCTION Iron Speed Designer out of the box already gives you a good collection of design themes, up to
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,
Introduction to XHTML. 2010, Robert K. Moniot 1
Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document
Creating Effective HTML Email Campaigns
Creating Effective HTML Email Campaigns This event is being recorded. You will receive a copy of the audio/video at the end of the presentation. 701 South Broad Street, Lititz, PA 17543 www.listrak.com
WHITEPAPER. Skinning Guide. Let s chat. 800.9.Velaro www.velaro.com info@velaro.com. 2012 by Velaro
WHITEPAPER Skinning Guide Let s chat. 2012 by Velaro 800.9.Velaro www.velaro.com info@velaro.com INTRODUCTION Throughout the course of a chat conversation, there are a number of different web pages that
Looking Good! Troubleshooting Email Display Problems
E-mail Direct Mail Digital Marketing Sales Tools Funding Data Creative Services Looking Good! Troubleshooting Email Display Problems November 19, 2014 Today s Speaker Geoff Phillips Senior Editor & Email
A quick guide to... Effective HTML Messages
A quick guide to... Effective HTML Messages In this guide... Learn easy and effective ways to engage your subscribers, increase your click-through ratio (CTR), and get better results from your email marketing.
Slicing and Coding the Navigation Background in CSS
CSS Template Tutorial Please take your time to visit http://www.freecss.info Table of Contents Step 1 Setting up. page 3 Step 2 Coding the basics.page 5 Step 3 Coding and slicing the header. page 9 Step
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main
Responsive Web Design: Media Types/Media Queries/Fluid Images
HTML Media Types Responsive Web Design: Media Types/Media Queries/Fluid Images Mr Kruyer s list of HTML Media Types to deliver CSS to different devices. Important note: Only the first three are well supported.
You can use percentages for both page elements and text. Ems are used for text,
By Megan Doutt Speaking broadly, responsive web design is about starting from a reference resolution, and using media queries to adapt it to other contexts. - Ethan Marcotte (creator of the term Responsive
Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com
Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created
Creating, Installing & Using Email Signatures Technical Considerations By Rex Weston
Creating, Installing & Using Email Signatures Technical Considerations By Rex Weston There are three approaches typically taken to creating an email signature: 1. Create it in Microsoft Word, and then
We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.
Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded
HTML Tables. IT 3203 Introduction to Web Development
IT 3203 Introduction to Web Development Tables and Forms September 3 HTML Tables Tables are your friend: Data in rows and columns Positioning of information (But you should use style sheets for this) Slicing
ICE: HTML, CSS, and Validation
ICE: HTML, CSS, and Validation Formatting a Recipe NAME: Overview Today you will be given an existing HTML page that already has significant content, in this case, a recipe. Your tasks are to: mark it
Best Practices in Email Marketing 33 Tips to Improve Your HTML Email Design
Best Practices in Email Marketing 33 Tips to Improve Your HTML Email Design Page 0 of 12 Introduction Many email marketing products like Pinpointe include a WYSIWYG + HTML editor and templates so you can
Advanced Web Design. Zac Van Note. www.design-link.org
Advanced Web Design Zac Van Note www.design-link.org COURSE ID: CP 341F90033T COURSE TITLE: Advanced Web Design COURSE DESCRIPTION: 2/21/04 Sat 9:00:00 AM - 4:00:00 PM 1 day Recommended Text: HTML for
Introduction... 3. Designing your Common Template... 4. Designing your Shop Top Page... 6. Product Page Design... 8. Featured Products...
Introduction... 3 Designing your Common Template... 4 Common Template Dimensions... 5 Designing your Shop Top Page... 6 Shop Top Page Dimensions... 7 Product Page Design... 8 Editing the Product Page layout...
HTML Lesson 7. Your assignment:
HTML Lesson 7 Tables are one of the biggest tools Web developers use to present data wherever they want data to go on the page. Like spreadsheets, rows go across (left to right) and columns go up and down.
Style & Layout in the web: CSS and Bootstrap
Style & Layout in the web: CSS and Bootstrap Ambient intelligence: technology and design Fulvio Corno Politecnico di Torino, 2014/2015 Goal Styling web content Advanced layout in web pages Responsive layouts
Designing HTML emailers
24 SEPTEMBER 2015 Designing a beautiful but functional HTML emailer can be challenging for the most experienced designer, especially if you don t have a lot of experience working with code. This guide
CST 150 Web Design I CSS Review - In-Class Lab
CST 150 Web Design I CSS Review - In-Class Lab The purpose of this lab assignment is to review utilizing Cascading Style Sheets (CSS) to enhance the layout and formatting of web pages. For Parts 1 and
CSS 101. CSS CODE The code in a style sheet is made up of rules of the following types
CSS 101 WHY CSS? A consistent system was needed to apply stylistic values to HTML elements. What CSS does is provide a way to attach styling like color:red to HTML elements like . It does this by defining
Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS
Web Design Lesson 2 Development Perspective: DIV/CSS Why tables have been tabled Tables are a cell based layout tool used in HTML development. Traditionally they have been the primary tool used by web
Advanced Drupal Features and Techniques
Advanced Drupal Features and Techniques Mount Holyoke College Office of Communications and Marketing 04/2/15 This MHC Drupal Manual contains proprietary information. It is the express property of Mount
JJY s Joomla 1.5 Template Design Tutorial:
JJY s Joomla 1.5 Template Design Tutorial: Joomla 1.5 templates are relatively simple to construct, once you know a few details on how Joomla manages them. This tutorial assumes that you have a good understanding
Code View User s Guide
Code View User s Guide 1601 Trapelo Road Suite 329 Waltham, MA 02451 www.constantcontact.com Constant Contact, Inc. reserves the right to make any changes to the information contained in this publication
RESPONSIVE EMAIL DESIGN
RESPONSIVE EMAIL DESIGN SELLIGENT The contents of this manual cover material copyrighted by Selligent. This manual cannot be reproduced, in part or in whole, or distributed or transferred by means electronic
Web Design for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 6
Web Design for Print Designers CSS uses a variety of declarations for styling text. Many use the variations of the font declaration. Other styles are done using different declarations. The font declaration
Creating Web Pages with Dreamweaver CS 6 and CSS
Table of Contents Overview... 3 Getting Started... 3 Web Page Creation Tips... 3 Creating a Basic Web Page Exercise... 4 Create a New Page... 4 Using a Table for the Layout... 5 Adding Text... 6 Adding
TEMPLATE GUIDELINES OCTOBER 2013
TEMPLATE GUIDELINES OCTOBER 2013 CONTENTS Introduction... 4 Creative... 5 Template Dimensions & Image Headers... 5 Preview Pane & Positioning... 5 Graphics... 6 Optimization and File Size... 6 Background
EVENT PLANNING MYTHBUSTER. Building Pre-event Engagement: How to Make an Email Invite
EVENT PLANNING MYTHBUSTER Building Pre-event Engagement: How to Make an Email Invite YOUR STEP BY STEP GUIDE In reality, most events begin months before the doors open on the first day. The internet is
How to craft a modern, mobile-optimized HTML email template. Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012
How to craft a modern, mobile-optimized HTML email template Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012 Our old email template Pros Simple Lightweight Worked as plain-text Rendered OK
Web Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission
Web Design for Programmers Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission Quick Disclaimers This is a crash course! Many topics are simplified
An overview of designing HTML emails for Hotmail, Yahoo, Outlook, Lotus Notes and AOL
An Emailcenter briefing: Can your customers read your email newsletters? An overview of designing HTML emails for Hotmail, Yahoo, Outlook, Lotus Notes and AOL November, 2004 Emailcenter research has shown
HTML Email Power Tips. HTML messages improve your CTR. World s Easiest Email Marketing.
A quick guide to Learn easy and effective ways to engage your subscribers, increase your click-through ratio (CTR), and get better results from your email marketing. HTML Email Power Tips Be readable get
Web Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.
Web Building Blocks Core Concepts for HTML & CSS Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.edu @joegilbert Why Learn the Building Blocks? The idea
Magento Responsive Theme Design
Magento Responsive Theme Design Richard Carter Chapter No. 2 "Making Your Store Responsive" In this package, you will find: A Biography of the author of the book A preview chapter from the book, Chapter
Web Development 1 A4 Project Description Web Architecture
Web Development 1 Introduction to A4, Architecture, Core Technologies A4 Project Description 2 Web Architecture 3 Web Service Web Service Web Service Browser Javascript Database Javascript Other Stuff:
Email Marketing Design & Rendering: The New Essentials
whitepaper Email Marketing Design & Rendering: The New Essentials Overview Design is vital to the success of your email marketing program. But what does good email design really entail? How do you ensure
Microsoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
Garfield Public Schools Fine & Practical Arts Curriculum Web Design
Garfield Public Schools Fine & Practical Arts Curriculum Web Design (Half-Year) 2.5 Credits Course Description This course provides students with basic knowledge of HTML and CSS to create websites and
Using Style Sheets for Consistency
Cascading Style Sheets enable you to easily maintain a consistent look across all the pages of a web site. In addition, they extend the power of HTML. For example, style sheets permit specifying point
Mobile Web Site Style Guide
YoRk University Mobile Web Site Style Guide Table of Contents This document outlines the graphic standards for the mobile view of my.yorku.ca. It is intended to be used as a guide for all York University
CSS - Cascading Style Sheets
CSS - Cascading Style Sheets From http://www.csstutorial.net/ http://www.w3schools.com/css/default.asp What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements External
EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING
EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING The European Computer Driving Licence Foundation Ltd. Portview House Thorncastle Street Dublin 4 Ireland Tel: + 353
CSS SUPPORT IN EMAIL THE PROBLEM WE SHOULD BE FIXING FIRST #LETSFIXEMAIL
CSS SUPPORT IN EMAIL THE PROBLEM WE SHOULD BE FIXING FIRST #LETSFIXEMAIL Standards are not usually standard 2 Standards are not usually standard 3 it can be funny. but not always. 4 on our panel ROS HODGEKISS
HTML Fails: What No One Tells You About Email HTML
HTML Fails: What No One Tells You About Email HTML 2 Today s Webinar Presenter Kate McDonough Campaign Manager at PostUp Worked with various ESPs: Constant Contact, Campaign Monitor, ExactTarget, Distribion
Intro to Web Design. ACM Webmonkeys @ UIUC
Intro to Web Design ACM Webmonkeys @ UIUC How do websites work? Note that a similar procedure is used to load images, etc. What is HTML? An HTML file is just a plain text file. You can write all your HTML
Creating the Surf Shop website Part3 REVISED
Creating the Surf Shop website Part3 REVISED Part 2 Recap: You should have the navigation completed for the website before starting Part 3. 1)Create a new DIV in index.html. It should come after banner
Web Authoring CSS. www.fetac.ie. Module Descriptor
The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,
The. Design Toolkit. Design tips, code, and data for better email design
The Design Toolkit Design tips, code, and data for better email design Welcome, designers! Whether you re a tech-savvy coder, an engagement-focused marketer, or have a background in illustration and design,