Introducing Passport: Your Entry To A New World Of Email Design

There’s nothing that frustrates us more than seeing a beautifully crafted email render properly on some screens, but not others. Over the past few months, the Mailjet team has been hard at work creating a new tool that makes responsive email design possible for anyone. Introducing Passport, your tool to a bigger, better world of email design.

Passport is an online tool that includes an easily accessible WYSIWYG editor and powerful HTML editor to fit your needs, no matter where your design experience lies. Spend less time executing and more time strategizing – Passport is powered by Javascript library React.JS, allowing you to edit content in mach speed. Passport also gives you access to Mailjet’s suite of testing features, such as A/X testing, Campaign Comparison and more.

Drag, drop as your imagination leads

Choose from Mailjet’s growing library of pre-made templates. Easily customize color palette and layout, add personalization blocks to address your customer by name, refer to a previous order and more. Create a branded email with a few clicks and no limitations.

More advanced users can even inject custom-coded sections with an HTML block. Save even more time by saving your work as a custom template in your own library, to be re-used for future sends.

Drag'n'drop

HTML, in real-time

Never second guess your code again. Passport’s HTML editor has a real-time preview that allows you to know what your code looks like before it lands in the inbox.

CodePreview

 

Visualize your destination

Rest easy knowing that your content looks great across mobile, tablet, desktop and laptop. Get a sneak peek of how your email renders before you hit send.

Preview

 

Hop on over here to check out Passport and try it out today.

 

Inbox Out: Pixar-Inspired Emotions That Power Marketing

qbQ4wNN9rlz2VF39R0kLhLhEzWP-4ZTm8_AXSRfBWGM
 

We all carry around a box of emotions. It sits patiently in a server somewhere with dozens of messages waiting to be answered. An overdue bill, 50% off clearance sale, pending friend request – you’ve got mail.

Inspired by Pixar’s upcoming animated film Inside Out, we’re venturing into the mind of the average consumer (that’s you and me!) for a tour of their emotions from the inbox out. For decades, social psychologists have acknowledged that there are six basic emotions that imagery–including marketing–can evoke in people. It’s no coincidence that these emotions are more or less the main emotional characters in the film. This got us thinking: what are some other emotions frequently experienced as a result of marketing and what would they look like? We consulted Professor Sudio Sudarsan of Hult International Business School to explore 5 new “cousins” in the emotional family: Curiosity, Nostalgia, Boredom, Annoyance and Astonishment.

FiswhdfoQTIsCuOj9M4hRENudcFW4iNzFTCbpdTJgcg
 

The sun’s just rising. Fresh mind and coffee in hand, Curiosity comes to the forefront as you first open your inbox. Waiting are events that have developed the night before. Each new subject line is an opportunity to discover a new product, to learn or to change up your current routine.

In an increasingly noisy digital world, Curiosity is one of the most powerful tools for a marketer. “Curiosity is a primal human emotion, a holy dopaminergic craving… an eccentric mental itch.” says Professor Sudarsan. “Literature in psychology has shown that curiosity is an expresso shot of intrinsic motivation… to explore, learn or create. At a social level, curiosity suffuses passion and energy to fortify interpersonal relationships and to enhance social interactions.”

Let’s take a look at this email from 5by. The subject line reads “If you watch one video this weekend, make it this one”, with follow-up copy in the header that says “This might be the best magic you’ve ever seen” and “Your move, David Blaine”. Each line of copy is carefully layered to drive hype and suspense. 5by serves just enough information to whet the consumer’s palate and inform them that there’s a magic trick involved, while reserving just enough to drive the recipient to click through.

Nostalgia_Poster
 

“You’ve Got Mail!”, your computer belts as you’re browsing the web. The AOL inspired Google Chrome add-on has been making the news lately, because who doesn’t love a little walk down memory lane? Since millennials now account for 21 – 25% of consumer purchases, 90’s references have been increasingly prevalent in the consumer scene.

Professor Sudarsan says, “Nostalgia is a compound of two Greek terms: nostos (returning home) and algos (pain due to yearning); coined by a Swiss medical doctor at the end of 17th century referencing Swiss mercenary soldiers. Recent studies elucidate how nostalgia dynamically functions as a catalyst to restore positive affect and feelings of affiliation, amplifying explicit self-esteem, and in some cases enhances creativity.”

