Adding a preheader to your email campaign increases your click-through rate.

Mobile Responsiveness has being buzzing around as a big issue for GOOD marketing campaigns and with today's css trickering, this problem can be solved, but it doens't solve the perception or first momentum you create with your email campaign.

A simple preheader technique proofs to be very usefull for augmenting your click-through rate.

A preheader is the short summary text that follows the subject line when an email is viewed in the inbox.

Many mobile, desktop and web email clients provide them to tip you off on what the email contains, before you open it.

Here’s an example in Gmail:

Here's an example in Outlook popup :


This line of text is the first text found in the HTML source of the email campaign. On mobile clients in particular, the preheader can mean the difference between someone opening your email and archiving it.

The first thing to ask is if you have to worry about a preheader at all. For instance, if your email already cuts to the chase and the first text that appears does a good job of summarizing what’s to follow, then you may not have to add one.

But for the rest of us, a little bit of text just after the <body> tag in your HTML email code usually suffices:

<body><span class="preheader">Put your preheader text here </span>... 

If you’re like many senders that add a nice visible summary, you can stop here and style it up all you like. But as we mentioned earlier, we prefer to hide it like shown in the code below.

This is the style tag in your head section to make your preheader not visible
<!-- Hiding the preheader -->
<style type="text/css">
span.preheader { displaynone !important}
You will need to add this css class into your span which will then hide your preheader, and only make it visible behind the subject line of your mail in the inbox. You will want to hide this preheader, since it gives extra information about your email title and should NOT be visible inside the mail when the mail is opened.
<body><span class="preheader">Put your preheader text here </span>... 
That's how it needs to be done. To have your preheader adaptable inside your creation, you need to add the needed addemar tags into your html code.

We have added the needed 'addemar' code here below.


<span class="preheader" style="font-size:0px; line-height:0px;color: <ADDEMARSTYLE type='color'
name='Body_Background_Color' value='#ffffff' page='General' />;display:none!important ">
<addemar type="textfield" name="pre-header">Put your preheader text here</addemar>