HTML mail preview on iphone

Question

I am sending some emails from my application. The email has html in it and the first item in email is company logo image

The email is rendered fine in all email clients including iphone but the problem is with the email "preview" righ below the subject line on iphone. Since the mail body has a logo the preview of mail shows the image url. How can I avoid showing image url in preview and have something more meaningful text in preview. I do need to keep the logo as the first thing in email body.

Is there any workaround to this?

Thansk

Answer 1

Just adding my two cents to this discussion after testing various iterations of this myself over the last few days. The other answers to this question are good to start from, but they all miss a couple edge cases (or not-so-edge cases sometimes). I'm not going to claim I've tested this on every single client out there, but I've gotten it working on all the big ones: Gmail, Yahoo, Outlook.com/Hotmail, Outlook for Windows and OS X (various versions connecting to Exchange, POP and IMAP), various web-based IMAP clients, iOS Mail (both connecting to an exchange server and a regular IMAP server: Yes it renders previews differently in those circumstances), Android Mail, Android/iOS Gmail clients, Postbox, Thunderbird, and a few others I can't remember off the top of my head now.

Use a preheader div. Style the div inline because some web-based email services (Gmail) will strip <style> tags out of the HTML head of your email. The inline style, display: none;, works on most clients but fails in gmail web view and Yahoo web view unless you define it as display: none !important;. If you don't have the !important declaration in there, the preheader div will be visible in the body of email when reading it in the web-based clients for those services.

Right now, we're using a div with the following inline-defined styles to hide our preheader from the various clients and services we've tested in: display: none !important; height:0px; overflow:hidden; color:#ffffff; font-size:2pt;. Some of those don't work in all or most situations, but between all of them, they cover the various bases pretty well. The height hack, in particular, only effects a couple of clients and completely breaks in Gmail's web-based client (it currently rewrites height declarations as min-height, which was unexpected), but since it honors display: none !important; the preheader ends up hidden there anyway. The color and font-size hack, as mentioned by ste7enm, hides the preheader more effectively when a message is forwarded by some clients/services.

Side note: After testing, redesigning and retesting our templates several times, I've concluded that HTML email is the sworn enemy of all things good and pure.

Answer 2

Frequently emails will include a snippet of text at the very top of the email to address that issue.

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

Answer 3

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

Answer 4

I know this question is a little old, but it came up for me in a search and I thought I'd add another small tip:

If you're going to go the route of including a DIV at the top (preheader, per @John), make sure to style it.

I found that when people received the email in Outlook, while the preheader didn't appear in the original message, it reappeared if they forwarded or responded to the message.

Use this simple workaround to avoid that issue:

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

The preheader is then hidden when they receive it, the text is still used for the preview notification with Outlook or the text preview in Mail on iOS, and is so small and white when they forward or reply to your message that your audience won't 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).