Month: December 2016


Minesweeper Interactive Email: Interview with Camille and miah from table tr td

Camille Palu and miah roberts (miah likes his name spelled with lowercase) and their website table tr td have been getting a lot of buzz lately among the email design community with their interactive email creations. You can view their creations here.

One of the emails that caught our attention is an email that featured a fully functioning Minesweeper game within the email (view it here). For those of you who are not familiar with Minesweeper, it was an early PC game that came bundled with the Windows operating system where the goal is to clear up squares without triggering a “mine”.

Having seen many interactive email implementations, I was impressed with the execution of this one (the email featured more than 64 interactive elements and 40 checkboxes – checkboxes are used to trigger the interactive states). I reached out to the creators of the email for an interview to get their thoughts on the subject.

Give our readers a little background about yourselves.

We are email developers that live and work in Denver, CO. We have worked together for four years at two companies (Merkle Inc. and Digital Fusion). We run our passion project (table tr td), and own a business (camiah). We like to build email, design stickers, buttons, and t-shirts, and find the “best way” to do just about everything. We like coming up with brand new ideas and executing them. We love being creative, and we both love our little families. We are perfectionists that painstakingly care about every aspect of what we do.

What was your inspiration in starting the table tr td website?

We originally started table tr td as a code library. We, ourselves, use it daily so that we work from a shared code base. As a project, and as a way to express ourselves, we started sending email art. For the website, we keep it updated with the code we use. We consistently look at every post and ensure it still applies. For the emails, we send what we think will be either funny, fun, or relevant. Table tr td is 100% a passion project for us, and we try to make sure everything is the best it can be.

How did you come up with the idea for the Minesweeper email?

We are always racking our brains for ideas to get our followers to smile. We like to include interactive gems that no one in their right mind would spend time creating. So when the idea for minesweeper hit, development started immediately.

How long did it take you to build it?

Wow, this is quite a question. The development time was between 20-25 hours. 3-4 late (eye-bleeding) nights in a row. After it was ready we decided to ensure it fell back very thoughtfully in each email client so it would look intentional.

What advice do you have for email designers who are interested in trying out interactive email?

First of all, get out there and experiment, do something fun and creative for yourself. If it is for a client, find a really good and meaningful use case. Do not waste time and money developing something just because. Once you have your use, do a quick study up. We have a post on table tr td showing the basics behind it and the code needed. It’s a little funky to get used to, but it is so much fun. Especially when you’re doing it right. Another thing you’ll have to get ready for is all the fallbacks needed. It’s not going to work everywhere, so the email will need to have depth.

Do you feel that the time for interactive email has arrived?

Well, interactive email is definitely popular at the moment. And it can be used really well. But it can also burn a ton of dev time since it’s not easy. What we really think interactive email can do is bring excitement to the field, and get people, who are not normally excited about email, opening and clicking around.

You send really cool and whimsical emails that make use of cutting edge techniques. Is there one that you’re particularly proud of, besides the minesweeper one?

There is a place in our hearts for every email we send. We really enjoy the Pizza, Pin Code, and BlackBerry emails. We send each one on purpose to people who want to receive them. We get excited thinking of how happy our followers will be to open our creations. And we hope they can see the care we have in what we do.

Do you think that interactive email must serve a function? Or can fun interactivity be the point of the email?

We have a unique point of view. We send almost exclusively to get people to think, not to have them take an action. But even though our interactivity is the point of the email, it still has a function. A function to create thought, movement, a smile, a laugh, a share, a positive reputation, or to build trust with our followers.

Is there any interactive email that you’ve come across that you really liked?

We love what our buddy Eric Lepetit and his team at Nest do. Everything Mark Robbins has to offer is magical as well. [Editor’s note: check out Mark’s interactive email games].

What are your predictions for email in the next two to three years?

We are really excited about the next few years in email. The community has been syncing up and collaborating more than ever and we are becoming a more confident group. It’s also really fun to have well known email devs out there to look up to and really geek out about.

Do you love email?

So do we! That’s why we find work like what table tr td does so exciting. We love innovative emails, but coding them can be challenging. That’s where Email on Acid comes into play! We can help you test your emails to make sure they’re perfect. Get over 70 previews in just one minute by testing with Email on Acid.


5 Ways to Up Your Email Game in 2017

It’s never been a more exciting time to be an email marketer! 2016 has brought lots of changes to email. Gmail took huge strides with their various email clients when they made the decision to support media queries and embedded styles. Outlook surprised everybody when they decided to really engage with the email community and open a channel for feedback so that they can improve their products. Interactive email has become the new bling that every marketer wants to add to their campaigns, but remains challenging to implement.

