Among UI (User Interface) of the Email Builders I've analyzed so farSalesforce Marketing Cloud is particularly sober. Clearly, we're not here to have a good time. to get to the heart of the matterto focus on clarity and efficiency rather than decoration. Here's a snapshot to give you an idea.

Screenshot of the Salesforce Marketing Cloud Email Builder

Ah, you saw it! I didn't waste any time, I started straight away, without any introduction. Well, I'm going straight to the point too, without preamble, straight to the point. So here goes.

First of all, I'd like to point out that Salesforce Marketing Cloud's Email Builder is based on three main "chapters : The "Blockss, the "Layouts and the "Design. Shall we take a tour? Come on, I'll take you, as France Gall (or Louise Attaque, as the case may be) used to say.

Layouts (or structures)

Layouts tab in SFMC
  • It's simply a colonnage system One, two, three, four, five columns... it's all about document structure, it's as simple as that.
  • What I like is the modularity of these columns:
    • The possibility, for example, of manage reading direction on cell phonesfor reverse the order of elements via a reading direction "Left to right or "Right to left. Or even not to stack items on a mobile! Yes, that's possible too!
    • The choice of column widths. So yes, it's a percentage, but it's not bad at all to be able to play on this parameter.
      Modular column widths in Salesforce Marketing Cloud's Email Builder
  • The good news is that you'll find plenty of ready-made configurations/compositions ! What does that mean? Well, it means what it means, compositions, ready-made assemblies, configurations made with blocks and so on... Come on, I've got it, I'll give you an overview:
    Examples of pre-made compositions

Blocks

Tab to block on Salesforce Marketing Cloud

Five categories within Blocks: "Basic Content, "Advanced Content, "Interactive Content, "Social Media and "Custom. I will try to evoke the categories and blocks that speak to me most. Don't hold it against me, but the idea is not to give an exhaustive tour of the owner, but rather to identify his strong and weak points, in all objectivity of course!

Basic Content

  1. "Button or Button: bah quite effective right, with the ability to specify rounded corners, border thickness, color and style, internal margins... Honestly, it's not bad! And the rendering is clearly not bad! I still haven't figured out how the internal margin is handled on Outlook, since it's specified in the <a> which is display:blockbut so be it...
    Block button sfmc
  2. Snippet code Let's say you've developed a call-to-action button yourself, using HTML and CSS. Congratulations. Good. Now you can call up the code specific to this button. All you need to do is save it in a folder (Tab "Contentnext to the "Overview) and you can call it up in no time with this Code Snippet block... Yes, you have to admit, that's a nice touch!
  3. "Free form block: well, it may sound like a dream, but in fact it's just an enriched text block with the ability to add text, play with its formatting and alignment, add bulleted lists and hyperlinks... Honestly, I don't see the distinction between this block and the "Text but then... there must be a subtlety I'm missing...
  4. "HTML" block I don't think it will surprise you to learn that you can enter your own HTML code here. What the "Code Snippet except that now I can manage the parameters of the block (Bloc Settings) that contains it. Okay, why not! It's always a good thing.
  5. "Image Block or Image: for... CALL UP AN IMAGE! Follow for a while, be on the ball or else go home, it's useless!
  6. "Text or Text block: exactly the same as the "Free form so I don't really know what else to tell you... It's up to you to decide which of the two you feel most comfortable with, a Cornelian choice...
    Text block in SalesForce

Advanced Content

In the "Advanced Content" category, I'll be talking about :

  • Synchronized block or "Reference content I love it! the abstract ! Call up a registered module and keep it "locked" as is (not being able to modify the content), it's ideal for calling reassurance blocks, footer, header... In short, recurring blocks that you don't modify every day!
    -> On the other hand, I deplore the absence of any possibility of detaching the instance to be able to modify its content precisely.
    -> And I also note that I can't see the block in question when I send a test email via the "Preview and Test" tab. Instead, I only have a reference (like a shortcode, or a variable, call it what you will) that appears... Too bad.
  • "A/B Test A very simple way of testing two versions of a section of your e-mail. You're then offered to fetch content saved in your folders and files for version A, and other content for version B. Now, I'm not sure how the recipients are distributed on each version, but that's another problem...

This category also includes "Advanced Contenta block "Dynamic Contentallowing you todisplay a block according to rules and conditions (dynamic content in short :D).

