Leave a Reply

2 comments

  1. Responsive Email cannot be achieved properly or even at all with <div> you will need to use <table>

    https://www.campaignmonitor.com/blog/post/3472/div-tags-in-html-email-newsletters/

    Services such as mailchimp know about these and have their own built in tool to design email.

    http://templates.mailchimp.com/development/responsive-email/responsive-column-layouts/

    I suggest you use a library such as this one to accomplish a better responsive design for your email.

    http://zurb.com/ink/docs.php

    Example code:

    <table class="container">
      <tr>
        <td>
    
          <table class="row">
            <tr>
              <td class="wrapper">
    
                <table class="eight columns">
                  <tr>
                    <td>
    
                      Eight Columns
    
                    </td>
                    <td class="expander"></td>
                  </tr>
                </table>
    
              </td>
              <td class="wrapper last">
    
                <table class="four columns">
                  <tr>
                    <td>
    
                      Four Columns
    
                    </td>
                    <td class="expander"></td>
                  </tr>
                </table>
    
              </td>
            </tr>
          </table>
    
        </td>
      </tr>
    </table>
    

    Also many email provider and client doesnt support linked css so you have to rely on inliner tools which will apply style=”” attributes to your HTML elements.

  2. As the links say, div can and should be used in email, but the complex layouts require Tables. I personally think a combination is the best course, which I will use in my sample below.

    The major issue that jumps out at me is that you have a link tag to the stylesheet (almost universally no support on email clients) and that you use more complex CSS (content:) on the media query (also not well supported).

    I created some code using table and div while also updated some css, etc to your above code – including Outlook conditional statements. You would likely need to test this across clients, but this is the best and pretty much only way to do an image swap in email. You can also change the background-image in the media queries if you want to switch it again at a lower screen size.

    See below:

     .ourStory { width:640px;}
     
     @media only screen and (max-width: 640px) {
     .ourStory { width:100% !important;}
     .image1 {display:none !important; visibility:hidden !important; overflow:hidden; width:0px !important; height:0 !important; line-height:0 !important;}
     .bgimage {width:100% !important; height:100px !important;}	 
     }
    <!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;' name='viewport' />
        <title></title>
    <style>
     
    <!-- Inline Style Sheet Here -->
    
    </style>
    </head>
    
    <body>
        <div class='ourStory' style="width:100%; max-width:640px;">
        <!--[if (gte mso 9)|(IE)]>
      <table width="640" align="center" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td>
    <![endif]-->
    <table class="ourStory" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:640px;">
    <tr>
    <td class="bgimage" background="http://placehold.it/639x100" bgcolor="#7bceeb" width="100%" height="150" valign="top">
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:639px; height:150px;">
        <v:fill type="tile" src="http://placehold.it/639x100" color="#7bceeb" />
        <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
      <![endif]-->
      <div><img class="image1" width="100%" src='http://placehold.it/640x150' style="border:none; display:block;" />
        </div>
      <!--[if gte mso 9]>
        </v:textbox>
      </v:rect>
      <![endif]-->
    </td>
        </tr>
        </table>
         <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
        </div>
    </body>
    </html>