Table of Contents Desktop PC and Apple Mac applications Web and mobile device readers Find out more about NewZapp

Transcription

1

2 Table of Contents Why is display an issue in marketing?... 2 Expert Design... 3 Quick look-up overview... 4 Desktop PC and Apple Mac applications... 5 Outlook Content pasted from other applications causes layout problems... 6 Animated GIFs not animating... 7 No coloured HTML borders on images... 8 Absolute Middle image alignment not working... 9 Incorrect letter-spacing HTML image resizing not working Gaps appearing in s with a lot of content Lotus Notes Internal anchor links not working HTML image resizing not working Opera Mail Internal anchor links not working Text colour is altered unexpectedly Web and mobile device readers Gmail & Virgin Media Webmail * Short gaps appearing under images Text links not displaying in specified colour Outlook.com and Yahoo! Mail No coloured HTML borders on images Short gaps appearing under images Text links not displaying in specified colour Mobile device applications Inconsistent text display Comparison of commonly used fonts on ios, Android and Windows Phone mobile devices 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 code, and each program or app interprets this code slightly differently. The challenge is to create campaigns that are displayed as consistently as possible across all readers. 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 some of the most common display issues encountered when creating an campaign in an marketing system like NewZapp and (where possible) how you can work around them. We also offer supporting presentations for Designers and Coders looking to create or edit their own HTML s. Contact us for a copy of: building best practice - a guide for designers Plus the complete A-Z of everything we know! The Designer s Guide to Building Templates 3

5 Quick look-up overview Click on the red circles to take you to each reader s issue. Support for Feature? Microsoft Outlook Microsoft Outlook.com Gmail / Virgin Media Webmail Orange Webmail AoL Mail Yahoo! Mail Mozilla Thunderbird Opera Mail Apple Mail for OS X Lotus Notes 8.5 Apple Mail for ios Mail for Android Outlook for Windows Phone Animated GIFs Borders on Images Absolute Middle Image Alignment Internal Anchor Links Link Colouring Text Colouring Font display Re-sized images 4

6 Desktop PC and Apple Mac applications Most PCs and Apple Macs come with a default program pre-installed, ready to be used to collect and display s from any address including online webmail accounts. 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 has proven to be 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-oriented 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 with a few small foibles. On the following pages we will illustrate some of the more common display issues for desktop programs and suggest ways of working around them. 5

