1. Consistency is Key
Since I have this awesome pop up on my page promoting a 10% off discount for anyone who signs up for my email list, I now want to send a great email welcoming my new subscribers (link to welcome post). The first thing to remember to tie the email and the display together is using the same imagery and copy from the pop up in the email.
In general, consistency is a good design skill to practice and doing this will remind your new subscriber who you are. Plus, giving people the instant gratification of getting a discount after signing up for your list builds a positive relationship right off the bat.
Now that you have your copy and images handy, it’s time to open the drag and drop editor and start your email design.
For this example, we will be editing the Autoresponder email. To do this, click on your campaign display in the Privy dashboard, select “Emails” from the second navigation bar,
And then click the “Autoresponder” button. If you see the html editor, no worries, click “Reset Template” and you’ll be able to choose the drag and drop editor. More advanced users are welcome to work in html if they want but unfortunately you can't switch back to the drag and drop editor without losing your work.
2. Plan, then Plop
Before you start adding your copy or images to the email itself, take a minute to consider the different layout possibilities for your email and which you think would work best for this specific content. Here are a few layout examples I usually choose from:
The first layout I turn to is the default Privy autoresponder email template. This offers a prime location for a body text, which is great for welcome messages.
As with any marketing touchpoint, you also want to give your recipient a call to action. The best place for this is at the bottom of your email so that the reader has the most context as to what they’re clicking on, making it more likely that they’ll come back to your site and make a purchase.
For those of you who want to get a little more creative, you can also start from scratch. Delete the default template by selecting each row and clicking the delete button. Once everything is gone, you’ll have something that looks like this:
From here, click the “Row” tab on the right and you’ll see different layout options that you can then drop content into. Here is an example of a common newsletter email layout:
This layout has a lot of room for text, making it great for a lengthy newsletter or product update. What this layout does well is that it adds images into the row to break up the text blocks and make reading the email more digestible.
According to numerous recent studies, more than half of all emails are opened on a mobile device first. As you may have experienced, reading lengthy paragraphs on a small screen takes a lot of concentration and time, which can put off your mobile subscribers. To avoid this, keep your message short and find relevant imagery to include alongside your text to break up dense text blocks.
Don’t have a lot to say? No problem. That’s actually better in most cases!
This email layout is great for promotions or any image heavy content you want to share with your audience. Since it uses the bulk of the email to display an image, it’s best to keep the copy on the image concise.
With a layout like this, you’ll need to make sure you include some fallbacks in case your subscribers don’t have images turned on. Include some alt text (known as alternative text) that describes the image and offer so that your message still gets across. And if you plan to use a GIF, make sure the important information is on the first frame so that if the GIF doesn’t load, your visitor can still see your offer.
3. Choose Clarity Over Creativity
My final piece of email design wisdom is to make sure your body text is readable. This may sound obvious, but I’ve received countless emails with text that looks like this:
A true graphic design nightmare (Seriously, I think I have a headache just looking at that). The lines of text are way too close together, making it totally unreadable. Instead, when designing text for a screen, choose 12 or 14 point font and make the line height larger than 100%.. This gives the text room to breathe.
Additionally, don’t over style your text. If everything is bold or italics, what actually looks important anymore? As much as we want to get all fancy, it’s more important to have clear, readable text rather than creative typography.
Now it’s Your Turn
Try it for yourself! Head to your dashboard and start using the drag and drop editor today.
Have questions? Read these help docs or feel free to reach out in chat, we’re always here to help. Happy designing!