Additional research shows that these feelings make people value money less, causing them to spend more. This warm and fuzzy feeling is especially powerful because it’s easy to pinpoint and personalize. Each generation has very specific pop culture references. In fact, through social media, it’s even easier to nail down the ebb and flow of trends.

UK based vintage furniture and hardware store Rose & Grey, sent an email for Mother’s Day with an image of a faded family photograph. Not only is the old school photograph on brand, it also hits home, with reasons to be thankful for mom. Nostalgia is incredibly powerful here, because how can you put a price tag on family memories?

0bOwtZPtY-MAHNLT0QP_xsX1vNMoJYnmII5AiSzmEWQ
 

50 new emails later, your inbox is saturated with subject lines like “Just for You!”, “ Don’t miss out…” or “Surprise!”. Should you claim the buy one get one free or the 30% off $150 offer? Too many choices can be overwhelming.

Opposite to Nostalgia, Boredom results from lack of novelty. As a marketer, it’s important to be selective in choosing which trends to follow. Research shows that too much choice can actually lead people to take less positive risks.

“The hurly-burly boredom encountered every day is both anaffective and a volitional state that thwarts desire, kills motivation, and disrupts free will all at the same time that it is often described as a plague of the postmodern world. Its prevalence [is] estimated between 20% and 50% of population…” explains Professor Sudarsan.

Avoiding Boredom is a delicate balance of delivering content and design that the consumer knows how to engage with, but is unique enough that it plays on other emotions such as Curiosity.

qtVs95iEQ2TEqWTdNH2E0I6TIKy3sa7bO9I5-TBZoTk
 

“Ugh! Three emails in one day? And I have no use for this product. Why are they messaging me?” Buried in an inbox of unread emails, most of which you can’t relate to, Boredom’s older sibling Annoyance kicks in.

Professor Sudarsan comments that “Previous neurophysiological studies of emotion inform that annoyance as an emotional valence can occur due to one’s own failure… toward specific, provoking environmental situation. Given its pervasive occurrence in our everyday lives, annoyance is a unique breed in the emotion kingdom that we could be annoyed at ourselves without any other transactional participation given the various aspects of our own physical, mental, or emotional condition.”

To cut through the inbox, email marketers often test new strategies to catch consumers attentionbut unfortunately, they don’t always succeed. Always base your tests upon customer data – segment by interest, by age or by engagement behavior. Carefully build in feedback loops to listen to which types of content and delivery consumers are most responsive to. A/B test (or A/X test) to build subject lines, content and sender name off quantitative data to build subject lines, content and sender name off quantitative data.

At the end of the day, even the best email marketers will encounter Annoyance from time to time. It’s important not to let that daunt you. Just keep moving along looking for Curiosity, Nostalgia and Astonishment.

FfIqzmMvK17wHjL4pE-wdQyrGzHqbSZyD9deU2yzsqw
 

The funny one of the bunch, Astonishment can be both positive or negative. It’s the hardest of the pack to draw out and possibly the most challenging one to control. It can make an appearance when the content is not as promised in the subject line – either it offers a lot more than the consumer anticipated or was entirely misleading.

Professor Sudarsan concludes by saying “Since emotional intensity is greater in response to unanticipated events than to anticipated events, astonishment as an emotion can be a delight with a hint of panic and a neurological puff of steam… Astonishment takes the emotional crown even without clear-cut valence, as one of the most intense and cognitively demanding emotions solely due to the abrupt overpowering magnitude of amazement.”

There’s no right way to make a consumer feel when he opens the inbox. The five emotions that power marketing work together, fight against each other – they almost always appear together. The goal at the end of the day is to build a brand experience that goes from the inbox out, that the consumer continues to hold and engage with. One that moves to long-term memory.

 —
Sudio is a recognized human behaviorist and brand strategist from New York, NY. He helps organizations drive demand and impact through more effective use of their brand, marketing, design, and innovation assets.
He teaches advanced MBA courses in marketing and strategy at premier business schools across three continents around the world. At the confluence of neurobiology, cultural anthropology and cognitive psychology, he approaches his research work on consumer behavior. Presently, he is converting his eight-year research into an accessible book. You can follow him @iSudio on Twitter or Tumblr.

Email Has Moved On From Shrek’s Onion Metaphor

“Ogres are like onions… we both have layers”, says Shrek in Dreamwork’s hit 3D-animation Shrek. The famous green protagonist uses this analogy to describe his complicated personality. Much like an onion, it can take a while of peeling away frivolous outer appearances to understand the core of who Shrek is. This particular ogre would probably be very surprised by the world of email.