7 Outlook Content pasted from other applications causes layout problems Adding content to an by copying and pasting from a web page, another or a Word document brings with it invisible application-specific formatting code. For example, unlike other programs, Microsoft Outlook uses Microsoft Word to display HTML, which can cause a number of issues if your content is not as clean as you think it is! Everything may look fine as you are working in your editing system but it won t be until you send an to an Outlook account that any extra code lurking in the background will wreak havoc on the style and layout of your . Using content that you know to be clean and unformatted in the first place is the best way to avoid problems. marketing editors such as NewZapp usually provide tools to strip out extra formatting code automatically as you paste. If you prefer, you can manually clean content before adding it to an by simply pasting it into a plain text editor like Notepad or SimpleText, which should strip out any extra formatting. Re-copy this cleaned content and paste it into your marketing editor. Your HTML code should then be cleaner and give you more reliable and consistent results in all readers. Looks fine in the editor <!--[if gte mso 10]> <style> /* Style Definitions */ table.msonormaltable {mso-style-name:"table Normal"; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; </style> <![endif]--> <div style="text-align: left;" class="msonormal"><b style="msobidi-font-weight:normal"><span style="font-size:12.0pt;lineheight:115%;fontfamily:"arial","sansserif";color:#e46c0a; but extra code like this little lot Although this is an issue most often encountered with the combination of Outlook and Microsoft Word, any reader may display oddly if your code is not clean and correctly formatted. can give unexpected results in Outlook

8 Outlook Animated GIFs not animating Instead of displaying an animated GIF as a multipleframe animation like most readers, Outlook displays only a static image of the first frame. More info: A GIF (Graphical Interface Format) is a commonly used image file type that displays reliably online and in all major readers. An animated GIF groups together multiple individual images and plays them back as an animation. When including animated GIFs in your campaigns you should ensure that: Example of an animated GIF in Outlook displaying an incomplete first frame as a static image Example of an animated GIF in Outlook displaying a more effective first frame as a static image 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 s, or an advertiser supplies you with one for inclusion in an , make sure they are aware of this issue. No. 7

9 Outlook No coloured HTML borders on images Outlook will not display coloured borders on images. Unfortunately, as yet there is no HTML or CSS code that you can insert into your to ensure borders appear in Outlook , so if you want to ensure that a border is seen in all readers it would be best to incorporate it as part of your image. This will also ensure that any text aligned with your images stays in place and doesn t get re-positioned because of the lack of borders (see example below). Yes, Outlook.com and Yahoo! Mail. Example of reader that allows the display of HTML borders on images Example of displayed in Outlook with no HTML borders on images and inconsistent text positioning 8

10 Outlook Absolute Middle image alignment not working Outlook does not recognise the HTML Absolute Middle image alignment attribute and also ignores any padding that has automatically been applied to the image and text. What s Absolute Middle? In some editing programs Absolute Middle image alignment can be used to align text vertically centre besides an image. This is useful for titles, bulleted lists/links etc as shown below. Check past campaign statistics to see what proportion of your database uses Outlook this will help you evaluate how big an issue it is for you. If you do have a large percentage of Outlook users, we advise against using Absolute Middle image alignment at all. Instead, consider using Left image alignment, which displays with no problems in other readers and looks just as good so long as your image is a similar height to your accompanying line(s) of text. No. Example showing Absolute Middle image alignments correctly Example showing Absolute Middle image alignment being ignored by Outlook

11 Outlook Incorrect letter-spacing Outlook sets more letter-spacing for 11px text than is usual in HTML. If using this text size in your content, pay close attention to any areas where the copy doesn t have much room for expansion (i.e. is it a tight fit in the space available?) and do send a test to one or more Outlook 2007, 2010, 2013 and 2016 accounts to make sure you are still happy with how your looks. No. Example correctly displaying standard 11px letter-spacing (address fits on two lines within box) Example shown in Outlook with increased letter-spacing on 11px text (address now breaks out of box) 10

12 Outlook HTML image resizing not working Outlook ignores any HTML image code resizing images are always shown at their original size. It is important ensure your images are the actual size you need them to be in your before you upload them to where they will be hosted (e.g. to your NewZapp or other ESP account, or on your own server). This way there will be no need to resize them to their desired dimensions in the editor or by use of code in the HTML. To resize or crop an image you can use either: the image editing tools available in marketing editors such as NewZapp; your own graphics application (e.g. Photoshop, Paint Shop Pro) ; free image editing application such as MS Paint or Apple Photo (that come pre-installed with your OS), or basic online picture editing tools such as Picasa or Pixlr. Example where the reader recognises the desired smaller image size Example of displaying in Outlook , where the resized image dimensions are not recognised and the large image breaks the layout In marketing systems like NewZapp, if an image is larger than the area it is being placed into the image will be automatically resized to fit and saved at this size as a separate copy to preserve the original and to ensure that the image remains at its new size in Outlook Yes, Lotus Notes. 11

13 Outlook Gaps appearing in s with a lot of content Odd gaps appear in very long s. More detail: Unlike other readers, Microsoft Outlook uses Microsoft Word to interpret HTML and apply its own printbased formatting. This means in practice that it inserts a page-break when your content exceeds a set length. In the example shown here the break in the layout doesn t cause much of an issue, but if the break happened to appear in a section of text then the flow and layout of the might appear broken. Note that Outlook is unaffected by this issue. If this situation occurs when you are testing your campaign your options are: re-arrange the content so the gap appears in a less conspicuous place consider dividing the into two campaigns use a shorter linking to several landing pages instead Example of a long displaying correctly Example of a long displaying incorrectly with a gap appearing in Outlook 2007/2010 Check past campaign statistics to see what proportion of your database uses Outlook 2007/2010 to help you evaluate how big an issue it is for you. No. 12

14 Lotus Notes 8.5 Internal anchor links not working Lotus Notes 8.5 will not recognise internal anchor links within an . More Info: Instead of linking down to anchor points within an once an internal anchor link is clicked, Lotus Notes forces open a new browser window with a cannot display error on screen. Unfortunately, there isn t as yet a piece of code that can be used in an HTML to ensure that internal anchor links will work in Lotus Notes. If you feel your readership is likely to have a high proportion of Lotus Notes 8.5 users, it would be best to avoid the use of internal anchor links in your campaigns. Yes, in Opera Mail and a minor issue in Orange Webmail: Orange Webmail Once an anchor link is clicked the opens again in a new window. The new window does then jump down to the correct anchor point in the but every subsequent internal anchor link clicked will open the again in another new window. 13

15 Lotus Notes 8.5 HTML image resizing not working Lotus Notes 8.5 ignores any HTML image code resizing images are always shown at their original size. More detail: Images dragged and re-sized within an whilst it s being composed or re-sized by means of code in the HTML will revert to their original size when viewed in Lotus Notes. Example where the reader recognises the desired smaller image size The most reliable method is ensure your images are the exact size you need them to be in your before you upload them to where they will be hosted (e.g. to your NewZapp or other ESP account, or on your own server). To resize or crop an image you can use either: Example of displaying in Outlook , where the resized image dimensions are not recognised and the large image breaks the layout the image editing tools available in marketing editors such as NewZapp; your own graphics application (e.g. Photoshop, Paint Shop Pro) ; free image editing application such as MS Paint or Apple Photo (that come pre-installed with your OS), or basic online picture editing tools such as Picasa or Pixlr. In marketing systems like NewZapp, if an image is larger than the area it is being placed into the image will be automatically resized to fit and saved at this size as a separate copy to preserve the original and to ensure that the image remains at its new size in Lotus Notes 8.5. Yes, Outlook

16 Opera Mail Internal anchor links not working Opera Mail will not recognise internal anchor links within an . Unfortunately, the latest version of the Opera Mail program seems to have dropped all support for internal anchor links. Yes. Lotus Notes 8.5 and a minor issue in Orange Webmail: Orange Webmail Once an anchor link is clicked the opens again in a new window. The new window does then jump down to the correct anchor point in the but every subsequent internal anchor link clicked will open the again in another new window. 15

17 Opera Mail Text colour is altered unexpectedly If Opera Mail calculates that your text colour does not sufficiently contrast with the background colour it is sitting on, it will change it to add better contrast. For example: a light text colour on a light background colour will convert to Black when the is viewed in Opera Mail. And similarly, a dark text colour on a dark background colour will convert to White. There are tools available with which you can check the contrast between text and background colours to ensure they comply with accessibility standards e.g. WebAIM. This is good practice anyway and something that the NewZapp design team take into consideration when creating templates. No. Example of reader that allows any combination of text and background colour Example of the same in Opera Mail with text colours altered for better contrast 16

18 Web and mobile device readers A webmail or online reader is one that you access via a browser web page online, rather than via an application installed on your computer. A mobile device application is the default mail program used by each device and is specific to each Operating System. 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 illustrate some of the more common display issues for web and mobile readers and suggest ways of working around them >> 17

19 Gmail & Virgin Media Webmail * Short gaps appearing under images *Google & Virgin Media Mail use versions of the same reader. A gap appears under each image. How would this affect an ? This is a problem which comes to light if an image in your has been sliced (cut) horizontally into sections, e.g. if one image sits directly on top of another but you want them to appear as one whole and seamless image. This way you could add different hyperlinks and ALT tags to each part of the whole image. Many marketing editors like NewZapp automatically set the CSS code display:block on each image you add to your , or have an option to manually add it. This prevents the gap from appearing in Gmail or Virgin Media Webmail without affecting the layout in any other reader. Example reader that displays horizontally sliced images correctly Example displaying horizontally sliced images in Gmail or Virgin Media Webmail without display:block code More info: The gap does not appear above or along the sides of an image, only along the bottom edge. If you keep this in mind when slicing your image you may be able to arrange your so that the gap will not be noticeable if you omit the display:block code. Yes Outlook.com and Yahoo! Mail. 18

20 Gmail and Virgin Media Webmail* Text links not displaying in specified colour *Google & Virgin Media Mail use versions of the same reader. Google Gmail and Virgin Media Webmail prefers to display text links in their own default shade of blue instead of using the link colour set in the HTML . This becomes a particular problem if making links on a dark background colour. If you are using a system such as NewZapp as your editor you should be able to minimise this effect on editable text by having the desired link colour applied directly to the link text itself, either automatically when creating it or by selecting the link and re-applying the colour. If you decide to apply a different colour to a text link, do be aware that the underline part of the link may not change to this new colour. Example of an that contains white text links on a dark background colour displayed correctly Example of an in Gmail or Virgin Media Webmail where the text links do not have the correct colours applied to them Note that all templates created by NewZapp will have the above code already in place on all your s fixed text links. Yes - Outlook.com, Yahoo! Mail, AOL Mail and Orange Webmail (links in purple). 19

21 Outlook.com and Yahoo! Mail No coloured HTML borders on images Outlook.com and Yahoo! Mail will not display coloured borders on images. Unfortunately, as yet there is no HTML or CSS code that you can insert into your to ensure borders appear in Outlook.com or 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 . 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). Yes, Outlook Example of reader that allows the display of HTML borders on images Example of displaying in Outlook.com or Yahoo! Mail with no HTML borders on images and inconsistent text positioning 20

