Preview HTML email on iphone

Question

I am sending several emails from my application. The email contains html and the first email element is the company logo.

Email is displayed in any mailbox, including iphone, but the problem is that the “preview” email is above the subject line on the iphone. Since there is a logo in the mail body, a preview of the mail shows the URL of the image. How can I avoid displaying the url of the image in the preview and have something more meaningful text in the preview. I need the logo to be the first in the body of the letter.

Is there any workaround for this?

Thansk

Answer 1

Often email messages will contain a snippet of text in the very top corner of the email message to solve this problem.

See - http://www.aweber.com/blog/email-marketing/do-you-use-snippets-for-more-opens.htm

Answer 2

Just adding your two cents to this discussion after testing various iterations of this yourself over the past few days. Other answers to this question are good for starters, but they all miss a couple of cases with edges (or sometimes not so often). I'm not going to claim that I tested this on every single client, but I worked on all the major ones: Gmail, Yahoo, Outlook.com/Hotmail, Outlook for Windows and OS X (various versions connecting to Exchange, POP and IMAP), various IMAP Internet clients, iOS Mail (both for connecting to the exchange server and to the regular IMAP server: Yes, it does previews differently in these circumstances), Android Mail, Android / iOS Gmail, Postbox, Thunderbird and a few others that I can’t remember from head to head.

Use the div preheader. Set up your inline div because some webmail services (Gmail) remove <style> tags from the HTML header of your email. Built-in display: none; style display: none; works on most clients, but does not appear in the gmail web view and in the Yahoo web browser unless you define it as display: none !important; . If you do not have a !important declaration there, the preheader div will be displayed in the body of the message when reading it in web clients for these services.

We are currently using a div with the following style-built styles to hide our preheader from the various clients and services that we tested: display: none !important; height:0px; overflow:hidden; color:#ffffff; font-size:2pt; display: none !important; height:0px; overflow:hidden; color:#ffffff; font-size:2pt; . Some of them do not work in all or in most situations, but between them they all pretty well cover various bases. Hacking height , in particular, affects only a few clients and breaks completely in the Gmail web client (it is currently rewriting height declarations as the minimum height, which was unexpected), but since it honors display: none !important; , the preheader header there is still hidden. The color and font size of the hack, as ste7enm mentioned, more effectively hide the preheader when a message is forwarded by some clients / services.

Side note: after testing, re-designing and re-testing our templates several times, I came to the conclusion that email is the arch-enemy of all things, good and clean.

Answer 3

Have you tried using alt inside the img tag? for example <img src="mycompany.png" alt="company name" />

Answer 4

I know this question is a little old, but it came to me in search, and I thought that I would add one more little tip:

If you are going to follow the path of enabling the DIV at the top (preheader, for @John), be sure to configure it.

I found that when people received an email in Outlook, while the header did not appear in the original message, it appeared again if they sent or replied to the message.

Use this workaround to avoid this problem:

 <div style="display:none; color:#fff; font-size:2pt;">This is the abstract text that will appear in your email client message preview or notification window.<br />&nbsp;</div> 

Then the header lights up when it receives them, the text is still used for prior notification with Outlook or for text preview in Mail on iOS and is so small and poor when they send or reply to the message that your audience will not see it.

Also note that this type of header will be visible to people using older BlackBerry devices (BlackBerry 4 and BlackBerry 5 if HTML is disabled).