Dear little friends. I am going to tell you the story of Chinese Man Litmus certification. You can follow along with me in this article. You'll know it's time to turn the page when you hear the bell, like this. And now, let's get started...
1. How it all began.
We are May 5, 2020. Litmus posts this:
And my mind is racing. Because of (or grace, I don't know exactly) of COVID-19, the #LitmusLive will not take place this year. Or at least not in its traditional version. Instead, a #LitmusLiveEverywhere is announced, entirely online, TOTALLY free.
But most importantly, an email developer certification (for a fee) is now possible! It's a big announcement, and I'm afraid my heart can't take the emotional load. As I perform a self-defibrillation, I instantly tell Jonathan and Grégory my wish (expensive, I admit) to win that precious trophy. I told them: "Jonathan, Gregory, it's the ermine or the caravan… They told me "Banco..."
2. What is the certification process.
It's very simple. To become certified, attend live workshops that will give designers, developers and marketers the skills they need to "grow their careers." (I'm not making this up). These workshops will be monthly and will last two hours each. There will be 6 of them and they are detailed as follows
Ask for the program!
- Monday, May 18, 2020:
- Marketing: Learning from the past to predict the future (or how email marketers examine their campaigns, performance, and subscriber interactions to tailor future initiatives based on customer expectations)by Lauren Kremer.
- Development: Creation of responsive and accessible emails (or learn to code solid email campaigns with a focus on accessibility, modular components, basic HTML and CSS, and responsive techniques that work on the widest range of email clients)by Jason Rodriguez.
- Monday, June 15, 2020:
- Marketing: Diving into and expanding email metrics (or how to find usable and quantifiable indicators to make business decisions, and how to tell a coherent story and bring the numbers to life)by Lauren Kremer.
- Development: Interactive email creation with HTML, CSS and AMP4email (or understand the fundamentals of interactive email, with an overview of the necessary HTML and CSS used for common interactive elements, and how to create AMP-based emails and create backups for older email clients)by Jason Rodriguez.
- Monday, July 20, 2020:
- Definition of inter-team collaboration processes (or how to be more efficient in a team with the use of collaboration tools)by Lauren Kremer.
- Use of the System Design in email (or how to properly document the use of a Design System and how to advocate for its use)by Jason Rodriguez.
I won't hide from you that 4-hour sessions in a row (2 modules of 2 hours) from 16 to 20, with a cut-throat American accent ('nowouataïemin'!)Fortunately, replays were available, and here's my face how I enjoy following the workshops of Jason Rodriguez when others are watching a PSG-Bayern in an empty stadium.
3. Validation of prior learning
Once the workshops are over, Jason sends me an email (It's cool, he sends me personal emails and everything, that's it we're buddies! Ah, I'm being signaled that it's a generic email...)
This is Jason, your instructor for the Litmus Email Designer Certification. With the three workshops under our collective belt, all we have left are the final projects and feedback!
Jason Rodriguez, my instructor
SHIT!!! Final projects"? What does that mean? Wasn't I told about this? Is this mandatory? Two exercises will have to be completed, and sent in before the Monday, August 315:00 p.m. local time on the East Coast of North America.
What are these projects?
Very good question. Thank you for submitting it. I will need to create two emails, following the criteria below. The design, the aesthetics, the choice of the images are completely free, for precision.
Email 01 - Build an accessible, responsive email.
- With the following components:
- A header and a footer.
- A "major" section with a title, an image, a paragraph, and a Call to Action.
- A "two-column" section with subheadings, paragraphs of text, links.
- A desabo link, RGPD legal notice, optin info.
- The email should be :
- Responsive on both mobile and desktop.
- All images must fit on mobile.
- The "two-column" section should only be one column on mobile.
- The email should display correctly on Outlook without major rendering problems (use, therefore, the Fluid-Hybrid method and the phantom tables if necessary).
- Use semantic tags (h1, h2, p, etc.).
- Fill in the alternative texts of the images.
- Assigning effects by hovering over the buttons and links.
Email 02 - Build a simple interactive email.
- Using the checkbox technique:
- Use radio buttons or checkboxes, labels, HTML and CSS to show or hide content.
- Provide a good fallback for mail clients that do not support interaction.
- We can therefore start on a carousela quiz, whatever you want...
Okay, drop your panties, I'm flying!
Email 01, email 02, same ardor: I attack #Deezer.
Why Deezer ? Because I'm subscribed to their newsletters, and I'm sure there's a way to do something really nice, in all modesty of course... That's the official reason. The unofficial reason, which is less glamorous: it's because I want to impose my passion for Syd Matters, Nick Drake, Yeasayer and Beirut.
Email 01: basic, but with little details that probably only amuse me.
The email 01 will be rather basic, with the presentation of the favorite album (the one that the user will have listened the most during the month for example. Come on Deezer, I'm sure it's possible to get this information). Then, below, a small cross-selling of similar artists and recommended albums. An overview ? I'll be right there, Mr. Director!
Need help?
Reading content isn't everything. The best way is to talk to us.
Here, therefore, no particular problem. The email is fully coded according to the Hybrid-Fluid technology to guarantee a mobile rendering even on mail clients that don't support media queries. I add some media queries just to optimize a little more the rendering on mail clients supporting this kind of request. The thing gets harder on some complexities that I added myself (I am slightly sado-maso, and not only on the edges...) borders with color gradients will be designed in HTML and CSS on the left side of the main cover, and on the right side of the cross-sell.
To make matters worse, I decide to bring an animation with @keyframes on these borders, to make the gradient evolve. Finally, in addition to the hover effects on the buttons and the album and artist titles, I'm also working on change the images on the fly like" and "play" pictograms with the CSS property content:urlbecause it's always graphically pleasing and, like Cyril Lignac, I like it spicy-crisp.
All other criteria are normally well met: accessibility, semantic tags, 120dpi, role="presentation" attributes, Retina, invisible preheader, Google Font (yes, some criteria are not part of the initial brief, but I am stubborn)... So here is my first exercise finalized, and the code is available here !
Email 02 : Why make simple when you can make complicated?
That's when everything went to hell. I don't like to keep it simple. I like a challenge. And I also want to poker "Deezer" on this one. So I won't settle for one interactive element, but 5. To list them, and detail their origins:
- A search bar for direct access to a search result on Deezer: this element is based on thearticle of the forms in the emailing thatAlice Li at Litmus published in May 2020. I know in advance that there might be warning messages (on Thunderbird among others)but fi!
- A quiz, using the code developed by Rémi Parmentier for bulletin.fr and noticed on ReallyGoodEmails.
- A text scrolling effect according to a technique I had developed myself and from which I had written an article " Typewriter effect in emailing "that needs to be refined (I'm talking about the coding technique).
- A carousel based, this time, on a technique found in a email from Breguet in the "Interactive" category of ReallyGoodEmails.
- A cover with integrated tooltips, following the Hotspot technique unveiled by Litmus on their blog in March 2020.
You tickle yourself to make you laugh!
Grégory Van Gilsen, COO for Badsender
And it's not wrong! I have really well complicated the taskbut it was the perfect opportunity to test all these interactive elements that we don't necessarily have the time or the opportunity to insert in usual campaigns. I then had to indent my code correctly, comment it (in particular on CSS styles to find my way around as best as possible)We have to test, again and again, to get a convincing result.
The module that probably took me the most time was the carousel module, to understand how it works, and to make sure that the fallback was good. On the other hand, I am quite disappointed with the fallback of the "Hotspots" module which is not convincing : the image doesn't appear at all on Free.fr, and the rendering is quite bad on Mail.ru, Office 365, Outlook.com, T-Online.de, Web.de... But what is quite surprising is that the original code of Litmus is not really better, when I take it as it is and test it on EmailonAcid ! It's crazy-crazy-crazy!
Where I also had to fiddle around a bit (but three times nothing, therefore nothing)I had to create a small page in php to get the variable in GET and to be able to make a redirection with a "kind" of url rewriting to be able to land on the search result page with the right parameter in the url. Do you follow me?
header('Location: https://www.deezer.com/'.$_GET["recherche"].'');Anyway, all this to say that the final code is available here and that the result is maybe not, in terms of fallback, at the top-top but boy, did I enjoy it! And then this little carousel, it makes me guilis-guilis in the underwear! And then Jonathan Morali in Beau Gosse mode... And then, and then, AND THEN!!!! AND THEN THERE IS FRIDA, WHO IS BEAUTIFUL AS A SUN!
And watch out to drunken pigeons to the indentation in the 02 email code, I had to remove it to get under the 102kb weight limit imposed by Gmail before truncation.
04. Conclusion
I will never participate in a Litmus certification again... Ouhhhhhhhh a new Litmus certification for 2021!!! I'm interested in that!!!
All I can do now is wait for Jason to come back. I'm counting on him. When we've been through what we've both been through... I know it can only go well. So I'm hoping to get my Litmus Certification and go for a pint to celebrate. If you liked this article, if you fell asleep, or if you want to watch the movie again, don't hesitate to share it around you, all around!
I'm off to Deezer on the subject, and then to Syd Matters... And if you also want to bring a little interaction, novelty, life, or something that is crazy in your emails, such as a carousel, a form, hotspots, or a quiz that I know! Well, that's what we're here for! And if you see optimizations to be made, corrections, advice, do yourself a favor and leave me a little comment! This year, I'm paid per comment: one comment = 10 cents... It's a precarious contract, so I count on you!
