• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Common rendering issues in email marketing and how to deal with them
 

Common rendering issues in email marketing and how to deal with them

on

  • 17,860 views

Email marketing best practice. We take a look at some of the most common rendering issues that occur in various email clients and how you should deal with them.

Email marketing best practice. We take a look at some of the most common rendering issues that occur in various email clients and how you should deal with them.

Statistics

Views

Total Views
17,860
Views on SlideShare
16,126
Embed Views
1,734

Actions

Likes
1
Downloads
86
Comments
1

14 Embeds 1,734

http://www.newzapp.co.uk 1562
http://www.slideshare.net 39
http://www.techgig.com 38
https://system.newzapp.co.uk 37
https://www01.newzapp.co.uk 26
http://webv6.newzapp.co.uk 7
https://newzappemailmarketing.zendesk.com 6
http://www01.newzapp.co.uk 4
https://www.newzapp.co.uk 4
https://www03.newzapp.co.uk 3
http://timesjobs.techgig.com 3
http://translate.googleusercontent.com 2
http://us-w1.rockmelt.com 2
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • is there a fix for border color for images yet in outlook 07/10?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Common rendering issues in email marketing and how to deal with them Common rendering issues in email marketing and how to deal with them Presentation Transcript

    • Does my email look good in this? Common email rendering issues and how to work around them By NewZapp Email Marketing Copyright DestiNet 2014www.newzapp.co.uk Version 4.0 June 2014
    • Slide 3 : Slide 4 : Slide 5 : Slide 6 : Slide 14 : Slide 24 : Slide 25 : Slide 28 : Slide 29 : Slide 31 : Slide 33 : Slide 34 : Slide 35 : Slide 36 : Why is rendering an issue in email marketing? Expert email design Quick look-up overview Outlook 2007, 2010 and 2013 Lotus Notes Web and other email clients Google / Virgin Media Mail rendering issues Yahoo! Mail rendering issues Opera Mail rendering issues iOS, Android and Windows mobile mail rendering issues Other commonly used email applications Final thoughts Extra reading Find out more about NewZapp Email Marketing www.newzapp.co.uk In this presentation we cover the following areas: Copyright DestiNet 2014
    • Why is rendering an issue in email marketing? Businesses and consumers use a wide variety of email clients (sometimes called readers) and devices, including: Outlook 2003/2007/2010/2013 Lotus Notes Google mail Outlook.com (formerly known as Windows Live Hotmail) AOL Mail Orange webmail (now part of EE) Yahoo Mail Opera Mail Mac Mail Mozilla Thunderbird iOS, Android & Windows mobile mail ... and more Email marketing is delivered as HTML code, and each email client renders HTML differently, so the challenge is to create email campaigns that render as consistently as possible across all email clients. Copyright DestiNet 2014www.newzapp.co.uk
    • Whilst it’s true to say that there are quite a few pitfalls to be aware of when creating and sending HTML email campaigns, the NewZapp design team have many years of experience to ensure correct rendering across all major email clients. They use this experience when designing and building editable (re-usable) templates for your NewZapp account. In this presentation we take a look at some of the most common rendering issues and (where possible) how you can work around them when creating your campaigns. We also offer supporting presentations for designers wanting to create or edit their own HTML. Expert email design www.newzapp.co.uk Contact us for a copy of: Common Email Rendering Issues - A NewZapp Guide for Designers Plus the complete A-Z of everything we know! The Designer’s Guide to Creating HTML Emails Copyright DestiNet 2014
    • Quick look-up overview Outlook 2007-13 Outlook .com GoogleMail VirginMail Orange Webmail AOL Mail Yahoo! Mail Thunderbird OperaMail MacMail Lotus Notes7 iOS Android Windows Phone Background images            Animated Gifs             PNG Images             Image space/padding             Borders on images           Abs middle text alignment            Highlighting             Anchor links           Correctly coloured links            Correctly coloured text            Font rendering          Click on the red crosses to take you to each rendering issue slide. www.newzapp.co.uk Copyright DestiNet 2014
    • Outlook 2007, 2010 and 2013 Outlook 2007, 2010, and the latest release 2013, are considered to be the more challenging email clients for rendering HTML emails. Unlike other email clients, Outlook 2007/2010/2013 uses Microsoft Office Word to render HTML, bringing with it a number of issues. When adding content to an email using an editor such as the one in NewZapp, a common problem is unwittingly copying and pasting ‘invisible’ formatting from a Word document. Whilst your content may look fine as you are editing, it won’t be until you send an email to Outlook 2007-13 that you will discover Word code lurking in the background has drastically changed the style of your email (and not usually for the better!). So avoiding the inclusion of Word code in your HTML emails will give you a more reliable and consistent result. Outlook 2003 is being used less and less by most recipients (in fact Microsoft discontinued support in April 2014) but our continued testing has not shown up any major issues so far. On the next set of slides we’ll illustrate some of these issues with suggestions on how to work around them >> www.newzapp.co.uk Copyright DestiNet 2014
    • What’s a background image? A background image may be used by a designer if they want to have any kind of patterned, textured or gradient effect sitting behind real text in an HTML email. The image is often set to repeat itself as an email grows in length when content is added. What to do: When designing templates for our customers, we tend to avoid the use of most types of background effect to give a consistent design across all email clients. But if you are happy that the effect will show in all but Outlook 2007-13 (& Lotus Notes) then a flat back-up colour can be set in the code as an alternative for these readers (see examples right). Other workarounds?: If a background effect is essential for your template design, and you are designing and/ or coding your own HTML templates, there is a workaround posted on our blog which is useful in a lot of instances where the pattern/effect does not need to be specifically positioned/repeated. If your designer wants to a particular background effect it might be worth showing them this example and our blog article. The full link to our Designer Zone blog article is: newzapp.co.uk/resource-hub/designerzone-articleBackgroundimagesgoodnewsatlast.html Is this an issue in any other email clients? Yes, Lotus Notes What’s the problem? Background images do not display Example of rendering that allows background images to display Outlook 2007-13 rendering issues Example of email rendering in Outlook (with alternative flat background colours displaying) www.newzapp.co.uk (1 of 7) Copyright DestiNet 2014
    • Outlook 2007-13 rendering issues What’s the problem? Outlook 2007-13 only displays the first frame of an animated gif, as a static image What to do: When we design animated gifs for our emails, we make sure that: • The first frame works as a stand alone image. • Any call to action or other crucial information is also included in the first frame. If your designer creates an animated gif for your emails, or an advertiser supplies you with one for inclusion in an email, make sure they are aware of this issue. Is this an issue in any other email clients? No (and not an issue in Outlook 2003) Example of an animated gif rendering properly Bad example of an animated gif rendering in Outlook Good example of an animated gif rendering in Outlook www.newzapp.co.uk (2 of 7) Copyright DestiNet 2014
    • What’s the problem? Sporadic gaps appearing in very long emails More detail: Unlike other email readers, Outlook 2007/2010/2013 uses Microsoft Office Word to render HTML on screen, and this particular issue is related to that fact. Word likes to apply it’s own print-based formatting and in situations like this, where an email has a lot of content, it is applying a page break. In the example shown here the break in the layout isn’t really causing much of an issue with the layout, but if the break happens to appear in a section of text then the flow and layout of the email might make it appear broken. What to do: At the moment there is no known work around so the best advice we can give if this situation happens when you are testing your email campaign would be to firstly consider whether your email really needs to be that long, and should you maybe divide it into two emails or add landing pages to the campaign? Secondly, take a look at your past campaign statistics in relation to what proportion of your database is using Outlook 2007/2010/2013 as their email reader, that could help you evaluate how big an issue it is for you personally. Is this an issue in any other email clients? No Outlook 2007-13 rendering issues (3 of 7) Example of a long email rendering correctly Example of a long email rendering incorrectly with a gap appearing in Outlook 2007-13 Copyright DestiNet 2014www.newzapp.co.uk
    • Outlook 2007-13 rendering issues More detail: Images dragged and re-sized within an email whilst it’s being composed or re-sized by means of code in the HTML will revert to their original size when viewed in Outlook 2007-13 . What to do: We suggest one of two options... • The most reliable method is to size your images exactly how you want them to appear in an email, before you upload them to the hosted location (eg. to your NewZapp account or on your own server). • You can use either your own graphics application to resize or crop an image, or there are image editing tools in NewZapp 5 to do this. • There are also free image editing applications available online such as GIMP or Google+ Creative Kit which offer online picture editing tools. • If using NewZapp 5 in IE or Firefox to compose your email, clicking on an image that you have inserted into an editable area will provide you with grab handles and you can use these to safely resize an image. Once resized, NewZapp automatically saves this new image on the server to ensure that it doesn’t revert back to the image’s initial size in Outlook 2007-13. Is this an issue in any other email clients? Yes, Lotus Notes www.newzapp.co.uk (4 of 7) What’s the problem? Outlook 2007-13 ignores image resizing within html code, displaying images at their original exported size Example of email rendering in Outlook, where re-sized image dimensions are not recognised Example where the email client recognises the desired image dimensions Copyright DestiNet 2014
    • What’s the problem? Outlook 2007-2013 displays 11px text with wider letter spacing than is usual in HTML What to do: If using this text size in your email content, pay close attention to any areas where the copy doesn’t have much room for expansion (is a tight fit in the space available?) and do send a test to Outlook 2007, 2010 or 2013 to make sure you are still happy with how it looks. Is this an issue in any other email clients? No Example text rendering with standard 11px letter spacing (see sub header fits on one line) Example text rendering in Outlook with increased letter spacing (see sub header now flows onto two lines) Outlook 2007-13 rendering issues (5 of 7) Copyright DestiNet 2014www.newzapp.co.uk
    • What’s the problem? Outlook 2007-2013 will not display coloured borders applied to images using HTML What to do: Unfortunately, as yet there is no HTML code that you can insert into your email to ensure borders appear in Outlook 2007- 2013 , so if you want to ensure that the border is seen in all readers it would be best to incorporate it as part of your image before you upload it into your email. This will also ensure that any text aligned with images stays in place, and doesn’t get re-positioned because of the lack of borders (see example below). Is this an issue in any other email clients? Yes, Yahoo! Mail – and there are other border related issues in Lotus Notes Example of email rendering that allows the display of borders on images Example email rendering in Outlook 2007/2010 with borders not showing and text aligned differently to expected www.newzapp.co.uk Outlook 2007-13 rendering issues (6 of 7) Copyright DestiNet 2014
    • What’s the problem? Outlook 2007-13 does not recognise the AbsMiddle image alignment function and subsequently ignores any padding that has automatically been applied to the image and text. What’s Abs Middle? Abs Middle image alignment is an option on the NewZapp tool bar which is used to align a line of text centrally alongside an image. This may be used for text titles, bulleted lists/links etc, as shown in the examples below. What to do: If you feel this is has an impact on your emails, you may decide to use only left image alignment instead, which displays with no problems in other email readers and looks just as good if your image is a similar height to your accompanying line of text. Is this an issue in any other email clients? Yes, Lotus Notes has a similar issue. Example email rendering that allows Abs Middle image alignment Example email rendering of Abs Middle image alignment in Outlook 2007-13 www.newzapp.co.uk Outlook 2007-13 rendering issues (7 of 7) Copyright DestiNet 2014
    • Lotus Notes Earlier versions of Lotus Notes are considered to be one of the more challenging email clients to work with, renowned for there own unique methods of rendering HTML emails. Lotus Notes uses its own custom rendering engine to display HTML emails, and this inhibits the use of a number of effects that you might take for granted when working on your email layout. The good news is that version 8 onwards does finally look to be behaving more like its contemporaries. Lotus Notes is just one component of a database-oriented application suite, which is commonly used by medium-to-large-sized organisations. Statistically, a higher percentage of B2B emails will be opened in Lotus Notes than B2C emails, which might help you evaluate how much time you wish to spend on accommodating it when creating your own emails. NewZapp LIVE! Reports will give you data on what percentage of your database are opening their emails with Lotus Notes. On the next set of slides we will be illustrating some of the issues with suggestions on how to work around them >> www.newzapp.co.uk Copyright DestiNet 2014
    • Lotus Notes rendering issues www.newzapp.co.uk (1 of 9) What’s the problem? Background images do not display Example of rendering that allows background images to display Example of email rendering in Lotus Notes (with alternative flat background colours displaying) What’s a background image? A background image may be used by a designer if they want to have any kind of patterned, textured or gradient effect sitting behind real text in an HTML email. The image is often set to repeat itself as an email grows in length when content is added. What to do: When designing templates for our customers, we tend to avoid the use of most types of background effect to give a consistent design across all email clients. But if you are happy that the effect will show in all but Lotus Notes (& Outlook 2007-13) then a flat back-up colour can be set in the code as an alternative for these email readers (see examples). Other workarounds?: If a background effect is essential for your template design, and you are designing and/ or coding your own HTML templates, there is a workaround posted on our blog which is useful in a lot of instances where the pattern/effect does not need to be specifically positioned/repeated. If your designer wants to a particular background effect it might be worth showing them this example and our blog article. The full link to our Designer Zone blog article is: newzapp.co.uk/resource-hub/designerzone-articleBackgroundimagesgoodnewsatlast.html Is this an issue in any other email clients? Yes, Outlook 2007-13 Copyright DestiNet 2014
    • What to do: To ensure images display across all readers, use a format that will render consistently such as .jpg or .gif. Is this an issue in any other email clients? No What’s the problem? Lotus Notes 7 or below will not display .png images Lotus Notes rendering issues Example email rendering that allows the display of .png images Example email rendering in Lotus Notes (note that image spacing is also not recognised) www.newzapp.co.uk (2 of 9) Copyright DestiNet 2014
    • Lotus Notes rendering issues www.newzapp.co.uk (3 of 9) What’s the problem? Lotus Notes ignores image resizing within html code so will display images at their original size, eg. as they are on the hosting server More detail: Images re-sized by hand within an email, whilst it’s being composed, or re-sized by means of code in the HTML, can revert to their original size when viewed in Outlook 2007-13 What to do: We suggest one of two options... • The most reliable method is to size your images exactly how you want them to appear in an email, before you upload them to the hosted location (eg. to your NewZapp account or on your own server). • You can use either your own graphics application to resize or crop an image, or there are image editing tools in NewZapp 5 to do this. • There are also free image editing applications available online such as GIMP or Google+ Creative Kit which offer online picture editing tools. • If using NewZapp 5 in IE or Firefox to compose your email, clicking on an image that you have inserted into an editable area will provide you with grab handles and you can use these to safely resize an image. (Once resized, NewZapp automatically saves this new image on the server to ensure that it doesn’t revert back to the image’s initial size in Lotus Notes). Is this an issue in any other email clients? Yes, Outlook 2007-13 Example of email rendering in Outlook, where re-sized image dimensions are not recognised Example where the email client recognises the desired image dimensions Copyright DestiNet 2014
    • Lotus Notes rendering issues What’s the problem? Lotus Notes 7 or below will not display html white space added to images What to do: If you estimate that you have a number of recipients using Lotus Notes 7 or below as their email client, and are concerned about this issue, then consider including white space within the actual image instead of relying on html. Alternatively, take into account how the email will look if the images in your content appear without the padding eg. an image aligned to the right of left justified text, will probably work better without padding than one aligned left of text (as below). Is this an issue in any other email clients? No Example of email rendering where padding is displayed on images Example of the same email rendering in Lotus Notes 7 or below www.newzapp.co.uk (4 of 9) Copyright DestiNet 2014
    • Lotus Notes rendering issues What to do: There’s little you can do about this issue if you want to use specific shades of colour that match your branding. But make sure your designer is aware if you are creating your own HTML and where possible include a Lotus Notes account in your test group prior to launching your campaign, to see the extent of the differences. NewZapp LIVE! Reports will give you data on what percentage of your database are opening their emails with Lotus Notes. Is this an issue in any other email clients? Not exactly, but Opera does have an issue with combinations of text and background colours if it thinks they do not contrast enough which, again, your designer should be aware of. For more information: www.newzapp.co.uk (5 of 9) What’s the problem? Lotus Notes uses its own palette of colours rather than standard Web Safe colours. The result is that some shades of text colour will be rendered slightly differently to other email readers. eg Greens, Yellows and lighter shades of Orange seem to be most affected Contact us for a copy of: Common Email Rendering Issues A NewZapp Guide for Designers Plus the complete A-Z of everything we know! The Designer’s Guide to Creating HTML Emails Copyright DestiNet 2014
    • Lotus Notes rendering issues What’s the problem? As in other editors, within NewZapp you are able to apply highlighting to text in a range of different colours. The issue is that Lotus Notes 7 or below will ignore this set style. This will cause a problem if, for example, your text and overall background colour are the same (please see example below) What to do: At present there is no workaround to avoid this issue, so we’d advise that if you use the highlighting tool, you take care that the text will still be readable without the highlight background colour. Is this an issue in any other email clients? No Example email rendering that displays highlighted text Example email rendering in Lotus Notes www.newzapp.co.uk (6 of 9) Copyright DestiNet 2014
    • Lotus Notes rendering issues What’s the problem? Lotus Notes 7 or below will convert any coloured border applied to an image using HTML to Black What to do: As yet there is no HTML code that you can insert into your email to ensure that borders appear in the correct colour in Lotus Notes 7 or below. Our advice would be that if you want to ensure the border is seen in all readers it would be best to incorporate it as part of your image before you upload it into your email. Is this an issue in any other email clients? No, but you will find another issue related to borders in Outlook 2007-13 Example email rendering that displays coloured borders (and padding) on images Example email rendering in Lotus Notes where image borders display as Black (and padding is ignored) www.newzapp.co.uk (7 of 9) Copyright DestiNet 2014
    • Lotus Notes rendering issues What’s the problem? Lotus Notes will not recognise internal anchor links within an email. Instead of linking down to anchor points within an email once an internal anchor link is clicked, Lotus forces open a new window with a “cannot display” error on screen. What to do: Unfortunately there isn’t as yet, a piece of HTML code that you can insert into your email to ensure that anchor links work in Lotus Notes, so if you feel your readership is likely to have a high proportion of Lotus Notes users it would be best to avoid use of anchor links in your email campaigns. Is this an issue in any other email clients? Only minor issues: (8 of 9) In Opera In Orange Once an anchor link is clicked within an email for the first time, the email opens again in a new tab. The new tab does though jump down to the correct anchor point in the email, and subsequent clicks are fine. Once an anchor link is clicked the email opens again in a new window. The new window does jump down to the correct anchor point in the email but every subsequent link will open the email again in another new window. Copyright DestiNet 2014www.newzapp.co.uk
    • Lotus Notes rendering issues www.newzapp.co.uk (9 of 9) What’s the problem? Lotus Notes 7 or below does not recognise the Abs Middle image alignment function and subsequently ignores any padding that has automatically been applied to the image. What’s Abs Middle? Abs Middle image alignment is an option on the NewZapp tool bar which is used to align a line of text centrally alongside an image. This may be used for text titles, bulleted lists/links etc, as shown in the example below. What to do: If you feel this is has an impact on your emails, you may decide to use only left image alignment instead, which displays with no problems in other email readers and looks just as good if your image is a similar height to your accompanying line of text. Is this an issue in any other email clients? Yes, Outlook 2007-13 has a similar issue. Example email rendering that allows Abs Middle image alignment Example email rendering of Abs Middle image alignment in Outlook 2007-13 Copyright DestiNet 2014
    • A web email client is one that you access via a web page online, rather than via an installed application. The most popular free web clients include: Google mail Outlook.com (formerly know as Hotmail) AOL Mail Yahoo Mail Orange webmail (now part of EE) Opera Mail (built into the Opera Browser) Examples of subscription-based web clients: Virgin Media Mail Sky Email On the next set of slides we will be illustrating some of the issues with suggestions on how to work around them >> Web and other Email Clients www.newzapp.co.uk Copyright DestiNet 2014
    • Google Mail & Virgin Media Mail* rendering issues What’s the problem? Google Mail and Virgin Media Mail insert a short gap under images. How would this affect an email?: This is a problem which comes to light if an image in your email has been sliced (cut) horizontally into sections. eg. is one image sitting directly on top of another but you want them to appear as one whole and seamless image? This is something you might do in order to attach different hyperlinks and alt tags to each part of the whole image. What to do: NewZapp has a “display:block” check box option available every time you insert an image that automatically adds code which prevents the gap from appearing. Adding this code will not affect the layout in any email readers and this code can also be added by your designers if they are creating HTML for you. More info: The gap does not appear above, or down the horizontal sides of an image, but only along the bottom edge. So keep this in mind when slicing your images and you may be able to arrange your email in a way that the gap will not be noticed if you omit the “display:block” code. See details on the next slide if you are creating your own HTML >>> *Google & Virgin Media Mail use versions of the same rendering engine. Example email rendering that displays horizontally sliced images correctly Example email rendering of horizontally sliced images in Google / Virgin Media Mail www.newzapp.co.uk (1 of 2) Copyright DestiNet 2014
    • Adding additional HTML code to each image attribute in the content of your email This code will avoid the issue outlined on the previous Slide 25 if you have one image above another. (For any queries on how to access the HTML of your NewZapp email template or content, please contact us) Please note: This method will not be suitable if you have more than one image per row. Is this an issue in any other email clients? Yes – Yahoo! Mail and Outlook.com The HTML image path for a typical image is as follows (XXXXX represents your CID): <IMG border=0 src=“..Customers/XXXXX/nz-images/p1.jpg" width=273 height=51> You will need to add an extra part to this code (indicated in Red): <IMG style=“display: block" border=0 src=“..Customers/XXXXX/nz-images/p1.jpg" width=273 height=51> www.newzapp.co.uk Is there any good news? Any images fixed in place on your NewZapp template will already have this code applied by the NewZapp design team. There is currently no issue with vertical gaps between two images placed side by side. Copyright DestiNet 2014
    • Google Mail & Virgin Media Mail rendering issues What’s the problem? Google Mail & Virgin Media Mail display links in their own preferred shade of Blue, or with an underline of Blue, unless each link has a colour reference included in the HTML code. This becomes a particular problem if making links on a dark background colour. What to do: Fear not! If you are using NewZapp as your email editor, then this won’t be an issue for you as the system inserts a colour reference in the HTML of your email at each point that a hyperlink is inserted. The NewZapp Design team will have also included code on any fixed links on your template to prevent them from changing colour. Designing HTML Emails? Use inline styles to make sure link colours are constant. You also need to be aware when creating code that on iOS devices contact numbers and email addresses convert to “tappable” links. If you are including NewZapp custom tags in HTML, these also convert to links on sending. We recommend our Designer Resources: Is this an issue in any other email clients? Yes Yahoo! Mail Also Outlook.com, Orange Webmail (links in purple), AOL Mail. Example of an email made in NewZapp that contains links on a dark background colour, rendering correctly Example of an email rendering in Gmail or Virgin Media mail where the HTML does not have colour references in the HTML www.newzapp.co.uk (2 of 2) Contact us for a copy of: Common Email Rendering Issues - A NewZapp Guide for Designers Plus the complete A-Z of everything we know! The Designer’s Guide to Creating HTML Emails Copyright DestiNet 2014
    • What’s the problem? Yahoo! Mail will not display coloured borders applied to images using HTML What to do: Unfortunately, as yet there is no HTML code that you can insert into your email to ensure borders appear in Yahoo! Mail, so if you want to ensure that the border is seen in all readers it would be best to incorporate it as part of your image before you upload it into your email. This will also ensure that any text aligned with images stays in place and doesn’t get re-positioned because of the lack of borders (see below). Is this an issue in any other email clients? Yes Outlook 2007-13 , and another issue related to borders in Lotus Notes Example email rendering that allows the display of borders on images Example email rendering in Yahoo! Mail with borders not showing and text aligned differently to expected Yahoo! Mail rendering issues (1 of 1) www.newzapp.co.uk Copyright DestiNet 2014
    • Opera Mail rendering issues (1 of 2) What’s the problem? Opera Mail will not recognise internal anchor links within an email. Instead of linking down to anchor points within an email once an internal anchor link is clicked, the email opens again in a new tab. The new tab does though jump down to the correct anchor point in the email, and subsequent clicks are fine. What to do: Unfortunately there isn’t as yet, a piece of HTML code that you can insert into your email to ensure that anchor links work seamlessly in Opera Mail, but it is worth considering this as being only a minor issue. Is this an issue in any other email clients? Yes. Lotus Notes and a minor issue similar to Opera Mail in Orange. www.newzapp.co.uk Copyright DestiNet 2014
    • Opera Mail rendering issues (2 of 2) What’s the problem? If a text colour is deemed by Opera Mail to be too close to the background colour it is sitting on, it will change the shade to add better contrast. eg. A light text colour on a light background colour will convert to Black when the email is viewed in Opera Mail. And similarly, a dark text colour on a dark background colour will convert to White. What to do: There are ways in which a designer can calculate the amount of contrast between two colours, when working on an email design (this is something that the NewZapp design team take into consideration with their work). When adding text content yourself to an email, just bear this quirk in mind and use colours with enough contrast to be easy and clear to read - which would be good practice anyway. Is this an issue in any other email clients? No but Lotus Notes has a limited colour palette which can affect text colours. www.newzapp.co.uk Example of email rendering that allows any combination of text and background colour Example of the same email rendering in Opera Copyright DestiNet 2014
    • www.newzapp.co.uk iOS, Android and Windows mobile mail rendering issues (1 of 1) What’s the problem? iOS, Android and Windows mobile platforms aren’t installed with the same range of fonts as those on desktop PC and Mac devices. How the rendering of text works in practice: In order for the text in your email to look the same, no matter where or how it’s opened, the person reading your email needs to have the font installed on their machine/device. It’s for the same reason that many companies pick a universally available font for branded documentation, stationery etc. Websites on the other hand can use just about any font style by means of Cascading Style Sheets (CSS) and imported online font resources. Until the recent surge in viewing emails on a mobile device, as long as your email text used one of the core font styles you could pretty much depend on the text looking the same in all email readers. But because of the constraints of screen size and resolution, mobile device software will use it’s own specially-designed system fonts in preference to any others. You will now find that the range of fonts is quite limited on iOS and Windows phones, and positively sparse on Android! What to do: As with most aspects in this presentation, as long as you bear this in mind when (for example) mixing images of text with real text, and you don’t have very strict branding guidelines, then we wouldn’t suggest being overly concerned. The device will at least display the system san serif alternative for a san serif font, and system serif alternative for a serif font. Is this an issue in any other email clients? No. Yahoo Mail had similar issues in the past, but this seems to have been resolved. See more details on the next slide >>> Copyright DestiNet 2014
    • www.newzapp.co.uk Comparison of commonly used fonts on iOS, Android and Windows mobile mail Copyright DestiNet 2014
    • www.newzapp.co.uk Other commonly used email applications Apart from email access via the web and desktop programs such as Outlook and Lotus Notes, there are a range of other free email applications and programs for a selection of different operating systems. Two of the most popular are: Mac Mail, which is Apple’s main email app and comes with every Apple computer, laptop, phone or tablet. This runs in a very similar way to how Outlook runs on a PC, pulling in the email accounts of your choice. There are currently no significant rendering issues to mention, but the couple of things on the iOS Mobile slide would be worth reading. Mozilla Thunderbird is a free email / news client which work across all platforms of desktop computer and mobile device. There are currently there no known issues to report. Copyright DestiNet 2014
    • This presentation has been written to help guide you through the most common of rendering issues, 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/features/custom-built-template.html For more information on best practice, speak to your Account Manager or visit: http://www.newzapp.co.uk/resource-hub You can also find us on Twitter Facebook and www.newzapp.co.uk Copyright DestiNet 2014 Final thoughts
    • 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 copies of our other related publications: www.newzapp.co.uk Common Email Rendering Issues A NewZapp Guide for Designers The complete A-Z of everything we know! The Designer’s Guide to Creating HTML Emails Copyright DestiNet 2014 Extra reading
    • Visit www.newzapp.co.uk Call us on 0845 612 5544 Email sales@newzapp.co.uk Contact us online www.newzapp.co.uk Copyright DestiNet 2014 Find out more about NewZapp To find out more about NewZapp email marketing you can