Before we jump head-on into creating a functional email design, it is important to understand the basic components of an email as well as their functions.<\/p>\n As displayed in the email example above by Fortnums & Mason, we shall be discussing about:<\/p>\n The subject line is the first point of contact for your subscriber. This sentence of an average 45 characters is where your subscriber decides whether to open your email or not. Your subject line should peak your subscriber\u2019s curiosity which will be fulfilled by your email copy.<\/p>\n While different email clients<\/a> can only display limited characters, keeping your subject line between 41-50 characters is the best practice. However, this doesn\u2019t mean you need to stuff everything in your subject line.<\/p>\n Pro Tip<\/strong>: As per a press release by Yes Lifecycle Marketing, personalized subject lines can increase open rates by 50%<\/a><\/u>.<\/p>\n The pre-header text is the text that is visible after the subject line. What was left in the subject line can be picked up by the pre-header text to further help in building subscriber\u2019s curiosity. The pre-header text is visible in mobile clients and webmail clients like Gmail and Yahoo!.<\/p>\n Rejoiner conducted an A\/B Test for Autoplicity.com and a rise of 7.96% in the open rates<\/a> was observed for the email with a pre-header text as compared to the email with no pre-header text.<\/p>\n Pro Tip<\/strong>: You can make your preheader text actionable with words like \u201cClick here\u201d or with a cliffhanger.<\/p>\n Once your subscriber has opened the email, it\u2019s time for your email design to shine through. Since most subscribers tend to scan through emails for important information, a functional email layout will help them do so.<\/p>\n The most popularly used email layouts are:<\/p>\n (Image Source: Really Good Emails<\/a><\/u>)<\/p>\n In the above email by Lyft<\/strong>, you can see that the email begins with a bold heading and gradually the scan path reduces to the CTA button and the image. Tracing the path, you can identify an inverted triangle.<\/li>\n (Image Source: Really Good Emails<\/a><\/u>)<\/p>\n By placing the images and associated text in a zig-zag pattern, the overall email length is reduced, and this makes it easy for subscribers to scan the content.<\/li>\n (Image Source: Really Good Emails<\/a><\/u>)<\/p>\n This email by Envato<\/strong> has all the email elements already stacked in a single column which scales based on the width of the screen and doesn\u2019t need to be rearranged for a mobile layout.<\/li>\n<\/ol>\n Pro Tips<\/strong>:<\/p>\n 91% of buyers prefer interactive and visual content<\/a> over traditional text-based media. Hence, email marketers use a bold and attractive image in the first fold (called hero image) to convey vital information. Moreover, with devices having brilliant displays, it is very important to use high-resolution yet light-weight images in your emails.<\/p>\n A relevant alt text for images ensures that subscribers with images disabled by their email client don\u2019t miss the information.<\/p>\n In the above email by Cotton ON<\/strong>, the images have a relevant alt text which is displayed when images are disabled.<\/p>\n Pro Tip<\/strong>: It is very easy to get carried away and create an email that is basically a single image. Avoid this and maintain an 80:20 text to image ratio.<\/p>\n The actual meat of the email i.e. the email copy should elaborate what your subject line (and preheader text) hint at. People don\u2019t have the time to read through paragraphs of text; the text should thus be minimal and properly formatted. Personalization and relevancy play an important role in striking a conversation with your subscribers. Sometimes, how you convey a message is superior to what you convey. So, stick to a tone that harmonizes with your brand personality.<\/p>\n In the above email by Chubbies<\/strong>, the text has its own flair which is enhanced by the images.<\/p>\n Pro Tip<\/strong>: With email clients being updated with new features, you can experiment with custom web-fonts instead of sticking to email-safe fonts.<\/p>\n Call to Action (CTA)<\/p>\n The acid test for the effectiveness of your email campaign is the CTA button. How your email copy successfully converted a subscriber is analyzed through the performance of your CTA. Depending on the objective of the email and the industry your target audience belongs to, you can have multiple CTA buttons, but what matters is that all the buttons need to be distinguishable from the email text.<\/p>\n Your CTA copy needs to be actionable; use words like \u201cStart my trial\u201d or \u201cAdd me as your subscriber\u201d. Using the first person narrative in the CTA copy can have a great impact on the click-through rate. By changing the CTA copy from \u201cStart your 30-day trial\u201d to \u201cStart my 30-day trial\u201d, ContentVerve saw a rise of 90% in the click rates.<\/a><\/u><\/p>\n (Image Source: Really Good Emails<\/a><\/u>)<\/p>\n In this email by Media<\/strong>, the CTA button has been repeated once and is in a color that is contrasting to the background color.<\/p>\n Pro Tip<\/strong>: Never use an image-based CTA button since it might be hidden when images are disabled. Always opt for bulletproof HTML CTA buttons.<\/p>\n The least noticed yet important component of an email is the email footer. Most email marketers use it to add an email signature, unsubscribe link, a physical address in order to be CAN-SPAM compliant and links to social media platforms.<\/p>\n Some marketers tend to replace the unsubscribe link with a preference center link, which is a strict NO-NO if you want your email to be GDPR compliant.<\/p>\n It\u2019s a good practice to include a reminder of why the subscriber is receiving the email.<\/p>\n In this Google Review<\/strong> email, the footer has a reminder of why the subscriber has received the email, an unsubscribe link and the physical address.<\/p>\n Pro Tip<\/strong>: The email signature can also be used to display promotional banners of some of your resources.<\/p>\n By including all the above-stated components, you ensure that your emails are opened and subscribers get all the essential information. Their conversion depends on the kind of experience they get from your email. By revealing the email message only when the subscriber interacts with the email, you make them feel included and this improves the user experience.<\/p>\n Now, let\u2019s focus on creating interactive emails.<\/p>\n Interactivity in an email<\/a>, as stated earlier, is a great way to improve user experience as the user needs to provide an input in order to view the email message.<\/p>\n The interaction of the subscriber can be as simple as clicking the play button in an embedded video and as complex as figuring out a codex puzzle.<\/p>\n Email on Acid<\/strong> created a CSS-based bike lock puzzle<\/a><\/u>, which is proof of concept about complex interactivity in emails.<\/p>\n Interactivity in webpages is based on Flash or JavaScript enabled code, which is replicated using CSS in an email. That\u2019s because Flash and JavaScript are stripped away owing to security concerns.<\/p>\n The different kinds of interactive elements possible in emails are:<\/p>\n![\"\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/07\/sample-email-template-NL-LP.jpg\")
<\/a><\/div><\/div><\/span><\/p>\nCreating a Functional Email Design<\/h2>\n
The Basic Components of an Email<\/h3>\n
![\"F&M](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/01\/FM-Functional-Email-Design.jpg\" "\\"F&M")
<\/p>\n\n
The Subject Line<\/h3>\n
![\"\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/07\/rich-media.jpg\")
<\/a><\/div><\/div>\nPre-header Text<\/h3>\n
![\"Rejoiner](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/01\/Rejoiner-Functional-Email-Design.png\")
<\/p>\n![\"\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/01\/Email-template-production-768x192-1.jpg\")
<\/a><\/div><\/div>\nEmail Layout<\/h3>\n
\n
\n![\"Lyft](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/01\/Lyft-Inverted-Pyramid-Functional-Email-Design.png\" "\\"Lyft")
<\/p>\n
\n![\"Campaign](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/01\/Campaign-Monitor-Zig-Zag-Functional-Email-Design.png\" "\\"Campaign")
<\/p>\n
\n![\"Envato](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/01\/Envato-Single-Column-Functional-Email-Design.png\" "\\"Envato")
<\/p>\n\n
![\"\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/08\/campaign-management.jpg\")
<\/a><\/div><\/div>\nHero Image & Other Images<\/h3>\n
![\"Cotton-On](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/01\/Cotton-On-Functional-Email-Design.gif\" "\\"Cotton-On")
<\/p>\nEmail Copy<\/h3>\n
![\"Chubbies](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/01\/Chubbies-Functional-Email-Design.gif\" "\\"Chubbies")
<\/p>\n![\"Media](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/01\/Media-Functional-Email-Design.png\" "\\"Media")
<\/p>\n![\"\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/04\/custom-email-design-coding.jpg\")
<\/a><\/div><\/div>\nFooter<\/h3>\n
![\"thanks-for-your-recent-review](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/01\/thanks-for-your-recent-review-Functional-Email-Design.png\" "\\"thanks-for-your-recent-review")
<\/p>\nEnhancing Customer Experience with Interactivity<\/h2>\n
What Is Interactivity?<\/h3>\n
![\"EOA](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/01\/EOA-Bike-Lock-code-Functional-Email-Design.gif\" "\\"EOA")
<\/p>\nTypes of Interactivity Possible in Email<\/h2>\n
Embedded Video in Email:<\/h3>\n
![\"Functional-Email-Design\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/01\/EmailMonks-Functional-Email-Design-1.jpeg\")
Absolute-Positioning Based Fixed Email Elements:<\/h3>\n![\"Penguin](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/01\/Penguin-Random-House-Functional-Email-Design.gif\" "\\"Penguin")
![\"Super](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/01\/Super-Mail-Quest-Functional-Email-Design.gif\" "\\"Super")