davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Plain Text vs. HTML Emails: Which Is Better? (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://blog.hubspot.com/marketing/plain-text-vs-html-emails-data">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Plain Text vs. HTML Emails: Which Is Better? (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://blog.hubspot.com/marketing/plain-text-vs-html-emails-data">Source originale du contenu</a></h3>
    <p><span id="hs_cos_wrapper_post_body" class="hs_cos_wrapper hs_cos_wrapper_meta_field hs_cos_wrapper_type_rich_text" data-hs-cos-general-type="meta_field" data-hs-cos-type="rich_text"><p><span>In the world of <a href="https://www.hubspot.com/products/marketing/email" rel=" noopener" target="_blank">email marketing</a>, opens and clicks are everything, which means email marketers are always testing ways to improve these metrics. We'll tweak subject lines, calls-to-action, images, headers, layout, link positioning, copy, length, tone, content ... the list goes on and on.</span></p></p>
<p>Through all of this testing, there's one hard truth we've discovered: Aside from <a href="//blog.hubspot.com/marketing/what-is-list-segmentation-faqs-ht">proper list segmentation</a>, <strong>nothing boosts opens and clicks as well as an old school, plain-text email.</strong></p>

<p>While the plain-text emails we created had some formatting capabilities (hyperlinks, tracking pixels, etc.), they were as close to plain-text as we could while maintaining the ability to track opens and clicks for testing purposes. <strong><br/></strong></p>

<p>With that said, here's how we came to that conclusion.</p>

<h2>Beyond Deliverability</h2>

<p>The (relatively) old debate of plain-text vs. HTML is mostly centered around email deliverability. We won't be covering all of the <a href="//blog.hubspot.com/marketing/improve-email-deliverability-video" target="_blank">deliverability best practices</a> in this article, but it is important to have some context around that metric.</p>

<p>Having an HTML email does not hurt your deliverability as long as you have two things: a properly coded HTML email and a plain-text version.</p>

<h3>1) The HTML email needs to be properly coded. </h3>

<p><span>If there are broken tags in your HTML, the email provider and users can mark it as spam. That'll hurt deliverability -- not just for that email, but also for any emails coming from that particular email address in the future.</span></p>

<h3>2) The email should also contain a plain-text version. </h3>

<p>Most email marketing tools will let you <a href="//help.hubspot.com/articles/KCS_Article/Email/How-do-I-generate-a-plain-text-email">easily create plain-text versions</a> within their email editor, so take those five extra minutes to create and <a href="//blog.hubspot.com/marketing/make-emails-more-clickable-list">optimize the plain-text</a> version of your email. Otherwise, email providers such as Gmail or Outlook might think your email is dodgy -- they expect legitimate companies to follow this basic best practice.</p>

<p><span>If your emails follow the deliverability guidelines above, your HTML and plain-text should have the same deliverability metrics. </span></p>

<p>So if you're following the best practices above, which type of email actually performs better once it's in someone's inbox? </p>

<h2>People <em>Say</em> They Prefer HTML Emails</h2>

<p>In a <a href="//offers.hubspot.com/science-of-email-marketing-2014-report">2014 survey</a>, we asked over a thousand professionals whether they preferred HTML-based or text-based emails, and whether they preferred emails that consisted of mostly text or mostly images. Nearly 2/3 of the respondents said they preferred HTML and image-based emails.</p>

<p><img class="alignCenter shadow" src="https://blog.hubspot.com/hubfs/Screen_Shot_2015-07-24_at_9.14.53_PM.png"/></p>

<p><img class="alignCenter shadow" src="https://blog.hubspot.com/hubfs/Screen_Shot_2015-07-24_at_9.15.42_PM.png"/></p>

<p>Great, we thought. If people wanted visuals, we'd give them visuals!</p>

<p>So we decided to experiment with varying degrees of HTML-richness -- plain HTML templates, snazzy and sleek HTML templates, beautiful headers, different sized and positioned images, various call-to-action buttons, and even GIFs -- to see which would have the best result.</p>

<h2>... But They <em>Actually</em> Prefer Plain-Text</h2>

<p><span>In every single A/B test, the simpler-designed email won. The emails with fewer HTML elements won with <a href="//www.hubspot.com/ab-test-calculator" target="_blank">statistical significance</a><span>. </span></span></p>

<p><span><span>Ouch.</span></span></p>

<p>Every other marketing channel is <a href="//blog.hubspot.com/marketing/visual-content-marketing-strategy" target="_blank">moving towards incorporating visuals</a> and seemingly getting positive results. Why were emails performing <em>worse </em>when we attempted to make them more visual appealing?</p>

