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.
<!-- Hiding the preheader --><style type="text/css">span.preheader { display: none !important; }</style> <body><span class="preheader">Put your preheader text here </span>... 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></span>