So, what should you do in 2017 to get to the next level? Check out these 5 recommendations from our team at EOA.

Let Your HTML Enter the 21st Century

We’ve been coding like it’s 1999 for too long! But that’s all starting to change. As the share of mobile clients with good HTML support rises, we’re beginning to see more advanced coding techniques become popular in email. Because web clients and mobile clients are so easy to update, big moves like Gmail’s update can happen surprisingly fast.

Though clients like Outlook will continue to hold back email development for a little while longer, they won’t be able to stop the flood of new techniques and better emails. Microsoft has already shown interest in fixing some of the issues with Outlook. Combined with the diminishing market share of desktop email, coding for Outlook should become a thing of the past. When you have to do it, though, just make sure to include a good fallback!

Feel free to flex your coding muscles and start trying techniques like interactive email! Soon enough, the door for email innovation will be wide open. Here are a few techniques to try if you haven’t already.

Rule the Inbox with Engaging, Personalized Content

Last year, we predicted that hyper personalization would be a powerful tactic with a growing number of followers in 2016, and we weren’t wrong. The returns for carefully personalizing emails can be staggering. Today’s consumer expects experiences that are tailored just for them, and content that looks great and applies to their interests.

List segmentation is the first (and more importantly, free) way to send more relevant information. If you’re ready to go beyond creating email audiences based on shared characteristics, dynamic content is the next level when it comes to personalization. With dynamic content, you can send one campaign, one time that is optimized and targeted to every single user by leveraging subscriber data and behavior. While you should still leverage these two tactics, there’s a new kid on the block named Big Data and he’s about to change the email game when it comes to relevancy.

Emerging AI technologies and algorithms make mastering 1:1 messaging through email easier than ever before. This kind of technology enables greater personalization by taking the guesswork out of content curation. For example, a company called Boomtrain uses machine learning that gathers insights about your users and provides predictive recommendations. This then allows you to deliver relevant experiences through personalized emails. Another company called Phrasee uses AI to generate and optimize your marketing language. For example, Phrasee uses artificial intelligence to create conversion-driven subject lines that increased a customer’s revenue by 417%.

Before, people knew about Big Data, but not how to apply it. Now, with these companies and technology, sending the right email, at the right time, to the right person isn’t a pipe dream anymore; it’s a reality. Not only does sending more relevant email help with conversions, it will also help with your inbox placement!

Stricter international spam laws and reputation-based filtering are beginning to ensure that the email that makes it to a customer’s inbox is what they really want to see. This is fantastic if you’re a marketer who sends great content. Your reputation will soar and so will your email ROI.

Email certainly isn’t dead, but batch and blast sure is.

Coding for Mobile Will Show Huge Returns

In the last year, mobile has dominated email opens. This means that marketers must create an excellent mobile experience, from subject line to landing page. As the market share of mobile continues to grow over 2017, investments made now in improving mobile rendering and mobile transactions will pay enormous dividends down the road.

So how can you make your emails really shine on mobile?

  • Use media queries to make sure your layout and font size fit the screen perfectly. For most users, media queries should now work in the Gmail app as well!
  • If you’re worried about your email not being responsive everywhere, try fluid hybrid design instead. It can be a bit of a challenge to get used to, but it creates fluid layouts in every device and app.
  • Check out our 5 easy tips on mobile optimization to make sure you’ve covered all your bases.

Streamline Your Email Production

Email production can take a huge amount of time if you build from scratch over and over. Instead, we recommend building and testing a few trusty templates that can be reused as much as you need them. For a more flexible approach, consider switching to modular design. This technique can save you loads of time while allowing for some flexibility in the design of your emails. With modular design, each content block can be coded as a standalone “partial” or chunk of code. Then you can drop any number of these chunks into the “frame” of the email in any order. This lets you mix and match content blocks on the fly to create the look you need for each email.

Modular design is even easier with our Email Editor tool. Our handy Snippets feature lets you save code with a unique shortcut so that you can drop all of it in with just a few keystrokes. The Email Editor also brings lots of other useful features to the table, like instant testing, revision history, an image library and more. Improve your email workflow with our Email Editor today!

Embrace the Unsubscribe

Unsubscribes happen. And you shouldn’t beat yourself up about it! You don’t want to keep disengaged readers on your list. Make sure your unsubscribe link is easy to find at the bottom of the email. Not only is this illegal to hide, but it’s just an added frustration for users.

