My name is Aaron Pearson. I am a product manager, graphic designer and responsive expert at Listrak. I geek out about email, responsive design, data, UI/UX, and content strategy.
Netflix just announced Marvel’s Punisher with an awesome email and animated gif. Great use of animation to deliver a surprise.
Outlook Animated Fallback
We know that Outlook inboxes will only show the first frame of the animation. Animated gifs will often include .01 seconds of the final frame first, which won’t be noticeable, but will act as a fallback if the inbox doesn’t display the animation. Netflix chose to stick with the “warning message” instead of displaying the final punishing blow. Do you think those users will be concerned about this “strange behavior”? Which first frame would you choose, A or B?
Designed a poster and tshirt for Meals On Wheels of Lancaster. I actually based the design on an illustration I did as a kid of the Pennsylvania landscape. I was about 6 years old. Awesome to reuse it years later!
My favorite iOS 10 update, is the ability to search contacts by emoji. I like to label my contacts with an emoji based on how I know them, for example soccer ball, email for work, music, etc. Contacts now let's you search for contacts with emojis in their name. I don't know why you couldn't do this before. My suggestion, categorize your contacts with emojis.
Apple is currently beta testing the iOS 10 software update that will be rolling out soon to iPhone and iPad, and a few changes have been noted that will have an impact on email marketers and subscribers.
One-Click Unsubscribe
The most noticeable change is an unsubscribe banner that will now appear at the top of marketing emails.
Years ago, Gmail added an unsubscribe link in webmail and people freaked out. It's somewhat of a positive thing, because it provides users the ability to unsub rather than mark as spam, which can happen often. If someone wants to unsub, at least they won't mark it as spam and harm your reputation. This could also help to organically clean your list of non-engaged subscribers.
It's also a bummer because it's placed in the best real estate of the email.. the top, which will take away from the available space for the content of your message. The first impression of your email will be important to get your readers attention. Make sure your subject line and preheader text are engaging and relevant with the content of your message. Remove unnecessary content from the top of your email such as navigation, social, contact information, etc, and get right to the point. Your main message and main call-to-action paired with a relevant subject line and preheader text will provide the best experience for an opener.
Video is back
I didn't add an exclamation point after the title, because while it's cool that video is back, it's still rather unsupported across all inboxes and difficult to setup. The <video> tag used to be available in iOS, but Apple removed it for the past few versions. Now it's back. What do you think? Is this something you'd like to know more about? Let us know.
Remove Apple apps
On the last page of apps on my iPhone you'll find a folder called Junk. I plan on removing Maps, Weather, Tips, Watch, Health, and Contacts (because why does this exist in two places!?). Point is, Apple will let you remove unwanted preinstalled Apple apps. It will be possible for users to remove the native Mail app, which may attract users to seek out other mail apps. The Apple Mail app has been known to have good support for responsive design, so it's important that your emails be optimized for mobile to account for the varying support of other third-party mail apps.
Make sure to take a look at the device usage of your subscribers to find out who will be impacted by these changes. iPhone remains the most popular device for opening emails, so consider optimizing your emails for the best experience.
Gmail just announced that it will be adding support for responsive email by the end of the month. Email geeks world-wide go nuts! It's pretty incredible. One minute you're struggling to get your hybrid fluid email hacks to render, and out of nowhere, Gmail releases this update like no biggie:
“Starting later this month, Gmail and Inbox by Gmail will support emails created with responsive design, meaning their content adapts to fit screens of all sizes.”
There is a ton of buzz about this update. It will certainly be a game changer. So what does it mean?
Media query support
Of course, the huge news is that Gmail will be supporting media query styles in the head stylesheet. Media queries allow you to add styles specific to a device width or screen size, giving you control over the desktop and mobile experience. Having this extra control is crucial in delivering the best experience to readers on any screen.
Inline no more
In the past, Gmail would strip out the css styles found in the head of your email, forcing email developers to add styles inline. Every table, table cell, and image would have redundant styles added inline throughout the email to ensure that it rendered correctly in Gmail. All other major inboxes already support head stylesheets, and with Gmail being the last remaining holdout, inline no more. This will drastically reduce the time to code and edit emails as well as the file size of the email, by reducing redundant code.
CSS support
Gmail has also provided a great resource (the first of it's kind for an inbox), which gives support and guidelines for development of email. By the looks of it, their hope for the future is to allow a web-based approach to coding emails, free from table layouts. However, tables are still required for Outlook to render correctly, so we can only hope this means email standards will continue to make progress towards a brighter future of email development.
Keep an eye out for more updates about Gmail and training to help make the transition to responsive and non-inlined email development.
Litmus is now the governing body of the email design community
What impact does the recent partnership between Litmus and Microsoft Outlook have on the email community? What could it mean for the tech community?
At this year’s Email Design Conference, Litmus and Microsoft Outlook announced a partnership to work together to improve the rendering support of Outlook email clients. A direct feedback loop will be created to allow Litmus users to submit a ticket about rendering issues discovered in Outlook clients.
It’s not easy to get the attention of a tech giant like Microsoft, but what took them so long to hear our complaints?
Let’s face it, more than 1.2 billion people use Microsoft Outlook in 140 countries and 107 languages around the world. Source: Microsoft
One can only assume the mass of emails sent through Outlook consist mostly of plain text, styled with Word, vs our beloved html. Even then, the recipients of our emails are completely naive to our struggles. So how many complaints could Outlook possibly be receiving from users like.. my mom, about their poorly rendered email from [enter brand name here]? I would be surprised if there is even 1.
If a subscriber wants to complain about their poorly rendered email, who’s to blame? From their perspective it’s not the email client, or the ESP, or the developer. It’s the brand.
If we want change, we need a representative.
Litmus has given the email community a voice. For a software company like Microsoft, it’s a huge value to have direct feedback from the source. The tech world can hopefully learn from this and investigate ways to partner with service providers to solicit feedback from users. We can only hope Litmus will continue to find ways to partner with other email clients and give direct access for our community to push for standards in email.
So, by the power vested in me, I hereby nominate Litmus as our representative in the fight for better email. If you know School House Rock, sing it with me!
“We the people of the email design community, in order to form more perfect emails, establish standards, insure domestic sanity, provide for the common developer, promote best practices, and secure the best experience to ourselves and our subscribers, do ordain and establish this partnership between Litmus and Microsoft Outlook.”
If you’re like me, you have about 20 tabs open at all times with all the blogs you want to read. I have a Pocket account, and an Evernote account, and I add articles to both of them that I want to read, and I always forget..
So, in an effort to close some tabs, I’m just going to post all the blogs I currently want to read right.. here.
When you look at the steady increase in mobile email opens over the past few years, it’s really no surprise that optimizing for mobile has an impact on user engagement. Users have a tiny computer in their pockets all day, every day. Of course they’re going to be opening emails on their phones. And the content we display on these tiny screens needs to be easy to digest and interact with. It’s becoming more difficult in 2016 for marketers to ignore this fact. As the mobile web becomes more savvy, and the email community gets better at adapting to the changing landscape of inboxes and devices, users will follow suit and continue to not surprise us with how often they are willing to take a trip to the inbox.
“Mobile first” is going to mean something different for everyone depending on technical ability. While an email developer would look at this as an opportunity to code a fluid or hybrid responsive email, some marketers are still coming to terms with simplifying their copy, buttons, and images to deliver a better mobile experience. In both cases, email marketers are headed in the right direction. Whatever you can do to more effectively engage your mobile audience is thinking “mobile first”. What limitations exist in terms of screen size, download speeds, time, and conversion, and how can that be improved?
For companies just starting to put a mobile strategy together, simplifying is key. Simplify your template and layout, simplify your content such as copy, buttons, and images. A mobile optimized template doesn’t necessarily have to be responsive, so don’t worry about spending time developing a hugely complex system to deliver content to your subscribers. Instead, focus on iterating your content strategy and begin to improve the conversation with your audience. If you already have a mobile email strategy in place, take a look at the performance of your emails and begin to improve upon it. Perhaps it’s worth investing in a responsive template. Take a look at other channels your users may be engaging with through email and begin to optimize the entire customer journey, such as landing pages, checkout, acquisition, and even in-store.
I’ve seen companies send out variations of their marketing emails over the course of a few weeks or months as they test and improve their strategy. Sometimes it’s optimizing their navigation bars to include less links or even no nav at all, or adjusting the email layout to a simpler one-column approach with larger product images and call-to-action buttons. The most memorable email I received was an email from Noodles & Company that was only 480px wide, taking the “mobile first” approach quite literally. I assumed they probably didn’t have a developer on staff capable of coding responsive emails, but they still understand the importance of testing what impact mobile optimization will have on their subscribers.
The most common misconception has to be that it’s not important to have a mobile strategy. From 2011 to 2012, mobile email opens jumped from a mere 8% to 34%. Year over year that line continues to increase. In 2016, mobile accounts for 55% of email opens. With the ease of access to the mobile web, users are becoming more and more likely to engage with brands through the mobile channel.
Email development can be hard to get right! Even for veteran email developers and web jedi, the rendering limitations of inboxes have created a disturbance in the force. I just saw the new Star Wars, so bear with me. No spoilers, I promise.
Even with the multitude of limitations, 2015 was a great year for email! We saw some of the most creative solutions and improvements that really pushed the boundaries of what we thought emails could do.
Pret gave us this refreshing, interactive smoothie email.
Litmus got everyone talking with a live Twitter feed in email.
Mark Robbins, from RebelMail, used punch card coding to create a live email shopping cart and checkout experience.
These are all amazing, impressive examples of what is possible, but lightyears beyond what most email padawans are capable of. Yet, there are several techniques and philosophies that each of these emails use that email marketers can begin implementing, even with limited development resources.
Two sides of the Force
Two perspectives of developing email that come from the web development world are progressive enhancement and graceful degradation.
Progressive enhancement is developing for the least common denominator or least supported inbox. Sometimes we call this "Outlook first", since Outlook is often the most difficult to support. Once the email is well supported in all inboxes, you can enhance features and functionality with custom styles that will be supported in advanced inboxes.
Graceful degradation focuses on developing for the most advanced/capable inboxes, forcing “older” or less capable inbox users to just deal with it. Depending on your audience, usually the majority of users are opening in well-supported inboxes.
Typically, because of the vast differences of rendering support for email inboxes, a combination of both methods will work for different scenarios.
Email Client Market Share
It's important to know your audience and to understand the limitations and capabilities of the inboxes they are using.
As of December 2015, 50% of email opens are occurring on Apple devices, between iPhone, iPad, and Apple Mail. This gives us "A New Hope" for the future of email, as these inboxes offer us the most support for future forward coding practices and support for CSS3 and HTML5.
Source
“Do or do not, there is no try.” - Yoda
Clearly, Yoda never tried to develop an email, or his quote would have been more like:
Even Pret’s interactive smoothie email has a great static fallback design for inboxes with minimal support for interactivity.
Let's take a look at one example that shows the use of graceful degradation and progressive enhancement, as well as best practices for user experience.
Bulletproof buttons is the common term for creating call-to-action buttons in email. It's nearly impossible to have them render consistently across inboxes, so we had to add "bulletproof" to let everyone know, it's okay that they don't look the same everywhere. Form follows function. In other words, it just needs to be clickable!
It's easy to see how styles gracefully degrade in inboxes with limited support. Custom styles like box-shadow, border-radius, and background gradients slowly lose support in Gmail, Yahoo, and Outlook. However, the functionality still exists.
The best example of progressive enhancement in email development is responsive design, which we don't often think of in that way. The fact is, media queries are not supported in all inboxes, so it's important to consider the fallback state of emails viewed on mobile devices.
In a few short steps, let's make our button full width and increase the font size to make a more thumb-friendly button.
Add a media query into the embedded style sheet in the head of the document. This media query will trigger the styles associated with the classes when the viewport hits 414px.
@media only screen and (max-width : 414px) { .full-width {width: 100%;} .larger-text {font-size: 16px !important;} }
Finally, add the “full-width” class to the wrapping table and link, and include the “larger-text” class on the link.
The most beneficial reasons for using bulletproof buttons rather than an image, are the ability to enhance styles on mobile, load time, and also provide the best experience for users when images are turned off. It's generally a sight for sore eyes when an image heavy email loads with images turned off. Consider "images off mode" as a rendering support limitation for those inboxes. It's probably best if this isn't a user's first impression..
Surprisingly, a high number of email users still view emails with images turned off. Once Gmail began caching and loading images automatically, we learned that about 43% of users were reading emails with images turned off. I've seen my mom do it. The problem is real.
Light Side vs Dark Side
There are pros and cons to developing emails with progressive enhancement. It requires more planning and development time, and segments your audience by delivering a different experience. But sometimes different is unique and that can be a good thing.
Here is what Litmus had to say about their live Twitter feed:
“We were blown away by the results from this campaign! Over 53% of our opens came in a WebKit email client, so many of our users saw the progressively enhanced version. In total, there were 750+ tweets about #TEDC15 in the first 24 hours after sending the email. Additionally, the email helped drive over 4,000 new visitors to our website and generated over 1,000 new prospects in that same amount of time! Not to mention, this email saw the best engagement we’ve seen from any email we’ve ever sent—almost 60% of users viewed the email for over 18 seconds!“
Use the Force
Give it a try the next time you start developing an email. Think about how your email gracefully degrades and what enhancements you can style to better engage your audience.
Here is my favorite progressively enhanced email, and the fallback for unsupported inboxes.
Come join me in New York City on February 2 and Southern California on February 11 for a showcase of great emails from 2015. I’ll share some additional insight about the overall email audience and market share from the past year and examples of campaigns and tactics to try in 2016. This event is open to retailers and I can offer you a discounted pass using code “Listrak50” at checkout. In the meantime, let me know if you have any questions!
What email marketers and designers need to know about iPhone 6s and iOS9
Every designer loves to be asked the age old cliché, “Can you make it pop”? Thanks to Apple, now we can make your emails Peek & Pop!
iPhone 6s has some fancy new features that are getting email marketers a little worked up. It’s certainly not something to ignore, but I think we’ve done a pretty good job in preparing for this. Let’s take a look at some of these new features and find out how they will impact our inboxes.
The big kicker is the new gesture called ‘Peek and Pop’ -- a 3D touch feature that functions as a “right-click” for mobile devices.
3D Touch helps you get through the email in your inbox more quickly and efficiently. To Peek at a message, just press it lightly.
The content of the email appears on top of your inbox. If it’s a short message and a Peek is all you need, simply stop pressing and you’re back in your inbox.
If you want more than a Peek, press a little more deeply to Pop into the message for a full view — just as if you’d tapped to open it from your inbox.
There are a few concerns with this new ability to preview messages in your inbox. Is it going to count as an open? How will it affect engagement? Will responsive design impact engagement? Does this reintroduce the fold to emails? Is anyone even going to use this new feature???
An open by any other method is still an open.
Opens are collected when images are downloaded in a message, which triggers the download of an image tracking pixel. This varies across inboxes and devices because some inboxes force the user to agree to download images first. You may recall Gmail updating in 2013 to download images automatically without consent from the user. iPhone has long been known to perform the same way.
Since the Peek preview is downloading images, we will be tracking this as an open. #quickwin
However, what is different about this open? The way users are engaging with this preview is probably more of the focus for concern. I’ll quote one of my past blog posts:
“The life span of a subject line and preheader are measurable by one statistic, open rate. Subscribers only spend about 3-4 seconds reading the description of your email in an inbox. We need to grab their attention and interest immediately.”
It’s true. We really do need to grab their attention immediately. We don’t spend a lot of time pondering over emails (unless you’re an email design geek). Subject lines and preheaders will still be the key to getting an open or a Peek. #quickwin
The Peek.
The Peek preview is not scrollable so it will only show the top section of the email. With only 3-4 seconds of undivided attention on each message, it’s easy to swipe left and delete. Oh yeah, I forgot to mention that…
Take control of your email with a press and a swipe. While you’re taking a Peek at an email, you can swipe left to delete it or swipe right to mark it as unread.
What does that mean for designers?
Enjoy some technical specs, or just skip ahead and get to the important stuff:
iPhone 6s
Retina HD display with 3D Touch
4.7-inch (diagonal) LED-backlit widescreen
1334-by-750-pixel resolution at 326 ppi
1400:1 contrast ratio (typical)
Peek preview: 1050-by-710 pixel at 326 ppi
iPhone 6s Plus
Retina HD display with 3D Touch
5.5-inch (diagonal) LED-backlit widescreen
1920-by-1080-pixel resolution at 401 ppi
1300:1 contrast ratio (typical)
Peek preview: 1510-by-1020 pixel at 401 ppi
The important stuff
At a standard web pixel density of 72 ppi, the preview will show about 380 pixels of the top of the email. If you design at 2x for retina then do the math and you’ll get 760px.
Try these #quickwins
Peek preview changes the way recipients engage with the email initially. You have to be strategic with the limited amount of real estate you have. How do you get the most value out of 380px of space? Since you can’t click-through in Peek view, a call to action “above the fold” or “within the preview” isn’t going to provide a lot of value from a functionality standpoint. Remember, the goal is to get the user to Peek and then Pop. Then you can work on your content strategy and test engagement.
Knowing your audience is important, so always be sure to check if the demographic of iPhone 6s users is important to your brand. Whether you have an active iPhone 6s audience or not, the following are quick design suggestions to implement into your mobile email strategy.
Design your logo at a reasonable size. “Make my logo bigger” is not a good strategy for mobile optimized email.
Remove navigation and other unnecessary information from the top of the email, such as preheader and view in browser links.
Clearly state the purpose of the email in the hero graphic, headline and body copy.
Organize your content by placing the most valuable information near the top.
Continue to write awesome subject lines and preheader text.
As of September 2015, iPhone accounts for 30% of all email opens, but we’re only talking about a portion of the market share who will be upgrading to the new iPhone 6s. A breakdown does show that the newest model typically holds the largest number of users. Will users be using this feature? A quick poll around the office tells me that a lot of avid iPhone users do not think they would use this new feature. My experience so far has been: it’s quick for personal emails, but marketing emails still need to get me at the subject and preheader.
The email world has been scrambling to learn the impact that Apple Watch will have on emails. We’ve kept up on some recent findings from around the email community, and decided on a course of action for our emails. Here’s the lowdown on this new gadget.
Get Used to Plain Text
The first thing you’ll notice is that Apple Watch isn’t going to load your nicely designed, html email. When the watch detects any image it will skip the html file and instead jump to the plain text version.
Tracking Opens
The most frustrating feature that will not be supported is the ability to track opens. Opens are tracked when images are loaded within an email. Since the watch will not load inline images, an open can’t be tracked.
Plain Text Best Practices
Listrak gives the option to add a plain text version of your message from the New Message page. While it has always been considered a best practice to use this feature, Apple Watch makes it more of a necessity.
Some more limitations of the watch have forced us to look at plain text in a new way. Some marketers try to replicate all of the content in their plain text message, including links. Apple Watch doesn’t have a browser, so links become greyed out and unusable. Only phone numbers, dates, and addresses will link to the corresponding apps on the watch.
This shift in mentality will force email marketers to get creative with their plain text. It’s best to think of plain text as a way to get the attention of your customers, not to engage them directly. Focus on the most relevant content and place an emphasis on a call to action that drives your customers to open the email on an html supported device.
“Get 10% off. See your coupon code when you view this email on an html support device.”
“The full version of this message isn’t available on Apple Watch. But you can read it on your computer or mobile device.”
Subject line and preheader text are now more important than ever. Both are still visible on the watch’s inbox. Keep your subject line to a minimum length and add urgency to remind the reader to check when they have another device available.
Avoid using unnecessary special characters to add breaks in content within the plain text. Too many line breaks make it difficult to read the message.
It’s always a good idea to use plain text whether you’re concerned with supporting Apple Watch or not. Several other devices will only display plain text as well, such as Blackberry phones. Many inboxes give users the option to view plain text by default. This is preferred by some readers. Also, SPAM filters often check to make sure a plain text version of the email is included. Without it, some deliverability issues can occur.
Apple Watch may be a step back in rendering support for our emails, but it’s a good reminder to setup plain text and consider the importance of our main calls to action.
So much of our time and energy spent creating emails is focused on the content and design, or delivering personalized messages through automation. It’s easy to forget that a lot of our subscribers we’re creating content for are not seeing our amazing work.
It all starts in the inbox, which we may be ignoring.
Every email client is a little different, but generally you’ll have:
From Name
Subject Line
Preheader
From name for your marketing emails should be your company name, not “Jake from State Farm”, unless you have had personal contact with that person. That’s where personalization comes in. Keep it simple.
Subject line is the original-flavor best practice split test. Marketers know that subject lines drive open rates. Take advantage of split testing subject lines. Try different approaches to phrasing the subject line, such as informative vs asking a question, hard sell vs soft sell, and direct vs open ended. You may need to create a sense of urgency, or spark some curiosity.
Show me what you’re working with!
Every inbox is going to differ in the number of characters you have to work with. A good baseline to start with is iPhone, which will show about 35-40 characters of your subject line. Mobile open rates are on the rise, surpassing desktop and web, so curating your subject lines for your mobile audience is a good place to start.
Here’s what I’m really trying to get at:
Preheader is a bit of a wildcard that seems to be misunderstood and misused, but can be every bit as useful as subject line. In fact, by default, iPhone shows between 70 and 80 characters for a preheader, and can be increased to add more lines in phone settings. With more room to work with, why aren’t more marketers taking advantage of this?
You know what really grinds my gears…
A preheader that reads “Can’t see images? Click here to view in browser” does not offer any helpful information about what might be found in the email. How often do you see that line in your inbox? Far too often! It’s a wasted opportunity to nudge the subscriber into opening your message.
The life span of a subject line and preheader are measurable by one statistic, open rate. Subscribers only spend about 3-4 seconds reading the description of your email in an inbox. We need to grab their attention and interest immediately. The preheader should support the subject line and summarize what content can be found in the message. Here are a few good examples.
In the case of the Jack Spade email, the preheader is just the hero copy. Well written, but very literally what you can expect to find in the email.
Repeating is repetitive.
Preheader should always support the subject line, and essentially summarize the content of the message. Avoid repeating the subject line. It won’t help a reader to feed them the same line twice.
Where does the preheader come from?
The first line of copy in an email will be pulled by the email client for use in the inbox. This is why the “view in browser” link is so often found in the inbox, because it is placed at the top of the message.
It’s not necessary that the preheader is visible in the message itself, as its purpose is to attract a subscriber to click to open. After all, you won’t find the subject line at the top of every message. It can be hidden on both the desktop or mobile view, and will still be pulled by the inbox.
2 things to watch out for:
Always remember to include a plain text version of your email. In a few inboxes, when opened on mobile devices, the first line of copy from the plain text will be used as the preheader in the inbox.
Depending on the layout of your message, sometimes the logo or other content will be displayed before the preheader, especially if it’s aligned to the right of your layout. You can create this effect by coding a table structure with an aligned right table first in your code that contains the preheader, followed by an aligned left table that contains the logo or other content. This ensures the preheader is still the first line of copy in the code.
Test, test, test!
Subject and preheader testing are very simple to do with a simple A/B split. They can easily be measured by open rate. Test the impact of a message with and without preheader, or the phrasing you decided to use to engage the reader.
I got an email in my inbox this evening from Neflix that definitely caught my eye. What does this email have going for it?
The animated gif hero image is subtle, but it's a quick attention grabber.
The email is optimized for mobile devices. The design is a simple, single column layout, which is a nice fallback if the device or inbox doesn't support media queries.
It's not bogged down with promos for other shows or movies from Netlix. There is a single, large button that links to the trailer.
It happens to be a show I'm a fan of.. so that's a plus!
PLAY TRAILER
startafoodfight @startafoodfight - Tumblr Blog | Tumgag