Recently, email design has been peeling away from the more complex textures of the 3D world, towards something called flat design. With 2D flat design, dimensional shapes are few and far between. It doesn’t take very many clicks of the mouse to get the main message. Here’s why everyone’s making the switch and why you should too:

It’s been a long time coming

Screen Shot 2015-06-10 at 12.29.16 PM
Think back to the very first iOS notes app. It was a leather bound notebook with yellow paper, lines and all. Resemblant of the real thing, it eased us into transitioning from pen and paper to touchscreen notes. Today’s note app is simply a white canvas.

Flat design is the product of a natural evolution in user experience. As the consumer market becomes more familiar with technology (or in this case, email), there’s less need for visual aids to bridge “action A” to “action B”. A recent study says that just in America alone, individuals spend an average of 11 hours a day on electronic media. To give some perspective, most people average 16 to 18 waking hours a day.

Flat design embraces the limits of the screen instead of embellishing, like its predecessor, skeumorphism. Skeumorphism, seen in the older yellow notepad on the left, resembles a real-life object. If you take a look at the two designs side-by-side, you can see that skeumorphism, layered with details, takes up more screen space. Flat design’s minimal approach lends to shorter loading times and more room for to get creative.

Giving way to content

Flat design also comes out of the realization that content is king. In a noisy digital world, cutting through the inbox isn’t always easy. Removing flashier design elements allows the reader to find value right away.

This welcome email from Invision nails it right on the head. Four introductory videos take the spotlight, with their branded pink weaved through as the call-to-actions. This step-by-step approach is a non-intimidating way for a first-time user to learn more about the product and get started.

Welcome-to-InVision-680x4491
 

Litmus on the other hand, has a well-branded color block layout in their email. It’s a more subtle way to provide context and condition your users to interact with your content in a certain way.

 

Welcome-Email-Newsletter-Design-from-Litmus
 

Another email from Dropbox is a great example of how a text-heavy email can be enhanced with minimal imagery. The email uses “negative space” – the white space that the camera and stationary don’t cover – to create balance and draw attention to the personalized message below.

 

Screen Shot 2015-06-10 at 12.30.48 PM

Fit for all screens

As we mentioned before, because flat design works within the constraints of the screen, it makes for a more responsive email experience. Both Invision and Litmus follow today’s widely used one-column email template. The clear hierarchy of the blocks makes it easier to scale an email across various sized screens.

Scrapping cumbersome patterns and textures also saves designers time, they no longer have to worry about how some elements load slower on a cell phone or a tablet.

At the end of the day, it’s a happily-ever-after for your consumers and your design team. Flat design represents the movement to put the consumer first, to deliver quality content in the most digestible way. There’s no saying how long flat design will stick around for, but it will certainly continue to evolve as users interact with new devices over time.

 

The Mailjet team has been hard at work building a new easier, faster way to create beautiful emails. Keep an eye out for an announcement in a few weeks!

How I Learned To Code An Email From Scratch

Screen Shot 2015-06-05 at 4.20.07 PM

They say to really learn a language, the best thing to do is to immerse yourself in the culture. If this is true for languages, then it’s most certainly true for learning HTML, right? Which to me, a marketer, is as foreign of a language there is.

At Mailjet, we use our handy WYSIWYG template editor to build emails, but there are snippets of HTML that we inject to jazz up certain parts. The past few months I’ve noticed that we’ve been sending our designer smaller tasks – creating nesting tables, resizing images, building email banners – which eat up time from the larger product projects. What if I, as an email marketer, were able to comfortably work with both the WYSIWYG editor and HTML myself?

This was the beginning of a two-week long cram session of learning to code an email from scratch. Here’s what I learned:

First things first

Screen Shot 2015-06-05 at 4.21.22 PM
First, you can start off with a new plain HTML document (a text document saved with the extension ‘.html’) or simply work out of your email service provider. I worked directly out of Mailjet’s advanced HTML editor. We’ll be creating the header using a standard format such as the one below. The header tells the browser how to read our document – specifying what language it is and which version it’s written in.

Screen Shot 2015-06-05 at 4.24.57 PM
Coding in HTML is a lot like drafting an outline for a blog post – you have to identify the intro (or header), the body (the frame) and the conclusion (the footer). Browsers like when these parts are clearly identified so that they know how to piece it together into a cohesive email design.

Building the frame: it’s all a grid

