Workflow of an HTML email integration

A serious title, isn't it? And yet, dear friends, it is sometimes necessary for me to take on a solemn character in order to tackle serious subjects. For I will try here to answer an existential question: What working method is applied in our HTML email integration production team?

Warning: we want to share here the state of mind, the daily life, the habits, the working methods, and the integration process that we follow at Badsender. This point of view only commits us, as each developer has his own way of working.

1. It's always the same gestures. Always. First, the reception of the elements. Always. (Zinedine Zidane)

This is the essential step for any development to begin. No elements, no integration. No integration... No integration.

We need a model. This is the basis.

And by model, I mean a finalized desktop model, finalThe design should be made in Photoshop, with the layers correctly arranged and separated. Avoid mock-ups made on inDesign or Illustrator, which are not always adapted to the web. And in addition, a responsive mockup (because when you think about it, not doing responsive in emailing, it's not possible anymore, tut tut tut). As a bonus, we will claim confirmation JPEGsto make sure it's the same thing (You can see quite a difference sometimes, believe me!).

Do not hesitate to ask for mock-ups adapted to the Retina if it is part of your customer's requirements: the design will then be made on doubled dimensions (for a 600 pixels wide email, the layout will be 1200 pixels wide. I wasn't in S in high school though...).

Now?

You will also need to receive a link briefing to set up. To make it simple: an Excel file, in which each visual or text that must be clickable in the email will have a valid url indicated.

Tips : Suggest to your client to design a "url builder", an Excel file with some concatenation methods so that each url adopts the relevant tracking code. For that, nothing could be simpler, a good little function like =CONCATENER(cell; cell;), and basta!

And what else?

Finally, in the elements to be received, it will also be required the animated gifs (if there are animated gifs)the videos (if there are videos)the typography, the specific integration constraints to be respected (depending on the routing platform sometimes)... In short, everything that can be useful to the integrator but which he does not have by default on his machine.

2. Comes the cutting/slicing phase (and it's not about whistling)

Most of the time, we first establish a "mental" layout of the model. We transform ourselves into Professor Xavier, from the X-Men: we try to decide which element will be in raw text and formatted via CSS, which element will be in image... This is a crucial step and full of questions : Do we need to design one image for Desktop and another for Responsive for this element? How will the layout behave on Mobile? Is it better to design two cells side by side or just one? Will I pass these texts in HTML with a special typography, or export them as PNG instead? What will be the degradation then? Can I eat a BN between 2 and 3 pm?

All of these questions are often answered by analysis of consultation statistics from previous campaigns. Don't hesitate to ask your client for this data if it exists: it will be a great help to know, for example, that rounded corners on a Call-to-Action might be "risky" to design in HTML and CSS if the main viewing medium is the Outlook desktop software... Take care of it! (it means nothing...)

What goes one way must also go the other way! It's a give-and-take, folks: don't decide all this on your own. Discuss it with your clientwarn him and educate him in good practices but do not necessarily impose everything at once, at the risk of offending him... And a crumpled customer is a badly ironed customer! That's done...

3. And then zou, we code!

On this step, I unfortunately don't have much to add... Except this:

• Be sure to use only verified and tested hacks & tips in the <style> (a border-collapse:collapse applied on all table for example, could lead to strange renderings on rounded corners or on dashed)
• Don't forget to add patches at 120dpi.
• Try to improve the accessibility of your email as much as possible by respecting best practices on accessibility in email marketing This is achieved, among other things, by using semantic tags (<h1>,<h2>,<h3>,<p>,<ul>,<li>,<strong>,<em>…).
• Add the attribute role="presentation" to each <table> of your code that would not be an array of data.
• Fill in the attribute lang to the tag <html>.
• Indicate a relevant title in the <title>.
• Make the names of your class and id in the explicit media queries, to make the best use of them and make the code readable and understandable by any other integrator. Thus, the following code : .textaligncenter {text-align:center !important;} will probably be more explicit than .txt_01 {text-align:center !important;}. Well, I think so... Right?
• Don't forget to design a preheader in the email.

Regarding the code editing software with which you will develop, no preference! At Badsender, we code as well on Dreamweaver as on SublimeText, that's to say! So, to each his own! If you are looking for help to choose one, go see up there if I am there !

4. Make sure the HTML code is clean

Once the model is coded in HTML and CSS, we have a few steps to follow. You'll see, it's going to go fast. Another 5 kilometers and we go back.

Comment, if you can!

Comments in the HTML code are a precious information for updating or debugging an HTML emailing integration. Think about the future integrator who may one day get the code you have developed: The poor guy! Providing him with simple instructions on how the code works is a sign of respect. And he will be very grateful to you! Give me a high five, colleague!

The encoding of special characters: é becomes é, et cetera, et cetera...

I recommend you to encode all the special characters present in the code: à, é, è, ô, ç, etc... There are platforms for this (because to do this in public is borderline! A bit of modesty for God's sake!). At Badsender, we've developed the KrktR tool. We can't guarantee the quality of the code delivered, but hey, it's for us, it's a gift!

The removal of useless media queries: a clean sweep!

When using HTML code Master Template, it is recurrent to find big blocks of media queries, present to cope with all the cases of modules behaviors on mobile. However, in order to provide a clean code and as light as possible, we suggest you to use tools like emailcomb or alter.email to "clean up" the final HTML code. You'll see, you won't be able to do without it soon... A real drug.

What about minification?

Personally, I'm not a fan. Or only if your code is close to 102 kilobytes, and thus the fateful threshold set by Gmail. But if not, we don't need it. First of all, because the minification of your HTML code could break some of your media queries (yes, it's true) but also and above all because it can delete your comments, or simply make the whole integration unreadable and incomprehensible.

5. Email preview tests, BATs, email rendering tests... Call them what you will!

Naaaaaaaaaan but don't even try to neglect this step. You can't, what am I saying... YOU SHOULD NOT provide an integration without having tested it first! For this, not 1, not 3, but 2 methods (which, like wine, should be obligatory! Be careful Gérard !) :

• The test on physical media: Take all the media you have at your disposal immediately. The desktop PC, the laptop at work, the kid's tablet, your wife's cell phone, all the media I tell you! Install all the email software and email applications you can. Also open a set of tabs on several browsers, to webmails where you would have test accounts (create as many as you can, it costs nothing! You will use it for your Carrouf' account !).
  
  And shoot! Bim! you just have to wait for the reception of the proof, and to make sure that everything is ok: the email preview platforms are an essential ally, but they will probably never be able to present all the existing resolutions on the market, nor all the software versions, the browsers, or even the connection speeds... Nothing beats a good old family test on physical media to estimate the best time to display an email according to the connection method (wifi, 3G, 4G)or to have the rendering according to the support of consultation, according to the navigator...

• Email preview platforms. The grave of my dead, you know them! Litmus and EmailonAcid to name only the most famous of course. Take the time to detail the rendering of each screenshot. First of all, because you are paying for it and a penny is a penny, and because in addition, there are sometimes small subtleties. The work of the emailing integrator is also the sense of detail...

To facilitate and streamline the work flow of the emailing integrator, EmailonAcid offers a new feature: The " Campaign Precheck" . Practical, even if it won't do the job for you either, don't push it!

Do you have anything to add? What do you do at home? Do you mop the floor before closing the store? Tell us, we're curious! Plaaaaaace to the comments! Unleash the fury Mitch!