If you’re able to create one, a preference center is an even better option to present customers with. Preference centers truly put the power of choice back in the hands of the readers. This allows them to stay in touch on mailings they want to receive but unsubscribe from those they aren’t interested in any more.

Hard as it might be to part with a few contacts on your list, a period reengagement campaign is an excellent way to trim dead weight from the list and improve metrics across the board. Just segment out those readers who haven’t opened or clicked an email for a few months and send them a campaign to confirm they want to remain on your list.

What have you got planned for 2017?

The suggestions above can help almost any email marketer improve their campaigns. What plans do you have for 2017? Are there any new tools or techniques that you’re excited to use? Let us know in the comments below!

If you’re changing up your email strategy, don’t forget to test! Broken emails don’t get clicked. We can help you catch costly errors before they get sent out. Try our email testing service today, and you’ll see how easy it is to send amazing email.


How Artificial Intelligence in Email Will Change the Marketing Landscape

Big data. This has been a buzzword on digital marketer’s lips for years now, but only recently have marketers been able to flex their muscles when applying these data points to their marketing strategies. The issue wasn’t the lack of Big Data one could access, in fact, it was the opposite. There was simply too much data stored over years that marketers were only able to skim the surface of the huge analytics pool in front of them. Fortunately, all this is now changing with the entrance of Artificial Intelligence.

Artificial Intelligence, when paired with big data, allows you to stay competitive as data growth continues to skyrocket. These two elements allow you to get the maximum value from email with the customer data you’ve acquired.

While it’s just the beginning for AI in email, in this blog we’ll discuss current AI software already on the market. From virtual sales assistants to complex algorithms that send 1:1 messaging, let’s explore how AI is changing email marketing forever.

Boomtrain

Over 205 billion emails are sent per day, making it a challenge to stand out in the inbox. Boomtrain, a company with AI at its core, offers a solution to push through all the inbox clutter. Boomtrain analyzes content and user behavior from your website to deliver personalized experiences and messaging. This software can deliver 1:1 messaging across multiple channels, but we’ll be diving into personalization via email here. If you’re looking for other channels Boomtrain can power with predictive content, read more about it here.

Their machine learning algorithms analyze trending data, behavior, engagement, mood, metadata and offer semantic analysis. These algorithms are then combined with artificial intelligence to understand your users and what is relevant to them.

Powered with this data, Boomtrain’s emails offer:

  • Personalized subject lines
  • Optimized delivery times based on the recipient’s time zone
  • Option to provide curated products

All you have to do is drop a snippet into the bottom of your email campaign and Boomtrain will do the rest to provide personalized, 1:1 messaging.

Conversica

Conversica, a company that has already raised $16M in private equity, assists you in nurturing every lead for as long as it takes. Conversica offers a virtual sales assistance that starts reaching out to leads 24/7 within minutes of a user showing interest in your brand. Through email, this virtual assistant sends AI emails that appear to be coming from an employee. Wondering if the copy reads like robot? Not quite. In fact, 50% of leads reply to AI emails as they are written in a conversational manner and can be more engaging than lead-nurturing autoresponders.

With Conversica, it’s almost like having a little robot on payroll, engaging and nurturing a lead for days, weeks or even months until they make that sale or the lead opts out. When a lead is ready to purchase, Conversica’s lead nurturing software alerts a sales representative that it’s time to reach out and make the sales pitch. So, my sales people, they still need your assistance with the touchdown. AI’s aren’t trying to close on the sale without you…yet!

Persado

Persado is a cognitive content platform that automatically generates the highest-performing machine-generated marketing language across different channels. For this blog, we are going to focus on the content Persado’s AI can generate for email.

“Persado’s database is fed by significant in-market research and analysis, psychological research and millions of in-market interactions,” says Lawrence Whittle, Chief Revenue Officer at Persado. Persado’s machine-generated marketing language takes into consideration emotional ontology to score and categorize words, phrases and images in their database. The machines parses thousands of ways to convey emotion and then effectively uses them in your marketing copy. Below is Persado’s “Wheel of Emotions” applied to their AI to generate compelling copy.

Their cognitive content platform can generate copy for email subject lines, email body, and landing pages. Persado boasts a 49.5% conversion lift from companies leveraging their language.

Does this mean content marketers like myself should start looking for a new career since tools like Persado are automating copywriting and testing? Not yet, however, adopting machine learning and AI will be critical if we want to stay competitive in our roles. With the rapid rate of Big Data being paired with AI, it’s sink or swim.

