Keys to Email Creative Success: Marketing and Design

Let’s talk about some ways to design and build better email creatives and campaigns.

featuredEmail

Only a few years ago people were getting rich spamming and scamming our Grandma’s and Grandpa’s AOL email boxes. Today, people are smarter and now understand that the Nigerian Prince really doesn’t want to give them ten million dollars and only if you claim it in the next ten minutes. But email creatives are still a very important part of legit online marketing campaigns of high quality products and services.

Email ads and newsletters are still big converters mainly because you can directly reach your target audience and keep them informed of new products and services you are offering. However, even though people are smarter, the methods of building and rendering email creatives are not. Tables layouts, catchy subject lines and clear call to actions are still the email creative standards so let’s talk about some ways to design and build better email creatives and campaigns.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

I’ve sprinkled great email creative examples throughout the article that demonstrate these principles and hopefully offer some inspiration for your next email design project.

Marketing Campaign Basics

whiskeyMilitia

There is a lot of trial and error when it comes to developing a successful email marketing campaign, but there are a few elements that have been proven to work time and time again. Despite whether you are sending out a monthly newsletter to your users or sending out a creative to promote your new product release, these elements will all contribute to a successful campaign.

  • Attention-grabbing subject line
  • Relevant, useful content
  • Beautiful imagery
  • Consistent branding
  • Strong call to action
  • Social icons and/or feeds

The first rule to good email marketing is a strong, attention-grabbing subject line. Email marketing is a two step process: click to open the email and click to your site. If the subject line isn’t compelling or interesting enough, no one will even get past the first click. You know your customers/users best, so make sure your subject line grabs their attention and gets them past the first click.

After the customer/user clicks to open the email because of your awesome, ridiculously interesting subject line — it’s now your job to get them to that all important second click. The first thing to get them there is content, relevant and useful content. Whether it’s a newsletter or ad, the content needs to be relevant to them, it needs to be useful and it also needs to be informative enough (but not too much) so that your users will trust your expertise and want to learn more.

struckAxiom

Along with relevant content, images are an excellent way to communicate your message and an easy way for your customers to engage with the email quickly. It’s a myth that images in emails are worthless because “most” people have images turned off or that “most” email boxes don’t render images properly. We’ll discuss this more below in the design section, but “most” people I know don’t even know you can turn images off in the first place. Don’t be afraid to use images, cool fonts or anything that will catch the user’s/costumer’s eye.

Branding is the best way to tie your site, service or product into your email creative so make sure your name is all over the thing. Consider the email creative as a mini website. Brand the header with your logo and/or name, brand the footer with your logo and/or name and use your color scheme throughout the email to stay consistent.

Without a clear call to action the email creative is worthless, despite your attention grabbing subject line, informative content, its beautiful imagery and clear branding. Use contrasting buttons to guide the user to the next step. Take advantage of visual hierarchy methods to guide the user to where you want them to go. Any design methods you use to entice the user will be worthless if they don’t know what the next step is or where they need to go.

inkd

Another thing to consider is building trust with your new customer/user. People don’t buy into scammy pitches and cheesy testimonials anymore. The best way to build trust is to show them that other people use your product or service — hopefully their friends. Add your social icons or even feeds to your email creatives so that they can see you’re not just some sneaky snake oil salesman. Social feeds and social proofs show to your future customer/user that you care about your product or service. Give them a chance to see what others are saying about you.

Email Design Best Practices

Designing and building an email creative can be a beast — and you thought it was hard to build a website browser compliant. Try email boxes that don’t even render CSS. The first rule of email creative design is just to make things simple and the second rule is to keep things simple. But we all know creating simplicity is the hardest thing to do.

HTML Only

behance

So, forget everything you know about modern web design layout and stay away from using any CSS if possible. If you do use CSS it should be inline. I know, it goes against everything you stand for as a web designer. But with so many email rendering agents out there, it’s impossible to know whether any of your floats or display properties will render correctly. Don’t guess, just fall back to your old table layout, HTML only design layouts — even if it breaks your heart.

Grids/Columns

Since CSS layouts aren’t cool anymore and table layouts are back in now, stick to grids and columns so that your creative will be presented in the way you designed it — no matter what email box your user is using. Plus, grids are all the rage in web design these days so average users won’t know that you’re using tables to lay it out.

Besides making it easier for you to render your email creatives, grids also offer a better way to present your content and layout your information and images in a clean and methodical way. Columns and grids separate and present content in an easy to read and easy to scan way, so that your user doesn’t have to work hard to pull your message out.

Don’t Skimp on the Images

nationToys

