About Kim Connell

This author has not yet filled in any details.
So far Kim Connell has created 6 blog entries.

The Ghost

“It’s fine, I just wish they’d follow the process, ” I sighed. “I was able to get the email out before lunch, so it’s off my plate now.“

The wind blew, causing a swirl of crunchy leaves to dance across the path. I took a deep breath of the crisp autumn air, and exhaled slowly. Dark clouds were approaching, but the sun was still visible overhead and I could feel its warmth pour over me as if it was trying to comfort me.

“Have you told them they aren’t following the process? Maybe they just don’t know,” Nancy inquired, trying to give our co-workers the benefit of the doubt.

“Of course! I sent them over the documentation, and explained everything before. I know they felt really bad about this last minute request. I was able to move some things around, so it’s not a big deal. I was a little stressed over it, but it always helps to get outside and walk during lunch,” I said as I pulled out my phone to check the time and see how many steps I took during my lunch break.

Before I was able to check my steps, I noticed the bright red notification badge on the Slack icon increase from 5 to 6 messages. Now 7. My anxiety incrementally increased in tandem with the the number of notifications. I opened Slack.

Randy: Hey.
Randy: I think there might be a problem.
Randy: With that email we sent earlier.
Randy: Can you take a look?
Randy: Where are you?
Randy: I’m at your desk.
Randy: I guess you’re at lunch…

I took another deep breath and held onto it for a few moments before slowly releasing it.

“Another reason why rushed emails are a bad idea, ” I mumbled while opening the Gmail app to check my tests for what could have possibly gone wrong.

Me: Yeah, I’m outside walking. What’s wrong? I’m looking at the tests I sent to myself and I’m not noticing anything obvious?
Randy: It’s the button. We got a few replies saying it’s linking to example.com, but it’s working fine for me. Idk.

I click the button in my Gmail test, and it redirects exactly as I expected.

Me: Yeah, I’m not noticing an issue. I’m on my way in. I’ll check it as soon as I get back to my desk.

“What’s wrong?” Nancy asked.

“I don’t know. Something with the button, but it seems fine to me. Probably nothing, but I’m going to go check it out.”

I rushed back to my desk. My department was still deserted, the lights switched off. The only signs of life being the distant laughs and chatter pluming up the stairs from the cafe downstairs while everyone finished up their lunch breaks.

The glow of my screen illuminated my face like a specter while I cracked open my editor to investigate. My mouth dropped open in horror as I gasped, “it’s a… a…“

Suddenly the lights switched on, “it’s a what!?” I jumped as my manager cut through the silence like a knife.

“It’s a ghost… ” I said quietly as I winced while eyes adjusted to the sudden change in lighting.

“What are you even talking about?” My manager laughed as the rest of my team filtered back to their desks.

“The button. In the email we sent earlier. There’s some markup that helps our buttons to look the same in Outlook as it does in other email clients. But it’s hidden everywhere else. Like a… ghost… We forgot to update the link. So people using Outlook are being linked to example.com.” I explained frantically.

And from that day forward I was never the same. I learned that emails in Outlook don’t need to look exactly the same as every other email client, as long as they are functional and get the message across.

How to Upload Images to Pardot Emails Without the WYSIWG Editor: A Step-by-Step Guide

As we’ve discussed in previous posts, we frequently recommend using a more limited image editing experience in Pardot email templates.

Why?  In short, because it prevents things from breaking inadvertently and it lets you move faster and with more confidence when you’re ready to get an email out the door.

If your template has been designed to use the simple image editor, you’ll see something like this when you click into the image in the email builder:

Note that you can’t directly add an image from this screen — but you can select an image from your Pardot files using the picklist at the top.

With this editor, you’ll need to add your images as a file in Pardot first, then bring it over to the email template. This may feel like it’s adding unnecessary clicks, but in this case it’s a good thing — you can add the images to folders, and it saves you time later when your images are readily accessible for you and other users. 

Step 1: Upload the File

Navigate into Marketing > Content > Files.

Click the blue “Upload Files” button, select your image, and you’re all set. Alternatively you can drag and drop an image directly onto the page.

Step 2: Place it in your template

