Email Render For different clients

In fact, there is no difference between web front-end development and email development. But if we want to compatible with all email clients, the thing becomes a trouble. Here I list some notes to make the thing a little easier.

  • Tool: litmus
    1. Now more and more developers use Mac as the main laptop to work. If we don’t have all devices, how can we know the final render result before we send out? Here is an online website: https://litmus.com You can use it free feature to get render result on Outlook, iphone6, and Gmail. For me, it is enough. Because most of the problems are coming from Outlook. If I can fix Outlook issue, others are normally ok.
  •  position
    • we’d better use a table to design the whole layout. Note: here the width doesn’t have px .
    1. <table border="0" cellpadding="0" cellspacing="0" width="580" style="background-color: #0290ba;">
  • background image
    • For normal case, we can use the background to do.
    • <td width="100" height="100" style="background: url('someurl');">text</td>
      
      <td background="@bgImage" style="background-size: cover;background-position:50% 50%" bgcolor="#7bceeb" valign="middle">
    • For Outlook, we’d use a different one. This method is good, but if we want to achieve “background-size: cover” effect, we need to add “aspect” to control its resize ratio. (Please note: here the size we use the width’s same size. Normally we should select the larger one between  width and height. ) If not, it will resize the whole original image, it is like “background-size: contain”. Depends on which is your requirement, you need to know exactly which “background-size” you need.
    • <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:620px;height:190px;">
      <v:fill type="tile" src="@bgImage" color="#7bceeb" aspect="atmost" size="620pt 620pt" /> 
      <v:textbox inset="0,0,0,0"> 
      <![endif]-->
    • The method above will create a background, but its size is not scalable. If we want a scalable background, we’d better use following method. And your content is between the two codes. So please note: The first method we mentioned above doesn’t need to put content between codes, you just need to put above code before your td or table and then the background will be applied to your next content. But the second method here we talk needs to put your content between the two codes snip.
    • <!--[if gte mso 9]>
      <img src="@bgImage" height="190" width="620" border="0" style="display: block;" />
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="false" stroke="false" style="position:relative;top:0;left:0;width:620px; height: 190px;">
      <v:textbox inset="0,0,0,0">
      <![endif]-->
    • <!--[if gte mso 9]>
      </v:textbox>
      </v:rect>
      <![endif]-->
    • Until now, the background is ok. But if we want to put overlay above the background, we need to a little adjust the second method. (This case is very important for user experience, because sometimes, if we just put content purely over the background, the background color will impact the content’s final effect. We’d better put a dark overlay over the background. In fact, the dark overlay is between the background and the content)
    • <!--[if gte mso 9]>
      <img src="@bgImage" alt="replace" height="190" width="620" border="0" style="display: block;" />
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" fillcolor="black" stroke="false" style="position:relative;top:0;left:0;width:620px; height: 190px;">
      <v:fill opacity="0.5" />
      <v:textbox inset="0,0,0,0">
      <![endif]-->
    • <!--[if gte mso 9]>
      </v:fill>
      </v:textbox>
      </v:rect>
      <![endif]-->
    • Above method use img to solve  background problem, but its scale image is for the entire image. If you want background-position and background-size applying on the image, you need to use the following method.
    • <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroke="false" style="width:620px;height:190px; background-repeat:no-repeat; background-position:top center;">
      <v:fill type="frame" color="#181907" opacity="0.49" src="@bgImage" />
      <v:textbox inset="0,0,0,0">
      <![endif]-->
    • <!--[if gte mso 9]>
      </v:textbox></v:fill>
      </v:rect>
      <![endif]-->
  • Margin or padding
    • For Hotmail, it still supports padding-left, padding-right, and padding-bottom. But for Outlook, it doesn’t support any. Here I use a trick to solve it. As I say, it is a trick, so it can’t solve it totally. I add empty space to be as a padding or margin.
    • <!--[if gte mso 9]>
      <tr><td width="620" height="50" align="center" valign="middle"></td></tr>
      <![endif]-->
      
    • Using a negative margin-top on a div inside a td will not have any effect unless the div has any other preceding element neighbors. If you had, for example, an h1 before your div inside the td, you could use margin-top: -10px; on the div to move the div closer to the h1 visually.
  • Float
    • For normal case, we can use this to float text.
    • style="float: right"
    • But for Outlook, we’d better use align to do it.
    • <td width="620" align="center">
      <span style="font-size: 40px; font-weight: bold; text-transform: uppercase; color: #fff;"> @bodyTopic </span>
      </td>
  • display
    • ‘display:none’ is not supported in Outlook. Here is the fixed solution as below.
    • style="display: none; max-height: 0px; font-size: 0px; overflow: hidden; mso-hide: all"
  • border-radius
    • Outlook doesn’t support rounded button, what you can do is to use image as background to implement this. I know it is totally trick but there is no another way to solve it.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s