Common Email Rendering Issues - A Guide for Designers

  • 1,491 views
Uploaded on

 

More in: Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,491
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
18
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. <title> Common Email Rendering Issues for Designers </title> by NewZapp Email Marketing Copyright DestiNet 2011 www.newzapp.co.uk
  • 2. In this presentation we cover the following areas: Why should we design for all major email readers? Expert email design Quick look-up overview Table/Cell alignments Text styling Longhand Vs. Shorthand styling Padding Margins Cell spacing CSS styles Non breaking spaces Background images Borders Row heights Font sizes Font families Line spacing Text highlighting Final thoughts Extra reading Find out more about NewZapp Email Marketing
    • slide 3 :
    • slide 4 :
    • slide 5 :
    • slide 6 :
    • slide 7 :
    • slide 8 :
    • slide 9 :
    • slide 10 :
    • slide 11 :
    • slide 12-13 :
    • slide 14 :
    • slide 15 :
    • slide 16 :
    • slide 17-18 :
    • slide 19 :
    • slide 20 :
    • slide 21 :
    • slide 22 :
    • slide 23 :
    • slide 24 :
    • slide 25 :
    www.newzapp.co.uk Copyright DestiNet 2011
  • 3. Why should we design for all major email readers? As designers you can never predict what your target audience will use to view their emails, this is why it is always good practice to test in a range of different email clients so you can get the best results across the board. Some of the most commonly used email clients are:
    • Microsoft Outlook 2003/2007/2010
    • Windows Live Hotmail
    • Yahoo Mail
    • Google Mail
    But there are also customers who prefer to use not so popular or other operating system default email readers such as:
    • Lotus Notes - used by larger companies
    • Thunderbird or Opera - free downloadable desktop email clients
    This is the main reason why at NewZapp we test the templates we create in a wide range of email clients, desktop clients and web email readers. This ensures we get the very best results for each design. Copyright DestiNet 2011 www.newzapp.co.uk
  • 4. The NewZapp email marketing design team have many years of experience creating and testing HTML emails to ensure correct rendering across all major email clients and they use this experience when creating and building editable templates for your NewZapp account.   In this presentation we take a look at some of the most common email rendering issues for designers to take note of and, where possible, how you can deal with them when creating and building either editable templates or complete campaigns in HTML. Expert email design Copyright DestiNet 2011 www.newzapp.co.uk
  • 5. Quick look-up overview Copyright DestiNet 2011 www.newzapp.co.uk Outlook 07/10 Windows Live Virgin/ Google mail Orange Mail AOL Mail Yahoo Mail Thunderbird Opera Mac Mail Lotus Notes Table Cell Alignment          Text Styling           Longhand styling           Shorthand styling          Padding          margins  Cell Spacing         CSS Styles          Non Breaking Space           Background images         Borders           Row heights          Font Sizes           Back up fonts          Line Height          Text Highlighting         
  • 6. Table/Cell Alignments Setting table or cell alignment helps all readers determine where the contents of the table cell (the table data) will sit, this can be left, right, top, centre, bottom etc. Pros: It is always good practice to have an alignment set within each table cell and on every table to keep its positioning from floating or acting differently in different readers Cons: There are no real issues from a rendering point of view from not setting the correct alignment on a table or a cell within a table, but do not rely on a readers default positioning for this. Such readers like Hotmail and Google mail have different default settings to other readers As standard practice we advise you to do this for every table and cell you use. Un-compliant Email readers include: Google mail & Virgin Media mail Setting a tables alignment <table width=&quot;640&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;> Setting a table’s cell alignment <td width=&quot;640&quot; align=&quot;center&quot; valign=&quot;top&quot; bgcolor=&quot;#333333&quot;> Example email rendering that sets the default alignment to left Example email rendering Virgin Media and Google mail Copyright DestiNet 2011 www.newzapp.co.uk
  • 7. Text Styling There are many different ways of styling a piece of text or a hyperlink in an HTML email, but some readers will interpret these styles differently. Here below is a detailed list of different ways you could style you text or hyperlinks and an explanation of how reader will render these styles: Table Date Styles This style will be declared within the table data tag <td> < td style=&quot;font-family: Arial, Helvetica, sans-serif; font-size:13px; color: #333399; font-weight: bold;&quot;> Table Date Style </td> Span styles These can be used around different areas of text which may have different styles such as a different colour or size <span style=&quot;color:#0C6; font-weight: bold; font-size: 17px;&quot;> Span Style </span> Div Styles More commonly using within the design of websites <div style=&quot;font-family: Arial, Helvetica, sans-serif; font-size:13px; color: #800080; font-weight: bold;&quot;> Div Style </div> Font Styles Can be used to style an area of text or highlight an area of text for example with a background colour <font style=&quot;font-family: Arial, Helvetica, sans-serif; font-size:13px; color: #FF00FF; font-weight: bold;&quot;> Font Style </font> Link Styles These can be used once a link has been create, styles for individual links can be declared within the a href of the link <a style=&quot;text-decoration: underline; font-weight: bold; color: #F76880;&quot; href=&quot;#&quot; target=&quot;_blank&quot;> Link Style </a> **Please note that this method of styling links on the <a Href> tag will not work for any of NewZapp’s custom tags such as @link@ or @emailaddress@, this will change to your set link colour in the head of the design. So far, all these various ways of styling text and links work across all major email readers that NewZapp test in, the only advisory would be to not use span styles to style links as this can cause some readers to change a styled underline into the default blue in readers such as Virgin Media Mail/Google Mail/AOL Mail/ Windows Live/Yahoo all have varying results with colour issues. Copyright DestiNet 2011 www.newzapp.co.uk
  • 8. Shorthand vs. Longhand styling When it comes to styling different areas of your HTML email there are a few ways you can do this, shorthand styling, which is more commonly seen on websites, and long hand styling which is more consistent across many email readers. These examples shows how short hand code is declared differently to long hand code. Example of shorthand styling used: <td style=&quot;font-family: Arial, Helvetica, sans-serif; background-color:#FF9; font-size: 16px; color: #993366; padding: 10px 10px 10px 10px;”> Example of longhand styling used: <td style=&quot;font-family: Arial, Helvetica, sans-serif; background-color:#FF9; font-size: 16px; color: #993366; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom 10px;”> Both of these styles create an invisible padded border inside a cell, giving the effect of the text being stepped in or bumped down. At present, the only email reader that we test in where we found issues is Lotus Notes. This email reader ignores shorthand and long hand coding altogether, as in this case ignoring the padding added to this style. But as best practice we advise you to use long hand coding, this is the safest option by declaring individual properties. Example email rendering that displays correct longhand styling Example email rendering in Lotus Notes Copyright DestiNet 2011 www.newzapp.co.uk
  • 9. Padding There are two main methods in which the padding declaration can be used, but both work in very similar ways. Adding padding to a whole table Adding cell padding to the table declaration (see below) like this below adds padding inside every cell within that table, so each box will have 30px padding within each cell, like the example to the right <table width=“650&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;30&quot; cellspacing=&quot;0&quot;> This method works across all major email readers Adding padding to individual cells of a table If you want to add padding to an individual cell you will need to add padding to the style declaration of the cell like this example below. This could either be in the <td, or with a span for example ( See slide 7 on styling ) <td style=&quot;font-family: Arial, Helvetica, sans-serif; background-color:#FF9; font-size: 16px; color: #993366; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom 10px;”> Un-compliant Email readers include: Lotus Notes. Example email rendering that displays padding to a whole table Example email rendering padding for individual cells Copyright DestiNet 2011 www.newzapp.co.uk
  • 10. Margins Using margins in email newsletters can cause a lot of problems when trying to get the look you are after. Basically, Margins don’t work in email newsletters! Margins, along with padding declarations are 2 of the most used CSS styles, but this is used more within web design and within email newsletters these can act differently. Margins are used for are to create space around an object or an area, to help space things out on a webpage. In many cases, except Outlook 2007/2010 margins are completely ignored and the images to the right show how the areas are flattened down. This can have a detrimental effect on your email designs. In the example to the right margins are used to create outside padding on the image, but an email reader will ignore this resulting in text and imagery being placed in unwanted areas. What to do: We would strongly advise against using margins in style declarations Un-compliant Email readers include: AOL Mail, Windows Live, Google Mail & Virgin media Mail, Yahoo Mail, Mac Mail, Thunderbird, Opera and Lotus Notes. Example email where margins are shown around an image (green lines) Example email margins have been ignored in an email reader Copyright DestiNet 2011 www.newzapp.co.uk
  • 11. Cell Spacing Cell spacing can be used to space out cells within a table, creating white space around each cell, unlike padding where this space is adding inside the table cell. To add spacing you can declare this in a similar way to padding, at the start of a table declaration like this example below: <table width=“650&quot; border=“2&quot; align=&quot;center&quot; cellpadding=“5&quot; cellspacing=“20&quot;> This declaration will add a standard border of 2px on the table and its cells, 5px of equal padding within each cell and 20px of white space equally around each cell confined within that specific table. Unfortunately not all email readers can handle the cell spacing declared on a whole table, with readers such as Lotus notes filling the space black and Virgin Media and Google mail ignoring it all together and showing no spacing. Un-compliant Email readers include: Virgin and Google mail & Lotus Notes Example email where cell spacing is used within a table (Red lines) Example email In Lotus Notes Example email in Virgin Media and Google mail Copyright DestiNet 2011 www.newzapp.co.uk
  • 12. CSS (Cascading Style Sheets) CSS styles (Cascading Style Sheets) are created and placed at the head of any html document, these classes help you easily style different areas of a page, or in this case an email, without having to re-type each style again and again. Pros: this process saves a lot of time when creating the code for your email, and you can create numerous amounts of different styles and use them within one email/design. Cons: not all readers will recognise CSS styles and the majority of the those readers will ignore all CSS styles and default back to plain web black text, or styles you have set a default. What to do: although there are only a handful of email readers that ignore CSS styles, we still advise that for consistency and stability, you use inline styles for each cell. This example shows what a CSS style looks like in HTML document and where it should be placed within a HTML Document. (between the <head> </head> or the document) Un-compliant Email readers include: Virgin and Google Mail See next slide for an example of how CSS renders in these readers>>>>> Copyright DestiNet 2011 www.newzapp.co.uk
  • 13. CSS Styles (continued) Example email rendering that displays CSS styles and classes Example email rendering in Google Mail and Virgin Media Mail CSSclassone { font-weight: bold; font-family: &quot;Trebuchet MS&quot;, Arial, Helvetica, sans-serif; color: #B44BAC; font-size: 14px; font-style: italic; text-align: right; padding-left: 50px; padding-right:50px; } Initial CSS class set: From our testing, we have found that in most major email readers the CSS is read correctly and displays just like the top example image - but in Google Mail and Virgin Media Mail CSS styling is ignored. Copyright DestiNet 2011 www.newzapp.co.uk
  • 14. Non Breaking Spaces A non breaking space (&nbsp) is spacing character used to prevent an automatic line break within a selection of content, or text wrapping. You can always find these in cells automatically once you have inserted a table to hold open each cell until needed. Pros: A non breaking space helps when it you need to hold open a cell, row or column in your design. These prevent the sections from collapsing. You can also add extra non breaking spaces into your design to help space out text to fit to a desired point. Cons: There are no real issues with using non breaking spaces in email design, but we do advise you to check where they are and please note that if you need a column or row to collapse, for example to 1px thick, the non breaking space will need to be removed for this to take effect. What to do: Always double check where, in a selected table, you need and do not need non breaking spaces. Non breaking spaces can effect tables within tables (nested within one another) so remember to keep an eye out for all the non breaking spaces within a certain area. Un-compliant Email readers include: None Copyright DestiNet 2011 www.newzapp.co.uk
  • 15. Background Images Background images may be used in an email design for a variety of reasons but are mainly used if a designer wishes to include a background/watermark/drop-shadow effect, or an effect that repeats to fill the screen no matter what viewing area or resolution the email is being viewed in. Pros: the use of background imagery can add style and depth to a design where flat colour isn’t the first preference. Cons: background images wont display in certain readers, such as Outlook 2007/2010 and Lotus Notes, these will ignore the background image set and either display no background colour or a solid background colour if there has been one set. What to do: when we design templates for our customers at NewZapp , we avoid use of background images to ensure a consistent look to the emails across all email readers. If you feel a background effect is essential for your template, you can set an alternative “backup” flat background colour to load in its place if the background images can’t be seen. As always, we would encourage thorough testing to ensure you are happy with the way your email looks without the background images displaying. Un-compliant Email readers include: Outlook 2007/2010 and Lotus Notes Example email rendering that allows background images to display Example email rendering in Outlook & Lotus Notes Copyright DestiNet 2011 www.newzapp.co.uk
  • 16. Borders Within an email design there are a number of ways you can style either text or imagery with coloured borders, these can help aid your design in certain areas which are more important than others. Below are a range of ways you could style a border correctly, declaring it in places which best fit your design. This style declaration is the most commonly used style which works across most email readers we test in. This will place a border around a table cell such as the one in the image <td align=&quot;left&quot; valign=&quot;top&quot; style=&quot;border: #943D57 solid 3px;&quot; > This is setting a black border which is solid and 1px thick. Advisory comments: When creating a border in this way always apply the style to a one row table then design everything else inside it, this is because some email readers won’t display borders that have been declared on individual sides of the table. Other ways you could style a border into your design would be to set a border as default on a whole table and its cells like this one below <table width=“650&quot; border=“3&quot; align=&quot;center&quot; cellpadding=“0&quot; cellspacing=“0&quot;> This style will set a border of 3 on the whole table and each of its cells This method isn't often used as it can render differently in readers such as Lotus Notes, Virgin Mail and Google mail. Advisory comments: At present, we would advise to make border 3px or below, this is because the positioning of individual table cells and images can vary slightly in different readers. If you do still wish to use a border thicker than 3px, we advise you to test in other email readers to see the best results. Copyright DestiNet 2011 www.newzapp.co.uk
  • 17. Row heights Row heights can be used to create padding or act as padding above or below certain image or text fields, this method is the most consistent and functional across major email readers , as opposed to cell spacing for instance. Pros: Creating rows with multiple heights is a good way to create space around text or imagery and will help your design remain stable in different email readers. Cons: Some email readers can expand the height of a row is not declared correctly, or if a non breaking space for example is left in or not taken out. Email readers such as Lotus notes will make all rows 3px by default, so anything declared under this size will be effected. What to do: To create the best amount of padding we advise you use multiples of 3, 4, or 5px to add up to the amount of padding you want, you can also use rows at 20px high, but always remember to take out or leave in non breaking spaces to achieve the desired heights. Un-compliant Email readers include: Lotus Notes This space between the headings and the main content in this example was created using a certain numbers of rows in multiples of 3, 4, and 5px to add up to the padding needed, also taking out the non breaking spaces so each row collapsed to its correct height. Copyright DestiNet 2011 www.newzapp.co.uk
  • 18. Row heights in Lotus Notes (explained) When it comes to using rows for such things as padding or spacing Lotus notes renders these properties to other email readers.
    • Some of the main factors to take into account for designing for Lotus Notes are:
    • Any row designed to be a height less than 3px will automatically blow out to 3px high. For example, creating a 1px breaker line to separate copy.
    • Non breaking spaces play a big part in designing for Lotus Notes. If they are left in a row or a set of rows which are acting as padding, the row won’t collapse as you would visually like them to, or in the opposite case, rows that are used as padding (with non breaking spaces removed) will collapse down to 3px high if no height is specified.
    • Lotus Notes can also be very peculiar when it comes to certain sizes of rows, we at NewZapp have found from years of testing in this unpredictable client, that working with multiples of 3px, 4px, 5px, or 20px high rows is the safest option to creating the desired padding needed. For example if you require padding of 16px, the best way to do this would be to use 4 rows, 2 at 5px and 2 at 3px, remembering to take the non breaking space out of these rows in the code, as you will notice that the row will not collapse at first to your desired height.
    Copyright DestiNet 2011 www.newzapp.co.uk
  • 19. Font Sizes Using real text in your emails is a good way to ensure that your message gets across as not all recipients of your emails will have images set to display, or they may be receiving plain text email only. When using real text there are factors to take into account to ensure the various font sizes you have used are stable in all readers. Pros: Setting font sizes correctly will prevent the possibility of your overall design being thrown out of balance, eg. if you have set a specific area in the design for the text content. Cons: Declaring different styles of font size can have a varied effect in some email reader, styling such as FONT-SIZE= or using em or % sizes. Some readers can give out varied results when using the “Font-size=“ and its set sizes 1,2,3,4 and 5 etc It’s also thought that using a font size that is too small or too large can affect the spam score if your email is being rated by an email filter. It’s also worth noting that in Outlook 2007/10 text that is 11px in size will display with extra spacing between each letter. What to do: Always use full pixel sizes (px) for any font size and avoid using % or font-size= styling for font sizes as these will be increased to size 11px in readers such as Lotus Notes. As a general “good practice” guideline, do not use text smaller than 10px or larger than 32px. For larger text sizes, consider using a graphic of the text instead. Un-compliant Email readers include: Lotus Notes & Outlook (letter spacing issue at 11px) Copyright DestiNet 2011 www.newzapp.co.uk
  • 20. Font families When it comes to designing a great looking email , or matching a customer’s branding guidelines, choosing the right style of font can be crucial. Whilst the collection of the ‘safest’ web friendly fonts is still quite limited, there are more fonts now available to people as standard and these are starting to be used more in email design. Pros: If using a non standard web-friendly font in a design, the email reader should fall back on the back-up font in the HTML if the recipient doesn’t have the first choice font installed. This way you are at least in control of how the email might display. Cons: We have noticed from our own testing that there are some fonts that Yahoo Mail refuses to display it even if you have the font installed. In some instances, It also ignores the back-up font in the HTML code. So far none of the other email readers have been effected and we hope it stays this way, but below are a few screen shots of some of the web fonts which will behave unpredictably in Yahoo Mail. What to do: Always make sure you set a back-up font in your HTML code, but make sure you are happy that the design of your email still looks good with the back-up font in place and that the characteristics (letter spacing etc) don’t affect the overall look of your email Example of text which hasn’t been rendered correctly in Yahoo Mail Example of text styles which have rendered correctly in an email reader Copyright DestiNet 2011 www.newzapp.co.uk
  • 21. Line height Setting line height in your style declaration is a great way to evenly space out a area of text rather than using the standard single line breaks <br></br> or paragraph breaks <P></P>. This can help a email newsletter look a lot neater, and better formatted rather than using a lot of single or full paragraph breaks which can sometimes have different space sizing in some email readers. To add line height to a particular area, you should add this style declaration to the <td> part of the table: <td style=&quot;font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 12px; line-height: 50px &quot;>this cell has 50px line height spacing added to it</td> Pros: Overall, this is an easier way to create a better formatted email design with the ability to manually input (we advise in pixels) how much line spacing you need for each individual text area. Cons: At present the only disadvantage of using this style is when you are emailing a list of contacts pre-dominantly using Lotus Notes as their email reader. This email reader will ignore this declaration and reduce it back to the standard line spacing. Un-compliant Email readers include: Lotus Notes Example of text which hasn’t been rendered correctly in Lotus Notes Example of text which was been render correctly in other email readers Copyright DestiNet 2011 www.newzapp.co.uk
  • 22. Text Highlighting Text highlighting can be used in a design to highlight certain sections of text, for example a title or an important link or area of copy. The can be done by setting a <font> style around the piece of copy which needs the style applied to it like this example <font style=&quot;background-color:#0C60C6;&quot;> The font style goes around the required text </font> Other background styles can be used but putting the colour declaration onto the “font style” tag will highlight an individual piece of text, rather a whole block or a cell. Pros: This is a simple and easy way to add a background fill to a required piece of text Cons: Overall, there is only one issue with using this technique, which is that Lotus Notes will ignore all <FONT> styles set in an email, so for example, lightly coloured text set on background colour could virtually disappear on your email design. What to do/Advisory : Be careful about choosing the right coloured text with the right coloured background, or change to using table cell background fills as this is a much safer option. Un-compliant Email readers include: Lotus Notes Example of text which hasn’t been rendered correctly in Lotus Notes Example of text which was been render correctly in other email readers Copyright DestiNet 2011 www.newzapp.co.uk
  • 23. This presentation has been written to help guide you through the most common of rendering issues, when creating your own html emails or editable html email templates, so we hope you found them useful and easy to follow. Don’t forget... If you’re using a template created by the NewZapp design team, it will already have been coded in the most up to date methods and tested rigorously across a wide range of email clients - so all you need to be aware of is how the content you insert can affect the overall layout and appearance. To make sure your emails continue to look great it’s important to keep abreast of these issues and don’t forget you can always rely on the experts! For more information on our expert email design services visit: http://www.NewZapp.co.uk/marketing-services For more information on best practice, speak to your Account Manager or visit: http://www.NewZapp.co.uk/resource-hub Final Thoughts ... Copyright DestiNet 2011 www.newzapp.co.uk
  • 24. Extra Reading ... If you would like to know more about the way that the content you insert into an editable email template can affect the overall layout and appearance of your campaigns, please contact us and ask for a copy of: Common Email Rendering Issues - NewZapp presentation Copyright DestiNet 2011 www.newzapp.co.uk If you would like to know more about designing and coding entire email campaigns from scratch, or about editable templates for use within a NewZapp account, contact us and ask for a copy of: Designers Guide to Creating HTML Email Templates – a NewZapp guide
  • 25. Find out more about NewZapp
    • Visit www.newzapp.co.uk
    • Call us on 0845 612 5544
    • Email [email_address]
    • Contact us online
      • To find out more about NewZapp email marketing you can
    Copyright DestiNet 2011 www.newzapp.co.uk