Once the file has been uploaded, return to your email template and click the Refresh button below the dropdown field:

This will pull any new images into the list.  You can select by picking from this dropdown (which is in alphabetical order by file name).

Alternatively, you can copy the full URL from the Files page, and paste it into the field below the Refresh button. This is my preferred method, and my trick is to have one tab or window open with the Files page and another with the email I’m editing.

That’s it!  Pretty simple, right?

If you have questions about this or any other Pardot topic, please let us know in the comments!

By |2019-09-11T17:04:25+00:00September 11th, 2019|Categories: Email Design, Pardot, Tutorials|0 Comments

11 Tips for Building Stunning & Flexible Email Templates in Pardot

BY KIM CONNELL

If I hear someone complain that they don’t like the email and landing page editor in Pardot, my first thought is: “your implementation partner didn’t set your templates up well for your needs.”

Don’t get me wrong, there are absolutely things in the editor experience that could be improved.  But there are also a lot of things that can be built into the template to simplify the process for making updates, customizing, and minimizing the potential for error when the templates are being used.

Here are a few best practices to consider as you build out Pardot email templates:

1. Create flexible sections that can be moved around

There are some types of emails that you may want a purpose built template for — something with a standard format, that’s tried and true.  There may be other times where your content strategy is evolving and flexibility is key.  

That’s where Pardot’s custom HTML elements come in handy.  You can add attributes to the different sections of your emails to make them editable, repeatable, or removable.

When these are applied to a section in your template, you’ll see this when you click in the upper right hand corner:

Might need a green button? How about a hot pink one?  One column, two, three? Add them all and move/mix/match later! 

2. Lock down sections you don’t want changed

On the flipside, there may be sections of your email templates that you NEVER want changed, and may want to prevent marketing users from inadvertently deleting — things like a disclaimer in a footer, GDPR compliant subscription management verbiage, etc.  

By excluding the editable content element from your code, your users won’t be able to accidentally delete this using the WYSIWIG editor.

3. Use a simplified editing experience for images and things that are prone to breaking

In addition to the HTML elements that dictate how sections can be moved, removed, and edited, there are also Pardot HTML elements that create different types of editing experiences — full WYSIWG, text only, image only, and more.

The short answer: the more chance for changing up a particular section in a template, the more opportunities there are for it to inadvertently break on some browser or some device somewhere.  By introducing the ability to edit only what the user needs to be able to edit, we can protect the formatting of the overall template and minimize potential for error.  

4. Set up easy to edit, visually hidden preview text

Pardot’s default templates include pre-header text that looks like this:

This is a useful piece of real estate, because it shows up in the user’s inbox right after the subject line.  You can use this space to add content that will woo users to open your email and read further.

But it’s also…. Ugly.  There, I said it.  

It has become a common practice to hide preview text that is not visible in the email body to only serve as preview text.

Here’s a great example from Starbucks. Their preview text is “The cheery glow of 50 Bonus Stars”

image.png

Here’s the open email. As you can see, the preview text is not visible within the body of the email.  This is a better experience for users.

image.png

5. Make them mobile responsive 

It’s 2019.  If your templates don’t play nice on mobile, go home.

Okay well, don’t go home.  Just fix your templates though.  

We can help 🙂

6. Design with your users in mind

There are all kinds of edgy things email marketers are doing right now like embedding GIFs, animations, sound effects and more. 

But these new innovations only work in some browsers, devices, and mail clients — so before going too far down this road, take a look at what % of your users are using what.  Pardot generates a report on this for every sent email that breaks this down:

Outlook is notorious for taking the coolest things we can do with email, chewing them up, and spitting them out.  For many of our B2B customers though, it’s the mail client that continues to reign supreme, so we generally design with an eye for this user experience.

7. Don’t expect everything to look identical on every device

Your emails will likely look slightly different on various devices/email clients — and this is okay and expected behavior. 

There’s a number of reasons emails may render differently across different email devices and applications. In short, there’s a combination of things that happen when an email is sent, and depending on how it’s being viewed, the rendering will vary.

Support for HTML and CSS can vary across email clients, browsers, and devices, in addition to  the way the message is sent and received that will impact rendering.

