Template emailing 1,2,3... Maximum text and full responsive !

Hey buddy! Did you notice how often I talk to you about "full responsive" intel and emailing templates, huh? Today, I decide to show you without taboo (a bit like Bernard de la Villardière who smokes an oinj') what I am talking about, and to proceed with the "technical" optimization of the "1,2,3" brand newsletter.

Small aside: I have been told lately that, for clothing as for other fields of activity, we sometimes make "custom" creations according to the products, the desires of the graphic designers, the offers, and that it was thus "faster" in terms of productivity... So well, I want to say "Why not Mr. January!"But it still seems to me, well... A little big!

It is always more interesting, in my opinion, to have ready-made emailing templates and only have to change a few visuals, and directly modify texts in HTML. Don't you? Oh well (dedication to Doctor Renaud, Mister Renard!).

As usual suspectsI'll put the screenshot of the concerned news:

Analysis of existing email

Well, in fact, "1,2,3" made us a little news in (kouazily) full image. So, if I tell you "full image", you immediately think "full contact". And so Jean-Claude in his best role, and here I say to you: you're getting carried away man!

I translate: "full image" = "completely in image. In fact, I don't even know if this term is justified in email marketing, but I've always said that, so somewhere along the line, I do what I want... I'll tell you right now that I completely discourage this kind of practice.

So, yes, if you want it's easier to integrate afterwards: indeed, if you go through cutting and automatic export. But in terms of cleanliness of the code, responsive, or display of information when the images are not downloaded, it really sucks maaann! Here is a preview of an email preview with keblos images !

Don't tell me "Alternative texts are informed, that's cool!" because I might get red in the face, and on the count of three, I'll yell! NO BUT IT'S NOT ENOUGH BUDDIES ! In addition the alternative texts do not even have a graphic layoutIn fact, on this type of newsletter, we have a lot of recurring elements: preheader, logo, menu, social networks banner, reassurance, legal notices ... So there, the excuse of saving time on productivity, I do not do it!

Email template design

It would be much faster, even if the model is completed at the last moment, to manage the news as an emailing template, it's obvious !!! So, we'll take the opportunity to propose some graphic adjustments, nothing serious, just a few tweaks as we say !

"Shall we do a little still life? Hm?"

Gérard Depardieu, Morzini, Inspector La Bavure

I'll throw the model I just finalized directly, it will be faster! No fuss !

So, first, tell me if you see a difference between the two models? Tick-tock, tick-tock... Oh, I can't hear a thing... 6-0, 6-0, over...

I have reduced the width of the email (we go from 720px to 600px wide)I passed most of the texts in a safe web typefaceand I made sure that the layout could be responsive and even better, full responsive (i.e. responsive on mobile devices that do not support media queries) in less time than it takes to read this sentence... And yet, yes and fortaaaannntt, I have only you! Thank you Charles ! Goodbye artist! However, the graphics remain almost identical! So, everything is possible, with good will.

"You're bluffing Martoni! Y bluffing..."

Gérard Darmon, Commissioner Biales, City of Fear

You will be able to see that what I say is true (because if there are two things I can't stand, it's being questioned! The second thing? Circus people... cf Austin Powers). Here is a link to access the email previewand a second one to admire the beautiful HTML code of the email I wrote. It's a gift, you can use it as a basis for your next integration... or to tease your HTML integrator!

And just to be sure, here is what my code looks like when the images are blocked:

Here, I leave you to admire, and I clarify my point: we only have a few images left in the email. The logo, the countdown in the emailThe visual of this pretty lady and some pictograms. Everything else in the emailing template is in HTML. You heard me right, everything else! (I feel like I'm hearing a commercial on the radio: "Yes, you heard right!!! The tenth tire offered for 9 tires purchased!!!").

Seriously: it means that when the recipient opens the email, he gets something that looks good, with an identity and information that he can read, without even downloading the images!

So, in terms of deliverability, it doesn't change much. Because the text/image ratio in an emailI'm not sure it still has much importance or impact today. But in terms of user experience, content and offer visibility, and click optimization... It's hard to beat it, right?

Full responsive with the Spongy Code method

So, remember, I told you at the beginning of this article about full responsive. Let's have a look at the rendering on this kind of support:

Well, I think that speaks for itself... We just have an optimal rendering! Good responsive, well thought out, on all media! It requires a "little" work beforehand, but isn't it worth it, buddy? I'll leave you with that, I have to go to the post office (and not to talk about their inherited CSS styles in emails)... If I'm not back in 10 minutes... Wait longer!