By continuing to use our website, you consent to the use of cookies. Please refer our cookie policy for more details.
    Grazitti Interactive Logo

      Landing Page

      Building Responsive Design Emailers

      Nov 06, 2013

      4 minute read

      Record high of 47% emails are now opened by users on a mobile device [1]. With increasing usage of smart phones and tablets, there are 80% more chances of your email getting ignored by the users [1] if they are not responsive and mobile friendly. Responsive email designs allow you to tailor your marketing email as per the size of the device in which they are opened.

      Create Responsive Landing Pages in Marketo

      With responsive emails, you can:

      ✓ Create better user experience
      ✓ Gain high CTA from email campaigns
      ✓ Drive user engagement
      ✓ Leverage mobile commerce
      ✓ Increase your marketing ROI
      ✓ Customize emails with mobile specific messages

      Implementing Responsive Email Design:

      A special set of CSS styles acting as conditional statements or dynamic rules are used as media query in responsive email. They help make emails more presentable and clear on different screen sizes.

      Devices Vs. Apps: What Determines Support?

      It’s a common misconception that media query and responsive email support is based on the device or operating system. On the contrary, the application for the email viewing provides support. In practice, you can view the same email in two apps on the same phone, with each app having different support for responsive design.

      Before we start, here are few guidelines for building Responsive HTML Emails:

      • Do not use tables for structure, use div elements instead. Tables are for presenting data in tabular format and not deciding the layout
      • Nested tables are more reliable than margins and padding
      • Avoid CSS shorthand (Use full definitions)
      • Do not use PNG images because Lotus Notes 6 and 7 do not show them
      • For every paragraph, explicitly set a margin, default settings vary with each email client


      1. Wrap the email in a 100% width Table
        Email clients only take the code within the body tags, not the body tags themselves. To use a background color, you must create a 100% width table to “fake” the background effect.

        <table width=”100%”>
        <table width=”600″ align=”center”>
        <td>Lorem ipsum dolor sit amet.</td>

      2. No Wider than 600px
        Many people don’t actually open their email; they view these in the preview panel. Smallest preview panel on an average is about 600px. If you plan to keep your emails in the preview panels, then this guideline can be ignored, else design your emails accordingly.
      3. Background Images
        Some canvas background images don’t display in email clients, avoid using those. Background images for individual table cells are generally acceptable but may not appear in some clients such as Lotus Notes. This code can be used for background images

        <td width=”100%” align=”center” height=”120″ bgcolor=”#fff” background=”image.jpg” style=”width:650px; min-width:100%; min-height:100%;background-image:url(image.jpg); background-color:#fff;” valign=”top”>
        <!–[if gte mso 9]>
        <v:image xmlns:v=”urn:schemas-microsoft-com:vml” id=”theImageA” style=’behavior: url(#default#VML); display: inline-block; position: absolute; width: 650px; height: 120px; top: 0; left: 0; border: 0; z-index: 1;’ src=”image.jpg” />
        <v:shape xmlns:v=”urn:schemas-microsoft-com:vml” id=”theTextA” style=’behavior: url(#default#VML); display: inline-block; position: absolute; width: 650px; height:120px; top: 0; left: 0; border: 0; z-index: 2;’>

      4. Stop Yahoo! Mail from rendering your media queries
        Each version of Yahoo ignores your media query declaration along with all of its conditional statements. These styles are rendered outside of the media query. Also, effectively ignoring the first declaration it gets confused. For example:

        @media only screen and (max-device-width: 480px) {
        #smallScreen {width:100px; padding:2px;}
        .desktop {width:500px; padding:10px;}

        The code above will get converted into this:
        As you can see, Yahoo! converts each of your style names into a name that is unique to your email. Yahoo does this to keep your style separate from one in their interface. Later, HTML will also be converted:

        _filtered #yiv1449593645 {padding:2px;}
        #yiv1449593645 .yiv1449593645desktop {width:500px;padding:10px;}

        <div class=”desktop”>Text</div>

        Is converted to:

        <div class=” yiv1449593645desktop “>Text</div>

        Yahoo’s parsing tool does not take into account media queries and the way they are formatted.

        A way out is to use attribute selectors since they are not support either. Using this method your styles and media query will not get picked up by Yahoo.

        To give an example, if the original query is converted, it would look like this:

        @media only screen and (max-device-width: 480px) {
        *[id=smallScreen] {width:100px; padding:2px;}
        *[class=desktop] {width:500px; padding:10px;}

        Another solution is: attribute selectors. When you add a “*[class]” before all class declarations and “*[id]” before ID’s like this:

        @media only screen and (max-device-width: 480px) {
        *[id]#smallScreen {width:100px; padding:2px;}
        *[class].desktop {width:500px; padding:10px;}

      5. Remember to always “Test”
        It is important you test your email templates in many clients and services. The web based offerings such as Gmail, Yahoo, and Hotmail. Also, do not forget about email clients such as Outlook and Thunderbird and many more. There are many tools that enable testing in all platforms and one of the best PAID tools (offering 7 days free trial) to test in almost all platforms is Litmus.


      Responsive websites have been around for some time and everyone knows their importance. A responsive email design is the differentiating and user engagement strategy especially when your average user is looking at his mobile device screen 150 times a day [1].

      Grazitti offers responsive design services to enable a deeper and meaningful connection with your partners, customers and prospects to build a loyal customer base that is actively going to look forward to your emails.
      Give us a call or write to us today to start getting those emails opened and read on any device.



      What do you think?

      0 Like

      0 Love

      0 Wow

      0 Insightful

      0 Good Stuff

      0 Curious

      0 Dislike

      0 Boring

      Didn't find what you are looking for? Contact Us!