Like we talked about above, images are awesome elements for email creatives, so don’t be afraid to use them. As long as your images are hosted on a good public URL and are embedded via the HTML img tag, you’re safe, so go ahead and use them. Keep in mind, email creatives are kind of an older beast so there’s really no need to have live text unless where necessary. It’s totally cool to use embedded text in images so take advantage of this and be as creative as you want.

Because CSS can be hard to work with in emails and because tables are also hard to work with, try to avoid background images. Usually, you’re safe to use a body background or table background, but beyond that try to use inline images so you don’t run into more bugs.

Don’t forget to optimize your images also. Despite the fact that your images are most likely gonna be hosted on your public server somewhere, don’t make the images so large that they take a second to load. Once your user opens that email make sure they see those beautiful images and not just the dreaded “x” mark where the image should be. Stick with JPGs and GIFs instead of PNGs — some viewers still don’t like PNGs… I know, pretty lame.

600px

bigSpaceShip

That is the max width your email should be. Don’t go any wider than that. Unlike the flu browser, most email clients don’t have the luxury of wide screens. Typically, most clients use up to about 600-700px of their real estate to the email viewing window so avoid going too wide. Also, consider designing your table layout to be flexible (if you can) so that when someone shrinks their email client they will still be able to view your entire email.

Quicker the Better

arrowsAndIconsMag

Beyond optimizing you images and content so that your email creative loads quickly, design you email to be scanned quickly by the reader. Take advantage of visual hierarchy to guide the user through your email, use bullet points and headers, use infographic style imagery or other visual cues to present you message and always design a clear call to action.

Basically, you want your user to scan down your email in a few seconds and still understand the overall message you’re presenting. If you can grab their attention in those few seconds, they may stick around to read the email in further detail and hopefully click through.

Test, Test, Test

nike

The last thing you want to do with your email creative is to test it to death. Load it up and hit it in as many email clients as humanly possible. Although it may not be possible to test it in every inbox, the more the better. Even if you think you have everything covered and you’re confident that everything will work beautifully, you’re guaranteed to find a bug or two in a few clients. If you just don’t have time to test a bunch of inboxes, make sure you hit the major web clients like Gmail, Yahoo and Hotmail — then make sure you hit the major desktop clients, Outlook and Apple Mail.

Consider Mobile

Okay, I didn’t forget about mobile email boxes — well, I sort of did. Mobile inboxes are just an entire beast all by themselves so they may actually require a whole new article to tackle them. But just consider how your email will be presented on a mobile phone. Make sure you are using proper alt and title tags for your images if you embedded important text into them. Like I said, mobile email creative best practices probably deserve an entire article to themselves so stayed tuned for that.

hermanMiller

Patrick Cox

Patrick is a UX Designer and Researcher at Instructure (Canvas LMS).. He also enjoys family, snowboarding, sports, bacon and is jealous of your beard.

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 10

Comments are closed.
  1. Hey, thanks for sharing!

    I believe you can easily be ignore by the large amount of content you have in a newsletter! Sometimes I wonder how my boss sees a “newsletter” width more than 8000px height!

    Is better always to have the latest kickass project with a small description and a big button linking back to your website. Otherwise, it will looks as newspapers, instead of a newsletter.

  2. Newsletters to your clients are a great way to let them know the new things that you are doing and the ways that you can better your services for their company. This will also show them that you are working to make sure that you are doing the things necessary to ensure that you are providing them the best bang for their buck.

  3. Patrick is right-on with his approach to eNewsletter marketing. Don’t be afraid to continue investing in this medium for either your own internal marketing efforts or for your clients! Thanks for sharing and great use of examples to support your POV. Keep ’em coming…

  4. A good tool for testing that many don’t even think of is Thunderbird. You can send HTML emails with Thunderbird and can easily set it up with an online account like Gmail and AOL. Use something like Lastpass so you can easily get logged into all of your test accounts quickly across browsers as well. It will save you a lot time in the long run.

  5. I see one of the items is don’t skimp on the images. Am I still stuck in the old mind frame that a lot of images can be distracting especially since a lot of email clients have images turned off by default? Not sure if I am a rare case since the institution I work for uses Notes (a shiver runs down my spine whenever I say that name). Thanks!

  6. Really Wonderful. I am doing Email marketing for long time, but this article was still having lot of juice for me to grab.

    Specifically Newsletter designs given are very good.

    In my opinion & Experience, usually simple emails generate more results, as they look like personalized and less like millions of newsletters or marketing emails we get every day.

  7. Would you happen to have articles on constructing an html email letter from scratch that has grids and images?