Style Guide
<code>
| <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> | |
| <html> | |
| <head> | |
| <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0” /> | |
| <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” /> | |
| <style type=”text/css“> | |
| ReadMsgBody{ width: 100%;} | |
| .ExternalClass {width: 100%;} | |
| .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} | |
| body {-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;margin:0 !important;} | |
| p { margin: 1em 0;} | |
| table td { border-collapse: collapse;} | |
| img {outline:0;} | |
| a img {border:none;} | |
| @-ms-viewport{ width: device-width;} | |
| </style> | |
| <style type=”text/css“> | |
| @media only screen and (max-width: 480px) { | |
| .container {width: 100% !important;} | |
| .footer { width:auto !important; margin-left:0; } | |
| .mobile-hidden { display:none !important; } | |
| .logo { display:block !important; padding:0 !important; } | |
| img { max-width:100% !important; height:auto !important; max-height:auto !important;} | |
| .header img{max-width:100% !important;height:auto !important; max-height:auto !important;} | |
| .photo img { width:100% !important; max-width:100% !important; height:auto !important;} | |
| .drop { display:block !important; width: 100% !important; float:left; clear:both;} | |
| .footerlogo { display:block !important; width: 100% !important; padding-top:15px; float:left; clear:both;} | |
| .nav4, .nav5, .nav6 { display: none !important; } | |
| .tableBlock {width:100% !important;} | |
| .responsive-td {width:100% !important; display:block !important; padding:0 !important; } | |
| .fluid, .fluid-centered { | |
| width: 100% !important; | |
| max-width: 100% !important; | |
| height: auto !important; | |
| margin-left: auto !important; | |
| margin-right: auto !important; | |
| } | |
| .fluid-centered { | |
| margin-left: auto !important; | |
| margin-right: auto !important; | |
| } | |
| /* MOBILE GLOBAL STYLES – DO NOT CHANGE */ | |
| body { padding: 0px !important; font-size: 16px !important; line-height: 150% !important;} | |
| h1 { font-size: 22px !important; line-height: normal !important;} | |
| h2 { font-size: 20px !important; line-height: normal !important;} | |
| h3 { font-size: 18px !important; line-height: normal !important;} | |
| .buttonstyles { | |
| font-family:arial,helvetica,sans-serif !important; | |
| font-size: 16px !important; | |
| color: #FFFFFF !important; | |
| padding: 10px !important; | |
| } | |
| /* END OF MOBILE GLOBAL STYLES – DO NOT CHANGE */ | |
| } | |
| @media only screen and (max-width: 640px) { | |
| .container { width:100% !important; } | |
| .mobile-hidden { display:none !important; } | |
| .logo { display:block !important; padding:0 !important; } | |
| .photo img { width:100% !important; height:auto !important;} | |
| .nav5, .nav6 { display: none !important;} | |
| .fluid, .fluid-centered { | |
| width: 100% !important; | |
| max-width: 100% !important; | |
| height: auto !important; | |
| margin-left: auto !important; | |
| margin-right: auto !important; | |
| } | |
| .fluid-centered { | |
| margin-left: auto !important; | |
| margin-right: auto !important; | |
| } | |
| } | |
| </style> | |
| <!–[if mso]> | |
| <style type=”text/css”> | |
| /* Begin Outlook Font Fix */ | |
| body, table, td { | |
| font-family: Arial, Helvetica, sans-serif ; | |
| font-size:16px; | |
| color:#000000; | |
| line-height:1; | |
| } | |
| /* End Outlook Font Fix */ | |
| </style> | |
| <![endif]–> | |
| </head> | |
</code>
By far, this is the safest outlook style I have worked with. It’s been proven quite useful when it’s checked by the Litmus test.
There are some experiences I got from working on email scratch build in Mav3rik. I would like to share it here.
1. valign=”middle” sometimes it’s not working for 2 column module.
This really frustrates me because for two <td>, on the left is the text, and on the right is the image. The image will go to the top even if the td specified valign=”middle”…
So I tried several ways, use classes on two <td>s, use valign for both. Finally, I found the solution. What I did was putting one block on top of the image, and put another block at the bottom of the image. The <tr> will look like this:
<code>
<tr>
<td align=”center” bgcolor=”#303030″ class=”valign” height=”66″ style=”padding-right:0px;padding-top:0px;padding-bottom:0px;height:66px;” valign=”middle”>
</td></tr>
</code>
You can see clearly that I specified height both inside the style and outside the style. And that Worked. You just need to specify for the image <td> block, you don’t need to do it for the text on the left.
Please do measure the height you want in a 600 width email, and you will get the perfect valign middle.
2. Strange white lines between paragraphs, especially when you have <tr></tr><tr></tr>two rows stacking.
When I was working in IVE Group, my colleague told me a solution to increase the padding and line-height for the td, so that the white line will disappear. It was quite useful in some projects but it’s still breaking sometimes in some emails. I found it easier to use <br> to break the line without causing any rendering issues, other than using another pair <tr></tr> with content inside. Of course, if none of these work, then maybe try changing the bgcolor for the paragraph, that did prove helpful in some circustances.