And then there are all the Einstein-related blocks ("Einstein Content Selection, "Einstein Content Testing, "Einstein Content) which seem to me to be more focused on Artificial Intelligence and its recommendations... It's not my area of expertise (for the moment), so I won't go into detail on the subject, but I'm convinced (in advance) that it's promising!

Interactive Content

Yes, I know it sounds dreamy, but you've seen the word "interactive", and you're thinking, "That's it, we're going to be able to do some dinguerie! But don't get too excited. Simply because this category includes "only" two modules: "Email Form and "Image Carrousel

  • "Email Form forms in email. So when I say forms, I mean rating systems, "profile filling" forms, data retrieval forms, etc... In other words, "real" forms in an email. And you don't get that, and neither do I.
    This is amp4emailthe language that caused such a stir in 2018 when Google announced its AMP for Email project. But this language is only very rarely supported by opening environments (Outlook.com, for example, having backtracked on its decision to support it). I therefore conclude that this type of interaction offered in Salesforce Marketing Cloud's Email Builder (like any gamification promised by a Stripo) is subject to conditions...
    It's unfortunate because a rating system can be done in HTML and CSS, without AMP4email... But I won't say any more... If you want to know everything, try to find me. And if you're looking for me, well, I'm hiding... behind the door...
  • "Image Carrousel : well it's a slider I'm not going to beat around the bush. With a maximum of 4 slides (images only). You can put a different link around each image. And bubble pagination... with unattractive navigation arrows... over which you have no control whatsoever... Voilà-voilàààààà...
    Image carousel on SalesForce Marketing Cloud

And then I'll stop here for the blocks, because after that all we have left are the blocks. "Social ("Social Follow, "Social Share) and it always comes down to the same thing, and a block "Behavorial TriggersI'm sorry, I haven't had a chance to test it in this situation... But we've already got a lot to say and do, haven't we?

Reading content isn't everything. The best way is to talk to us.


Design

It's a bit like the starting tab for the graphic design of your email? Why is that? Because :

  1. Here you can choose (or change) the template of your document: a blank page, or pre-established email compositions? Or saved templates? Take your pick!
    Choice of pre-established templates
  2. This is where you define the document background color (<body>) and content, as well as internal margins if required.
  3. You'll need to fill in default" styles of your current texts, titles (<h1>, <h2>, <h3>), links, buttons...
  4. And most importantly, the behavior of these elements on mobile (in other words, media queries).

This is no mean feat! And I strongly recommend that you do this as soon as you start creating your campaign, at the risk of overwriting any styles you may have defined by hand in the code editor of the various modules (believe me, I've been there).

What are the strengths of Salesforce Marketing Cloud's Email Builder?

  • No latency time, one optimal tool responsiveness. Perhaps thanks to its austere UI?
  • A functionality "Restore to Global styles particularly useful when you've made a lot of changes to an element and it no longer looks like anything 😀 I'm going to restore the "factory settings" as it were!
  • The internal margins of blocks and layouts can be managed separatelyI particularly appreciate this. I can put a value at the top, then another on the right, then another at the bottom, then another on the left... It's dissociated!
  • I'm happy-content when I'm given the right to view the entire email source code directly from the tool: this lets me know the quality of the code generated without necessarily sending a proof. And in Salesforce Marketing Cloud, this is possible via the "Code View. Whether the code is of good quality is another matter...
    View HTML email code in SFMC
  • Cooooool! I can access the HTML code of "Basic Content (Button, Free Form, Image Block, Text) via the "HTML editor It's a good thing, because I'll explain to you later that the code generated isn't the best... And it gives me a lot more flexibility to optimize the graphics of my blocks. At the same time, it's risky in a way, because it means that everything is feasible and modifiable, and that I can do just about anything... Here, I'd like to add a <iframe> (even though it's forbidden in an email, forbidden!!), and well, I add it. I'm crazy! (I did the test, no warning, no automatic deletion, the thing goes like a letter to LaFuckin'Poste...)
  • This is undoubtedly my favorite feature of Salesforce's Email Builder (I have to admit, I don't need much): tree view (or Tree View) which lists all your structures and blocks in a much more concise way, and makes it possible to change the order and delete or duplicate modules in a much simpler way!
    Salesforce tree view