A few examples of differences you might notice across different instances may include:

  • Slight variations in how spacing renders around different elements
  • Rounded corners displaying as square corners 
  • Fallback fonts displaying instead of your brand fonts
  • GIFs and interactive elements falling back to static images or elements

In general, we recommend using simple, streamlined designs to minimize variability and setting fallback behavior if a user is unable to access particular content (like backup fonts, or a clean first image in GIFs if a user can’t load it in their email client, etc.).  

As long as you’re following basic best practices your prospects should get your message loud and clear.  If you find that something looks slightly different in one type of viewing experience, ask yourself:

“Is the message here still coming through?” 

If the answer is no, back to the drawing board. If yes, move on to designing your next winning campaign.

8. Use “Add This” for email forwarding

It’s a pretty common thing for users to forward emails.  Unfortunately, it’s virtually impossible to control everything that takes place when a mail client digests your email code, formats it, and then forwards to another mail client that digests it and formats it for its readers.  

I’m picturing a cow chewing grass and digesting in multiple stomachs — gross, but not dissimilar to what’s happening to your emails when they get forwarded.

The folks at Litmus summarized this well:

There is a consensus in the email development world that very little can be done to completely avoid changes to your design when subscribers hit the forward button. Whether or not an email client alters your code simply isn’t something you can control.

TL;DRL Forwarding emails is death to formatted email designs. 

Fortunately though, Pardot gives us another option — the AddThis plug in.  You’ll see this in the email builder as a little orange plus icon:

When you click this, it adds buttons to your templates that allow your email recipients to forward a clean copy of your email with no code modifications via email or social media.

9. Remember that everyone’s needs are different

There’s not necessarily a “wrong” way to create templates… but what’s right for your team depends on how you plan to use your templates.  Things to consider include:

  • How technical is the team that is going to be using the template?
  • Does the team have access to email rendering preview in Pardot (a Plus and above feature), Litmus, or Email on Acid?
  • How quickly does the team turn around email sends?  Is it realistic for them to run tests on every email?
  • How consistent is the look and feel of emails?  Is a standard format feasible, or is each a custom design?
  • What devices and browsers do their audience most commonly use?

Depending on the answers to these questions, you may want to design the templates differently.

10. Always make a copy

If you have a master template to use across many emails and/or landing pages, be sure to clone it every time so you don’t modify the master for future use. 

Seriously, clone it.

Every.

Time.

Even if you’re just tweaking “one leeeettle thing.”  This will help guard against those inevitable “whoops did really I just delete that” moments. 

And consider saving a notepad file with the raw HTML somewhere else as a backup.

11. Always test!

If you’re on Plus or Advanced edition, take advantage of Pardot’s email rendering tests through Litmus to make sure your emails are rendering across email clients and devices and passing through spam filters.  

It takes a little extra time, but it’s really worth doing for every email. 

If you don’t have access to this, talk to your Account Executive about adding it, or consider purchasing an Email on Acid or Litmus subscription to use for internal testing.

What are your template best practices?

What are some creative ways you’ve customized templates to fit your team’s needs?   Any design pros/cons or tradeoffs you had to make along the way? 

Let us know in the comments! 

By |2019-09-11T14:40:25+00:00September 11th, 2019|Categories: Uncategorized|Comments Off on 11 Tips for Building Stunning & Flexible Email Templates in Pardot

11 Tips for Building Stunning & Flexible Email Templates in Pardot

BY KIM CONNELL

If I hear someone complain that they don’t like the email and landing page editor in Pardot, my first thought is: “your implementation partner didn’t set your templates up well for your needs.”

Don’t get me wrong, there are absolutely things in the editor experience that could be improved.  But there are also a lot of things that can be built into the template to simplify the process for making updates, customizing, and minimizing the potential for error when the templates are being used.

Here are a few best practices to consider as you build out Pardot email templates:

1. Create flexible sections that can be moved around

There are some types of emails that you may want a purpose built template for — something with a standard format, that’s tried and true.  There may be other times where your content strategy is evolving and flexibility is key.  