Phrasee

Like Persado, Phrasee takes the guess work out of creating copy that converts. Through artificial intelligence, it generates language that sounds human and is tailored to your brand voice. Quantifying human language wasn’t possible for marketers, until now. Phrasee uses AI to quantify, generate and optimize language for your email.

Their artificial intelligence understands the emotions, sentiments and phrases that resonate with your audience. Once you start using Phrasee, your email results drive algorithms that can generate the best possible content for your audience.

Phrasee optimizes your email in the following ways:

  • Optimized and tailored subject lines
  • Body copy that will drive a click
  • CTAs to drive conversions
  • Powerful, tailored triggers

With this software, you can increase opens, clicks, and revenue. Need more specific numbers? A customer of Phrasee increased revenue by 417% after implementing this marketing AI.

What AI Cannot Do in Email

As more and more software can pass the Turing test, AI will become more and more integrated into our lives (and email). With AI still in its beginning stages for email, the amount of artificial intelligence that will be woven into marketing campaigns in the years to come will be astonishing.

While AI can offer predictive content, maximized subject lines and generate compelling offers, it still can’t guarantee the email in question looks perfect in every inbox. Before you put all your trust in algorithms and AI, your campaigns still need to go through a QA process before you send. That’s where we come in.

If you want to ensure that your email looks amazing across the most popular devices and clients, try us free for 7 days to get unlimited email, image and spam testing! Put a safety net in place through EOA to ensure the humans on the other end receiving your email don’t see a machine error you could have caught.


Tutorial: How to Code an Interactive Greeting Card Email

Around the holidays, many companies send an email to their customers thanking them for using the company and wishing them a happy new year. Birthday emails are also a popular way to stay in touch with customers and possibly offer a coupon or discount.

For EOA’s holiday email, I thought it would be fun to create a 3D card opening effect. Because of the techniques involved in CSS animation, I knew this would only work in a few clients. I coded the email to work only in iOS devices (and in webkit web browsers if enabled). You can check the email out right here. Read on to find out how I coded this email.

Pure CSS Flipping Effect

I started by looking around on Google for a pure CSS flipping effect I could use to create the card opening look. David Walsh’s Create a CSS Flipping Animation blog was incredibly helpful, and got me started with some good code. As you can see from the demo, the effects he created flip the whole image along a center axis. I was able to build on this effect to flip from one side instead (like a hinge), and add an “inside” to the card that the reader can view once they “open” the card.

The card opening effect works on hover on desktop clients and works with a tap on mobile devices. You may want to include some text in the email or the image itself to prompt readers to interact with the card, and customize this for “hover” on desktop or “tap” on mobile.

HTML

I’ll start with the HTML for the card holder and flip container elements.

As you can see, the card_container div is set to position: relative. This will enable us to position the elements inside of the container, which is how we apply animations to them. Now we’ll add in the div that will actually flip.

You’ll notice that inside the flipper div, we have a front div and a back div, each with an image inside. When the card opens, these two images create the front and back of the front flap of the greeting card. Now we need to add the inside of the card, the part that holds a message for the recipient.

The “inside” of the card is outside of the “flipper” div so that it won’t move when the card opens, but inside of the “flip-container” so that we can position it under the front of the card. That’s it for HTML! We’ll come back to this code when we add in fallbacks, though.

CSS

Now we’ll build out the CSS that will animate our card.

To make sure that this code triggers only on iOs devices, I used the following media query.

@media (max-width: 780px) and (-webkit-min-device-pixel-ratio: 1) { … }

This width setting should cover all iPads and iPhones, and -webkit-min-device-pixel-ratio ensures that only webkit devices with high pixel density (iPhones and iPads) will show the code. The greeting card we created for this email is square, and we want it to display at 600px wide. So we’ll set some styles for that first.

@media (max-width: 780px) and (-webkit-min-device-pixel-ratio: 1) {
	.card_holder {
		height:600px;
	}

	.card_container {
		height:600px;
	}

	/* front pane, placed above back */
	.front {
		z-index: 10;
		width:600px;
		height:600px;
		padding:0px;
		/* for firefox 31 */
		transform: rotateX(0deg);
	}

	/* back, initially hidden pane */
	.back {
		z-index: 5;
		width:600px;
		height:600px;
		padding:0px;
		transform: rotateX(180deg);
		-webkit-transform: rotateX(180deg);
	}

	.inside {
		z-index: -1;
		width:600px;
		height:600px;
		padding:0px;
		position: absolute;
		top: 0px;
		left: 0px;
		/* for firefox 31 */
	}
}