<h3>HTML emails reduce open rates.</h3>

<p>One thing that we noticed was that our HTML and plain-text emails were both receiving the same deliverability rate. So if they were getting delivered at the same rate, how were HTML emails underperforming? </p>

<p>To understand the full scope of what happened, we decided to A/B test our email sends. We tested various segments of our database in multiple regions to get a better picture of HTML vs. plain-text emails.</p>

<p>The results confirmed what we assumed: <strong>HTML emails decreased open rates.</strong> What was interesting, however, was that not only were HTML emails receiving lower open rates than their plain-text counterparts, the <em>more HTML-rich</em> an email was, the lower its open rate.</p>

<p>Here are some of the A/B test results we found:</p>

<p><img class="alignCenter shadow" src="https://blog.hubspot.com/hs-fs/hubfs/1-86947261.png?width=640&amp;height=480&amp;name=1-86947261.png" data-constrained="true" srcset="https://blog.hubspot.com/hs-fs/hubfs/1-86947261.png?width=320&amp;height=240&amp;name=1-86947261.png 320w, https://blog.hubspot.com/hs-fs/hubfs/1-86947261.png?width=640&amp;height=480&amp;name=1-86947261.png 640w, https://blog.hubspot.com/hs-fs/hubfs/1-86947261.png?width=960&amp;height=720&amp;name=1-86947261.png 960w, https://blog.hubspot.com/hs-fs/hubfs/1-86947261.png?width=1280&amp;height=960&amp;name=1-86947261.png 1280w, https://blog.hubspot.com/hs-fs/hubfs/1-86947261.png?width=1600&amp;height=1200&amp;name=1-86947261.png 1600w, https://blog.hubspot.com/hs-fs/hubfs/1-86947261.png?width=1920&amp;height=1440&amp;name=1-86947261.png 1920w" sizes="(max-width: 640px) 100vw, 640px"/></p>

<p><img class="alignCenter shadow" src="https://blog.hubspot.com/hubfs/2-528.png"/></p>

<p><img class="alignCenter shadow" src="https://blog.hubspot.com/hubfs/3-126.png"/></p>

<p>While these (and at least 10 more) tests vary in the percentage opens were lowered, the conclusion we came to was that simpler HTML emails had better open rates than HTML-rich emails, and that plain-text emails performed best of all.</p>

<p><span class="content-post__body">Why? </span></p>

<p>We figured it had to do with the concept of deliverability.<strong> Just because something says it's been delivered doesn't mean it's actually in a noticeable place of someone's inbox.</strong></p>

<p id="last">Email services are increasingly filtering emails (especially commercial ones) to provide a better experience for the user. <span>An example of this is <a href="//blog.hubspot.com/marketing/new-gmail-inbox-layout-email-nj" target="_blank">Gmail's promotions tab</a>.<span> It<span> automatically filters what it deems "commercial" emails<span> out of the main inbox unless the user changes the settings.</span></span></span></span></p>

<p>So the simple explanation is that image tags and HTML-rich templates seem to be getting flagged by email providers as commercial email, which means they get filtered out of a recipient's main inbox. (And thus, people can't open it.)</p>

<h3>HTML emails reduce clickthrough rates.</h3>

<p><span class="content-post__body"><span>But open rates are just one part of the picture. Even if open rates decreased with HTML emails, most marketers assumed HTML emails would convert better because they appear well designed.</span></span></p>

<p><span>For example, shouldn't an email with an image of the ebook being promoted do better than an email with no visualization of the offer? Wouldn't just a plain email be boring, and not help explain the offer? Aren't humans <a href="http://www.nytimes.com/2013/02/17/opinion/sunday/why-we-love-beautiful-things.html?_r=0" target="_blank">wired</a> to be attracted to beautiful design?</span></p>

<p><span>Unfortunately, this principle doesn't apply to email. </span></p>

<p><span>And the reason is simple: <strong>Email, unlike other marketing channels, is perceived as a 1-to-1 interaction.</strong> </span></p>

<p><span>Think about how you email colleagues and friends: Do you usually add images or use well-designed templates? </span>Probably not, and neither does your audience. They're used to using email to communicate in a personal way, so emails from companies that look more personal will resonate more.</p>

<p>To better understand the impact of plain-text vs. HTML emails, we looked at the effect on the click rate (clicks/delivered) which is influenced by open rates, and clickthrough rates (clicks/opens) which isolate clicks from the variable of opens.</p>

<p>For the click rate, <a href="//offers.hubspot.com/science-of-email-marketing-2014-report" target="_blank">we dove into data</a> from over half a billion marketing emails sent from HubSpot customers. These customers vary in type of business, and have different segments, list sizes, and list compositions.</p>