That’s where Pardot’s custom HTML elements come in handy.  You can add attributes to the different sections of your emails to make them editable, repeatable, or removable.

When these are applied to a section in your template, you’ll see this when you click in the upper right hand corner:

Might need a green button? How about a hot pink one?  One column, two, three? Add them all and move/mix/match later! 

2. Lock down sections you don’t want changed

On the flipside, there may be sections of your email templates that you NEVER want changed, and may want to prevent marketing users from inadvertently deleting — things like a disclaimer in a footer, GDPR compliant subscription management verbiage, etc.  

By excluding the editable content element from your code, your users won’t be able to accidentally delete this using the WYSIWIG editor.

3. Use a simplified editing experience for images and things that are prone to breaking

In addition to the HTML elements that dictate how sections can be moved, removed, and edited, there are also Pardot HTML elements that create different types of editing experiences — full WYSIWG, text only, image only, and more.

The short answer: the more chance for changing up a particular section in a template, the more opportunities there are for it to inadvertently break on some browser or some device somewhere.  By introducing the ability to edit only what the user needs to be able to edit, we can protect the formatting of the overall template and minimize potential for error.  

4. Set up easy to edit, visually hidden preview text

Pardot’s default templates include pre-header text that looks like this:

This is a useful piece of real estate, because it shows up in the user’s inbox right after the subject line.  You can use this space to add content that will woo users to open your email and read further.

But it’s also…. Ugly.  There, I said it.  

It has become a common practice to hide preview text that is not visible in the email body to only serve as preview text.

Here’s a great example from Starbucks. Their preview text is “The cheery glow of 50 Bonus Stars”

image.png

Here’s the open email. As you can see, the preview text is not visible within the body of the email.  This is a better experience for users.

image.png

5. Make them mobile responsive 

It’s 2019.  If your templates don’t play nice on mobile, go home.

Okay well, don’t go home.  Just fix your templates though.  

We can help 🙂

6. Design with your users in mind

There are all kinds of edgy things email marketers are doing right now like embedding GIFs, animations, sound effects and more. 

But these new innovations only work in some browsers, devices, and mail clients — so before going too far down this road, take a look at what % of your users are using what.  Pardot generates a report on this for every sent email that breaks this down:

Outlook is notorious for taking the coolest things we can do with email, chewing them up, and spitting them out.  For many of our B2B customers though, it’s the mail client that continues to reign supreme, so we generally design with an eye for this user experience.

7. Don’t expect everything to look identical on every device

Your emails will likely look slightly different on various devices/email clients — and this is okay and expected behavior. 

There’s a number of reasons emails may render differently across different email devices and applications. In short, there’s a combination of things that happen when an email is sent, and depending on how it’s being viewed, the rendering will vary.

Support for HTML and CSS can vary across email clients, browsers, and devices, in addition to  the way the message is sent and received that will impact rendering.

A few examples of differences you might notice across different instances may include:

  • Slight variations in how spacing renders around different elements
  • Rounded corners displaying as square corners 
  • Fallback fonts displaying instead of your brand fonts
  • GIFs and interactive elements falling back to static images or elements

In general, we recommend using simple, streamlined designs to minimize variability and setting fallback behavior if a user is unable to access particular content (like backup fonts, or a clean first image in GIFs if a user can’t load it in their email client, etc.).  

As long as you’re following basic best practices your prospects should get your message loud and clear.  If you find that something looks slightly different in one type of viewing experience, ask yourself:

“Is the message here still coming through?” 

If the answer is no, back to the drawing board. If yes, move on to designing your next winning campaign.

8. Use “Add This” for email forwarding

It’s a pretty common thing for users to forward emails.  Unfortunately, it’s virtually impossible to control everything that takes place when a mail client digests your email code, formats it, and then forwards to another mail client that digests it and formats it for its readers.  

I’m picturing a cow chewing grass and digesting in multiple stomachs — gross, but not dissimilar to what’s happening to your emails when they get forwarded.

The folks at Litmus summarized this well:

There is a consensus in the email development world that very little can be done to completely avoid changes to your design when subscribers hit the forward button. Whether or not an email client alters your code simply isn’t something you can control.

