A well-designed email is paramount; the email is the beginning of the journey for the customer experience.
The complexity of a captivating email is made up of several things: content, design, subject lines, and graphics being the most important. How do you create these basic elements? When designing and coding an email, you must forget a lot of the basic rules of web design – code like you’re in 1998 but design for 2019.
Layout
The width of your email should be between 500px and 650px and should be vertical, not horizontal. If you are new to email design, be aware that external CSS stylesheets will not work. Many email clients strip the code so be sure to use inline CSS.
HTML tables seem a bit outdated to me, but they are absolutely the way to go when creating your email layout. Several layout techniques, such as float and position, won’t work with many email clients. That’s what makes standard tables the hero.
There are a few things about tables in email to be aware of though, such as cell padding and colspans. Outlook likes to take your cell padding and apply it to all the cells in the row, which will make your layout wonky. Some email clients still don’t support colspans.
The most basic rule of designing an email is to design for above-the-fold. This means that your most important content is placed at the top of the webpage without the user needing to scroll. This rule doesn’t always apply, as some webpages are more complex or for those rule-breakers out there.
Preheader
To a reader, the preheader text is the second most important practice of email design, with the subject line being the first.
The subject line reels the reader in while the preheader can either be captivating or the total opposite. Preheader text is important because you don’t want to the very short summary snippet to read “View in Browser.”
Improving your open rate with a preheader is easy and simple to insert into your email code. Here is an example:
<!-- Visually Hidden Preheader Text : BEGIN --><div style="display:none; font-size:1px; line-height:1px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; mso-hide:all; font-family: sans-serif;">Here is some preheader text!</div>
Personalization and humanization
Another valuable way to captivate your reader is with personalization. Using personalization in the salutation is the most common utilization I’ve seen. Another creative way is in the preheader text.
Be careful with the data you use for personalization though, as incomplete, old, or misspelled names can come across as careless. In 2018, the expectation is for personalization to feel natural rather than automated.
Emojis and GIFs
In 2019, emojis can make your subject line stand out from the crowd. In a study by Experian, they found that, compared to text-only subject lines, emojis increased open rates by 56%.
While emojis aren’t new, they still aren’t supported by all email clients. Always test your emails to make sure your emoji doesn’t appear like this ☐.
If you spend a lot of time on the world wide web, you probably see at least one GIF a week. Animated GIFs create a lot of engagement by reeling the reader into content that isn’t your typical static email. Careful though, some email clients like Outlook 2007 don’t properly display GIFs and will only display the first frame.
Use insights like email client and operating system to determine if using GIFs or emojis makes sense for your business.
Images
Linking images to an absolute source is crucial. Using just (images/logo.png) will not be enough to work properly. Be sure to link your images like (http://www.makemealink.com/images/logo.png).
Try to keep your images on the smaller side so they will load quicker and more completely.
Alt text is important to use because many email clients disable images by default. It’s important to label each image so the reader doesn’t see something like in the image below.
If you want to take it a step further, you can style your alt text with CSS so it isn’t the default font, size, and color. This is especially useful for header images and logos because you can use header fonts and match the logo font. Check what your email looks like with images disabled to see how it will display.
Call-to-Action
CTA’s should be big, colorful, and thoughtful buttons or links that capture readers’ attention and prompt them to click.
Having multiple CTA’s in your email creates more opportunity for conversion, but be sure to put your main CTA above the fold. In addition, take care not to put too many CTAs in your content. Too many CTAs means they’ll lose their effectiveness because they’re not visually striking.
CTA buttons are the number one driver of click-throughs on your emails, website, and other marketing materials.
Mobile optimization
In 2019, one of the most important principles of email design is mobile optimization. Being able to view the email you designed on a mobile phone or tablet is crucial. Otherwise, it will seem unprofessional or outdated.
Designing for mobile can be tricky, like designing for Outlook. Some devices don’t support media queries and many don’t support large-sized emails, which means your design has to be intricate and intentional. Throw in responsive design and you have an entirely new ballgame. Some smartphones are good at rendering HTML and some aren’t.
Check out this website to see a constantly updated leaderboard of the most popular webmail, desktop, and mobile email clients. Right now, Gmail is number one at 26%.
Testing: Fluidity across the board
Create bulletproof designs that work in all email clients.
With over 30+ email clients, testing an email layout can be challenging. There are plenty of rendering issues, as well as making sure you don’t land in a spam folder.
Using an email testing service is an excellent way to fail-proof your emails, such as via your own ESP, Litmus, and Email on Acid.
Conclusion
By following these guidelines, you’ll be able to successfully design an email for 2019 and achieve better open rates.
Let us know what you think:
- What makes doing email marketing in 2019 different than 2018?
- What was your favorite piece of advice in this list?
- Is there anything we missed?
