13

I have got some HTML working fine in 2 web pages, but at one point, I grab the innerhtml of the container div and mail that to the user.

The same code, even when it's all in the email code, doesn't function the same way. Is this something that only works in browsers?

Here is some sample code that isn't working as I'd like :

<div class="flex" style="display: flex; flex-direction: column; margin:11px 0; ">
<div style="order: 2">Growth <strong> 2</strong></div>
<div style="order: 5">Safety <strong>5</strong></div>
<div style="order: 3">Income <strong> 3</strong> </div>
<div style="order: 4">Tax Efficiency <strong>4</strong> </div>
<div style="order: 1">Liquidity <strong> 1</strong></div>
</div>

ADDITION :

OK... most of what I'm finding around on the web, leads me to believe that displaying the code that I shared earlier will not transfer to email. So I have a different question.... is it possible, that when I save the div's innerhtml to the field for insertion into the email that I can put the sub divs in the correct order BEFORE sending to the email? so the email just has to display it, not process it.

So curious how I can actually move the subdivs around... as often happens, I got asked to do this at the last minute and don't have time to learn an entirely new system, but if someone knows how this can be done and maybe point me to the right link, that would be great.

Thanks very much guys for your comments so far.

Aethon
  • 301
  • 1
  • 2
  • 13

3 Answers3

30

Using flexbox (or any of the modern css methodologies) in email templates is simply no good.

You can find information about what to use in an email template here.

If this is your first time building an email template, I suggest that you use a semantic framework for doing this with a bit of ease. An email building framework takes into consideration all the requirements for a responsive email that is displayed in the same way across various email clients.

As from my experience so far, Foundation for emails (zurb email stack) is the best option of doing so. Like I said, it is semantic, and easy to understand (and use). Everything is automated for you, it even has browser-sync applied to it.

Sample syntax:

<container>
  <row>
    <columns small="12" large="6">Column One</columns>
    <columns small="12" large="6">Column Two</columns>
  </row>
</container>

July 07 2019 - UPDATE: You can also use a nice little tool by the folks at MJML which allows for even easier template creation, because of its own editor and live template view.

Tanasos
  • 3,928
  • 4
  • 33
  • 63
  • Thanks for the details.. I'm going to check that out and get back to this page in a bit.. I appreciate your time, both of you ! – Aethon May 02 '17 at 11:50
  • Just follow the tutorial in the given link. Cheers! – Tanasos May 02 '17 at 11:51
  • OK... most of what I'm finding around on the web, leads me to believe that displaying the code that I shared earlier will not transfer to email. So I have a different question.... is it possible, that when I save the div's innerhtml to the field for insertion into the email that I can put the sub divs in the correct order BEFORE sending to the email? so the email just has to display it, not process it. – Aethon May 02 '17 at 13:00
  • This is not possible. Each individual email client renders an email in its own way, which is a huge problem for everybody. – Tanasos May 02 '17 at 13:31
  • 1
    Man thanks for recommending MJML, really thanks. :) – U-Dev May 21 '20 at 17:53
  • 1
    MJML .... hureeeeeeeeeee......!!!!! – Vikram Sapate Mar 14 '22 at 18:07
11

Is this something that only works in browsers?

In a way, yes.

Most email clients only support very basic HTML and certainly nothing newer. Don't rely on new HTML/CSS/JavaScript to work in them properly; even older doesn't always work well - still need to lay out pages with tables and use inline styles for visuals.

DigiFriend
  • 1,164
  • 5
  • 10
2

flexbox isn't supported by all email clients. It displays, it can work, see below for an explanation, but not the way you may expect. I ran your sample code as-is using Zurb Foundation for Email template 1.05. I did not add any flexbox CSS. I ran the results through Litmus.com and further verified the results with actual email clients (Outlook, Gmail, Apple Mail).

This is how your results looked in Outlook 2013:

Outlook 2013 Sample of flexbox

This is how it looks in Gmail:

Gmail Sample of flexbox

The results I saw in testing mostly follows the look of Outlook 2013 email, which includes Yahoo, AOL, IOS on various devices and others.

Bold characters were ignored by IOS devices like an iPhone or an iPad. In Outlook.com (Hotmail), it looks closer to the results shown with Gmail.

Your code will display with most major email clients, but your results not be consistent and it will not sort. Using flexbox and divs is not an approach that will bring you the best results across all email clients.

You could combine specific css to help enhance what you are attempting to do, so that you can use the same code base as you might with front-end development.

Flexbox is supported

This article is several years old, but flexbox works on Apple and Android devices, but might require a -webkit tag. display:-webkit-flex; I never added that or any flexbox css.

Flexbox is not supported across the board and using it might cause more problems than it fixes. For more information, visit:

https://litmus.com/community/discussions/1500-using-flexbox-in-an-email

gwally
  • 3,349
  • 2
  • 14
  • 28
  • Yeah.. the whole point of this exercise was to allow the 5 items to be displayed in the order of importance. On the actual HTML page, changing the order, moves the line up or down in importance. It works great everywhere except for mail — where it appears as you have shown from Outlook 2013. – Aethon May 03 '17 at 13:43
  • Ideally, it would have been re-arranged like this: Liquidity 1 Growth 2 Income 3 Tax Efficiency 4 Safety 5 – Aethon May 03 '17 at 13:44
  • HTML email does not follow the same rules as you expect with typical front-end development. Few email clients are HTML5 enabled and even those clients use a limited subset of CSS3. If this is a data-set you are sending in email, I suggest pre-sorting the data, adding classes to help improve the look-and-feel over a wider range of email clients. Good luck. – gwally May 03 '17 at 16:10