TL;DRL Forwarding emails is death to formatted email designs. 

Fortunately though, Pardot gives us another option — the AddThis plug in.  You’ll see this in the email builder as a little orange plus icon:

When you click this, it adds buttons to your templates that allow your email recipients to forward a clean copy of your email with no code modifications via email or social media.

9. Remember that everyone’s needs are different

There’s not necessarily a “wrong” way to create templates… but what’s right for your team depends on how you plan to use your templates.  Things to consider include:

  • How technical is the team that is going to be using the template?
  • Does the team have access to email rendering preview in Pardot (a Plus and above feature), Litmus, or Email on Acid?
  • How quickly does the team turn around email sends?  Is it realistic for them to run tests on every email?
  • How consistent is the look and feel of emails?  Is a standard format feasible, or is each a custom design?
  • What devices and browsers do their audience most commonly use?

Depending on the answers to these questions, you may want to design the templates differently.

10. Always make a copy

If you have a master template to use across many emails and/or landing pages, be sure to clone it every time so you don’t modify the master for future use. 

Seriously, clone it.

Every.

Time.

Even if you’re just tweaking “one leeeettle thing.”  This will help guard against those inevitable “whoops did really I just delete that” moments. 

And consider saving a notepad file with the raw HTML somewhere else as a backup.

11. Always test!

If you’re on Plus or Advanced edition, take advantage of Pardot’s email rendering tests through Litmus to make sure your emails are rendering across email clients and devices and passing through spam filters.  

It takes a little extra time, but it’s really worth doing for every email. 

If you don’t have access to this, talk to your Account Executive about adding it, or consider purchasing an Email on Acid or Litmus subscription to use for internal testing.

What are your template best practices?

What are some creative ways you’ve customized templates to fit your team’s needs?   Any design pros/cons or tradeoffs you had to make along the way? 

Let us know in the comments! 

By |2019-09-11T14:40:25+00:00September 11th, 2019|Categories: Uncategorized|Comments Off on 11 Tips for Building Stunning & Flexible Email Templates in Pardot

Using Preview & Preheader Text in Pardot to Encourage Opens: Questions & Answers

BY KIM CONNELL

It’s an increasingly competitive environment to try to catch anyone’s attention — your prospects, your customers, even that dude on Tinder (okay, kidding on that last one).  But seriously — our span of attention just keeps getting smaller, and our inboxes keep getting fuller.  

So how’s an email marketer to stand out in this environment? 

and we have a few levers to play with:

  1. The subject line
  2. The sender
  3. The preview text

Let’s dig into #3 and our options to stand out. 

But wait, what is preview text? 

Preview text is the text that is displayed along with the subject line, sender, and date in the main view of your email inbox.

Preview text is not displayed by all email clients, but most of the major email clients will typically display the first 35-140 characters of your email.

Show me an example…

It has become a common practice to hide preview text that is not visible in the email body to only serve as preview text.

Here’s a great example from Starbucks. Their preview text is “The cheery glow of 50 Bonus Stars.”

Here’s the open email. As you can see, the preview text is not visible within the body of the email.

Can I use preview text in Pardot templates? 

Yes!  Preheader text is visible text that appears at the top of an open email.  This gets pulled in as preview text in email clients that support it. 

The default Pardot templates include this:

But it’s…. how do you say…. kind of ugly. 

Sorry.

It is.  

How can I style my email to make this look great for users?

You can use HTML and CSS to make your preheader text look a bit more subtle and fit your overall design aesthetic.

Here’s an example from ComiXology. Their preview text is “Last Day to save up to 75%…

In this case, the text is actually visible in the body of the email as small text directly at the top of the design:

Preheader text is easy to implement if you have a design that allows for it because it is visible and easy to edit in your email templates.

What if I want to totally hide my preview text?

If you don’t want to use a visible preheader, but you still want to populate the preview text, you can also hide this in the HTML of your email. 

The following code can be added directly below the opening <body> in the HTML of your email:

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

A word of caution: It can be easy to forget to update since it is not visible in the email layout, so it’s a great idea to add it to a pre-send checklist or QA process if you have one. As an additional precautionary measure, you may want to remove the “Add your own preview text here” text entirely, or replace it with a generic default that would work for any email you send.

