• 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 Fabio CarneiroFC

Fabio Carneiro

  • Email & User Experience Designer
  • Atlanta, GA
  • http://www.flcarneiro.com

This user hasn't filled out their bio yet...

Joined on August 2, 2013
    Replied to Discussion: Is Yahoo now removing all code within media queries? by Fabio Carneiro 2014-10-15 20:23:11

    Rather, I should say: it looks like _filtered is being used to weed out properties not supported in Mail for a reason; presumably, because they might potentially interfere with part of the outer Yahoo mail app.

    That safeguard is, in theory, done by appending the yui_X_XX_... prefix on IDs and classes, but it could be that maybe there was a way to get around that and serve CSS that could directly affect some part of mail.yahoo.com directly.

    Replied to Discussion: Is Yahoo now removing all code within media queries? by Fabio Carneiro 2014-10-15 20:17:24

    I've been looking at that for the past hour or so. _filtered is applied selectively to unsupported declarations, from what I'm seeing.

    On an "@media screen" trigger, _filter gets applied on a ruleset that contains the 'animation' (and prefixed versions thereof) property, but isn't applied on another ruleset that contains height, overflow, and width properties.

    At first blush, it looks like they're just weeding out the things Yahoo doesn't support.

    Replied to Discussion: Responsive Email Possible with no <body>, <head> tags? by Fabio Carneiro 2014-09-23 13:50:11

    It's absolutely possible, yes, though technically the email wouldn't be "responsive".

    You'd be doing it with a combination of fluid and non-fluid table structures; I call it 'spongy' development, it's been called 'hybrid' development as well. Though there are a few caveats, this method produces emails that are 'responsive' across all email clients (the ones that matter, anyway). If your design relies on pixel-perfect dimensions, though, this isn't a good method to use; I'd say it's totally incompatible, actually.

    I talked about this method in the advanced workshop held at TEDC last month. Here's some of the code we wrote, which illustrates what I'm talking about:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title>The Latest from Table Junkies</title>
            <style type="text/css">
                /* RESET STYLES */
                p{margin:1em 0;}
                table{border-collapse:collapse; table-layout:fixed;}
                img, a img{border:0; height:auto; outline:none; text-decoration:none;}
                h1, h2, h3, h4, h5, h6{display:block !important; margin:0 !important; padding:0 !important;}
                body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
    
                /* CLIENT-SPECIFIC STYLES */
                img{-ms-interpolation-mode: bicubic;} /* Force IE to smoothly render resized images. */
                #outlook a{padding:0;} /* Force Outlook 2007 and up to provide a "view in browser" message. */
                table{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up. */
                .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Outlook.com to display emails at full width. */
                p, a, li, td, blockquote{mso-line-height-rule:exactly;} /* Force Outlook to render line heights as they're originally set. */
                a[href^="tel"], a[href^="sms"]{color:inherit; cursor:default; text-decoration:none;} /* Force mobile devices to inherit declared link styles. */
                p, a, li, td, body, table, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;} /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
                .ExternalClass, .ExternalClass p, .ExternalClass td, .ExternalClass div, .ExternalClass span, .ExternalClass font{line-height:100%;} /* Force Outlook.com to display line heights normally. */
    
                /* STRUCTURAL STYLES */
                .emailContainer{max-width:640px;}
                .flexibleColumn{max-width:320px;}
                .flexibleGrid{max-width:213px;}
    
                /* CONTENT STYLES */
                #heroImage{width:100% !important;}
    
                /* MOBILE STYLES */
                @media only screen{ /* If media queries are supported, make all images fluid. */
                    img{width:100%;}
                }
    
                @media screen and (min-width:768px){ /* Set min-width for clients that have media query support, but no max-width support. */
                    /* STRUCTURAL STYLES */
                    .emailContainer{width:640px !important;}
                    #emailLogo{max-width:200px;}
                    #emailPreview{max-width:440px;}
                    .flexibleColumn{width:50% !important;}
                    .flexibleGrid{width:33% !important;}
                }
    
                @media screen and (max-width:768px){
                    /* STRUCTURAL STYLES */
                    #emailPreview, #emailLogo{max-width:100% !important; width:100% !important;}
                    .flexibleColumn{max-width:50% !important; width:100% !important;}
                    .flexibleGrid{max-width:33% !important;}
    
                    /* CONTENT STYLES */
                }
    
                @media only screen and (max-width:480px){
                    /* CLIENT-SPECIFIC STYLES */
                    body{width:100% !important; min-width:100% !important;} /* Force iOS Mail to render the email at full width. */
    
                    /* STRUCTURAL STYLES */
                    .flexibleColumn{max-width:100% !important; width:100% !important;}
                    .flexibleGrid{max-width:50% !important;}
    
                    /* CONTENT STYLES */
                }
            </style>
        </head>
        <body>
            <center>
                <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
                    <tr>
                        <td align="center" valign="top" id="bodyCell">
    
    
                            <table align="center" border="0" cellspacing="0" cellpadding="0" width="100%">
                                <tr>
                                    <td align="center" valign="top" id="emailPreheader">
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="emailContainer">
                                            <tr>
                                                <td align="center" valign="top">
    
    
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    <table align="center" border="0" cellspacing="0" cellpadding="0" dir="rtl" width="640">
                                                    <tr>
                                                    <td align="center" valign="top" width="440">
                                                    <![endif]-->
                                                    <table align="right" border="0" cellpadding="10" cellspacing="0" width="100%" id="emailPreview">
                                                        <tr>
                                                            <td align="left" valign="top" id="previewContent">
                                                                Spruce up your tables. See what we did there? New products in the store.
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    </td>
                                                    <td align="center" valign="top" width="200">
                                                    <![endif]-->
                                                    <table align="left" border="0" cellpadding="10" cellspacing="0" width="100%" id="emailLogo">
                                                        <tr>
                                                            <td align="left" valign="top" id="logoContent">
                                                                <h1 id="logo"><a href="#">Tj</a></h1>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    </td>
                                                    </tr>
                                                    </table>
                                                    <![endif]-->
    
    
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center" valign="top" id="emailHeader">
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="emailContainer">
                                            <tr>
                                                <td align="center" valign="top">
    
    
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    <table align="center" border="0" cellspacing="0" cellpadding="0" width="640">
                                                    <tr>
                                                    <td align="center" valign="top">
                                                    <![endif]-->
                                                    <table border="0" cellpadding="10" cellspacing="0" width="100%">
                                                        <tr>
                                                            <td align="center" valign="top">
                                                                <a href="#"><img src="~img/hero.jpg" width="620" id="heroImage" style="max-width:620px;"></a>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td valign="top" class="headerContent">
                                                                <h2>The Latest from Table Junkies</h2>
                                                                <br />
                                                                We're taking it back to the mid-century with our latest crop of products. Embracing the old and making it new again, our latest tables and dining accessories are the perfect compliment to any home. First, we've got two new additions designed to make your meals better:
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    </td>
                                                    </tr>
                                                    </table>
                                                    <![endif]-->
    
    
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center" valign="top">
    
    
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    <table align="center" border="0" cellspacing="0" cellpadding="0" width="640">
                                                    <tr>
                                                    <td align="center" valign="top" width="320">
                                                    <![endif]-->
                                                    <table align="left" border="0" cellpadding="10" cellspacing="0" width="100%" class="flexibleColumn">
                                                        <tr>
                                                            <td align="center" valign="top">
                                                                <table border="0" cellspacing="0" cellpadding="0" width="100%">
                                                                    <tr>
                                                                        <td align="center" valign="top">
                                                                            <a href="#"><img src="~img/teapot.jpg" width="300" style="max-width:480px;"></a>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td align="center" valign="top" class="headerContent">
                                                                            <h3>The Teapot</h3>
                                                                            An unusual approach to a classic piece of kitchen-ware.
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td align="center" valign="top" class="headerButtonContainer">
                                                                            <table border="0" cellpadding="0" cellspacing="0" class="headerButton">
                                                                                <tr>
                                                                                    <td align="center" valign="middle" class="headerButtonContent">
                                                                                        <a href="#">Shop Now</a>
                                                                                    </td>
                                                                                </tr>
                                                                            </table>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    </td>
                                                    <td align="center" valign="top" width="320">
                                                    <![endif]-->
                                                    <table align="left" border="0" cellpadding="10" cellspacing="0" width="100%" class="flexibleColumn">
                                                        <tr>
                                                            <td align="center" valign="top">
                                                                <table border="0" cellspacing="0" cellpadding="0" width="100%">
                                                                    <tr>
                                                                        <td align="center" valign="top">
                                                                            <a href="#"><img src="~img/bowl.jpg" width="300" style="max-width:480px;"></a>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td align="center" valign="top" class="headerContent">
                                                                            <h3>The Bowl</h3>
                                                                            Turn heads and whet appetites with this unique bowl.
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td align="center" valign="top" class="headerButtonContainer">
                                                                            <table border="0" cellpadding="0" cellspacing="0" class="headerButton">
                                                                                <tr>
                                                                                    <td align="center" valign="middle" class="headerButtonContent">
                                                                                        <a href="#">Shop Now</a>
                                                                                    </td>
                                                                                </tr>
                                                                            </table>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    </td>
                                                    </tr>
                                                    </table>
                                                    <![endif]-->
    
    
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center" valign="top" id="emailGrid">
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="emailContainer">
                                            <tr>
                                                <td align="center" valign="top">
    
    
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    <table align="center" border="0" cellspacing="0" cellpadding="0" width="640">
                                                    <tr>
                                                    <td align="center" colspan="3" valign="top" width="640">
                                                    <![endif]-->
                                                    <table align="center" border="0" cellpadding="10" cellspacing="0" width="100%">
                                                        <tr>
                                                            <td align="center" valign="top" class="gridContent">
                                                                <h2>What&rsquo;s a table without a great chair?</h2>
                                                                <br />
                                                                Relax in style with six new chairs from Table Junkies:
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    </td>
                                                    </tr>
                                                    <tr>
                                                    <td align="center" valign="top" width="213">
                                                    <![endif]-->
                                                    <table align="left" border="0" cellpadding="10" cellspacing="0" width="50%" class="flexibleGrid">
                                                        <tr>
                                                            <td align="center" valign="top">
                                                                <table border="0" cellspacing="0" cellpadding="0" width="100%">
                                                                    <tr>
                                                                        <td align="center" valign="top">
                                                                            <a href="#"><img src="~img/chair1.jpg" width="120" style="max-width:120px;"></a>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    </td>
                                                    <td align="center" valign="top" width="213">
                                                    <![endif]-->
                                                    <table align="left" border="0" cellpadding="10" cellspacing="0" width="50%" class="flexibleGrid">
                                                        <tr>
                                                            <td align="center" valign="top">
                                                                <table border="0" cellspacing="0" cellpadding="0" width="100%">
                                                                    <tr>
                                                                        <td align="center" valign="top">
                                                                            <a href="#"><img src="~img/chair2.jpg" width="120" style="max-width:120px;"></a>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    </td>
                                                    <td align="center" valign="top" width="213">
                                                    <![endif]-->
                                                    <table align="left" border="0" cellpadding="10" cellspacing="0" width="50%" class="flexibleGrid">
                                                        <tr>
                                                            <td align="center" valign="top">
                                                                <table border="0" cellspacing="0" cellpadding="0" width="100%">
                                                                    <tr>
                                                                        <td align="center" valign="top">
                                                                            <a href="#"><img src="~img/chair3.jpg" width="120" style="max-width:120px;"></a>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    </td>
                                                    </tr>
                                                    <tr>
                                                    <td align="center" valign="top" width="213">
                                                    <![endif]-->
                                                    <table align="left" border="0" cellpadding="10" cellspacing="0" width="50%" class="flexibleGrid">
                                                        <tr>
                                                            <td align="center" valign="top">
                                                                <table border="0" cellspacing="0" cellpadding="0" width="100%">
                                                                    <tr>
                                                                        <td align="center" valign="top">
                                                                            <a href="#"><img src="~img/chair1.jpg" width="120" style="max-width:120px;"></a>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    </td>
                                                    <td align="center" valign="top" width="213">
                                                    <![endif]-->
                                                    <table align="left" border="0" cellpadding="10" cellspacing="0" width="50%" class="flexibleGrid">
                                                        <tr>
                                                            <td align="center" valign="top">
                                                                <table border="0" cellspacing="0" cellpadding="0" width="100%">
                                                                    <tr>
                                                                        <td align="center" valign="top">
                                                                            <a href="#"><img src="~img/chair2.jpg" width="120" style="max-width:120px;"></a>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    </td>
                                                    <td align="center" valign="top" width="213">
                                                    <![endif]-->
                                                    <table align="left" border="0" cellpadding="10" cellspacing="0" width="50%" class="flexibleGrid">
                                                        <tr>
                                                            <td align="center" valign="top">
                                                                <table border="0" cellspacing="0" cellpadding="0" width="100%">
                                                                    <tr>
                                                                        <td align="center" valign="top">
                                                                            <a href="#"><img src="~img/chair3.jpg" width="120" style="max-width:120px;"></a>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    </td>
                                                    </tr>
                                                    </table>
                                                    <![endif]-->
    
    
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center" valign="top" id="emailArticles">
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="emailContainer">
                                            <tr>
                                                <td align="center" valign="top">
    
    
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    <table align="center" border="0" cellspacing="0" cellpadding="0" width="540">
                                                    <tr>
                                                    <td align="center" valign="top">
                                                    <![endif]-->
                                                    <table border="0" cellpadding="10" cellspacing="0" width="90%">
                                                        <tr>
                                                            <td align="left" valign="top" class="articleContent">
                                                                <h2>From Our Blog</h2>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td align="left" valign="top" class="articleContent">
                                                                <h5>April 18, 2014</h5>
                                                                <h3>Revamping Our Workshop</h3>
                                                                We love building quality furniture, but it can be a real mess. Check out how we revamped our workshop and kept things tidy.
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td valign="top" class="articleButtonContainer">
                                                                <table border="0" cellpadding="0" cellspacing="0" class="articleButton">
                                                                    <tr>
                                                                        <td align="center" valign="middle" class="articleButtonContent">
                                                                            <a href="#">Read More</a>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td valign="top" class="articleContent">
                                                                <h5>April 7, 2014</h5>
                                                                <h3>New Finish Options</h3>
                                                                We're thrilled to announce that all of our tables have new finish options available: Midnight Silk, Natural High Noon, and Lavendar Street. Check them out in the store.
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td valign="top" class="articleButtonContainer">
                                                                <table border="0" cellpadding="0" cellspacing="0" class="articleButton">
                                                                    <tr>
                                                                        <td align="center" valign="middle" class="articleButtonContent">
                                                                            <a href="#">Read More</a>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    </td>
                                                    </tr>
                                                    </table>
                                                    <![endif]-->
    
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center" valign="top" id="emailFooter">
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="emailContainer">
                                            <tr>
                                                <td align="center" valign="top">
    
    
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    <table align="center" border="0" cellspacing="0" cellpadding="0" width="640">
                                                    <tr>
                                                    <td align="center" valign="top">
                                                    <![endif]-->
                                                    <table border="0" cellpadding="10" cellspacing="0" width="100%">
                                                        <tr>
                                                            <td align="center" valign="top" class="footerContent">
                                                                <span>1234 Main Street, Anywhere, MA 01234, USA</span>
                                                                <br />
                                                                <a href="#">Unsubscribe</a> | <a href="#">View this email in your browser</a>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    </td>
                                                    </tr>
                                                    </table>
                                                    <![endif]-->
    
    
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
    
    
                        </td>
                    </tr>
                </table>
            </center>
        </body>
    </html>
    

    Take this example, delete the media query styles, and check it out in a browser; everything flows and stacks as you'd expect; the media queries are only there to shore up some of the structure and make that stacking and flowing 'smooth'.

    The gist is this: most of the email works on a fluid basis, with percentage-based widths (generally 100%), except for the bits where you need more structure, which would get pixel-based widths. Tables are 'floated' using the align attribute, which works way more consistently than CSS floats do.

    The media query styles are used for progressive enhancement (as they should be), and not as a hard requirement of a viewable page (or email, in this case).

    None of the CSS in the example above is inlined, but that's for clarity's sake. You'd inline the CSS as normal.

    Feel free to ask questions if there's anything that looks weird or you don't get; I'll try to get in here to answer.

    Replied to Discussion: Suddenly Dropping Open Rate by Fabio Carneiro 2014-08-28 14:14:47

    Hey Abby - would you mind sending me a bit of information? A DM on Twitter would be fine. I can ask our delivery folks to take a look at what's going on.

    Replied to Discussion: Right hand gap in iOS? by Fabio Carneiro 2014-08-28 13:53:01

    Hey Sam - give this bit of CSS a shot:

    @media only screen and (max-width:480px){
    body{width:100% !important; min-width:100% !important;} /* Force iOS Mail to render the email at full width. */
    }

    It doesn't have to be in a media query, but I like to have CSS be served only where it's needed, hence the query. Might fix your issue.

    Replied to Discussion: Roll Call: Who's attending #TEDC14? by Fabio Carneiro 2014-08-01 16:16:53

    It's this year?

    I booked my flight for 2017. Oops.

    Replied to Discussion: Creating Animated GIFs by Fabio Carneiro 2014-06-25 15:05:57

    For MailChimp's UX Newsletter, we really like LICEcap for creating gifs; we've found that it allows a pretty nice level of fidelity while keeping file size low.

    Replied to Discussion: When is OK email design good enough? by Fabio Carneiro 2014-06-10 15:03:23

    For me, shit pizza breaks down like so:
    1. Pizza Hut
    2. Little Caesar's
    3. Domino's
    4. Papa John's

    I share your midwestern sensibilities; whenever I'm in the midwest, I make it a point to stop at Little Caesar's and White Castle.

    Probably because, deep down, I hate myself.

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-2022. 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