As you can see, we’ve set .back to transform: rotateX(180deg). This is what flips the back around so that it faces the inside of the card instead of facing out like a normal image would.

Because our flip_container also has the inside of the card in it we’ll need to position the whole container. Setting the perspective on this is what allows us to see the card opening outwards towards the user. This would flip the front of the card over, like the demo David created. To make the card open on a seam or hinge instead, we’ll change the width setting of the flip container to 0.

/* entire container, keeps perspective */
.flip-container {
	-webkit-perspective: 1000px;
	perspective: 1000px;
	z-index: 10;
	position: absolute;
	top: 0px;
	left: 0px;
width: 0px;
}

Then we’ll add the flip effect, which triggers on hover. For iOS devices, this will trigger on tap. We’re setting it to -180 degrees so that the card opens outward, towards the user. Otherwise the front of the card would seem to disappear into the inside of the card.

/* flip the pane when hovered */
.flip-container:hover .flipper {
	transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
}

Now we’ll add in some control over the speed of the card opening effect. Setting it to 2 seconds allows enough time for the user to see what’s going on.

/* flip speed goes here */
.flipper, .inside {
	transition: 2s;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	position: relative;
}

We’ll want to hide the back of the front and back containers, so that the “back” container can appear as the back (instead of the actual back of the front container, which is just white), and so on.