22 Outlook.com and Yahoo! Mail Short gaps appearing under images A gap appears under each image. How would this affect an ? This is a problem which comes to light if an image in your has been sliced (cut) horizontally into sections, e.g. if one image sits directly on top of another but you want them to appear as one whole and seamless image. This way you could add different hyperlinks and ALT tags to each part of the whole image. Many marketing editors like NewZapp automatically set the CSS code display:block on each image you add to your , or have an option to manually add it. This prevents the gap from appearing in Gmail or Virgin Media Webmail without affecting the layout in any other reader. Example reader that displays horizontally sliced images correctly Example displaying horizontally sliced images in Outlook.com or Yahoo! Mail without display:block code More info: The gap does not appear above or along the sides of an image, only along the bottom edge. If you keep this in mind when slicing your image you may be able to arrange your so that the gap will not be noticeable if you omit the display:block code. Yes Gmail and Virgin Media Webmail. 21

23 Outlook.com and Yahoo! Mail Text links not displaying in specified colour Google Gmail and Virgin Media Webmail prefers to display text links in their own default shade of blue instead of using the link colour set in the HTML . This becomes a particular problem if making links on a dark background colour. Example of an that contains white text links on a dark background colour displaying correctly If you are using a system such as NewZapp as your editor you should be able to minimise this effect on editable text by having the desired link colour applied directly to the link text itself, either automatically when creating it or by selecting the link and re-applying the colour. Example of an in Outlook.com or Yahoo! Mail where the text links do not have the correct colours applied to them If you decide to apply a different colour to a text link, do be aware that the underline part of the link may not change to this new colour. Note that all templates created by NewZapp will have the above code already in place on all your s fixed text links. Yes - Gmail, Virgin Media Webmail, AOL Mail and Orange Webmail (links in purple). 22