<p>What we found was that even a single image reduced the click rate:</p>

<p><img class="alignCenter shadow" src="https://blog.hubspot.com/hs-fs/hubfs/NITI_plain_text_vs_html_blog_post_1.png?width=667&amp;height=505&amp;name=NITI_plain_text_vs_html_blog_post_1.png" alt="Effect of number of images in marketing email on CR" data-constrained="true" srcset="https://blog.hubspot.com/hs-fs/hubfs/NITI_plain_text_vs_html_blog_post_1.png?width=334&amp;height=253&amp;name=NITI_plain_text_vs_html_blog_post_1.png 334w, https://blog.hubspot.com/hs-fs/hubfs/NITI_plain_text_vs_html_blog_post_1.png?width=667&amp;height=505&amp;name=NITI_plain_text_vs_html_blog_post_1.png 667w, https://blog.hubspot.com/hs-fs/hubfs/NITI_plain_text_vs_html_blog_post_1.png?width=1001&amp;height=758&amp;name=NITI_plain_text_vs_html_blog_post_1.png 1001w, https://blog.hubspot.com/hs-fs/hubfs/NITI_plain_text_vs_html_blog_post_1.png?width=1334&amp;height=1010&amp;name=NITI_plain_text_vs_html_blog_post_1.png 1334w, https://blog.hubspot.com/hs-fs/hubfs/NITI_plain_text_vs_html_blog_post_1.png?width=1668&amp;height=1263&amp;name=NITI_plain_text_vs_html_blog_post_1.png 1668w, https://blog.hubspot.com/hs-fs/hubfs/NITI_plain_text_vs_html_blog_post_1.png?width=2001&amp;height=1515&amp;name=NITI_plain_text_vs_html_blog_post_1.png 2001w" sizes="(max-width: 667px) 100vw, 667px"/></p>

<p>This data above is of course correlated to open rates -- but what other factors might be contributing to the decline in click rates? In the data above, it's clear that after the HTML threshold is crossed, click rates continue to decrease, which means it's not just the open rate<em> </em>affecting the click rates</p>

<p>To see if the clickthrough rate (clicks/opened) were affected, we looked to our A/B tests once again. For the emails in the section above as well as in the others we have tested, the plainer variation won with statistical significance.</p>

<ul>
<li>For the plain-text vs. .GIF image test, the .GIF version had a 2.3% lower clickthrough rate. This, combined with the lower open rate, meant the plain-text version got 42% more clicks. </li>
<li>For the plain-text vs. HTML template with images test, the HTML email version had a 21% lower clickthrough rate, and combined with the open rate the email had 51% fewer clicks.</li>
<li>For the simple HTML template vs. HTML-heavy template, the simpler email had a 5.3% higher clickthrough rate, and combined with the higher open rate, resulted in getting 30% more clicks.</li>
</ul>

<p>It would seem that better design or even images did not improve the clickthrough rate -- <strong>in fact, HTML consistently had a lower clickthrough rate</strong>. When combined with the lower open rates, this can turn into a double-whammy for email conversions.</p>

<h2>What This Means for Email Marketers</h2>

<p>Although people say they prefer HTML-based and image-based emails, in reality, simpler emails perform best -- and plain-text emails perform best of all.</p>

<p>In most instances, lower opens and clicks are due to several factors:</p>

<ul>
<li><strong>Filters set up by email providers</strong> that divert commercial emails from users' main inboxes.</li>
<li><strong>Email client limitations.</strong> For example, Gmail will not automatically show images from unknown senders.</li>
<li><strong>User preference for digestible formatting.</strong> Plain text might be perceived as less of a time commitment to read, or perhaps people really don't care for design in email.</li>
</ul>

<h4>Ultimately, in email, less is more.</h4>

<p>This can be a tough pill for marketers to swallow (myself included) because we're naturally driven to be creative. But data repeatedly shows plain-text email wins, so it's up to us to decide whether or not we want to make the switch. </p>

<p><span>Like with all cases, there may be exceptions. For example, ecommerce companies may have completely different results because users expect <em>only </em><span>HTML-rich emails with visuals of products. So before you make any final decisions, it's important to test your own emails.</span></span></p>

<p>It's not all bad though. Being limited to plain-text forces marketers to get creative with the basics -- subject line, copy, positioning, link placement -- to achieve the desired result. Sometimes "old-school," well-written copy is all you need to get the job done.</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://blog.hubspot.com/marketing/plain-text-vs-html-emails-data">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
      Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
    </p>
    <p>
      Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>