Then, we’re ready to dig in and start our grid. Like all good design, working off of a grid helps create aesthetic balance, helps you organize your content and most of all ensures responsiveness. A grid email design can be easily restacked into a single-column design on smaller screens.

To build my grid design, I had to learn how to code tables. Here’s where it got tricky for me – it’s hard to imagine turning something visual like a table into text! 

Start off with a sketch

The first mistake I made was jumping head on into the code without having first laid out a sketch. Tables can be difficult to visualize once you start coding, so it’s extremely helpful to have an idea of how much content you’ll want to include and how you would like to arrange it.  Each separate piece of content, whether image or text, will generally need to be coded as it’s own cell in the table. 

Coding the table

Now for the code, <tr> stands for “table row” and <td> stands for “table data” or column. Use <tr> to create a new row, followed with <td> and the text you’d like to add to the cell.

Screen Shot 2015-06-05 at 4.25.41 PM
Here’s the first frame that will hold the rest of the email content.

 

 

Screen Shot 2015-06-05 at 4.25.47 PM
To add more sections within the frame, simply follow the format we used to create the initial table above. I copy and pasted two additional rows. So now we have a larger frame and an inner set of three rows.

Screen Shot 2015-06-05 at 4.25.53 PM

Filling out the details

Throwing another language in the mix

 The email frame we just reviewed was all in HTML, but for styling, we’ll have to turn to another language, CSS (Cascading Style Sheets). The two are generally paired together for website and email building because HTML creates the structure, while CSS describes the visual details such as color and fonts.

To further complicate things, most email clients do not play well with CSS. There are inconsistencies in the way they render CSS. For example, Gmail strips out any CSS that is included in the header of an email, but Outlook accepts <style> tags in the <head> and <body>. This sure confused me! Email clients don’t like CSS but we have to use it to style anyways?

It turns out there are several types of CSS, but for our intents and purposes, I’ll just introduce inline-CSS. Because inline-CSS is applied to each individual HTML tag, it renders correctly.

If you happen to have all of your styles already coded into your header, there are plenty of handy tools that can “inline” the code for you. Take Inky’s Inliner, for example.

Adding the header image and color

Below, I’ve added the header image to the email with the <img src= “link”> tag.

Furthermore, I’ve adjusted the background color of Row 2 & 3 with Mailjet gold <bgcolor=”#ffbf40”> and gray <bgcolor=“#989dac”>. In a little while I’ll be building these two rows out to create the body of my email.

Screen Shot 2015-06-05 at 4.25.59 PM
 

Padding

 In order to flesh out the rest of the email body, we’ll need to add some padding. For example,“style=”padding: 40px 30px 40px 30px;”> tells the email client how we want the top, right, bottom and left to be spaced respectively.

Screen Shot 2015-06-05 at 4.26.04 PM
Social sharing links

To finish off the body of the email, I added in an extra row at the bottom to include social links. Always include social links – it takes a few seconds to slot in and not only helps drive additional traffic to your other social channels but it also extends the reach of your email content.

 Screen Shot 2015-06-05 at 4.26.10 PM
 

Screen Shot 2015-06-05 at 4.26.16 PM
 

Unsubscribe link 

Last but not least, don’t forget to include an unsubscribe link at the bottom of every email! Mailjet handily reminds you if you forget to add one before moving on to the next step:

Screen Shot 2015-06-05 at 4.26.22 PM
 

Screen Shot 2015-06-05 at 4.26.27 PM
 

Using the unsubscribe link provided above, I added an href attribute, which tells the email client which link to add to the text.

Trial and Error

Above all, be patient when you’re just starting out. Sometimes you’ll miss a closing tag or add an extra character that breaks the design. Hint: look for odd colors in the syntax highlighting!

Mailjet’s HTML builder allows you to preview what your campaign will look like on various screen sizes. I can also send a test to myself. I checked my code each step of the way to make sure the design rendered just the way I wanted it. If anything was unaligned or broken in the preview, I could immediately go back and fix it.

Screen Shot 2015-06-05 at 4.26.33 PM
 

Wrapping Up

And there we have it, the finished product. All in all, it took me a good three hours to complete this simple layout below! Unless you are looking for something highly customized, starting off with the WYSIWYG editor and injecting HTML when needed may be a more efficient process.

How often does your team code emails from scratch?

Screen Shot 2015-06-05 at 4.26.39 PM
The Mailjet team has been hard at work building a new easier, faster way to create beautiful emails. Keep an eye out for an announcement in a few weeks!

