Now here are the webmails in which Flexbox is not supported : But this highlights a potential important problem : the slightest HTML modification done by a webmail can have huge undesired secondary effects when using Flexbox. This problem can be solved by applying the flex property to any other tag than an. The flexbox layout then doesn't apply any more on the tags, but on the tags.
#MJML EMAIL SIGNATURE CODE#
The previous HTML code is then turned into the following :
Here's the problem : the webmail of La Poste automatically wraps every tag with a. However, my grid example wouldn't work in so far with La Poste. Here's a final version of my test email with inlined styles (adjusted by hand).Īnd the good news is, every properties related to Flexbox listed above (and every possible values for each one) are fully supported in the following webmails : This is the case with Premailer, but also with Mailchimp, Putsmail, Campaign Monitor or even Zurb's premailer. Absolutely every inliners I tried didn't care about these multiple declarations of the display property, and would only keep the last one. And this is where I hit a first difficulty to test. There are tons of tools to do this automatically. Some webmails (like Gmail or on mobile) don't support tags, so it's usually better to apply styles directly inline on each tag with the style attribute. Thus, the main property display:flex should be written like this : display:-webkit-flex
If Flexbox's support in modern browsers is pretty good, its use still requires -webkit- prefixes (for Safari 8 or less) or -ms- prefixes (for IE 10). Here is an example of an images' grid I used to make my tests. If you're not familiar with Flexbox, I invite you to check out this complete guide to Flexbox at CSS-Tricks or play around on this Flexbox playground. Some properties must be applied on a parent element :Īnd other properties must be applied on its children : The main principle of Flexbox is to apply properties on a parent element that will have an effect on its direct children. I've made a few tests to see it it was also the case in practice. Flexbox is, theoratically, the perfect contender to build complex layouts from mobile to desktop without media queries. And luckily, the CSS Flexible Box Layout Module (Flexbox) allows exactly that. In order to adapt an email layout from mobile to desktop, it is important to find technical solutions that don't rely on its use. Not every webmails or mail applications support media queries. Here is an english translation for you email geeks. I've posted an article about using flexbox in an email on my blog (in french). This week-end, I decided to see how it would work in an email, so I've run a few tests.
#MJML EMAIL SIGNATURE HOW TO#
The difficulty I am anycodings_email having is not an issue with MJML itself, but anycodings_email more around certain email clients not anycodings_email supporting media queries/styles, and so I am anycodings_email unsure as to how to create an effective way anycodings_email of displaying different images for desktop anycodings_email and mobile view.Hello everyone ! I've been playing around with Flexbox for a while.
I am currently using MJML to create anycodings_email responsive emails.
0 kommentar(er)
