The Importance of Live Text in Email
Imagine a subway commuter on his cellphone with barely any signal. He’s trying to read an email from his favorite shoe brand, but none of the images will load. And because there’s no live text in this message, he has no idea what this brand is trying to tell him. Is there an exclusive sale? A brand-new line? In frustration, he deletes the email.
That’s exactly what we don’t want to happen.
When designing an email, it’s easy to put on your creative cap, hop into Photoshop, and go to town. But with mobile on the rise, it’s extremely important to not only create beautiful emails, but functional ones. Having text inside images may look beautiful, but when on a mobile device, the text scales down making it difficult to read. And in Mr. Commuter’s case, the images didn’t even load so he couldn’t read the text at all!
So what’s the solution? Live text.
No matter where in the world your reader is opening your email (whether on the subway or not), HTML text (or live text as I’ll call it) will maintain a readable size (simply wrapping to a new line if necessary) and will display even when images don’t.
This balance of beauty and function has blossomed into one of my favorite things: creative ways to incorporate live text. With Listrak Composer by your side, you can create stunning emails without needing to learn all the quirks of coding for inboxes. Here are a few of my favorite little tricks to make Composer messages with live text extra fab.
Add text within an image (yes, it’s possible!)
If you have a great image for your hero, it is actually possible to include text in that image! You just have to be a little creative about it. Here, you can see I used a solid colored box to cut through the image. In Photoshop, I sliced the image into two parts: above the box and below. In Listrak Composer, I stacked the top half of image, added the text area, then the bottom half of the image. To add color to the text, simply select the structure for the area and add Content Background Color. Voilà! Your test email will now display the text in an easy-to-copy and mobile-friendly manner while maintaining a fantastic aesthetic.
Create unique headings
Want something a little more intriguing for your headline text? You can create a headline combining the powers of an image and a content structure with a background color. In this example, I created a rectangle content structure and placed an image below it to create an arrow. Pretty cool, right?
Now instead of shrinking, your headline text will flow on mobile and remain readable. And bonus! This headline uses a directional cue (the arrow) to draw the reader further down into the email. This is a great design tactic for longer messages because it will entice your user to scroll down to see what the arrow is pointing to, like a promotion or coupon code.
Have fun with your categories
Want to call out apparel, shoes, and accessories without taking up too much real estate in your email? Then Composer’s two-column structure is your best pal! There are a ton of fun things you can do with this structure to call out those categories while incorporating live text. In this example in particular, I have an image in one column and live text (i.e. the category name) in the other. I even messed around with the shape of the images in Photoshop to create a funky angled corner. This finished product not only features the vivid imagery customers love, but the functionality of live text to make their experience flawless with or without those images.
Create a secret banner
This is actually my personal favorite! Though this may look like one whole banner, it’s really another two-column structure! Again, I put an image in one column and text in the other. But this time, instead of leaving the background of the text white, I made it the same bright yellow as the accompanying image. Now it looks like one whole banner! Pretty sneaky, right? To improve the experience on mobile, I set the mobile settings to reverse stack. Now when the reader scrolls, they’ll see the text first and the image second.
While these are just a few examples of ways to incorporate live text into your email messages, I hope they help kickstart some fabulous ideas for your designs. Which ones are you excited to try? Let us know in the comments!
Build your free WordPress website with Host2.us free hosting today!