/* hide back of pane during swap */
.front, .back {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

And that’s our CSS! We should now have a working example that will “open” in iOS clients.

Building the Fallback

In order to send it out, we’ll want to build a fallback. This uses one of Justin Khoo’s excellent fallback strategies for interactive email. We’ll create another content block (shown by default) for users who can’t see the interactive part of this email. Because the card won’t make much sense without animation, we’ll just serve them a totally different image.

To hide the interactive section by default, I added a few different styles (for most email clients) and wrapped the container in a !mso conditional statement (just for Outlook).



...
<!--

Just a bit of added CSS will make this function properly. To our media query from above, we’ll add the following.

.kinetic {
	display:block !important;
	max-height:none !important;
	height:600px !important;
	width:0px !important;
	overflow:visible !important;
}
.fallback {
	display:none !important;
}

The kinetic styles override what we had been using to hide the content block, while the fallback style hides the fallback content. In this way, we can make sure that anything that triggers the media query that provides animation for the card also performs the show/hide function. Thus, the interactive version will only be shown in clients that support the interactivity.

Completed Code Sample

You can see the completed code sample below. You can send this to any iOS device to see the interactive behavior. If you modify the media query, you can also see this behavior in webkit browsers.





  
      
  <!--
  
  
    
  
  @media (max-width: 780px) and (-webkit-min-device-pixel-ratio: 1) {
    .card_holder {
      height:567px;
    }
    .card_container {
      height:567px;
    }
    /* entire container, keeps perspective */
    .flip-container {
      -webkit-perspective: 1000px;
      perspective: 1000px;
      z-index: 10;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 0px;
    }
    /* flip the pane when hovered */
    .flip-container:hover .flipper {
      transform: rotateY(-180deg);
      -webkit-transform: rotateY(-180deg);
      -ms-transform: rotateY(-180deg);
    }

    /* flip speed goes here */
    .flipper, .inside {
      transition: 2s;
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      position: relative;
    }

    /* hide back of pane during swap */
    .front, .back {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
    }

    /* front pane, placed above back */
    .front {
      z-index: 10;
      width:500px;
      height:567px;
      padding:0px;
      /* for firefox 31 */
      transform: rotateX(0deg);
    }

    /* back, initially hidden pane */
    .back {
      z-index: 5;
      width:500px;
      height:567px;
      padding:0px;
      transform: rotateX(180deg);
      -webkit-transform: rotateX(180deg);
    }

    .inside {
      z-index: -1;
      width:500px;
      height:567px;
      padding:0px;
      position: absolute;
      top: 0px;
      left: 0px;
      /* for firefox 31 */
    }

    .kinetic {
      display:block !important;
      max-height:none !important;
      height:567px !important;
      width:0px !important;
      overflow:visible !important;
    }
    .fallback {
      display:none !important;
    }
  }
  
  <!--


  
 
<!--

Taking it One Step Further

To really make our holiday card shine, we decided to add one more innovative element: personalized images. Inside each card, we included a message to the recipient that showed their name as part of the image. This enabled us to use custom fonts over an image background without needing to worry about VML or font support.

Keep an eye out for an upcoming blog about how we created the personalized images!

Don’t forget to test!

Interactive emails are lots of fun, but they can also create a complex set of code. Make sure you test your email thoroughly before sending it out, so that you can ensure fallbacks are functional and that it looks great on all clients.

We can help you test. Get over 70 previews in just one minute by testing with Email on Acid.


Using Pseudo Elements to Progressively Enhance Your Emails

What are Pseudo Elements?

In this post, we’ll be going through how we can use pseudo elements to progressively enhance our emails but, first, we’ll need to know what a pseudo element is. Pseudo elements are pieces of CSS code that are used to style specific parts of an HTML element.

They follow this basic syntax:

selector::pseudoelement {
    property: value;
}

We are going to focus on the four main pseudo elements available to us, we’ll be using each of these in this blog post:

  • first-letter
  • first-line
  • before
  • after

Where do Pseudo Elements work?

Before we go into some ideas of how we can enhance emails using these elements, we should look at where they will and won’t work. It’s important to always cross reference the support table with your own subscriber base and make sure your subscribers will see the effort you’re putting in.

Pseudo Element Support

Email Client Support
Apple Mail
Lotus Notes
Outlook 2003
Outlook 2007
Outlook 2010
Outlook 2011
Outlook 2013
Outlook 2016
Outlook 2013 Mac
Thunderbird
Android 4.4
Android 5.1
Android Gmail
Gmail App iOS
iPad
iPhone iOS
AOL
Gmail
Google Apps
Office 365
Outlook.com
Yahoo!

Beautiful buttons using ::after

We’re going to cover how to use pseudo elements to add a bit of extra interactivity to your buttons. Let’s start with the basic button code:

Read more

This will create a nice looking static button.

Now, let’s add our hover states:

.button-td:hover,
.button-a:hover {
    transition: all 300ms ease-in;
    background: #333333 !important;
    border-color: #333333 !important;
}

If you don’t know what’s going on here; we’re just telling the button when we hover over it, we want the background and border colour to change to #333333 with a transition time of 300 milliseconds. This will create this hover effect:

Time for the final step. We’re going to use the ::after element to add a final piece of interactivity.

.button-a:hover::after {
    content: " >>";
    font-size:13px;
    text-decoration: none;
    color:#ffffff;
}

Don’t let the code scare you, it’s very simple! We’re telling the button here that when we hover on it, we want to add content after the current link. We also need to style it.

This is the final outcome:

Beautiful typography with ::first-line

Now, let’s take a look at what we can do with the ::first-line element. If it wasn’t obvious, this element allows us to target only the first line of some text. This can be hugely advantageous as it will automatically adjust to the width of the first-line. Not quite sure what that means? All will be explained.

This is the effect we’re going to make.

For comparison, here is how it renders on mobile.

To achieve this, simply wrap your text in an element that can be targeted with pseudo-elements; in this case, we’ve wrapped it in a div with the class typography. We’ll then use this CSS to target the first line:

.typography::first-line {
    font-family:Georgia, serif;
    font-style:italic;
    font-size:24px;
    line-height:30px;
}

Hopefully now you can see the big advantage to this code. We have no need to use media queries to adjust it on mobile. All we’re doing here is targeting the first line of the div and applying these font styles that differentiate from the normal body copy.

Capture feedback in a fun way with ::after

Another fun idea to implement in your emails which we’ve seen a recent surge in is capturing feedback within the email. We’re going to do this in a fun way.

First off, we’re going to add three smileys; one happy, one indifferent, and one sad.

Please note; this is only the email code to make this work. You’ll still need a page to display a thank you message for capturing feedback. You’ll also need a method for tracking how often each of these options are clicked. My suggestion would be using a different tracked link for each reaction.

Next, we’re going to add some hover states to the smileys like so:

.icon1:hover::after{
  content: "Love it!";
}
.icon2:hover::after{
  content: "Meh!";
}
.icon3:hover::after{
  content: "Hate it!";
}

Similar to the code we used for the button above, we’re simply telling the icons that when a user hovers over them we want to add the content we’ve specified after the icons themselves. In this case, we’ve used descriptions of the smileys to remove any confusion.

The finished product looks like this;

As you can see, this is by no means completely polished! It’s more of a base to work on to get your creative juices flowing.

Adding consistent styling with ::first-letter

This one is a little more simple, we don’t rely on any special hover states. We’re simply adding a little something to give our subscribers a bit more a typographic look to the emails. This is what we’ll be creating.

Let’s dive straight into the code. Like I said, it’s super simple!

p::first-letter {
    font-family:Courier, serif;
    color:#007700;
    font-weight:bold;
    font-size:24px;
}

What we’re doing here is targeting every paragraph tag in the code. We’re telling it that we want the first letter of each paragraph to have the stylings we’ve assigned which, in this case, we’re changing to a serif font to add contrast with our sans-serif paragraphs. We’re also making it larger, colouring it and making it bold.

Final thoughts

I’d like to remind you again to check the support table above. Although this technique of coding has a lot of power, it isn’t supported in every client. Be careful to use it in a way that allows clients that don’t support Pseudo Elements to still render a fantastic email.

As with any new email development techniques you want to add to your toolbox, it’s extremely important to test. That’s where Email on Acid has you covered. We offer everything from email testing to email analytics, as well as a whole bunch of handy resources like coding tips and free templates. Sign up today and take your email game to the next level!


[Code Tutorial] How to build an Interactive Puzzle in Email

We sent out an interactive email promotion this week featuring a combination lock that got a lot of attention. The email was interactive in the majority of the Webkit email clients such as the iPhone, iPad and Apple Mail email clients. Recipients on other email clients saw a static image that linked to the Web version of the interactive email.

Before we dive into how the email was implemented check out the live version of the email:

Live version of the email.

Combination Puzzle

You might have seen those word combination locks like the Wordlock bicycle lock. I thought it would be cool to implement such a scheme in an email that allows the recipient to “unlock” an offer.

In the email, a Call To Action link is displayed that takes the recipient to a landing page with a coupon once the recipient sets the four letter combination to “ACID”.

Radio Buttons and Labels

The implementation for such a scheme is pretty straightforward: Four containers – each with four labels that target a unique radio input element. For each box, only one label would be visible at a time and clicking or tapping the label would toggle its radio input that will cause the next label to be displayed.

The following animation shows the state of the radio elements as each label is clicked.

The CSS to display the label keyed to a particular radio element is below:

 label{
  display:none;
}
#key1a:checked ~ .kinetic .box1 label:nth-child(2){
    display:block;
  }
 #key1b:checked ~ .kinetic .box1 label:nth-child(3){
    display:block;
  }
 #key1c:checked ~ .kinetic .box1 label:nth-child(4){
    display:block;
  }
 #key1d:checked ~ .kinetic .box1 label:nth-child(1){
    display:block;
 }

