Most people will prefer to use sites like Aweber and MailChimp to create and send HTML email newsletters. In fact, I have recently been using iContact for a client and I’ve found their email building templates to be easy to use and intuitive. Read on to find out how to make an HTML email newsletter that works – even when viewed in Outlook Express.
However large organisations prefer to do it all themselves. When this is the case you have to write HTML that will show the same newsletter across all browsers and all email clients (including Outlook). Note: this is not about sending an email from Outlook.
Marking up HTML email is totally different to marking up a website in HTML. Be warned, getting an email to look the same across all clients is actually more difficult than getting a website to look the same across all browsers.
I recently had to re-do an HTML email newsletter for a client as their emails were not displaying properly in Outlook 2007 and Outlook 2010. I ended up completely re-writing the HTML as there are so many elements that don’t work in the Windows XP mail client. The job was a complete nightmare but I was left with HTML that would render the same across all browsers and email clients. Here’s what I learned:
How to make an email newsletter – Start correctly
You are better off writing your HTML emails in XHTML 1.0 Transitional. There’s not much point in putting anything else in the <head> of the document but the “Content type” and the title, so here’s the basic structure of your HTML email.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Insert email subject here</title>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<table width="600" cellpadding="0" cellspacing="0" border="0" valign="top" align="center">
<tr>
<td>
<!-- add your content here -->
</td>
</tr>
</table>
</body>
</html>
The above creates an email centered with a 600 pixel width – don’t make them any wider.
Use tables for layout
We’re going back to the nineties here, as you can see above the layout is structured with tables. Use the table tag (<table>) to begin with, then order the rows of the table with the table row tag (<tr>) and then sort the individual cells of the table with the table data tag (<td>). Use rowspan="2" to merge a cell (or a td) over two rows and colspan="2" to merge a cell or a td over two columns.
Use percentages for widths
After you have specified the width of the whole of the email in pixels table width="600" (and notice you only put "600" and not "600px"), specify all other widths of tables or tds as percentages. So use <table width="50%"> or <td width="33%"> to divide up your email into halves and thirds.
Use cellpadding to space text away from the edge of the table.
Always use absolute paths for images
Bring in images like this:
<img src="http://www.website.com/html-email/images/image.gif">
not like this:
<img src="images/image.gif">
Never use padding, margin or floats round images
This will not work in Outlook. Instead you can get an image to go on the left with align="left" and put a “margin” around it so that text doesn’t butt up next to it with vspace and hspace. So this code:
<td width="33%" valign="top" >
<img src="http://www.website.com/html-email/images/image.jpg" height="68" width="108" border="0" hspace="5" vspace="5" align="left">
<p style="font-size:12px; line-height: 14px; font-family:Arial, Helvetica, sans-serif; margin: 0; padding : 0 ; color:#356560;">This text will run around the image and underneath it in all browsers and across all email clients included Outlook 2007 and Outlook 2010.</p>
</td>
Produces this:
This is a limited solution as vspace and hspace add equal space either horizontally or vertically and therefore don’t allow you to add space just on the right or just on the bottom.
An alternative solution to this problem is to put the image in a table, and provide an extra column (to the right or left) and an extra row (to the top or bottom) put in a spacer.gif (1px x 1px transparent gif) and set the width to 10px for the column and length to 10px for the row.
Another solution would be to add extra space to your image of the background color (usually white) to create the offset. Thanks to Christopher Szydelko in the comments below for these two alternative solutions to the space around images issue.
Don’t put CSS in the <head>
It will be stripped out by several HTML clients so styles need to be inline like so:
<span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000;">This is sans serif, 12 pixel sized, black text</span>
Don’t use background images
You can, but they won’t be seen in Outlook. So whenever you specify a background image for a heading which can be seen by most of your newsletter subscribers, always make sure there is a background color as well so that Outlook subscribers see the same effect.
So, for example this HTML:
<td width="100%" background="http://www.website.com/html-email/images/image.gif" style="background-color: #00c5ca; height: 28px;">
<span style="font-weight: bold; color: #FFFFFF; font-size:14px; line-height: 28px; font-family: Arial, Helvetica, sans-serif;"> Headline to go here
</span>
</td>
will show the background image for most of the newsletter subscribers:
but will show the background color for the newsletter subscribers who use Outlook (because of the background-color: #00c5ca in the inline style):
Test
There are a couple of services that will provide you with screenshots of your emails on all the various Outlook incarnations as well as on Lotus Notes, AOL and the major online email services. It’ll cost you though.
Sign up for free at Campaign Monitor and you can test your HTML for $5 a pop.
Check your HTML
One of the most useful best practices I’ve learned whilst doing HTML email and websites is to validate the HTML wherever possible. You can paste in a link and the W3C Validator or the Premailer will tell you where you’re going wrong. Make sure there aren’t any open tags. Some browsers may do a decent job of displaying invalid HTML pages but Outlook and other email clients won’t be so forgiving. Use these tools with common sense as some errors will be OK with HTML emails.
Don’t get angry, get even
Don’t bang on the table, pull your hair out or write vitriolic attacks agains Microsoft in your Twitter feed like I did – it won’t get you anywhere. Instead have a cup of tea, breathe deeply and affirm “I will beat this. I will do this. I will finish this.”
When in doubt, print it out
If your eyes are squinting at the computer screen, try printing out the HTML (presuming you’re not short of paper or printer ink). When looking at the HTML on paper you can cross off the tab pairs which makes things easier to understand.
Other creating HTML email “rules”
You can’t do everything in an HTML email that you can do on a webpage. It is important that your client understands this. Here are a few more do,s and don,ts for HTML email:
- No JavaScript
- No CSS shorthand – don’t use “font: 12px/15px Arial, Helvetica” for example, see the example above for the long form of this CSS code
- No CSS hacks
- Use the alt, height, and width parameters with all images
- Obey the CAN SPAM Act, and sleep well
How to make an email newsletter – any tips?
How do you do them? I always try to set my clients up with a MailChimp or Aweber account so I don’t have to do this. However, clients often ask for them to be created. Have you ever had to do this? What tips do you have on how to make an email newsletter?
Fantastic Tips! I appreciate you sharing your findings after going through many frustrating hours of problem solving, banging your head, and sending not-so-nice tweets to microsoft, lol!
I’m afraid my passions take over me and I utter unpleasant words against MS! Thanks for following me here from LinkedIn 🙂
Great tutorial, but I have to wonder, dose anyone uses Outlook anymore?
Because I personally never did.
Good question, Cristian, well the client who just asked me to do the HTML email for them did – that’s why they noticed. I guess some large organisations still use Outlook in their offices.
Yes everyone uses Outlook in offices, so designing html emails for outlook is a must, try wrapping tables like this:
<!–[if gte mso 9]>
<v:image xmlns:v=”urn:schemas-microsoft-com:vml” id=”theImage” style=’behavior: url(#default#VML); display:inline-block;position:absolute; height:468px; width:700px;top:0;left:0;border:0;z-index:1;’ src=” headerbg.png”/>
<v:shape xmlns:v=”urn:schemas-microsoft-com:vml” id=”theText” style=’behavior: url(#default#VML); display:inline-block;position:absolute; height:468px; width:700px;top:-5;left:-10;border:0;z-index:2;’>
<div>
<![endif]–>
TABLE (your content)
<!– This ends the nested table content –>
<!–[if gte mso 9]>
</div>
</v:shape>
<![endif]–>
Try it, works for me!
Thanks, Jeff, something to try next time. 🙂
Hi Rob, wow you seem to be the expert at all of this. On the other hand I am a complete beginner. If I am trying to send a very simple email update to a group of say 100 contacts in my outlook, can I use mailchimp or do people have to actually ‘subscribe’. Surley if they ar emy contacts I can send correspondence to them? What method would you suggest?I do want to make sure that whenever I send emails they look consistant.
Hello Alicia, no don’t worry about MailChimp, this is for getting email addresses from a website and emailing them (and then making those emails look good in Outlook and all other clients). If these people are your contacts then go ahead and mail them. But as for styling them up in Outlook I’m afraid I can’t help you at all there. I would try the Microsoft site for that one. 🙂
You can actually import email addresses into mailchimp very easily, theres a number of ways to do that. If you want to save yourself the headache you can actually use 1 of the many pre-built templates and customise it with the built in content management it provides. Otherwise you can start from scratch. Alternatively you can choose one of the pre-built templates, copy out the html and edit it in dreamweaver (or editor of your choice) to suit your needs then re-import it into mailchimp.
I am a big fan of mailchimp as it can handle all you subscriptions and bounces (its a legal requirement to allow people to unsubscribe to a mailing list). The only downside with mailchimp is the user interface which is kind of convoluted for which should be a straight forward task.
True, Christopher, I’m actually a big fan of MailChimp as well and I’ve written a bit about them here. MailChimp Sign-up Forms using WordPress Widgets, Emailing Blog Posts with a MailChimp RSS Campaign and Embed (Multiple) MailChimp Forms On Your Website. Agree about the user interface, it looks good but it seems to be way too complicated than it needs to be. 🙂
Great tips. Thanks. Yes, Outlook is still widely used. In fact, the newest versions of Office for Mac have swapped Entourage for Outlook.
Yes, Jon, unfortunately so 🙂
What are the tips to creating a newsletter with large images, at times l look at some newsletters and they have large images, but the images are broken into segments. Is there a simple method to send large images without having servers blocking the images?
Yes, I find Photoshop is quite good for this. You can create a large Photoshop document and create separate sections with the Slice Tool. Then when you Export for Wed & Devices you can select “HTML and Images” and Photoshop will create the separate images plus the table layout to put them in. Hope that helps, Alex.
Yes it worked. Thanks alot.
Cool!
Its really informative post ! Many Thanks for sharing .
No problem, David.
Just make sure that you doctor those images with some CSS or else you may see unseemly gaps between images. For example, I usually do this to any image:
Hello Renée, you need to link to your code in PasteBin or somewhere. You can’t paste code here I’m afraid. 🙁
There actually is a way to show cell backgrounds in Outlook. It’s not fun but it works and doesn’t affect how things render in other browsers/clients:
Obviously you need to tweak the height, width, top, and left attributes for your particular case. But this will show up in 2010, 2007, 2003 versions of Outlook. Then you set your cell background how you normally would for other browsers/clients.
Hello Brian, thanks for your comment. Unfortunately, your HTML tags didn’t come through you have to convert the less than and greater than character to HTML with < and >. The code tag in the comments only changes the font to monospace – it’s not that clever. And, now we don’t know your cell background Outlook fix. 🙁
Hi Rob, great tutorial… so after I make the HTML code how do I put them in outlook?
Cheers.
Hello, Ron, sorry this is the second time this has happened. This article is about how to create HTML emails to be sent by some emailing system to recipients who will then receive them on a variety of email clients (Outlook being the most difficult one). It’s not about sending HTML emails from Outlook.
I’m going to change the title of the post now.
Thank you Rob!!! You are a god.
Thank you!
Rob, this is very concise and useful, ta. I’m a bit confused about how you should send online marketing. I understand you should use an email service like MailChimp because of blacklisting your own email address, but if a client just wants to mail out to their existing customers to remind them of offers etc, can this be done in low quantities or is it risky? Cheers.
Martin, anyone is free to email all their contacts in their address book if they so wish. If you are sure that all these people want to receive mail from you then there is no problem with this. The problems come with emailing people you don’t know.
People use services like MailChimp through a website where people have opted in (twice: once as they enter their email address; and again when they click a confirmation link).
When I do these HTML emails it’s for clients who have set these email lists up themselves. They are usually quite large companies with quite large lists so I presume they know what they’re doing and won’t get blacklisted!
I hope this clears things up. Hope you’re well, Martin.
I had to laugh at the bit, don’t pull your hair out, get frustrated, write hate mail blah, blah. That’s how I feel sometimes when it comes to doing these templates. So I better go have that cuppa tea now.
Haha! Always better to have a cuppa tea than to pull your hair out – I should know! 🙂
After swearing at Microshaft, dont try and do your email in 1 big table. Instead create 1 outer table with 100% width and td align center (this will guarantee your email remains centered. Inside (nested) create a table for your header, beneath it a table for your content, and a table for your footer. Try to avoid nesting (apart form your initial nest). Use spacer gif in all empty table cells. Set width of all internal tables to the same I always specify in pixels, usually 600 to 700 px width. If you want to specify exact column widths create a row either above or below and place spacer gif in there and specify the width of the spacer gif to the width of the column (less any padding you have on the cell). A spacer gif is a transparent gif measuring 1 pixel x 1 pixel. If you use mailchimp you can use css in the header to build your templates as mailchimp converts the styles to inline styles which will render properly at runtime, this saves a huge amount of time when creating the emails and is easier to modify should you encounter any problems. No background images, background colours are good. Best of look.
Also mailchimp offers a free service which is ample for most small business needs, and gives you a lot of the essentials, of course if you want more you have to pay! also mailchimp have just bought a really simple cut down email newsletter tool http://www.tinyletter.com/ all free and great for simple bulk emails.
Thanks, Christopher, some good tips there. I use MailChimp, but when I do I tend to build the emails in their visual editor. I always wondered why they put styles in the head, but now I know how they get away with it!
I agree with you about avoiding nested tables apart from the first one. When you’re looking at the HTML with tables within tables within tables – it gets really confusing!
Thanks for your comments, Christopher, and welcome to the site! 🙂
Thanks Rob,
Just heard that Microsoft are planning to wipe out IE7 as well as IE6 by introducing auto updates, so that the standard will be IE8, which is great for developers. This means that anyone using XP and above will be auto updated to IE8 (IE9 will not run on XP so I guess until XP is dead IE8 will be the new lowest common denominator). Sorry this is a bit off topic, as this has no bearing on html emails because microsoft in their infinite wisdom decided to use word as the rendering engine for html emails in outlook (go figure) the reason being that they were incapable of making their browser engine safe from attack, hence the numerous security issues that eventually killed off IE6 (amongst other things).
Hey Christopher, no worries about being off topic – it’s good to talk. This is great news that I hadn’t heard yet. And so soon after they gave up on IE6. Would you believe I still have problems with IE7 and IE8 – especially around forms. But, at least the situation isn’t as bad as when you had to design with IE6 in mind! In a perfect world there’d be no IE or Outlook!
Great article, and it refreshed my brain after finding all of this out some years ago!
I was asked by a client to send a relatively simply HTML email out to a small list so I wrote the email as an HTML file (as I would for the web!) but as you’ve guessed, it didn’t work.
Writing these sorts of emails in Outlook is actually like going back to your old, bad web writing skills we all possessed 15 years ago!
So thanks for the detail and this is definitely getting bookmarked (or should that be favourited!)
Thank you, Donald. Yes, it really is like going back in time! hspace and vspace!
Glad it served as a reminder!
Many thanks for this great article, really helped me in my new job! I have found that with Outlook Express (OE) sometimes getting vertical padding / margins to work can be tricky, a method i have been using that seems to work in any email client, as well as OE, is:
Where 10px is the height of the gap you want to create. This may be blindingly obvious but its something i am now using a lot and it doesnt seem to fail even in older version of OE so thought id share.
the html didnt come out well there, let me try that again:
<p style=”margin:0px; padding: 0px; font-size: 10px;”> </p>
Thanks for that Jon, to explain why to newbies margin and padding settings applied to a paragraph are often overlooked in OE. Jon is suggesting we add another paragraph below where you want to add the extra vertical space. The paragraph has no padding or margin settings but instead has just the font size (whatever you want), activating the font size is a ‘space’ or which is the correct method to add a non breaking space. Not sure it needed clarification but ive done it anyway 🙂
Thanks for this, Jon, it’s a great addition to the article. And well done for working out how to put the greater than and less than symbols in as well! 😉
Thanks for the clarification Christopher, always welcome!
No problem at all, its a tricky business and this article covers most of it well! Ive returned to update what i wrote above, with further testing i have realised that Hotmail doesnt render this correctly. For some unknown reason they strip out all margin related inline css and inflict their own across your beautiful (cough) email. Seeing as all p tags carry their own default margin this will cause huge gaps to appear everywhere. Simple solution is to use div tags instead of p tags, seems to work so far! If anyone knows if this is a bad idea for any reason feel free to chastise! Updated HTML below:
<div style=”margin:0px;padding:0px;font-size:20px;”> </div>
Of course now the inline styling of padding and margin may be obsolete due to the div tag not carrying any as default, however im sticking with it as a failsafe.
Hope this helps someone!!
Jon TJ, OMG it shows how careful you’ve got to be. I was using p tags and span tags – I’ll stick to div tags next time and see how I get on. Thanks for this.
I cant believe Hotmail is still in existence, I think i’m gonna draw the line here and put the standard “if this email does not render correctly view in a browser” Its just a step too far to not use p tags for what they were designed. Its pretty safe for corporate business to business as they wont be using hotmail, but it needs some thought if its business to consumer.
I see your point, Christopher
I completely agree, its simply archaic! Another pitfall with hotmail is their insistence of using their own 131% for line-height across EVERYTHING! (Seems as though they are not separating the styling they place on their page from the email contents making several issues crop up of this nature, how hard would it be for them to place the contents in an iframe…?)
For the line-height issue; this can become a real headache when an email contains many images as small gaps start appearing under them (if theyre used in separate table cells/rows, anchor etc tags or a br tag is used to place one image under another), unfortunately the only way around this is to place your own style=”line-height:0px;” across all td and a etc tags that contain images or are vertically out of line with where you want them – careful not to place this styling on a cell/tag that contains text! A real headache and youre right Chris, probably not worth worrying about for corporate only emails but the emails im generating are going to consumers so it is something i have to deal with, thought i would post this anyway in case some poor soul takes another step toward baldness with this issue.
Hi there,
Great guides you have :). I’m currently remaking the style for a company newsletter, and some tips came in quite handy..
I would also like to share one of my experiences while working on the newsletter.
I at first had no idea i couldn’t use to just put a little stylsheet in my document. So afraid i had to do it all over again with in-line styling, I was looking up information on the company sending the e-mails (Constant Contact in this case). but google helped me out and gave me “inline style converter” as a search… so i thought i would the first suggestion (http://premailer.dialect.ca/). and as like a miracle this (almost) fixed my whole document. removing my and transforming it into in-line style.
Thought I would share it, since in my opinion, newsletter are a pain in the “you know”..
greetz,
Martijn 😉
Hello Martijn, thanks for your comment. That in-line style converter seems great. Unfortunately not working when I clicked the link but I will check it later.
Best of luck with your company newsletter and hope you come back to the site to read some of the other articles we have here! 🙂
Checked out http://premailer.dialect.ca/ looks good. Will need to check it out “in action” later.
Found this really useful, thanks for sharing your thoughts. Wonder when Outlook will support HTML5. Eek!
Haha! I wouldn’t hold your breath! Thanks, Todd. 🙂
Hi,
Thanks so much for this great tutorial. Say though, I’m having trouble getting your code to validate using the validator that you linked to. It reports that the xmlns attribute for the element html is missing. Also it doesn’t like any of the attributes for the body tag like leftmargin, etc. So I wonder does this really need to validate, and I need to add the missing xmlns attribute and replace the body attributes with css style inline or just not worry about it? Any thoughts?
Hello Chris, you make some really good points. I went back to my code that worked for all email clients including Outlook using the methods above and there were many elements the validator did not like, although I didn’t get the error about the xmlns attribute.
The answer is that validation is not necessary but you can use it to check for basic HTML errors like not closing open tags.
I’m sorry to not be more sure about this but it’s been a while since doing HTML emails as I now always use online WYSIWYG editors (which have their own issues but, at least, always get the emails looking the same!)
I have re-written that section about validation to include your points and you may like to try this special email validator: http://premailer.dialect.ca/
Thanks again for your input.
Thanks, Rob! I suspect you are right that some of the things I mentioned which don’t validate are not critical. At this point, I’m struggling with a larger issue: that even with your great help and optimized code, Outlook 2010 is enlarging my images, ignoring my padding and decoration of links (giving them blue underlines) and generally still messing things up as usual. The only help I’ve been able to find in online forums suggests I change my jpeg’s dpi from 72 to 96 or 120 (based on my Windows 7 OS text size settings) but that doesn’t seem to make a bit of difference. I may have to tell my client to install Thunderbird if they want to send out nice looking HTML Emails to their new patients.
Hi Chris, any chance you could post your code, or stick it on a server and paste a link so we could view the source, its often easier to debug if you are looking at the code… although it could be just Outyuk 2010 🙂
Oh, yes gladly. Here’s what I’ve got so far. The first one was my first attempt and the second gets closer to looking right in Outlook.
1st try
2nd try
As Christopher says, Chris, it would be good to see the HTML. For the images, do you have the height= and width= in there?
I posted links to the HTML above and have a solution posted as well but I think I might be in Moderation Limbo.
I get a duplicate comment error when I tried to post my solution again, though I don’t see it here. It’s kind of long with the HTML code at the bottom so maybe that’s why it doesn’t show.
I rescued it from Moderation Limbo, Chris, thanks. What image is displaying the incorrect size is it the top header image? And where’s the padding issue?
Yes, the top header is really the only image (originally I had both width and height specified but it was still wonky). It is always about 125% when I drop it into Outlook. Outlook seems to ignore my padding. Margin works instead but not always with the same results as you know, so no space between the element and it’s border as is desired in my side menu.
Anyway, as I said I think I have it all worked out. I will try to post my fixed version once more.
It’s a bit late here for me to give it my fullest attention. But see how you get on and do come back if you have any further problems or, indeed, if you discover some great solution to the never ending pain of HTML emails in Outlook.
Right, no worries. I think I’ve got it. I still get a duplicate content error when I try to post my HTML in it’s fixed version. So I’ll just post a link like before.
A lot of changes based on obscure references elsewhere but a couple of highlights are:
1) I had to replace my vertical menu (unordered list) and it’s border styling with spans separated by hr tags. This allowed me to avoid padding and get the horizontal line dividers I wanted.
2) After revising my HTML, I loaded it into Thunderbird via the Stationery add-on, sent the email to myself and opened it up in Outlook 2010. This really helped me avoid some of the formatting nightmares (like image resizing) that I had when I used the usual methods for getting HTML into Outlook. Then I just saved out an OFT and I think I’m good.
Here is the source that worked:
http://www.newheightstherapy.com/NHPTP_PDX_New_Patient.htm
A couple of points, basically you should not use outlook (which uses word as a html rendering engine therefore is absolutely useless for creation purposes as it will alter all your code and do as it pleases) and barely manages rendering for recieved html emails. I would always recommend setting up a free mailchimp account, and importing your list into there. Also a big advantage is you can place all your css into the head, including a reset, mailchimp will automatically inline it at runtime (which is the purpose of premailer ( http://premailer.dialect.ca/ ) then send it to yourself for testing (as a recipient) in outlook. It will send to your list and give subscribers the opportunity to unsubscribe with a self managing list also it will provide you with stats (who has opened it, what links clicked through etc…).
Notes on construction: stick to web safe fonts, not everyone will have helveticaNeue, therefore it will default to the next available (in your font stack) which is helvetica or arial, which will have dramatic effects on your layout. work to the lowest common denominator or use an established font stack ( http://cssfontstack.com/ ). Also you have styled your body tag which includes your font stack, you must define all your formatting including font stack on every tag ( <a> etc..) some clients strip any formatting on the body tag so you will lose this. Also you have to clear out any defaults otherwise these will apply and affect your formatting. Avoid using css margins and paddings as they are unreliable. A good source for advice is http://www.emailology.org/ .
Theres a lot to learn and a lot to digest, its a pity that what your learning is techniques from over 10 years ago thanks in the main to Microsoft. I hope you have a chance to digest some of the links here as they contain some great information as well as Rob’s excellent resource right here.
Thanks, again, Christopher. Some great advice in there. I definitely agree to not start with Outlook as a creation tool. And using email creation companies like MailChimp, AWeber or iContact really helps as you rarely see their emails go bad in Outlook.
But if you are supplying the raw HTML, as you say, you have to define your formatting on every tag.
Thanks for those links as well, very useful.
Thanks for this, Chris, awesome information that will help us all next time. I would, as a rule and as a result of all your woes, avoid ordered and unordered lists on HTML emails!
Hope your client’s happy with all your hard work!
Thank you, Christopher and Rob. I will definitely soak up the info and resources you have offered. I’ve got one last stumbling block with this project, so I’ll ask it here. It’s seems my OFT looks fine when opened, but when received, the link to the logo image is missing. Can anyone tell me why the link breaks? Again the latest version is here: http://www.newheightstherapy.com/NHPTP_PDX_New_Patient.htm
Thanks, Chris, I can’t fault that code really. I would only say that the “img” tag could do with a “height” but I can’t explain why the image isn’t displayed as it is being called with an absolute path correctly. Mystery.
Hmmm… a Mystery, yes. I think I should add for clarification, just in case anyone else reading misunderstands. This isn’t a case of the recipient’s email client (Thunderbird in this failing test) requiring you to approve the download and display of the image. That option is not being offered at all as it normally would. When sent from my customer’s computer using Outlook 2010, the broken image icon is displayed with no option to show the image. However, when sent from my machine, since my system recognizes me as a Trusted Sender, the image simply displays without a prompt. IT for this customer is recommending that I get around the problem by embedding the image rather than than linking to it. So, I would love to find out more about the pros and cons (embed or link to the image?)
Chris, for me, you should always link to the image rather than embedding it. However, it depends on how you are sending the HTML email. As I say, I was providing HTML for a large organisation to professionally send bulk email. It sounds as though you’re sending much smaller amounts and your client is sending it themselves – so that might be why they are recommending embedding images.
i created an email signature design for my client in outlook but all of my css style including the background did not work. is there a way to use css div and not table?
Some good advice and information about this here: http://www.howto-outlook.com/howto/signatures.htm
Thanks for posting that for Melanie, Christopher. Although this article was originally about writing an HTML email that would be viewed correctly across all email clients – even Outlook, it does seem to attract people looking to create nice looking emails with Outlook. So it’s great that we can help them as well. Thanks 🙂
This article hit my current client sweetspot. I am redesigning a law firm’s internal eblast templates. Their entire workflow is from an enterprise EMS and out to almost exclusively Outlook-using clients. As designers, it’s nice to delude ourselves into believing that no one is checking their mail in Outlook or browsing the web with IE. Try working working in financial services or law, though, and your delusions will quickly be shattered.
Thanks for this, Rob.
So glad this helped sort things out for you, Dave. Yes, a world where everyone uses Chrome for browsing and Mac Mail for email would be nice! 🙂 And, I remember having to correct a site once in IE6 (this was a while ago) because director in a bank was using it – they weren’t allow to update their own software because of the security implications!
Some good news, Microsoft posted its first ever quarterly loss since they went public in 1986. Perhaps now they may take note and catch up with everyone else by producing standards compliant software…. or go bust! We live in hope!!
Haha, yes Christopher, we certainly live in hope!
Hi great tips…
One Q what about fonts, a client of mine uses Berskaville 12 font but always get replaced when received.
I know putting text into an image is the key for emailings. just wondered if you have any tips for standard email. we use HTML formatting in groupwise email client.
You need to use appropriate “web safe fonts” and have a good font stack. Baskerville may not be resident on the recipients machine therefore it defaults to the next one down in the font stack until it matches a font resident on the recipients machine. http://cssfontstack.com/
I agree with what Christopher says here. I would use websafe fonts for the main body text of the email: Times, Georgia, serif, for example and then images for headings with the client’s Baskerville. But I would try to persuade the client against this as much as possible.
hi!
I have a report in SAP that sends an email with an html table. The table and all of its content is showed correctly in most of the emails except for outlook. It’s not an error in the ABAP code, which means that something is missing in the html code. Can you help me?
Thank you!
Can you post the code online to have a look at. Can you edit the html source before sending it? …Sorry Im a mac man and your acronyms are meaningless 😉
Hi Gil, as Christopher says, you’ll need to be able to change the HTML to get the emails to work in Outlook properly.
If you have access to the code and would like to show us please paste it here: http://pastebin.com/ and give us the URL as this blog can’t handle pasted code in the comments. 🙂
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = ‘Código de Material’.
append t_html.
clear t_html.
t_html-line = ‘Descrição’.
append t_html.
clear t_html.
t_html-line = ‘Depósito’.
append t_html.
clear t_html.
t_html-line = ‘Stock Actual’.
append t_html.
clear t_html.
t_html-line = ‘Stock MÃnimo’.
append t_html.
clear t_html.
t_html-line = ‘Stock Máximo’.
append t_html.
clear t_html.
t_html-line = ‘Necessidade’.
append t_html.
clear t_html.
t_html-line = ‘Stock LPO’.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
append v_mensagem to it_message.
loop at gt_dados into ls_dados where lgort = ls_email-lgort .
if ls_dados-labst < ls_dados-eislo.
v_labst = ls_dados-labst.
v_eislo = ls_dados-eislo.
v_mabst = ls_dados-mabst.
v_necessidade = ls_dados-necessidade.
v_stock_lpo = ls_dados-stock_lpo.
call function 'CONVERSION_EXIT_ALPHA_OUTPUT'
exporting
input = ls_dados-matnr
importing
output = ls_dados-matnr.
t_html-line = '’.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = ls_dados-matnr.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = ls_dados-maktg.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = ls_dados-lgort.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = v_labst.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = v_eislo.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = v_mabst.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = v_necessidade.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = v_stock_lpo.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
endif.
endloop.
t_html-line = ”.
append t_html.
clear t_html.
t_html-line = ”.
append t_html.
clear t_html.
The html code is embeded in the ABAP code, but it should make an html table, very simple.
Thanks.
I guess you didn’t get my message about not posting code here in time, Gil? Never mind. That’s not HTML, as you say, we’ll need to see the HTML (via http://pastebin.com/, please!) in order to help you but even then you’ll need to have the ability to change the HTML which I’m not sure you have.
sorry but the html tags didn’t show up. it’s just a simple table.
What you’ve posted looks like the script that generates the html rather than the html code itself.
Hi – don’t know if you know this, but hspace and vspace no longer seem to work in Outlook 2010. Aaaargh! Does anyone have a workaround, seeing as inline css margin or padding are not supported on the tag either? Thanks!
Sorry, Mike, I wasn’t aware of that. As you say, Aaaargh! Let’s hope someone else can help you.
I assume you are trying to put space around an image flowing with text?
One way (if this is the case) is to drop the image in a table, and provide an extra column (to the right) and an extra row (to the bottom) put in a spacer.gif (1px x 1px transparent gif) and set the width to 10px for the column and length to 10px for the row. Then nest the table in the text, providing you with offset dependent on whether you are aligning left or right. Alternatively add extra white space to your image (or the background colour if not white) to create the offset. Both suggestions should work. I never liked the offset as it applied equal space both sides, which often looks odd in a layout.
Hope this helps.
Hello, Christopher, yes you are right I was trying to put space around an image flowing with text. I guess I was trying to find a quick way of doing it similar to “padding”.
But you’re right that vspace and hspace are limited because they can only apply equal space vertically and horizontally. I will include your fix in the main article, if that’s OK. 😉
Always happy to contribute to this fine resource Rob 🙂
Just added it now, Christopher, thanks!
great article… thanks a lot
My pleasure, Juan.
Hi Rob thanx for nice article i recently coded mobile optimized email templates at mojo themes ,using techniques as you discussed above,but for mobile some additional requirements are needed such as Attribute selectors for writing css for media queries,to prevent other email clients such as yahoo that don’t support media queries to render these styles..you can check the templates here,
https://www.mojo-themes.com/item/shopmail-product-offer-responsive-email-template/
Thanks for the link, Jimmy.
Wonderful ‘how to’ to create the email, but how do I actually send it out from Outlook 2010?
I’ve had this problem ever since I published this post. This is not about creating HTML emails in Outlook, it’s about creating HTML emails to be sent out by any professional emailing software or company that will look OK in Outlook – since this is the email client everybody has the most trouble with.
This is Google’s fault for sending the wrong people here!
But, Donald below, has given an excellent answer. However, I would add a note of caution to sending out HTML emails from desktop clients. It’s OK sending a few to your friends but, if you’re bulk emailing to a subscription list, I think you’ll run into problems.
I would echo Rob’s concerns about sending bulk emails out of Outlook. Not only is it awkward, it is also highly likely that whatever entity that hosts your email will NOT take kindly to your using their servers to send bulk emails. They might even shut down your email temporarily.
It is much better to just set up an account on Mailchimp, Campaign Monitor or one of the many other bulk email platforms out there. They’re easy, they’re cheap and they also provide great environments within which to test your email, as it is being designed.
[Outlook 2003]
Create you HTML email in a separate document (Notepad or something similar). Save it as your email.html file.
In Outlook, create a new email as normal. Click in the body section of the email and then go to the INSERT menu and click on FILE. An Open dialogue window will show. Browse to where your email.html file is, then at the bottom right where the button says INSERT, click on the arrow immediately to the right of the word and choose ‘INSERT AS TEXT’.
This will insert all your HTML into the email body section.
Send email as usual.
Thanks.
Thanks, Donald! I’m really grateful to the many experts that remain subscribed to this comment thread who help me out with answers! 🙂
No problem Rob. This ‘tutorial’ is quite invaluable really in terms of getting an HTML as correct as possible.
And I would concur with all the other statements about bulk emails in Outlook, or any other mail client for that matter. That’s what mailing lists are for!
I was simply responding to a request on how to do this in Outlook. I only use Outlook at one of my clients as they have specified that. At ALL other times I use Thunderbird or SeaMonkey (same thing really!). But I would say there are occasions that a small bulk email is required in these clients and that its nice to send a bit of HTML in them, but I don’t condone the use of bulk HTML emails from email clients.
@Wolf: I suspect that sending in Outlook 2010 is fairly similar to 2003 and probably 2007 too. So give it a try. The secret is to create the HTML email outside of any Microsoft product (MS are useless at HTML – they add so much unnecessary and non-standard markup), then ‘include’ it in your email using the method I have described.
But remember, if you’re sending the email to say 100 recipients or even more, then that is 100 individual emails being sent from your computer through the mail server, and a lot of ISP’s don’t like that (in fact, a lot of them have limits on the amount of email you can send), so there is a fairly high chance you could get blacklisted using this method for bulk email (depending on your server arrangement).
Have a look at MailChimp too. They have a free service which should cater for most small time needs.
Thanks for the info, i was searching for this and i have learned how to create HTML newsletter and I have done one. Thank you.
That’s good to hear, Nawaz.
hi,
i have created a HTML newsletter, i have used some header and footer images in it. What happens is, when i send this html email which i have created. The images comes as attachment so that it can be downloaded. I have seen few companies sending such email but in those i couldn’t find any images in the newsletter as attachments. Could you suggest me how to stop them from showing as attachments. Waiting for your reply.
Hi Nawaz,
How have you created the html emails? i.e. have you coded them in a text editor or are you using outlook to create? could you put the source code somewhere and supply a link for us to have a look at? the problem will most definitely lie in how you have coded it. Without seeing the source code its difficult to advise.
Thanks for the reply.
I created it using komodo editor. as I am not a professional programmer so, i might have done some mistakes kindly guide me if any.
I was about to ask what Christopher asked, “how did you create the HTML email, nawaz?”
Thanks for the reply.
I created it using komodo editor. as I am not a professional programmer so, i might have done some mistakes kindly guide me if any.
No idea why the images come as attachments, nawaz. But at first glance the image widths and heights are specified within the img tag. Doing that might be a start.
It would solve this problem if you would just tell us, how to send out such an email from Outlook 2010. Then there would be peace on earth and you wouldn’t be bothered anymore with this question… 🙂
As Dave and Rob say outlook is not a tool for creating or sending html emails, although it is possible to a fashion it should be avoided at all costs. Microsoft applications are particularly bad at doing anything that has to follow any kind of standards, the reason why we have to use these old fashioned and long winded ways in the first place is because Microsoft won’t render anything correctly in its email clients as it uses word as its rendering engine which is not designed to handle html in the same way as a browser does. The reason it chose to do it this way is because they could not close security holes in their operating system, and still do it this way even though everyone else has moved on (they are at least 10 years behind). Heed the advice and use a proper bulk mail tool like mailchimp, which has a free account that can handle most casual needs.
Thanks again, Christopher.
Hi Wolf.
I have just checked in Outlook 2007 (which is fairly similar to 2010) and the process is almost identical to the one I have described, except Microsoft like to do things with a ‘ribbon’ now!
So, create a new email, and click in the body of the email.
Click on the INSERT menu and on the left should be a ribbon item called ‘Attach File’. Click on that.
Noe browse to where your HTML file is, select it and then where the button states INSERT, click on the small arrow to the right of that and select INSERT AS TEXT.
That should insert your HTML into the body of the email.
And I had a thought about the comments regarding sending bulk emails through Outlook. I don’t believe anyone has suggested that this was the main purpose of sending an HTML email via Outlook. It was just a question about how to send an HTML email in Outlook, which is fairly innocent.
Sending bulk emails via Outlook (or any other email client) is not the right thing to do so use a mailing list manager for that.
But sending HTML emails using an email client is perfectly feasible.
Rob-
Great article. Really saved me.
thanks!
That’s good to know, Mike 🙂
Nice article. Good ideas for formatting on newsletters without solely depending on images.
Thanks.
My pleasure, Paul, thanks for the comment.
Hi Rob, I’m facing problem in sending newsletter through outlook express. There is not showing HTML exactly like web browser and second thing when I putting images (i.e. bullets in paragraph and other images) then outlook express not showing these images in newsletter. I have divided row in two columns when I put images in first column then some images is displaying but some images is not. But when I put same images and text in separate row without distributing column then all images are displaying. Please suggest me what we can do for the same.
Sir one more problem is there that I giving space in paragraph through new paragraph with height and clear.gif image but space is not showing in outlook express. Kindly suggest me.
Hey Shiv, This is not about creating HTML emails in Outlook, it’s about creating HTML emails to be sent out by any professional emailing software or company that will look OK in Outlook – since this is the email client everybody has the most trouble with.
If you look at the comments just above, especially from Donald, you may find some more help there. But I would advise you not to use Outlook for sending out bulk HTML email. Use one of the professional emailers mentioned at the top of the article. Good luck!
Hey Rob,
I develop and help troubleshoot html emails for my company and its clients. I am having an issue where sporadically an image gets resized through hard coded width and height parameters after sending from the ESP. These images are sizes 728×90 and 300×250 (typical IAB ad sizes) and they are always resized to a 66×66 image. When the issue occurs it always happens to only one image. And there are times in which the issue does not occur.
I ran some tests with multiple devices/clients and realizes that Outlook on a PC causes ten times more problems than Outlook on OSX. In addition, the source code of the email that is being sent out has height and width defined in both the inline style within the anchor tag and normally within the img tag.
Other tests I ran was using and no tbody, defining the height and not defining the height, both inline style and in img tag, stripping the image blocks from the whole email template and having it sent with the rest of the email, using display blocks and not using them.
I also found that there are times when the image does not show at all in Outlook on a PC but when forwarded to another email on another device/client it compresses the image.
I also found that opening it up in android or windows phone works fine, and when forwarded to another device/client it works fine.
Any ideas or advice would be greatly appreciated.
Thanks!
C.
I would guess your problem lies with the clients ESP. I always use and recommend using mailchimp and never have had such problems. Also all images need to be stored on a web facing server with absolute paths to the image for them to show up. With mailchimp you can code up your templates with css formatting in the head (you will still need to use tables for layout, but avoid margins and padding and usual pitfalls as mentioned here in Robs blog). Mailchimp will automatically inline the css at runtime. Try a test using the problematic email and setting up a free account in mailchimp, importing it and making any adjustments, then send it via mailchimp to test recipients with varying email clients. I would think that it would appear the same accross all recipients and making adjustments is easy. Also putting in mailchimp edit tags allows for your clients to make text and image changes as well as repeatable regions in the mailchimp cms (you control what they can edit in the template).
Thank you so much, again, for answering the question, Christopher.
Things have stepped up a gear, some clients now asking for responsive html emails, meaning they dynamically adjust dependent on whether the recipient is viewing on mobile or desktop client (or tablet for that matter). Current best practice is a bit sketchy and not guaranteed to work. I’ll be doing some research on this and i’ll try to report back on my findings. Maybe its worth another blog Rob, specifically for responsive html emails.
Christopher, this is something I’ve been thinking about recently. I’ve got to say that the ESPs have been slow to react on creating responsive HTML emails. All the websites I make are responsive now. So, yes, definitely, please report back your findings and I’ll do a blog post on it. Thank you, again!!! 🙂
Hi Rob, the information available for responsive html email is pretty lacking and none of it is guaranteed to work. Mailchimps advice is a work in progress and not very indepth. However I have come accross a great article by campaign monitor which I shall be using for the basis of my future campaigns. Obviously it involves the use of media queries in order to achieve your goals. Its the best article I can find and its well worth a read. Perhaps along the way we can build on this here to add are own experiences and best practices going forward. here’s the link:
http://www.campaignmonitor.com/guides/mobile/
Hello Christopher, thanks a lot and I’ve now read the article. I’m pretty familiar with the media queries as I use them a lot on responsive sites. However, won’t some email clients strip out this CSS?
As far as I understand, the media queries only take effect on modern architecture, which will respect your css, and this covers the majority of smartphones (except probably anything where microsoft is involved), whereas the troublesome outlook would ignore this, it wont actually matter. I am about to do a html e-shot very soon and will be testing out on desktop and mobile to see if my queries will work through mailchimp. Hopefully I will be able to post back with some more feedback on what I have encountered.
Yes, of course! I’m so busy worrying about old architecture I’m not thinking clearly. I should think even the Windows smartphones will be able to handle media queries! I will test this out too!
Hi Rob. When I use a image in anchor tag it raised upward little more. In the browser we can adjust by using css (vertical-align : bottom). But how I solve this problem in Outlook.
You can solve this via inline css to stop margin and padding and to also collapse default table borders and padding. With html email you have to inline the css, unless you use mailchimp in which case it will inline it at runtime. There are some good basic resets available in css that will kill off any defaults so that your styling will remain true.
http://htmlemailboilerplate.com/#f2
A NEW BUG IVE JUST DISCOVERED WITH OUTLOOK 2007. This is very important if you use spacer gifs to control table layout.
Please read this article it may save you from pulling your hair out (mines already gone and Rob has not much left to play with… no offence ;-))
http://www.ianhoar.com/2007/10/20/outlook-2007-when-is-200-pixels-not-200-pixels/
I wish I could blame my hair loss on Microsoft but I’m afraid they aren’t to blame for everyone of my personal annoyances – just most of them! 🙂
I’ve not used spacer GIFs much in HTML emails – although I’ve seen them used a lot. Wow, that’s a big bug that I’d never heard of! Always use a 10 x 10 spacer GIF. Lesson learned. Thanks, a nice little addendum to this page of endless Outlook issues.
How are you getting on with responsive HTML emails, Christopher?
RESPONSIVE UPDATE
A 3 column template that works responsively, source code and documentation, worth having a look at…
http://internations.github.com/antwort/
Thank you, Christopher, that look really good. But where did they get that name from?
I think it means “answer” in German.
Ahhh!
Great Rob !!! Thank you !!!
I have question. If you ever met such situation: I am copying table from html file with border=0, but in outlook it shows all borders.
try some css
http://www.campaignmonitor.com/blog/post/3392/1px-borders-padding-on-table-cells-in-outlook-07/
Hello Fariza, thank you. As Christopher says, this maybe a border collapse issue.
Great read and far better than 99% of results to remedy Microsoft non-conformity. If only there was a way to collectively donkey-punch stakeholders that are still married to Outlook. Thanks for this, Rob.
Regards,
Dwayne
Thank you, Dwayne. Glad you liked it. 🙂
Hi folks, its been a while, Ive just realised that the good folks at mailchimp, have now released their css inliner tool for everyone to use. Its fantastic!. What it does is allow you to create your html emails with css classes, leaving your css in the head for ease of building and editing, when you are through designing just copy and paste all your code into the auto inline tool and you have an email ready to go with all styles inlined. Try it.
http://beaker.mailchimp.com/inline-css
Indeed, Christopher, things seem to have quietened down here! That’s a cool tool!
Hi Rob,
My company is pushing to go mobile responsive with our emails. Unfortunately, to have the code mobile optimized, the CSS styles need to be in the tag (as far as I know.) Also, when I make a template with a sidebar, Outlook 2007 and 2010 automatically push the sidebar down, since it only wants to work in a one-column format. As far as I know, there is no fix for this, correct? Thanks!! Merel
Hi Merel, Great advice from Christopher Szydelko. Two columns should be perfectly possible in Outlook 2007 and 2010 as long as you follow the basic HTML email guideline as laid out here and in other places.
Hi Rob and Christopher,
I know a two column layout will work in any platform, but I am not referring to just a regular HTML email. I am talking about a responsive email in which CSS code allows for the columns to shift position and/or size when viewed on tablet, phone, etc. I found code that worked beautifully but when viewed on Desktop Outlook 2010 PC, it looked terrible.
This is the CSS code. As far as I know, for this to work it MUST live in the for it to work. Therefore, this will never work on Outlook 2010, correct?
body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family: Helvetica, Arial, sans-serif;}
table {border-collapse: collapse;}
@media only screen and (max-width: 640px) {
body[yahoo] .deviceWidth {width:440px!important; }
body[yahoo] .center {text-align: center!important;}
body[yahoo] .no-display {display: none!important;}
body[yahoo] #banner img { width:100%; }
}
@media only screen and (max-width: 479px) {
body[yahoo] .deviceWidth {width:280px!important; }
body[yahoo] .center {text-align: center!important;}
body[yahoo] .no-display {display: none!important;}
}
Sorry, Merel, I must have missed you saying you wanted it to be mobile responsive. But, again, I believe Christopher is right. Mobile responsive emails don’t work in the same way as mobile responsive sites. It would seem you can’t do it in the way you want to.
Hi Merel,
You should use tables for layout and css needs to be inline. Media queries are not supported, so instead you should try and formalise a common layout, this article (link below) should help you on your way. You should avoid divs and floats and go back 10 years to code up your emails (with tables and cells). you can use css for text formatting but stick to web safe fonts (@fontface will not work).
You can use a style css styles but they must be inlined once you have finished the build, a great tool for this is.
http://beaker.mailchimp.com/inline-css
Make sure you read through Robs excellent blog and some of the user comments on this site, it is very informative and should help you on your way.
good luck.
Thank you, Christopher.
Hi Christopher, please see my comment to Rob about the fact that I need this email to be “responsive” and I believe CSS has to live in the head for this to work. if I am wrong, please let me know!
Thanks
Hi Merel,
You will not be able to do it in the way you would do this for a website, i.e. with css breakpoints. Email clients on mobile devices will in the main not use any css formatting that appears in the head. All css formatting will have to be inlined.
To be responsive you will have to use a different technique, such as percentages. Please refer back to my previous post. Heres an excellent place to get more info and guidance on responsive html emails. Theres no easy answers, it does require a lot of pain and hard work to get good at this.
Thank you, again, Christopher, I’m sorry about you being “Anonymous” in the comment here. I have a bug here in the comments section when people come back to leave another message and they think their name, email and web address are in the form and they aren’t. I’ll try to fix this.
Thanks for this Rob, was looking high and low on how and what the issues were with regard to the formatting on my company news letter. The width settings were the issue, no px after the width number in the table and the 100% width setting in TD solved it. Now if only I could the borders to show up padded 5px from the image in Outlook that would be great. I think MS makes crap just to wind us up.
My pleasure, Eugene. The inelegant fix on that issue, Eugene, is to put the borders on the images in Photoshop! 🙂