Any other tips or hacks for preview text?

Glad you asked. Yes.

Pushing body content OUT of the preview text

As I mentioned earlier, most of the major email clients will typically display the first 35-140 characters of your email. That’s a pretty big range, though.

Email clients will start by grabbing the preheader text, and then if there’s still “room,” will grab from the next text it finds in your email. This can yield some unexpected results.

You might want to include the Preview Text Hack, which is a hidden string of non-breaking spaces and zero-width non-joiners inside of a hidden div directly below your preview text div.

Because the preview text character limit varies vastly between different email clients, it’s a good idea to test your preview text, and add more non-breaking spaces and zero-width non-joiners if needed.

Why would you want to do this? It looks cleaner, and can actually make your email stand out. Take this Uniqlo email, for example:

Even in this small image, the Uniqlo email stands out because it’s the only one that isn’t being drown by words in the preview text pane.

You also avoid the “view in browser” dilemma. If you think of preview text like a second subject line, you don’t want to forfeit this valuable real estate for text like “view in browser”:

Making Preview Text Invisible – the Easy Way

Another great hack is to make preheader text “invisible” by setting the text color to match the background color behind it. This way you can make it visible to edit the text, then make it invisible prior to testing and sending!

Making Hidden Preview Text Editable in the Pardot Editor

If you want your users to be able to edit hidden preview text without going into the full HTML, here’s a little trick:

<div pardot-region="hidden-preview-text" pardot-region-type="simple" style="padding: 5px; ">
    <div style="display: none; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;">
    </div>
</div>

Breakdown:

  • Use a wrapper div that includes pardot-region and pardot-region-type="simple"
  • Add a little bit of padding to the wrapper, otherwise the person editing the template will not be able to edit the region
  • Create a child div inside of the wrapper with all of the required styles to make the preview text hidden across all email clients: style="display: none; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;"
    • This code WILL appear in the simple editor and cannot be removed in order for this to work. If someone else will be editing the preview text, you’ll need to educate them on only editing the text inside of the div and how to access this region
    • The hidden preview text will need to be placed in between the child div tags. Here’s a full example:
      <div pardot-region="hidden-preview-text" pardot-region-type="simple" style="padding: 5px; ">
      <div style="display: none; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;">
      THIS IS THE HIDDEN PREVIEW TEXT :)
      </div>
      </div>
  • Add the “Pushing body content OUT of the preview text” div below this code snippet if you’d like to use that hack in addition to this

You should now see a small editable region appear at the top of the editor. It will be the height specified in the padding, so 5px high in this case. Clicking on this region will open the Simple Editor:

What other questions do you have about preview and preheader text?

Any creative solutions you’ve come up with for using preview and preheader text to entice opens? Any productivity hacks, lessons learned, or tips for success?

Let’s hear it in the comments!

By |2019-08-19T11:00:39+00:00August 19th, 2019|Categories: Design, Email Marketing|Comments Off on Using Preview & Preheader Text in Pardot to Encourage Opens: Questions & Answers

Using Preview & Preheader Text in Pardot to Encourage Opens: Questions & Answers

BY KIM CONNELL

It’s an increasingly competitive environment to try to catch anyone’s attention — your prospects, your customers, even that dude on Tinder (okay, kidding on that last one).  But seriously — our span of attention just keeps getting smaller, and our inboxes keep getting fuller.  

So how’s an email marketer to stand out in this environment? 

and we have a few levers to play with:

  1. The subject line
  2. The sender
  3. The preview text

Let’s dig into #3 and our options to stand out. 

But wait, what is preview text? 

Preview text is the text that is displayed along with the subject line, sender, and date in the main view of your email inbox.

Preview text is not displayed by all email clients, but most of the major email clients will typically display the first 35-140 characters of your email.

Show me an example…

It has become a common practice to hide preview text that is not visible in the email body to only serve as preview text.

Here’s a great example from Starbucks. Their preview text is “The cheery glow of 50 Bonus Stars.”

Here’s the open email. As you can see, the preview text is not visible within the body of the email.