View the live version of the code above here.

The following graphic shows the state of the radio elements when the recipient has successfully solved the code.

The winning call to action button is initially hidden and only displayed when the right combination has been selected. In this case, the code looks like the example below:

 #key1c:checked ~ #key2b:checked ~ #key3c:checked ~ #key4b:checked ~ .kinetic .win-wrapper{
  display:block;
}

In the actual example, I added a blocker layer that appears above the letters to prevent the recipient from continuing to play with the code once the correct code is displayed. After all, the goal is to get the recipient to actually click on the call to action!

The email also contains easter egg hints. When the recipient uncovers words that aren’t the solution, such as the combination of “G E E K,” these hints are implemented the same way.

Switching Background Scenes

To make the email more interesting, the background of the email changes as the recipient clicks on more boxes. We want the background to change based on the number of boxes changed from its original state, but not in any particular order.

This is done by using the using the venerable attribute selector.

In our example, the “default” key is “X” in each of the four boxes and they are displayed when the radio elements with the ids that end with ‘d’ (key1d, key2d, key3d, key4d) are checked.

So, an attribute selector like the one below will cause an element to be displayed when one box has been changed (i.e. three boxes are still in their default position).

  input[id$=d]:checked ~ input[id$=d]:checked ~ input[id$=d]:checked ~ .kinetic  .foo{
    display:block;
 }

However, the above CSS will also be active when all four boxes are in their default position. So, we need to add a selector to specifically hide the element when four boxes are in their default position.

  input[id$=d]:checked ~ input[id$=d]:checked ~ input[id$=d]:checked ~ input[id$=d]:checked ~ .kinetic  .foo{
    display:none;
 }

You can dive into the source of the code to see how each scene is implemented. When chaining CSS selectors, you should familiarize yourself with CSS specificity rules and this article on CSS Tricks has a good primer on it.

Fallback

