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

Article published on

and updated on

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:

email 1 2 3

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 !

email without images displayed

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 !

emailing template

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:

email rendering without images

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:

full responsive emailing

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!

Did you like this article? Share it!

The news

Want to receive the newsletter, invitations to the lives and other news of Badsender by email ?

8 Responses

  1. I love the quirky and very focused tone of this article... it's a treat to read from start to finish! It even got a few laughs out of me with the quotes ;)

    Good Job, for the form, as for the content!

  2. There must be a small problem in the code, on outlook2016 the counter image is much larger than the rest of the content.
    Otherwise for everything else it's great, thanks for the demonstration.

  3. Alexandre, Gabriel, I will be eternally grateful for your comments... It makes my articles come alive and it reassures me: I tell myself that I am not alone in reading them! :D Gabriel, you tell me that the counter image appears much larger than the rest of the content on Outlook 2016. Are you talking in real test, or from emailonacid results? Because everything seems ok on eoa on this point... Could you tell me more? Anyway, if you liked it, don't hesitate to share it, I'm paid by view! Humor humor, I mean!

  4. @Thomas: I did a real test. I got the code from the codepen, made a test campaign from Sarbacane (the mail router we use at work) and sent it to my pro mailbox which uses Outlook 2016. I made a screenshot : http://hpics.li/0af61cd
    Everything else is displayed perfectly.

  5. Nice example of redesigning without changing everything.
    Very tasty to read ^_^

  6. A light and offbeat tone while dealing perfectly with the substance of the subject, what do the people want?
    It's very enjoyable and we just wait for the next episode!
    Thank you for this moment ( without particular reference ;) )

  7. Hello Thomas,
    What I would have appreciated most is to understand how these people do to make a countdown gif...


Laisser un commentaire

Your email address will not be published. Les champs obligatoires sont indiqués avec *