</noscript> <!-- End Google Tag Manager (noscript) --> <script type='text/javascript' id='contact-form-7-js-extra'> /* <![CDATA[ */ var wpcf7 = {"apiSettings":{"root":"https:\/\/chrislee.is\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"}}; /* ]]> */ </script> <script type='text/javascript' src='https://chrislee.is/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.1' id='contact-form-7-js'></script> <div> <div class="awsr-header DAMN-header" style="background-color:#FDFDFD;height:auto; padding:15px 0px;position:sticky;z-index:100;border-bottom:1px solid rgba(180,180,180,0.35)"> <div class="row"> <div class="col-3 col-sm-1 " style="text-align:right;font-family:Oswald;font-weight:300;text-transform:uppercase;line-height:1;color:gray;padding:0px"> <p style="font-size:38px!important;margin:0px!important">Chris</p> <p style="font-size:32px!important;margin:0px!important">Lee</p> </div> <div class="col-7 offset-0 col-sm-5" style="text-align:left!important"> <h1 style="margin-bottom: 0px!important; font-weight: 700!important; font-size: 20px!important; text-transform: none!important;color:#010C15;display:block;font-family:Oswald;text-transform:uppercase!important"> Digital marketing consultant </h1> <h1 style="margin-bottom: 0px!important; font-weight: 700!important; font-size: 20px!important; text-transform: none!important;color:grey;display:block;font-family:Oswald;text-transform:uppercase!important"> & </h1> <h1 style="margin-bottom: 0px!important; font-weight: 700!important; font-size: 20px!important; text-transform: none!important;color:#c40c0c;display:block;font-family:Oswald;text-transform:uppercase!important"> Writer </h1> </div> <div class="col-2 d-block d-md-none"> <script type="text/javascript"> function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } </script> <span style="color:#E2B67B; font-size:2rem;text-align:center;"><a href="#" style="color:#010c15!important; text-decoration:none!important; border-bottom:none!important" onclick="toggle_visibility('mobilenav');"><i class="fas fa-bars"></i></a></span></div> <div id="mobilenav" style="display:none; width:100%; text-align:center;position:" > <p> <A href="#testimonials" style="font-weight:normal!important;color:gray;border-bottom:none!important">Testimonials</A> </p> <p> <A href="#results" style="font-weight:normal!important;color:gray;border-bottom:none!important">Results</A> </p> <p> <A href="/blog" style="font-weight:normal!important;color:gray;border-bottom:none!important">Blog</A> </p> <p> <A href="/now" style="font-weight:normal!important;color:gray;border-bottom:none!important">Now</A> </p> <p> <A href="/writing-a-book" style="font-weight:normal!important;color:gray;border-bottom:none!important">My book</A> </p> <p> <A href="#contact" style="background-color:#c40c0c; color:white; padding: 5px 5px; font-weight:bold!important; border-bottom:none!important">Hire me</A> </p> </div> <div class="col-12 col-sm-6 offset-md-0 d-none d-md-block" style="text-align:right!important;padding-top:20px;"> <!--<a class="DAMN-a-i" href="/" style="color:gray" name="header-home"><i class="fas fa-home" style="font-size:large;"></i></a><span style="margin:0 5px; color:gray;">•</span>--> <!--<a href="/contact" style="text-transform:uppercase!important;text-decoration:underline!important;font-weight:normal!important; color:gray; border-bottom:none!important;font-family:Oswald!important">Contact </a> <span style="margin:0 5px; color:gray;">•</span>--> <a href="#testimonials" style="text-transform:uppercase!important;text-decoration:underline!important;font-weight:normal!important; color:gray; border-bottom:none!important;font-family:Oswald!important">Testimonials</a> <span style="margin:0 5px; color:gray;">•</span> <a href="#results" style="text-transform:uppercase!important;text-decoration:underline!important;font-weight:normal!important; color:gray; border-bottom:none!important;font-family:Oswald!important">Results</a> <span style="margin:0 5px; color:gray;">•</span> <a href="/blog" style="text-transform:uppercase!important;text-decoration:underline!important;font-weight:normal!important; color:gray; border-bottom:none!important;font-family:Oswald!important">Blog</a> <span style="margin:0 5px; color:gray;">•</span> <a href="/now" style="text-transform:uppercase!important;text-decoration:underline!important;font-weight:normal!important; color:gray; border-bottom:none!important;font-family:Oswald!important">Now</a> <span style="margin:0 5px; color:gray;">•</span> <a href="#contact" style="background-color:#010c15;text-transform:uppercase!important;text-decoration:none!important;font-weight:normal!important; color:white; border-bottom:none!important;font-family:Oswald!important;padding:5px 10px">Hire me</a> <a href="/writing-a-book" style="background-color:#C40C0C;text-transform:uppercase!important;text-decoration:none!important;font-weight:normal!important; color:white; border-bottom:none!important;font-family:Oswald!important;padding:5px 10px">My book</a> <!-- <span style="margin:0 5px; color:gray;">•</span> <a href="/cycling-across-canada" style="text-transform:uppercase!important;text-decoration:underline!important;font-weight:normal!important; color:gray; border-bottom:none!important;font-family:Oswald!important;">My book</a> <span style="color:gray;margin:0 5px; ">•</span> <a class="DAMN-a-i" href="https://medium.com/@chrislee.is/" style="color:gray" name="header-home"><i class="fab fa-medium" style="font-size:large;font-weight:100"></i> <a class="DAMN-a-i" href="https://www.linkedin.com/in/chrisleeis/" style="color:gray" name="header-home"><i class="fab fa-linkedin" style="margin:0 10px;font-size:large;font-weight:100"></i> <a class="DAMN-a-i" href="https://twitter.com/chrislee_is/" style="color:gray" name="header-home"><i class="fab fa-twitter" style="font-size:large;font-weight:100"></i></a> </p>--> <!--<span style="font-size:20px; margin-left:5px;"> | <span style="color:#29086a;">WRITER</span><a href="/a-writer" class="cl-nav-writer" style="color:#29086a!important;font-weight:500!important; display:inline-block;line-height:1">freelance writer</a> and <a href="/a-web-designer" class="cl-nav-writer" style="color:#52002e!important;font-weight:500!important; display:inline-block;line-height:1">web designer</a>--></span> </div> <!-- .col --> <!-- <div class="col-12 offset-0 col-md-3 " style="text-align:Right; font-size:small; color:#333"> <a href="/a-writer" style="font-weight:normal!important; color:#333; border-bottom:none!important">Words</a> | <a href="/about" style="font-weight:normal!important; color:#333; border-bottom:none!important">About</a> | <a href="/contact" style="font-weight:normal!important; color:#333; border-bottom:none!important">Contact</a> | <a class="DAMN-a-i" href="/" style="color:#333" name="header-home"><i class="fas fa-home" style="font-size:large;"></i></a></div>--> </div> <!-- .row --> </div> <!-- .awsr-header --> <div class="container-fluid row punch" style=" padding: 50px 0px; background-color:#FDFDFD;color:black;"> <!-- <div class="col-12 offset-0 offset-md-10 col-md-1" style="text-align:center;position:sticky;top:0px;background-color:#29086a;padding:5px 10px;border-radius:3px;color:white;z-index:10"> <a href="/contact" target="_blank" style="color:white!important;text-decoration:none!important;border-bottom:none!important">Hire me</a> </div>--> <div class="col-12 offset-0 col-md-8 offset-md-2 col-lg-6 offset-lg-3 "> <p class="signpost"><ul class="post-categories"> <li><a href="https://chrislee.is/thinking-about/categories/uncategorised/" rel="category tag">Uncategorised</a></li></ul></p> <h1 class="blog-title" style="margin-bottom:5vh;">What makes newsletters pop?</h1> <img style="width:100%;padding-top:25px;" src="https://chrislee.is/wp-content/uploads/2018/06/popping-newsletters.png "> <hr> <div class="row"> <div class="col-6" style="margin:0;padding:0"> <span class="signpost" >June 1, 2018</span> </div><div style="margin:0;padding:0;text-align:right" class="col-6"> <span class="signpost"><a style="border-bottom:none!important;" href="https://twitter.com/intent/tweet?text=Here%27s%20a%20great%20blog%20post%20https://chrislee.is/effective-newsletter-design/"><i class="fab fa-twitter"></i></a> <a style="border-bottom:none!important;" href="https://www.linkedin.com/sharing/share-offsite/?url=https://chrislee.is/effective-newsletter-design/"><i class="fab fa-linkedin"></i></a></span> </div></div> </div> <div class="col-10 offset-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3 damn-blog" > <p>I got a newsletter the other day that was a pleasure to read, even amongst severe GDPR newsletter fatigue. Check it out:</p> <p><img class="wp-image-1975 size-medium aligncenter" src="http://localhost/chris/wp-content/uploads/2018/06/Newsletter-44x300.jpg" alt="Good newsletter design" width="44" height="300" /></p> <p>Whew!</p> <p>The <strong>composition</strong>, the <strong>colours</strong> and the <strong>content</strong> were well balanced, to the point where I read the whole thing despite having no memory of signing up to the list.</p> <p>(The mystery was solved in the bottom section: I joined the list when I went to a gig <a href="http://www.theklabristol.co.uk/" target="_blank" rel="noopener">on a boat</a> in Bristol).</p> <p>Here’s a breakdown of <strong>the 4 things that made it pop</strong>.</p> <h3 id="blog">The colour palette</h3> <hr id="blog" /> <p><img loading="lazy" class="alignnone size-large wp-image-1976" src="http://localhost/chris/wp-content/uploads/2018/06/Palette-1024x30.png" alt="Pastel colour palette" width="1024" height="30" srcset="https://chrislee.is/wp-content/uploads/2018/06/Palette-1024x30.png 1024w, https://chrislee.is/wp-content/uploads/2018/06/Palette-80x2.png 80w, https://chrislee.is/wp-content/uploads/2018/06/Palette-300x9.png 300w, https://chrislee.is/wp-content/uploads/2018/06/Palette-768x23.png 768w, https://chrislee.is/wp-content/uploads/2018/06/Palette-720x21.png 720w, https://chrislee.is/wp-content/uploads/2018/06/Palette-360x11.png 360w" sizes="(max-width: 1024px) 100vw, 1024px" /></p> <p>Simple pastels. Five colours: a top and a bottom alternating rhubarb-and-custard for the sections. A great choice for visual variety that isn’t overpowering.</p> <p>The hex colours:</p> <ul> <li><span style="background-color: #fff9eb; padding: 3px;">#fff9eb</span></li> <li><span style="background-color: #a1d0ca; padding: 3px;">#a1d0ca</span></li> <li><span style="background-color: #f9e0d4; padding: 3px;">#f9e0d4</span></li> <li><span style="background-color: #ffebc2; padding: 3px;">#ffebc2</span></li> <li><span style="background-color: #9fa3c4; padding: 3px;">#9fa3c4</span></li> </ul> <h3 id="blog">The lines</h3> <hr id="blog" /> <p><img loading="lazy" class="size-medium wp-image-1986 aligncenter" src="http://localhost/chris/wp-content/uploads/2018/06/Lines-154x300.jpg" alt="Lines" width="154" height="300" srcset="https://chrislee.is/wp-content/uploads/2018/06/Lines-154x300.jpg 154w, https://chrislee.is/wp-content/uploads/2018/06/Lines-41x80.jpg 41w, https://chrislee.is/wp-content/uploads/2018/06/Lines-768x1501.jpg 768w, https://chrislee.is/wp-content/uploads/2018/06/Lines-524x1024.jpg 524w, https://chrislee.is/wp-content/uploads/2018/06/Lines-207x405.jpg 207w, https://chrislee.is/wp-content/uploads/2018/06/Lines-103x202.jpg 103w, https://chrislee.is/wp-content/uploads/2018/06/Lines.jpg 784w" sizes="(max-width: 154px) 100vw, 154px" /></p> <p>A two-column layout with occasional forays into one-column <strong>for emphasis</strong> (intro paragraph, Ed Sheeran) and three-column for fitting more in.</p> <p>The consistent horizontal lines at the top of each new row of pictures makes the content easy to read too: everything is in convenient blocks.</p> <h3 id="blog">The headings</h3> <hr id="blog" /> <p><img loading="lazy" class="alignnone wp-image-1984 size-large" src="http://localhost/chris/wp-content/uploads/2018/06/headings-1024x166.png" alt="Effective newsletter headings" width="1024" height="166" srcset="https://chrislee.is/wp-content/uploads/2018/06/headings-1024x166.png 1024w, https://chrislee.is/wp-content/uploads/2018/06/headings-80x13.png 80w, https://chrislee.is/wp-content/uploads/2018/06/headings-300x49.png 300w, https://chrislee.is/wp-content/uploads/2018/06/headings-768x124.png 768w, https://chrislee.is/wp-content/uploads/2018/06/headings-720x117.png 720w, https://chrislee.is/wp-content/uploads/2018/06/headings-360x58.png 360w, https://chrislee.is/wp-content/uploads/2018/06/headings.png 1489w" sizes="(max-width: 1024px) 100vw, 1024px" /></p> <p><strong>Bold</strong>, <strong>ALL CAPS, sans serif</strong>. Just like the ones on my site, incidentally.</p> <p>The <span style="text-decoration: overline solid #ffb600;">overline spanning the full width of the content</span> is a really strong visual cue that breaks from the section above.</p> <h3 id="blog">The word count</h3> <hr id="blog" /> <p>208 words, not including T&Cs and other gubbins.</p> <p>Perfectly concise, it manages to convey lots of information quickly without feeling overwhelming.</p> <p><span style="text-decoration: underline;">So there you have it.</span></p> <p>Four great tips for concise, compelling newsletters, all of which have been baked into my newsletter creation toolkit. In the age of GDPR and newsletter fatigue, it’s especially important to <strong>get your newsletter design <em>right</em>.</strong></p> <p>If you want help making your newsletters pop, <a href="http://localhost/chris/contact-me/" target="_blank" rel="noopener">get in touch</a>.</p> </div> </div>