Boosting Customer Happiness with Mailjet x Cloud Elements Help Desk Hub

This is the third and final post in our joint blog series with Cloud Elements, all-in-one cloud API management and integration service. In the first post, we covered how e-commerce businesses use Mailjet and Cloud Elements to send targeted, value-adding email. Our second post talked about how businesses use our integration to easily connect Mailjet with a CRM platform, such as Salesforce, to consolidate customer data for smarter insights into consumer needs and demands.

In this post, we’ll be wrapping up the customer life-cycle by taking a look at how the Mailjet-Cloud Elements integration can be used towards customer happiness and retention.

Mailjet’s API with the Help Desk Hub is the first singular API to integrate customer service across the industry’s leading cloud help desk services. These services include Zendesk, Salesforce Service Cloud and JIRA. This means that developers only need to write to one API to integrate with cloud help desk solutions to manage incidents, priorities, statuses and users.

Create contact lists based on prior support ticket inquiries and send targeted email. For example, if many customers are asking how to integrate a certain product, the integration can be used to send a tutorial to educate specific product users.

We’ve set one up of our own in Zendesk as shown below. Simply create a list – we’ve called it “Customers with questions about Mailjet”, and define which customers land in this list by adding triggers. Triggers tell Zendesk with actions to track.

Screen Shot 2015-06-04 at 11.25.18 AM
 

Screen Shot 2015-06-04 at 11.25.11 AM
 

Hop over to the Cloud Elements blog for more integration use cases.


We love feedback! Drop us a message at plugins@mailjet.com with any thoughts on the integration, questions, or just to say hi. Happy emailing!

Wearhacks: A Weekend of Wearables

Hackathons are one of my favorite events to attend as a Developer Evangelist. You get to step outside of your day-to-day role and just code for yourself, from scratch. There are many ways to approach a hackathon, some attend with a specific problem in mind that they’d like to solve, others use it as a time to creatively experiment with new frameworks and languages.

Screen Shot 2015-06-01 at 1.49.37 PM

Hacking the future

Last weekend, I represented Mailjet in attending the inaugural Wearhacks Paris. We’re especially proud to have been an API partner and sponsor, because we love their initiative. Wearhacks Paris is an international non-profit and connected and wearable technology community. They hold free weekend-long hackathons which encourage developers (and non-devs – designers, project managers) to build and innovate with wearables.

Devices featured at Wearhacks, such as the Myo armband, have huge implications in how we interact with technology in the future, but more importantly for healthcare as well.

To top it off all of the excitement, I was also invited to mentor, which gave me a chance to dig into code that was not mine. My task was to help teams build their ideas into reality during the 48 hour span. The time flew by as I sat down and helped some teams find their hack ideas, brainstorm creative ways to integrate the Mailjet API, and occasionally debug Python, some C, and some Java.It was really rewarding to hop from project to project and see all of these clever and potentially life-changing ideas come to life. One of these ideas included a connected stick to help improve the experience of the visually impaired walking down the street, built using Arduino. Another was a mechanical arm that follows the movements of a human arm through the Myo.

I’ll even let you in on a little secret – Wearhacks was held at (42), just 20 minutes from my house. It came in handy for taking small naps – even when under the time crunch, it’s important to take small breaks and switch off with teammates during a hackathon. You’ll come back refreshed with new ideas and less likely to make mistakes.

When the nerves kick in

The most nervewracking part for hackers is getting up on stage to present before judges.  You have two minutes to show the best of what you created in the past two days. And I’m telling you, the sleep deprivation makes this task that much harder to do. when you are really tired, this task is more than hard to do.

Screen Shot 2015-06-01 at 1.49.45 PM
Roughly 20 teams pitched in front of the mentors and only five were selected to present their hack in the front of the final jury. Then the final jury had the hard task to chose the winners. All of the pitches were very well organized, it sure was a tough call.

After much deliberation, 42_FlyMyo took home first place, winning a trip to Seoul, Korea to attend another hackathon! 42_FlyMyo hacked the Parrot drone using the Myo armband, which allows you to control a small drone with arm movements. Congrats guys!

Screen Shot 2015-06-01 at 1.49.51 PM
This is the future right here – 1 in 5 American’s own some type of wearable technology and the wearable band market grew by $684 worldwide in the first half of 2014 compared with the first half of 2013.


New to hackathons or looking for ways to improve your strategy? Check out my talk “How To Win A Hackathon”.