And its major drawbacks?

  • You cannot use that websafe does for your texts typefaces already installed on your recipients' machines (Arial, Tebuchet, Tahoma, etc.)I know you'll see this as an inconvenience, because it's a "basic" option in Email Builders. However, I'm the first to recommend keeping the use of external resources to a minimum... And at least Salesforce guarantees 100% support for the selected font!
  • The text included in the block "Button cannot be bolded. So I have to confess I don't understand: why this limitation?
  • There's something very strange: a class buttonstyles is automatically added to media queries in the <head> of the email. This class applies the typography, size, text color and internal margins defined in the "Mobile Styles in the "Design to all "Button" blocks (and, of course, all with the !important).
    And that's annoying, because not all buttons are the same in a creative... and I can't see how to change that, since if I delete the class on the button, it's automatically added again when I click on "Done Editing.
    Class buttonstyles in SFMC

Is the final result up to scratch?

Well, to be honest, I've seen worse... The rendering is really quite good (in the platform at least). So it's true:

  • The original model is not very complex in terms of graphic design.
  • Many parts have been reworked in the HTML editor Salesforce Marketing Cloud's Email Builder to render as closely as possible to the graphic model.
  • I made a few small design adaptations to be able to have a final mock-up on the tool. For example, my Call to Action "I ask a question"at the very bottom of the email, was initially with a white background, gray border and gray text. But given the problem raised earlier (cf. class buttonstyles), I had to change my button's background to gray for the text to be visible. Otherwise it was white on white.

In any case, the final result is pretty cool! Take a look:

And the good news is that the email preview tests aren't bad either: apart from a few problems with internal margins on buttons, I don't see any major rendering incidents... I'm surprised, in a good way!

Is the code produced by Salesforce Marketing Cloud's Email Builder of high quality?

First, let's talk about its accessibility...

  • The attribute role attribute with the value presentation to all presentation is added to the tables (<table>) that are not data tables: bravo, it was the least we could do!
  • On the other hand lacks a small package of accessibility optimizations HTML code output... No lang on the tag <html>no fixes for 120DPI, widths specified via the width rather than the CSS property, no <div> in role="article" encompassing all email content... S'agirait d'grandir! S'agirait d'grandir...
  • Attributes title are added to hyperlinks, and I'm not a big fan of that. It's rather counterproductive in terms of accessibility. And unfortunately, I can't remove this option... I'll live with it!
  • Certain semantic tags are automatically present when using the "Text (<h1>, <h2>, <h3>,
      ,
        ,
      1. ...) and I can't find a way to enter my text as a paragraph. <p>. Chelou.

    And now for the code itself

    • Unsurprisingly, and like many Email Builder, I still a lot of code for some very simple elements. Here's an example: I add a block "Text. I pass the text contained in the title <h1>then I change the color to green (adding a <span>), and change the font size to 48px (adding another <span>). We are now at 2 <span> added, with an attribute style every time... Can you smell the mustard?
      When all you had to do was put everything in the style of my tag <h1> ! And I'm not even talking about changing the line spacing (line-height) which is applied to the <h1> while it's the <span> which takes my final type size value...
      Example of HTML code generated by SalesForce Marketing Cloud
    • As I just mentioned <h1>I'm going to take this opportunity to point out that there are no no CSS reset applied on this type of element. No margin à 0. No padding either. I don't mind, but it's hot all the same!

    Voilàààààààààà... Pffiiiiouuuuuuuuu (have some more gum Emile...)... I've had it with this one. It's hard work thinking of everything! But I've probably forgotten to mention some of the strengths (as well as the weaknesses) of Salesforce Marketing Cloud's Email Builder... Can you think of anything to add? Or to qualify? Do you disagree on one or more points? Come on, I'm waiting for you! Comment now!

    Of course, I've only mentioned relatively basic functions here, and only the Email Builder... Salesforce Marketing Cloud is clearly not all it's cracked up to be! No, but I'm pointing this out just in case, so that someone doesn't say to me afterwards "Yesiiii but it's insssssssuu, you haven't mentioned the capabilities of the workflows, the automation available in the CRM, or even the advanced triggeeeeers settings...".

Support the "Email Expiration Date"

Brevo and Cofidis financially support the project. Join the movement and together, let's make the email industry take responsibility for the climate emergency.

The author

Thomas Defossez Avatar

Leave a Reply

Your email address will not be published. Required fields are marked *