Can I use preview text in Pardot templates? 

Yes!  Preheader text is visible text that appears at the top of an open email.  This gets pulled in as preview text in email clients that support it. 

The default Pardot templates include this:

But it’s…. how do you say…. kind of ugly. 

Sorry.

It is.  

How can I style my email to make this look great for users?

You can use HTML and CSS to make your preheader text look a bit more subtle and fit your overall design aesthetic.

Here’s an example from ComiXology. Their preview text is “Last Day to save up to 75%…

In this case, the text is actually visible in the body of the email as small text directly at the top of the design:

Preheader text is easy to implement if you have a design that allows for it because it is visible and easy to edit in your email templates.

What if I want to totally hide my preview text?

If you don’t want to use a visible preheader, but you still want to populate the preview text, you can also hide this in the HTML of your email. 

The following code can be added directly below the opening <body> in the HTML of your email:

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

A word of caution: It can be easy to forget to update since it is not visible in the email layout, so it’s a great idea to add it to a pre-send checklist or QA process if you have one. As an additional precautionary measure, you may want to remove the “Add your own preview text here” text entirely, or replace it with a generic default that would work for any email you send.

Any other tips or hacks for preview text?

Glad you asked. Yes.

Pushing body content OUT of the preview text

As I mentioned earlier, most of the major email clients will typically display the first 35-140 characters of your email. That’s a pretty big range, though.

Email clients will start by grabbing the preheader text, and then if there’s still “room,” will grab from the next text it finds in your email. This can yield some unexpected results.

You might want to include the Preview Text Hack, which is a hidden string of non-breaking spaces and zero-width non-joiners inside of a hidden div directly below your preview text div.

Because the preview text character limit varies vastly between different email clients, it’s a good idea to test your preview text, and add more non-breaking spaces and zero-width non-joiners if needed.

Why would you want to do this? It looks cleaner, and can actually make your email stand out. Take this Uniqlo email, for example:

Even in this small image, the Uniqlo email stands out because it’s the only one that isn’t being drown by words in the preview text pane.

You also avoid the “view in browser” dilemma. If you think of preview text like a second subject line, you don’t want to forfeit this valuable real estate for text like “view in browser”:

Making Preview Text Invisible – the Easy Way

Another great hack is to make preheader text “invisible” by setting the text color to match the background color behind it. This way you can make it visible to edit the text, then make it invisible prior to testing and sending!

Making Hidden Preview Text Editable in the Pardot Editor

If you want your users to be able to edit hidden preview text without going into the full HTML, here’s a little trick:

<div pardot-region="hidden-preview-text" pardot-region-type="simple" style="padding: 5px; ">
    <div style="display: none; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;">
    </div>
</div>

Breakdown:

  • Use a wrapper div that includes pardot-region and pardot-region-type="simple"
  • Add a little bit of padding to the wrapper, otherwise the person editing the template will not be able to edit the region
  • Create a child div inside of the wrapper with all of the required styles to make the preview text hidden across all email clients: style="display: none; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;"
    • This code WILL appear in the simple editor and cannot be removed in order for this to work. If someone else will be editing the preview text, you’ll need to educate them on only editing the text inside of the div and how to access this region
    • The hidden preview text will need to be placed in between the child div tags. Here’s a full example:
      <div pardot-region="hidden-preview-text" pardot-region-type="simple" style="padding: 5px; ">
      <div style="display: none; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;">
      THIS IS THE HIDDEN PREVIEW TEXT :)
      </div>
      </div>
  • Add the “Pushing body content OUT of the preview text” div below this code snippet if you’d like to use that hack in addition to this

You should now see a small editable region appear at the top of the editor. It will be the height specified in the padding, so 5px high in this case. Clicking on this region will open the Simple Editor:

What other questions do you have about preview and preheader text?

Any creative solutions you’ve come up with for using preview and preheader text to entice opens? Any productivity hacks, lessons learned, or tips for success?

Let’s hear it in the comments!

By |2019-08-19T11:00:39+00:00August 19th, 2019|Categories: Design, Email Marketing|Comments Off on Using Preview & Preheader Text in Pardot to Encourage Opens: Questions & Answers