Websites for sale:
Used Cars for Sale - $175 and Car Sale.
If interested drop me a line at ken@kensfi.com. Thanks!
Have questions about Toronto? Check my latest project: Ask about Toronto!
Coding PSD to Email Newsletters – Outlook
As my job started requiring more coding from PSD to Email Newsletters I will start today talking about how to code HTML for Emails. As the title says I will refer today only to Outlook 2007 because it doesn’t show properly padding and margin, both CSS properties, in those newsletters.
For all of you who doesn’t know yet, we are using, when converting PSD to HTML, tables and inline style only. This article will help you in coding of those emails to be sent out and also will be a good help for me letter on when the things will get messy.
Case:
A list of horizontal links with spaces (margins) in between.
Those spaces show up in Gmail, Yahoo and other Email clients but not in Outlook 2007. Outlook doesn’t recognize properly the padding and margin especially for inline elements like links, spans, etc. You can try even float:left; or display:block as a friend of mine suggested, it doesn’t make any difference. There will be no spaces.
Sample:
<a href=”#” style=”margin-right:20px;”>link 1</a> <a href=”#” style=”margin-right:30px;”>link 2</a><a href=”#” style=”margin-right:40px;”>link 3</a>
This is how is looking in Outlook:
Solution:
<table>
<tr>
<td style=”margin-right:20px;”><a href=”#”>link 1</a> </td>
<td style=”margin-right:30px;”><a href=”#”>link 2</a> </td>
<td style=”margin-right:40px;”><a href=”#”>link 2</a> </td>
</tr>
</table>
This is how is looking in Outlook after I did the changes:
It sounds odd to insert a table into another table (I hate working with tables as is not giving me any flexibility) but unfortunately is the only solution working in this case.
As you can see and as a general idea I recommend using padding and margins only for tables (in this case I used margin for <td>) and not for paragraphs, links, spans and other elements when converting PSD to Emails.
I will be back with other tips and tricks for coding PSD for E-mail newsletters.
If you enjoyed this post, make sure you subscribe to my RSS feed!Related tech articles
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Please read before commenting:
I don't tolerate spam comments. Be human and polite. If you are signing as "Computer repairing", "iPhone store" or other kind of bullshits you'll be marked as spam.
USE YOUR NAME! Thanks!