24 Mobile device applications Inconsistent text display Apple ios, Android and Windows Phone mobile platforms aren t installed with the same set of web safe fonts as those on PC and Apple Mac desktop machines. How the display of text works in practice: Ideally, for the text in a web page or to display consistently regardless of where or how it s opened, every device needs to have the chosen font installed or easily accessible. In fact, PC and Apple Mac desktop operating systems evolved to include a standard set of web safe font-families common to both platforms for this very purpose. Should a font be used that isn t installed or accessible, there are also pre-installed generic fall-back serif and sans-serif font families that can be used instead. However, the same cannot be said of the world of mobile devices. Because of the constraints of screen size, resolution, storage capacity and processing power, each mobile device operating system has developed its own specially-designed set of system fonts to make best use of limited resources. And the next slide illustrates just how limited the range of fonts are on ios and Windows Phone - and how positively sparse on Android! Strictly speaking, the latest Android devices use just a single speciallydesigned system font called Droid. As long as you are happy with Android s singular font and are careful when mixing graphics containing text with real text, there is still a useable sub-set of fonts common to both ios and Windows Phone. Should all else fail, all mobile devices have a clear and legible serif and sans-serif serif alternatives. No. See more details on the next page >> 23

25 Mobile device applications Comparison of commonly used fonts on ios, Android and Windows Phone mobile devices 24

26 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: Contact us for a copy of: building best practice - a guide for designers Plus 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 25