In case you’re allergic to social media and haven’t ever before heard the term, FOMO means “the fear of missing out.” But what is FOMO marketing? We’re all familiar with the fear of missing an amazing opportunity. We don’t want to look back on our lives and wonder, “What if?” Savvy marketers have tapped into […]
Many people want to create the best email campaigns possible, and this goal can be realized by following best practices for email design and coding and by implementing advanced techniques correctly. This comprehensive guide, for novices and pros alike, delves deep into the nitty gritty of email marketing.
Here’s what you’ll learn:
best practices for email design, from creating a theme to designing the footer;
how to add images and incorporate rich media (GIFs, cinemagraphs, video) in your emails;
how to design responsive emails for a better user experience;
email client support for responsive mobile emails;
finally, advanced techniques in email design.
Emails have transformed from being an ordinary text-based personal communication tool into a future-proof marketing channel. We have moved into a world of visually attractive HTML emails that have the feel of microsites in the inbox.
Getting acquainted with the best practices of email coding is, therefore, imperative if you want to avoid a broken user experience and instead improve user engagement. Moreover, as the digital world becomes more mobile, creating responsive emails is the need of the hour.
In this article, we shall delve deeper into best practices to follow for all email clients, as well as advanced techniques you can include for email clients that support interactive elements.
Let’s start with the basic structure of an email.
Basic Email Structure
As Leonardo da Vinci said, ”Simplicity is the ultimate sophistication.” Accordingly, keep the design of your email simple.
Check out the email design below by Charity: Water. Simple yet engaging.
Developers have been coding emails using <table> layouts for a long time now. So, it is recommended that you place your email elements in a grid-based layout, rather than arbitrarily placed. Moreover, any element that might overlap needs to be added to a different layer.
The email shown above by Charity: Water looks like this when exported to a tabular layout:
Email design is made up of different subelements. Let’s explore them now.
1. Email Theme
The logo is not the only element that reflects your brand’s personality. The overall theme of your email, including the fonts, color scheme and imagery, should be in sync with branding guidelines.
2. Width And Height Of Email Template
Because your subscribers use diverse email clients and devices, your email should be appropriately visible in the preview pane of all email clients. Keep in mind that the email will be displayed according to the display pane of the email service provider or client. Only certain email clients, such as Thunderbird, Apple Mail and native mobile email clients, will display email at full width.
For other email clients, the display boxes have variable sizes. Many service providers, such as MailChimp, go over the basics of HTML email, by recommending, for example, 600 to 800 pixels as a width, so that the full email gets displayed. Remember, that most subscribers never use the horizontal scroll bar in an email.
The height of your email template should usually be long enough to accommodate your copy within two scroll lengths. You can certainly have a longer email template if you have to convey a huge amount of information. However, if your email template gets too long, it might become boring for subscribers, who will be less likely to scroll to the end to check out all of the offers and promotions included.
The height of the preview pane of most email clients (which contains content commonly referred to as “above the fold”) is generally between 300 and 500 pixels. Make the best use of this space, so that the content included above the fold entices the subscriber to scroll down.
Every email developer knows that if an email’s file size exceeds 102 KB, Gmail’s app will clip the email, and they will not be able to track metrics.
Check out the screenshot below to see what an email looks like in Gmail when it is clipped:
To avoid Gmail’s clip, make sure your email does not have unnecessary code and is not over-formatted. Go for a minimalist email design, without any shortened URLs. Note that images will not be embedded in the email and, so, will not increase the file’s size. That being said, removing unnecessary images will help to reduce the email size.
For marketers who use predesigned templates, the height and width will already be taken care of. If you want to use your own design, consider the ideal width and height of an email template.
3. Body Of Email
Emails usually begin with a hero image at the top, followed by the main copy, a call to action and then the footer.
Because most people read on screens positioned about 2 to 3 feet away, your h1 title should be around 16 pixels; if your title is short, it could even go up to 20 pixels. A good idea would be to render the h1 title as text, along with an attractive hero image.
Your descriptive text should not be smaller than 12 pixels. It should be easily readable across all email clients and devices. Moreover, the alignment of paragraphs and paragraph size also play an important role.
4. Call To Action
The primary objective of email marketing is to persuade customers to take action. To do that, your call to action (CTA) should have engaging, actionable verbs. Use convincing and actionable text, like “Start the free trial,” rather than drab phrases like “Click here.”
Create a sense of urgency in CTAs and get higher click-through rates by adding the word “now.”
Campaign Monitor, in one of its guides, “10 Tips to Optimize Your Calls to Action,” emphasizes that a CTA button should always contrast strongly with the background color, so that it doesn’t blend in and that it grabs the subscriber’s attention. Based on your target audience, your industry and the message to be conveyed, including CTAs at regular intervals can increase email conversions and the desired subscriber action. Its height should be at least 30 pixels, and it should be easily tappable with a thumb on mobile devices.
Check out the email below from Asana. It places a CTA strategically above the first fold and also follows the CTA best practices discussed above.
5. Images And Interactive Elements
If you are putting images or rich media in your email, add relevant alternative (alt) text, so that the purpose of the email is preserved even when the visuals are blocked by the email client. This is also greatly helpful with accessibility, because screen readers will be able to read the alternative text and convey your message.
Most email marketers tend to send emails consisting of a single image, which is first of many common HTML mistakes compiled by MailChimp. It recommends a text-to-image ratio of 80 to 20, to make sure that emails do not get trapped in spam filters. According to a recent study by MailChimp, 200 words per image yield a good click-through rate.
Using linked images in your email ensures an optimum file size. Load images from an external server using <img> tags.
The main advantage of this technique is that you can change images even after sending the email. It makes the email light and reduces the time taken to send the email. The disadvantage is that subscribers will have to download the images from the external server, which will incur download costs for those on metered connections, and the images might also get blocked by some email services.
Rich media elements, such as GIFs, cinemagraphs and video, are becoming popular in email these days.
You can add a GIF or cinemagraph in an email simply by uploading the file to the server that stores your images. Then, copy the URL and use the following HTML:
<pre class="lang:default decode:true" title="Code for adding GIFs or Cinemagraphs in Email"><img src="/wp-content/uploads/thefiletobeinserted.gif">
Test the email to make sure that the GIF works properly.
Embedding video is a very adaptable technique of web development, but unfortunately, it’s not supported in email. Therefore, opt for HTML5 video.
To add a video in email, use the code below:
<pre class="lang:default decode:true" title="Code for including video in email"><video width="400" height="200" controls poster="http://www.art.com/images/blog_images/Imagefiles/2017/html5_video/valentinesday.jpg"><br/><source src="http://www.videofile.com/htmlfiles/movie-14thfeb.mp4" type="video/mp4"><br/><!-- fallback 1 --><br/><a href="http://www.xyz.com" ><br/><img height="200" src=" http://www.art.com/pictures/important/Imagefiles/2017/html5_video/valentinesday.jpg " width="400" /><br/></a><br/></video><br/><br/><br/>
HTML5 primarily supports the MP4, OGG and WebM video formats.
Pro tip: Apple supports the MP4 video format in its email clients and browsers.
Some points to remember:
Make sure that the server configuration you use can output the right MIME type, so that the email client identifies the correct video format when retrieving the video.
If you are using an Apache web server, add this entry to the .htaccess file: Add Type video/mp4.mp4 m4v.
6. Number Of Email Folds
Your email should have just two folds, as mentioned earlier. The first fold should capture your brand and include the h1 title with a relevant CTA. If your email template exceeds two scrolls, then the third scroll should cross-sell your products. The idea is to change up the content and keep subscribers hooked by providing interesting information.
The footer is the most overlooked part of any email. However, it probably has information that subscribers are looking for, such as the company address, social sharing buttons and contact details. In order for your email to be CAN-SPAM compliant, the footer should have some additional elements.
An “Unsubscribe” link should allow subscribers to opt out of your mailing list easily and will reduce spam complaints.
Your contact details should link back to your company website and should include your postal and email address.
Additionally, you can have ancillary links, such as “Forward to a friend” and “View in Browser.”
Explanation of why the recipient got this email
Your subscribers have probably subscribed to numerous mailing lists. Subtly remind recipients of the reason they received the email, to maintain your reputation as an emailer and to minimize spam complaints.
Include the copyright mark, along with the current year and your business name.
Designing The Footer
Cramming information into the footer sounds tempting, but you should determine the most important information for your business and restrict the footer to the minimum. Stuffing it with too much information could lead readers to dismiss it entirely because they will not be able to figure out which links to click.
Check out the footer below by Cotton on Body. Although it is well organized, it could be overwhelming for the subscriber who is scanning the email.
Have a look at the footer below by Alice and Olivia. It is simple, and it maintains a visual hierarchy according to the actions they want subscribers to take.
The footer by HSN below is clean and makes good use of padding and white space. It is not overwhelming, yet it conveys important information that readers might be looking for.
Mobile Responsive Emails
Most subscribers will check email on their phone. Owing to this trend, your emails ought to be responsive. Responsive design includes several elements, such as media queries, fluid grids and fluid images, so that users can view the email as intended, regardless of screen size or device. The basics of responsive email design include the table element, easily stackable sections and full-width CTAs.
If your subscriber list consists of many mobile users, then avoid overlapping layouts. Hide non-primary sections, such as navigation and email advertisements, to cater to mobile subscribers. Mobile-specific email elements such as a navigation menu and image sliders can also be used.
Responsive email design is supported in these email clients:
iOS Mail app
Windows Phone 7.5
Android 4.x Email (OEM) app
iPhone Gmail app
The following email clients do not support responsive email:
To make their emails responsive, developers use a media query that is commonly referred to as @media. It is a special set of CSS styles, included in the header, that work as conditional statements or dynamic rules.
The point of media queries is to identify the screen size of the device being used and to execute various rules according to that screen size. The challenge is that media queries do not work in all email clients and might need detailed planning and testing compared to other design techniques.
Have a look at the media query below:
<pre class="lang:default decode:true" title="Structure of Media Query">@media only screen and (min-width:479px) and (max-width:701px)
width: 100% !important;
display: none !important;
When this email is accessed on a device whose screen is between 479 and 701 pixels wide, the email’s width will be 100%, according to the width: 100% !important; attribute. The !important function forces this attribute in email clients such as Gmail, where it might be ignored.
The styles in the CSS rule block should specify the container or element type that the styles will dictate. Assign these rules in the HTML if you want them to work.
Here is the CSS:
<pre class="lang:default decode:true" title="Code for CSS"> td[class="body-header"] font-size: 18px !important;
And here is the HTML:
<pre class="lang:default decode:true" title="Code for HTML"><td align="left" class="body-header">
It is important that the element (td) and the class (body-header) added in the CSS and HTML match each other.
With the advent of advanced email clients, such as Apple Mail, which is based on Webkit, email developers can even play around with keyframe animation, interactive elements such as carousels, and live feeds.
Conditional coding for different email clients (such as for Outlook and for Samsung and Apple devices) has also become possible.
If you follow these simple tips, you will surely be able to create awesome email marketing campaigns that convert, whether you are a novice or pro at email programming. In the end, aim to create a good user experience and make subscribers look forward to your emails. Happy emailing!
Creating good user experiences for apps inside messaging platforms poses a relatively new design challenge. When moving from desktop web to mobile interfaces, developers have had to rethink interaction design to work around a constrained screen size, a new set of input gestures and unreliable network connections.
Like our tiny touchscreens, messaging platforms also shake up the types of input that apps can accept, change designers’ canvas size, and demand a different set of assumptions about how users communicate.
Component-based libraries or frameworks such as Vue have given us the wonderful ability to create reusable components to be spread throughout their respective application, ensuring that they are consistent, and (hopefully) simplifying how they are used.
In particular, form inputs tend to have plenty of complexity that you’d want to hide in a component, such as custom designs, labels, validation, help messages, and making sure each of these pieces are in the correct order so that they render correctly.
How about an icon set that gives your UI designs just that finishing touch they need? One that stands out while keeping the design clear and legible? Vincent Le Moign spent two years on designing such a set, and we are very happy to feature part of it as a freebie today.
The EGO icon collection shines with its well-balanced, geometric style — perfect to make a bold statement without being obtrusive.
I’ve been a long time Photoshop and Illustrator user. Both programs are really useful and powerful, and they’ll remain a key part of any digital artist’s or designer’s toolset, including mine. However, for all user interface, web and icon design workflows, I recently converted to Sketch. Here is why.
While Photoshop is awesome at what it does, defining what it is might not be so easy anymore. I remember watching a storyboarding tutorial by Massive Black’s El Coro (unfortunately, it doesn’t seem to be available for sale anymore). In it, he says that 17 or so years ago, Adobe had no idea that digital artists were using Photoshop to digitally paint pictures! So, it had to catch up with its own user base by adding more — you guessed it — painting features.
Winter means getting out your scarf and a cozy hat to brave the cold — if you’re located in the Northern hemisphere that is. For all those occasions when your projects may need to get dressed up a little, we are happy to present to you the free Clothing Icon Set created by the design team at Creativebin today. The set includes 40 icons with everything ranging from shirts, pants and dresses to a blazer, hat and even a scarf.
Psst: This post was published previously on the Unbounce Blog. With Black Friday and Cyber Monday around the corner, we’ve updated it with helpful tips and critiques that will inspire your upcoming holiday campaigns.
It’s that time again: Holiday shopping season.
And every business is trying to take advantage of the billions of consumer dollars that will be spent over the next four weeks.
Black Friday and Cyber Monday were only the beginning.
We all know that there were millions of consumers heading online and into stores to grab the first amazing deals of the season. The question is, which brands left money on the table?
Over the past weekend, I took a look at a bunch of Black Friday and Cyber Monday marketing campaigns that were promoted through Twitter, Facebook and Google Adwords.
Some marketers knocked it out of the park.
Others, not so much.
I took a quick tally of how many websites were promoting their sales through the use of landing pages, and I was disappointed to say the least.
This was a random sample of campaigns found by searching for Cyber Monday & Black Friday keywords
Just 8 out of 34 campaigns used a landing page that focused on the black Friday sale.
16 of the campaigns sent traffic to a corporate website, using some sort of headline or banner to promote the sale.
And a whopping 10 out of 34 companies just sent traffic to their normal homepage without a single mention of Black Friday or Cyber Monday.
I mean, almost 30% of the companies I looked at figured all they had to do was send out a tweet or an ad to promote themselves on Black Friday weekend!
So what are the tricks you can use on your landing pages to knock holiday shopping season out of the park? Let’s take a look at 7 sites that actually used a landing page to promote themselves this past weekend, and the different strategies they employed to pull it off.
Strategy: The flash sale [promoted via Twitter]
I love the premise of this page. Auto parts retailer Autozone set up a bunch of “flash sales” that were released throughout the day. The counter on the page told visitors when the next flash sale would be available.
In theory, this should increase the engagement of the page and keep visitors’ attention longer by getting them excited about the next sale.
But there are a couple of problems with how they went about it:
Is this page already sold out?
The words “SOLD OUT” are very large on this page. It’s the first thing you see, and I’d be afraid of this driving traffic away from the site. If you went into a store on Black Friday and saw a huge sign that said “SOLD OUT” would you stick around?
I would make the headline more explanatory. Something like this:
“Our latest sale has SOLD OUT, our next sale starts in: 00:02:57”
Don’t make me wait!
Another drawback I see with this page is a high abandon rate. Sure, you’re going to get a few people interested enough to stick around, but a good portion of your visitors are going to bounce off this page and forget about it.
The solution is to add a quick opt-in. Why not say something like:
“Don’t miss our next sale! Enter your email address below and we’ll notify you when our next flash sale begins!”
That way you’re not only building a list for the future, you’re also keeping visitors engaged throughout Cyber Monday.
2. Snack Tools
Strategy: The overlay [promoted via Twitter and Facebook]
All right, so this example isn’t a landing page, but it represents an effective way to boost conversions during the holidays.
Web app company Snack Tools put an overlay on its site with the details of a holiday promotion for visitors who arrived via social media.
Their technique presents a few problems:
My attention span is short, give me the quick points
The trouble with competing on Cyber Monday or Black Friday is that everyone is trying to find the best deal. That means they don’t necessarily want to spend a lot of time on your page to decide if your deal is right for them.
This overlay needs less copy and preferably fewer membership benefits. Less is more when it comes to using overlays.
Another option is to remove the close button and turn this into a real landing page! However, if the copy is strong and the offer is clear, this overlay will be able to drive conversions as well as any standalone page.
Pro tip: Targeted overlays create more conversion opportunities… which means more conversions for your Black Friday and Cyber Monday campaigns. Build and publish high-converting overlays in *just a few minutes* with Unbounce’s drag and drop builder.
Just remember, using overlays is a great way to increase sales and conversions. The deal you’re offering is front and center is sure to capture visitors’’ attention.
This call to action is rubbish
“Post your order” is only slightly better than “Submit” – and we all know you should never submit.
No need to get fancy, but a simple “Activate My Account” would be a much better call to action.
3. ONE Medical Group
Strategy: Promotional code [promoted via Google Adwords and Twitter]
This is an example of a promotion code landing page. It seems visually appealing at first glance, but there are some serious issues with this page:
Am I shopping for furniture?
The photo in the background looks like a furniture store, not anything medical. Images on a landing page are very important. They reassure visitors that they’ve arrived in the right place.
What exactly does this company do?
This entire page focuses on the Cyber Monday deal, but makes no mention of the product itself. If I were a visitor who didn’t know anything about this service, I would not have enough information to move forward.
Make sure not to lose focus on your product and the benefits it will bring to your visitors. Ultimately, that’s what will sell your product or service.
Where’s the call to action?
Oh right, it’s those two orange buttons. The problem with these buttons is that they’re the exact same colour as the logo (Yikes!).
As a result, they get lost in the shuffle. By making your calls to action look like buttons and giving them enough contrast with the other elements of your landing page, you’ll get a higher click-through rate on your landing pages.
Strategy: Minor modifications to existing landing pages [promoted via Google Adwords]
Why reinvent the wheel? If you already have a successful landing page that’s crushing conversions for your company, you may not need to make large sweeping changes for a holiday promotion.
If you’re in a pinch, you can set up a landing page just like this. Sage sells account software, and it looks like they’re using a basic template for their landing pages. This allows them to swap out the background image and the headlines for various promotions quickly and easily.
But what about urgency?!
This page is simple and to the point, but it could use more urgency. The beauty of Cyber Monday/Black Friday is that you have that urgency built right in. Remind your visitors that this is a limited time offer and it’s going to expire very soon.
Sage could throw a countdown on this landing page, which might give visitors that extra little push to convert.
5. The New York Times
Strategy: Focus on one step at a time [promoted via their website]
I like this page.
It cuts to the core of the offer and doesn’t have any fluff.
My only critiques are that the headline could be more readable and the end date doesn’t have very much emphasis; you want to make sure that every visitor is aware that the deal is limited, which creates a sense of urgency.
Here’s what I like so much about this page:
Frequently asked questions are available, but don’t take up space
The FAQs are on the bottom left of the page. If you don’t need them, they don’t take up much room anyway. But if you’re interested in seeing them, they’re just one click away.
The page stays simple until it needs more information
When you first land on this page the only two options are “For myself” and “For a gift.”
When you make a choice, the page expands and gives you more options.
The reason this is so great is that it keeps the user focused on the task at hand. Giving a visitor too many options all at once can be overwhelming and increase the page’s bounce rate. Well done, New York Times marketers!
No need to get fancy, but a simple “Activate My Account” would be a much better call to action.
Strategy: Get cheeky [promoted via Twitter]
This is an excellent Cyber Monday landing page. Vimeo has taken Cyber Monday and a unique spin on it with “Cyborg” Monday.
The deal is laid out very clearly and the product and its benefits are outlined in the green section of the page.
But can they improve this page?
My main critique of this page is that the call to actions don’t look like buttons. Also, a fun play on a cyborg countdown could enhance the page and add a sense of scarcity.
7. Young and Reckless
Strategy: The storefront landing page [promoted via Twitter]
If you’re a marketer for an e-commerce site then listen up!
Young and Reckless is the ONLY online retailer I saw the entire weekend that effectively used a landing page concept on their store.
This store/landing page is specially designed to sell their products on Cyber Monday. There is no menu navigation, no distractions and no fluff. Just selling.
The only problem is that they didn’t quite go all the way:
Where is the offer???
The shirts on this page are listed between 25% and 50% off, so where is the headline telling me about it?
A headline like this would be more effective:
“Until Midnight Only: Save up to 50% on everything you see below”
Just add urgency
This is a long page because there are lots of items listed. Why not include a timer that follows the visitor down the page reminding them how much time they have left on Cyber Monday?
It’s just another element that could drive home the scarcity of the sale.
Now it’s your turn.
Take these strategies and apply them to your own campaigns for better results. The holiday buying season is well worth the extra effort.
What creative campaigns will you come up with before the holiday season is over?
Every year it feels like TV and radio stations, retailers and other businesses start the “holiday season” talk earlier and earlier. Some people complain. Some people love it. I’m usually thinking about other things — like how to stay sane. You see, online retailers (which many of my clients are) are basically going berserk during the months of November and December. Ever heard of Black Friday? Cyber Monday? E-commerce booms as the holidays near, especially among women and Millennials. Taking advantage of these search trends takes preparation, grit, timing, and even a little bit of luck. I’m not promising an…