Outlook email newsletters and the AutoPreview pane
Cranking out email newsletters for Microsoft Outlook can be a pain, but if you are in the web business you may have to crank out the occasional email newsletter, and of course Outlook has a major market share. If you use Outlook you may know of the AutoPreview feature. This is a preview pane below the actual title that gives you the first few lines of content within the email. In many email newsletters you will get something like “View the online version of our newsletter”. This is probably not what you want to show up in the Outlook AutoPreview, and the way around it is quite simple. It’s also another chance to entice your audience into opening your email newsletter.
Since Outlook reads the first few lines of text in your email for it’s preview text, you must have those words at the top. Obviously the top of an email usually doesn’t have anything important in it that would suit being in the AutoPreview. This area is usually reserved for links to the online version and instructional text. The way around this is to put the content you want at the top of your Email Newsletter and then hide it from displaying. The AutoPreview pane will still show it, so now you can have something like “In this summer issue of our fantastic newsletter we talk about Outlook and it’s AutoPreview…” Here’s how you can do it with some simple CSS.
<div style="display:none;">In this summer issue of our fantastic newsletter we talk about Outlook and it's Auto Preview..."</div>
Below this you can add your view online and sign up for this newsletter links, but the hidden content must appear first. One word of caution, at the time of this writing the hidden text actually appears unhidden in Gmail’s actual email. This is not necessarily a deal breaker if Outlook is a your target audience, and the overall email will still look fine in Gmail.
Here is what the AutoPreview pane will look like.
As you can see the other content below will still show up if there is room, but hopefully you can grab the users attention with the first line. Remember that the email title is still the most important element when trying to engage a reader because that is what most of the readers will see. The AutoPreview is often used just to avoid having content appear that you may not want to show up before the user has viewed the full email.
One other caveat is that this hidden text could possibly look spamy to some mail clients, but I have yet to see a line of hidden text trigger a spam filter and I have tested many email clients using this technique.
David Wang March 8, 2011 at 12:06 am
Great tip! My immediate reaction was, why didn’t I think of that! Thanks also for taking the extra step and testing to see if this technique triggers the spam filters.
The only drawback to this is that I’ll have to code my newsletters manually. I don’t think I can do the hidden text in my Mailchimp or Campaign Monitor templates. Any ideas?
Ian Hoar March 8, 2011 at 1:36 am
I haven’t used Campaign Monitor, but in Mailchimp you should just be able to add it to your template. I’ve only used my own custom HTML templates with it though.
Anne Beatty October 25, 2011 at 9:21 pm
I seem to be having issues with image source code or html links showing up in the preview… I have no preheader and or teaser to show here but it keeps picking up links or image source code. Any suggestions
Ian Hoar October 25, 2011 at 10:08 pm
Hi Anne,
You can’t put links or images in the hidden div. Only plain text.
Sebastian Olsson April 18, 2012 at 4:55 am
Hi and thanks for the tip,
Just one question: How will the practice of inserting hidden elements affect the spam-score of the email? I’m trying to find an answer to that but it doesn’t seem to be much written about it.
Ian Hoar April 18, 2012 at 9:19 am
Hi Sebastian,
I’m not a spam expert, but I think today a lot more weight is put on the sender than what’s in the actual email. That said, in some email clients like Gmail they will remove the hidden style and you will get your message in plain text at the top of your email.