Quick preheader alignment tip
Latest posts | Feed | | By Mark Brownlow
In a post on preheaders, we saw how centered text might "disappear" when recipients view them using a vertical preview pane. As with this Amazon example:
Then I found some emails where centered preheaders displayed fine in the vertical preview pane.
Eh? What devious coding trick is at play here?
Unfortunately, my HTML skills are firmly rooted in the 1990s. But a bit of investigation revealed at least one simple answer.
Here's a test email with a centered preheader in a horizontal preview pane:
Here's that test email showing the problem in a vertical preview pane. With only the left margin showing up in the preview, the preheader all but disappears:
Here's the same email, again with a centered preheader, but this time it shows up fine in the vertical pane:
In the first "problematical" version, the preheader text is center aligned inside the "table" tags used to control the layout of the email:
<body>
<div align="center">
<table border="1" width="550" cellspacing="6" cellpadding="0">
<tr>
<td>
<div align="center">This is the centered preheader text</font><br /><br /></div>
</td>
</tr>
In the second email, the preheader text precedes the table:
<body>
<div align="center">
This is the centered preheader text<br /><br />
<table border="1" width="550" cellspacing="6" cellpadding="0">
With no predefined table width to worry about, the preview for the second version simply centers the text in the available column space.
This seems an elegant solution to the problem, though I only tested it in Thunderbird and Windows Live Hotmail. And I suspect there are other design consequences of putting the preheader text outside the table layout.
Perhaps any coders and designers out there can step in and add their thoughts?
One danger I see is that a large preheader could then look a little messy. As in this example:
Still, more food for thought as we look to optimize every part of the email.
More on design and copywriting | Tags: email marketing, preheaders, snippet text
Then I found some emails where centered preheaders displayed fine in the vertical preview pane.
Eh? What devious coding trick is at play here?
Unfortunately, my HTML skills are firmly rooted in the 1990s. But a bit of investigation revealed at least one simple answer.
Here's a test email with a centered preheader in a horizontal preview pane:
Here's that test email showing the problem in a vertical preview pane. With only the left margin showing up in the preview, the preheader all but disappears:
Here's the same email, again with a centered preheader, but this time it shows up fine in the vertical pane:
In the first "problematical" version, the preheader text is center aligned inside the "table" tags used to control the layout of the email:
<body>
<div align="center">
<table border="1" width="550" cellspacing="6" cellpadding="0">
<tr>
<td>
<div align="center">This is the centered preheader text</font><br /><br /></div>
</td>
</tr>
In the second email, the preheader text precedes the table:
<body>
<div align="center">
This is the centered preheader text<br /><br />
<table border="1" width="550" cellspacing="6" cellpadding="0">
With no predefined table width to worry about, the preview for the second version simply centers the text in the available column space.
This seems an elegant solution to the problem, though I only tested it in Thunderbird and Windows Live Hotmail. And I suspect there are other design consequences of putting the preheader text outside the table layout.
Perhaps any coders and designers out there can step in and add their thoughts?
One danger I see is that a large preheader could then look a little messy. As in this example:
Still, more food for thought as we look to optimize every part of the email.
More on design and copywriting | Tags: email marketing, preheaders, snippet text
[This post brought to you by Campaigner Email Marketing]
Permalink | January 26, 2009 | 0 comment(s) - add yours!
Get posts like this: as an RSS feed | biweekly email | via Twitter
Permalink | January 26, 2009 | 0 comment(s) - add yours!
Get posts like this: as an RSS feed | biweekly email | via Twitter
Sign-up for the Email Marketing Reports NEWSLETTER
Twice a month, free, packed with email marketing advice and all the posts from this blog.
Twice a month, free, packed with email marketing advice and all the posts from this blog.
0 Comments:
