• Features
    All Features Email Previews
    Builder Checklist Spam Testing Email Analytics Litmus Extension
  • Pricing
  • Resources
    Resources Litmus Conference Convince Your Team Gmail Promotions Builder
  • Enterprise
  • Community
    Discussions Snippets Templates Jobs
  • Blog
  • Sign In
  • Litmus
  • Features
  • Pricing
  • Resources
  • Enterprise
  • Blog
  • Community
  • Discussions
  • Snippets
  • Templates
  • Jobs
  • My Account
  • Sign In
  • Community Home
  • Discussions
  • Learning
  • Snippets
  • Templates
  • Jobs
Avatar of Rémi ParmentierRP

Rémi Parmentier

  • Web Developer.
  • France
  • http://emails.hteumeuleu.fr

French Web developer.

Joined on August 26, 2014
    Replied to Discussion: Email Renderings on Litmus Look Off by Rémi Parmentier 2019-08-01 07:58:14

    @Charlotte: By <style> tags, I do mean the style in the CSS at the top of your emails. Inline style attributes are well supported widely.

    Replied to Discussion: Email Renderings on Litmus Look Off by Rémi Parmentier 2019-07-31 07:23:51

    I think Gmail renderings on iOS on Litmus are done with a non Gmail address, thus falling into what we call a GANGA rendering (Gmail Apps with Non Gmail Accounts). In this case, <style> elements are not supported. So make sure your email can work appropriately without any <style> tag.

    Replied to Discussion: Broken Image Banner by Rémi Parmentier 2019-07-29 09:54:06

    Hi Charlotte,

    I just checked your code, and it looks like the code for your "doesn't get burned" banner is different in the two versions you posted.

    Here's the one WITHOUT the merge fields:

    <!-- ORDER BETTER -->
    <tr>
        <td class="web-image" style="font-size:0pt; line-height:0pt; text-align:left;">
            <a href="https://get.chownow.com/order-better/?utm_source=iterable&utm_medium=email&utm_campaign=monthly_taste_sep19" target="_blank"><img class="text" src="https://d2axdqolvqmdvx.cloudfront.net/196576de-cee8-4d4d-991d-609b0497689e/OrderBetter_Footer2x.png" width="600" border="0" alt="Order Better"  style="color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:18px; line-height:22px; text-align:left; width: 100%;" /></a>
        </td>
    </tr>
    <tr>
        <td class="mobile-image" style="font-size:0pt; line-height:0pt; text-align:left;">
            <a href="https://get.chownow.com/order-better/?utm_source=iterable&utm_medium=email&utm_campaign=monthly_taste_sep19" target="_blank"><img class="text" src="https://d2axdqolvqmdvx.cloudfront.net/67920096-9e2e-4420-9976-e534f0ca65b0/Mobile_OrderBetter_Footer2x.png" width="600" border="0" alt="Order Better"  style="color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:18px; line-height:22px; text-align:left; width: 100%;" /></a>
        </td>
    </tr>
    <!-- END ORDER BETTER -->
    

    Here's the one WITH the merge fields:

    <!-- ORDER BETTER -->
    <tr>
        <td width="600"  align="center" class="web-image" style="font-size:0pt; line-height:0pt; text-align:center;">
            <a href="https://get.chownow.com/order-better/?utm_source=iterable&utm_medium=email&utm_campaign=monthly_taste_sep19" target="_blank"><img class="text" src="https://d2axdqolvqmdvx.cloudfront.net/196576de-cee8-4d4d-991d-609b0497689e/OrderBetter_Footer2x.png" width="600" border="0" alt="Order Better"  style="color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:18px; line-height:22px; text-align:left;" /></a>
        </td>
    </tr>
    <tr>
        <td  width="600" class="mobile-image" style="font-size:0pt; line-height:0pt; text-align:left;">
            <a href="https://get.chownow.com/order-better/?utm_source=iterable&utm_medium=email&utm_campaign=monthly_taste_sep19" target="_blank"><img class="text" src="https://d2axdqolvqmdvx.cloudfront.net/67920096-9e2e-4420-9976-e534f0ca65b0/Mobile_OrderBetter_Footer2x.png" width="100%" border="0" alt="Order Better"  style="color:#0b2135; font-family:'Lato', Arial, sans-serif; font-size:18px; line-height:22px; text-align:left;" /></a>
        </td>
    </tr>
    <!-- END ORDER BETTER -->
    

    If I apply the WITHOUT version to your merge version, everything seems to works fine.

    Replied to Discussion: html5 Video in email not showing in iOS 12.4? by Rémi Parmentier 2019-07-29 09:43:35

    Hello,

    I tested your code with the following video, and everything works as expected on iOS 12.4 on Apple Mail. So my guess is the problem is not iOS related.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Video</title>
        <style>
            .video-wrapper {display:none;}
            @media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px) 
            {
                .video-wrapper { display:block!important; }
                .video-fallback { display:none!important; }
            }
            @supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {
                div[class^=video-wrapper] { display:block!important; }
                div[class^=video-fallback] { display:none!important; }
            }
            #MessageViewBody .video-wrapper { display:block!important; }
            #MessageViewBody .video-fallback { display:none!important; }
        </style>
    </head>
    <body>
        <a href="https://litmus.com/community/discussions/8164-html5-video-in-email-not-showing-in-ios-12-4">html5 Video in email not showing in iOS 12.4?</a>
    
        <!-- MOVIE -->
        <!-- video section -->
        <div class="video-wrapper" style="display:none;">
            <video width="100%" controls="" poster="https://www.html5rocks.com/en/tutorials/video/basics/poster.png">
                <source src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4">
                <!-- fallback 1 -->
                <a href="https://link.com"><img width="640" style="display:block;width:100%;min-width:100%;max-width:100%;height:auto;" src="http://www.html5rocks.com/en/tutorials/video/basics/poster.png" alt=""></a>
            </video>
        </div>
        <!-- fallback section -->
        <div class="video-fallback">
            <a href="https://link.com"><img width="640" style="display:block;width:100%;min-width:100%;max-width:100%;height:auto;" alt="" src="http://www.html5rocks.com/en/tutorials/video/basics/poster.png"></a>
        </div>
        <!-- /MOVIE -->
    </body>
    </html>
    
    Replied to Discussion: Media Query Font Sizes Not Working by Rémi Parmentier 2019-07-22 14:37:51

    Hello Charlotte,

    I'd say the problem comes from the bottom image Mobile_OrderBetter_Footer2x.png. It doesn't have any width set, so it will display at its natural 750px width. Because of that, your entire email will behave as if it's 750px wide. Because of that, Apple Mail on iOS will resize your entire email to fit the screen size, and thus make your text smaller than they should.

    So add a style="width:100%;" on that image and you should be good.

    Replied to Discussion: Unwanted spacing above <a> links in Outlook (all Win versions) and Windows 10 by Rémi Parmentier 2019-06-04 16:01:13

    Hi Steven ! Nice to see you've been experimenting with my technique. I gave a quick look at your code, and I think the problem comes from this:

    <a href="http://example.com" style="display:block;text-decoration:none;">
        <p id="COPY-normal">
            LEFT (scale)
        </p>
    </a>
    

    While wrapping any content in an <a> element is perfectly valid in HTML5, some email clients don't support this. Especially Outlook and it's word rendering engine. So I would strongly advise against this, and use a single <a> at the text level only. Like this:

    <p id="COPY-normal">
        <a href="http://example.com" style="display:block;text-decoration:none;">
            LEFT (scale)
        </a>
    </p>
    

    Let me know if you have any other question.

    Replied to Discussion: Outlook.com and Office 365 targeting stopped working by Rémi Parmentier 2019-05-27 12:18:39

    Hi Jun,

    This has changed indeed in the past two months. A new way to target Outlook.com is to use an attribute selector with a class prefixed by x_. Example :

    [class="x_fallback"] {
       color: #004991;
       font-size: 100px;
    }
    

    The reason this works is that now Outlook.com supports attribute selectors and keep their values intact. But it will still prefix class names by x_ (and it's the only webmail to use this exact prefix). So <td class="fallback"> will become <td class="x_fallback"> only in Outlook.com and thus the styles will match.

    Replied to Discussion: Outlook in darkmode messes with the css by Rémi Parmentier 2019-05-23 07:33:45

    Hello! I wrote an article about Outlook.com's dark mode earlier this year.

    A way you can override Outlook.com dark styles is to add a class to the element you want and then use !important declarations.

    <table bgcolor="#ffffff" style="width:70%;" align="center" border="0" cellspacing="0" cellpadding="0" class="bgcolor-white"> <tbody> <tr> <td bgcolor="#ffffff" class="bgcolor-white">
    
    <style>
     .bgcolor-white { background:white !important; }
    </style>
    

    However, I'd really advise not to do this. If someone uses Outlook.com's dark mode, it's because they prefer it that way. They might know about the "Turn the lights on" button because it's presented by Outlook's interface when you activate dark mode the first time.

Litmus Logo
    Company
  • Team
  • Customers
  • Careers
  • Contact
  • Brand
    Product
  • Features
  • Pricing
  • Enterprise
  • Extension
    Tools
  • Events
  • Labs
  • Scope
  • Resources
    Help
  • Knowledgebase
  • Status
  • Community
  • Trust
Subscribe to our emails

Copyright © Litmus Software, Inc. 2005-2023. 675 Massachusetts Ave., 11th Floor, Cambridge, MA 02139. View our Terms of Service or Privacy Policy. Send us a note to hello@litmus.com or give us a call at +1 (866) 787-7030

Sign in to Community

Are you new to Litmus Community?

Create a Free Litmus Account

Use your existing Litmus login to connect with the world’s most amazing email designers.

Having trouble signing in? Try Forgot password

Join the Litmus Community

Sign up to Community

Litmus uses the information you provide us to bring you great content about email marketing trends, stats, events and relevant products and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy
Already have a Litmus login? Sign in

Get more out of your Litmus account

Your free Community account includes access to the Litmus Community, as well as limited access to Litmus Builder. Check out the entire Litmus Email Creative Platform when you sign up for a free 7-day trial.

  • Email Previews

    Get 2,000 screenshots/month in popular email clients, including key international webmail clients, to ensure your emails look great everywhere.

  • Builder

    Quickly identify issues pre-send that could impact your deliverability—and get actionable advice for how to fix them.

  • Checklist

    Get screenshots in popular email clients to ensure your email looks great everywhere.

  • Code Editor Integrations

    Preview and troubleshoot your emails right where you build with seamless integrations between Litmus and any local code editor, like Dreamweaver or Sublime.

  • ESP Integrations

    Save time producing and troubleshooting your campaigns with seamless integrations between Litmus and your email service provider (ESP).

  • Spam Testing

    Quickly identify issues pre-send that could impact your deliverability—and get actionable advice for how to fix them.

  • Email Analytics

    Optimize your campaigns with subscriber-level insights to improve segmentation and targeting strategies.

  • Private Litmus Teams

    Get full team visibility. Manage Litmus access and monitor usage across private teams.

No thanks, just sign me up without a trial

Forgot password

Enter your email address to reset your password


Already have a Litmus login? Sign in