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>,
  ,
  • ,<strong>,…).
  • 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