Although the email can be somewhat “hacked” to support a broader range of email clients, we made the decision to only support Webkit based email clients that support the :checked CSS selector.

The email by default displays a fallback image with a link to the Web version so recipients who aren’t on a Webkit client can experience the puzzle on a regular browser. Then the following code is added to display the interactive content in Webkit clients that support checkboxes.

     @media screen and (-webkit-min-device-pixel-ratio: 0) {
        .cbox:checked + .fallback-wrapper {
            display:none!important;
        }
        .cbox:checked + .kinetic-wrapper{
            display:block!important;
            max-height:none !important;
        }
        /* 
        Selective blocking for clients.
        - Samsung (#MessageViewBody) - no absolute positioning
        - Comcast/Zimbra (body.MsgBody) - inconsistent CSS support
        - Add .cbox to ensure CSS specificity weight exceeds earlier block
        */
        #MessageViewBody .cbox + .fallback-wrapper,
        body.MsgBody .cbox + .fallback-wrapper{ 
          display:block!important; 
        }
        #MessageViewBody .cbox + .kinetic-wrapper,
        body.MsgBody .cbox + .kinetic-wrapper{
          display:none !important;
        }
    }

Read this article for more interactive email fallback strategies.

Other Goodies

There are too many techniques used in this email to list in this article, so I’ve added comments in the source to help bring some light into how some of the techniques are implemented. Feel free to download the code and take it apart.

Live version of the email 

As usual, when creating interactive email campaigns, testing on all the major email clients is super important to the success of your campaign. Get unlimited email and image testing, free for 7 days, so you can send with 100% confidence.


Nate Webmail Testing: What You Need to Know

Nate is a Web portal in South Korea featuring a wide variety services including email. In 2003, they acquired social media website CyWorld and the following year they surpassed their rival Duam by achieving 3.8 million local page views.

In this post, we’ll be examining how well Nate supports common HTML and CSS elements in email. If you need to see how your email looks in Nate, try our email testing platform! Email on Acid proudly supports email testing in this client.

The bottom line? Nate has amazing support for common email HTML and CSS!

The Good

We tested a set of common HTML elements and CSS styles to see how well supported they are.

Headers and Paragraphs

Accessibility is a hot topic in the email development world, with good reason, and semantic HTML markup is key to good accessibility. Good news here as Nate will render both heading and paragraph tags.

Header

paragraph

Padding

Like a good number of webmail clients, I found Nate to have support for all the usual padding methods. I tested the following code.

padding: 20px;
padding-left: 20px;    
padding-right: 20px;    
padding-top:20px;    
padding-bottom: 20px;    
padding: 20px 0px 20px 0px;

Borders

Nate has good support for borders, including stylised borders such as dashed or dotted borders.

border: 5px solid #ff0000;
Border-radius: 5px;

A fun little element to use in email, border-radius enables us to use rounded corners without images. Nate will also render dashed and dotted borders.

Font and Text styles

I found Nate to support all our common text and font options with the following code.

font-size: 14px;    
font-family: sans-serif;    
line-height: 16px;

Animated GIFs

I’m very happy to say animated GIFs will render fully in Nate.

Box Shadows

A fun little way of progressively enhancing your emails, Nate will support box shadows.

box-shadow: 10px 10px 5px #888888;

Backgrounds

Background colours also render well in the Nate webmail. In terms of adding colour you have the freedom to do it with either HTML attributes or inline CSS.

HTML: background="#ff0000"  
CSS: background-color: #ff0000;

I’m also happy to report that background images will work in Nate, however you will have to use HTML attribute backgrounds, rather than CSS to achieve this.

background="images/image.jpg"

Max-width

A requirement of a fluid-hybrid layout, max-width will work within Nate!

max-width: 600px !important;

Lists

I found that both ordered and unordered lists work.

      Style

      Good news to report on this! Nate breaks the pattern of many webmail clients by supporting tags in the head of your email.

      Nate Support

      Element/Style Support
      in head
      in body
      CSS Selectors
      classes
      ids
      padding
      margin
      border-radius
      border
      line-height
      font-family
      font-size
      max-width
      Animated GIFs

      CSS inline background
      HTML attribute background

      Closing words

      Overall Nate is one of the best email clients we’ve tested in this series. Unlike many others who fall at the hurdle of stripping styles, Nate will allow you to control the style of your email through embedded style sheets.

      It’s important to test emails constantly, we never know when an email client will change how it handles code. Nate is included in our suite of email clients to test on, so if you’re sending email to South Korean recipients, we’ve got you covered!