First, let me give you an introduction to the basics of Email Campaigns since this my first post about this topic. (Skip to the codes)
Creating emailers (HTML mailers) is a bit more challenging than creating straightforward HTML/CSS pages. In HTML/CSS pages developers worry about the consistency of how browsers render the code. Plus of course the screen resolution/size of the device. In HTML mailers we worry about consistency across mail clients – Gmail (desktop/mobile web/app), Outlook (desktop / mobile web/app), Yahoo and a host of others.
First off, you need to set the expectations correctly. You need to maybe check your User data first. Target the top 2-3 mail clients that will get you the most users covered. To make things easy, I always test Gmail + Outlook + Yahoo. Gmail and Yahoo on browser and app pretty much behave in the same way. Outlook is a little bit more “problematic”. Think IE. 🙂
Know that when creating mailers we normally use <table>
instead of <div>
. Tables are way more predictable and are rendered better by most email clients.
Most mailers also are one-column. Then sometimes they extend to two columns somewhere in the middle content. Designing and Planning your mailer is crucial. Again this leads to setting the expectation.
Sometimes what makes it challenging is when you want to have a “responsive emailer”. Where your two columns or three columns in a Desktop layout will stack to a one-column on mobile. In this case, you will need to use Conditional statements. Think of it as your Media Query for emailers. Yes you can use media query for mailers however it is best to keep it at a minimum.
So here we are. These are the conditional statements that you can use:
For codes that you want to display for Microsoft Outlook
<!--[if gte mso 9]> your code here <![endif]-->
For codes that you want to display only for non-Microsoft Outlook
<!--[if !mso 9]><!-- --> your code here <!--<![endif]-->
Here is how we can use both conditional statements in our code. For example if you want to switch 2 sizes of the same image for your mailer. We can do someting like this
<td>
<!--[if gte mso 9]> <img src="banner300px.jpg" /> <![endif]-->
<!--[if !mso 9]><!-- --><img src="banner600px.jpg" style="width:300px" /><!--<![endif]--></td>
This is just one simple way of swapping codes using conditional statements for Microsoft Outlook and non-MS Outlook clients.
If you have questions or need help using conditional statements for your emailers, do hit up the comment section below!
Thanks!