What's the best way to control autopreview text for HTML email newsletters? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.

---

开发者_StackOverflow社区

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

Closed 2 years ago.

Improve this question

When a company sends an email newsletter to customers, certain email clients (Gmail, Outlook) display a short snippet of preview text in the recipients inbox before the customer opens the email. As I understand it, there are two techniques to control what preview text appears regardless of the visible design and content of the email:

1) start the email with an invisible 1x1 pixel that uses the desired preview text as alt text

2) create a div in the html template with "display:none"

Which option is best in terms of computability with all major email clients?

---

You're talking about the so called "Preheader".

There's a lot of ways to implement preheaders in mail:

1. using alt attribute in a spacer (or image) in the top of your mail
2. type it as visible text (just above the link for the web version)
3. type it as invisibile text (matching the text color with the background and/or using font-size:0)

Avoid the first solution (alt attribute), since it's not supported by iPhone and iPad. Outlook will also show the path of your image. ALSO avoid using div or other CSS solutions.

Solution #2 and #3 are actually the best ways since they're supported everywhere. NOTE: by "everywhere" I mean client and web client that actually support preheaders: Gmail, iPhone, iPad, Outlook, etc.

Just remember: if the number of chars is lower than the max number supported by that client, it will show you the next text too.

For your info, here are the max chars limits: GMAIL (FIREFOX, IE, CHROME, SAFARI): max 97 chars IPHONE 4: max 81 chars vertically, max 137 chars horizontally IPAD: 87 chars OUTLOOK: max 255 chars

hope this helps.

Enjoy ;)

---

You're looking for a 'pre-header'. Personally, I would try to design your email in such a way that the pre-header is visible - no hacks needed.

---

I have used the hidden DIV technique successfully, and I think it's very important to control what the pre-text says, but in some email clients that hidden text is visible if you forward the email. This is true for Outlook 07 and Gmail among others. Some of my clients have had issues with that, and others are fine with it.

Also display:none will not work in all email clients. I usually go overkill and style the hidden DIV like this:

width:0;overflow:hidden;float:left;display:none;max-height:0px;visibility:hidden

Also also, go ahead and style the text so if they do forward the email and it shows up, it will look good and make sense with your design.

• Troy

---

The phrases “preview text” and “preheader text” are often used interchangeably. However, they are in fact slightly different elements of an email.

The preheader text is what is used to control the preview text that appears in the inbox, usually below the subject line. Preheader text appears visually above the header in the email body itself.

The preview text is what is seen in the message envelope of the email in the inbox.

To add a proper Preview Text that is hidden in the mail body use this little hack:

<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
  Insert preview text here.            
</div>