Sending HTML emails is a tough business. Thanks to the dearth of support for most css properties in various email clients, it becomes a huge challenge to generate an HTML email content that renders properly on all email clients, like Gmail, Yahoo mail, Thunderbird, Outlook, etc.
Its already tough to generate a html markup compatible with various email clients, making sure which css properties are supported where, and using only the common ones. It becomes a huge pain, as we end up using the old table layout for the HTML markup. And above all that, there is the pain of dealing with Outlook email client. No matter how much we hate it, most enterprises rely on Outlook for their day to day business. So making sure our HTML emails render beautifully on Outlook becomes a priority, no matter how impossible the task may be.
In this post we will talk about the small tweaks we can make in our HTML markup, to make sure the email renders smoothly and beautifully in Outlook 2010 and 2013 on windows and on mac.
Outlook 2010 often crashes on opening big HTML emails on it. We will discuss ways to optimise our content to fix this too.
Always remember what css properties you can use. https://www.campaignmonitor.com/css/
This list generally serves as a good reminder for what you can use while making an HTML email
BUT, if you want to optimise for Outlook,
1) Use only table layout for your markup. Do not use any divs in your markup. They cause issues as outlook associates some default styles with them.
2) Do not use padding/margin css properties anywhere. Only use table layout to render your content. It may be painful, but it is rewarding.
3) Do not use spacer images in your email markup. Try to reduce the number of images in your email. The more images there are, the more time Outlook will take to download them and render the email. Instead of spacer images, try to use where you would otherwise use spacer images.
(This is one of the reasons for Outlook crashing for bigger emails)
4) If you are using an image, always use https: URLs for the images. This helps in some cases where outlook treats some http url as a bad url and gets stuck.
One last hack if very big emails are still crashing outlook.
There is a property in Outlook settings for "Message Format" called
"Reduce message size by removing format information not necessary to display the message”
Make sure that this property is checked. If this is unchecked it may slow down the email rendering by about 20%. Which is a lot. Every millisecond matters.
If you do all the above, and do not deviate from it, then your html email should get rendered on Outlook pretty fast and properly, without crashing it.
If you still face any issues with big emails, feel free to contact me. Would love to help.
Cheers!
Its already tough to generate a html markup compatible with various email clients, making sure which css properties are supported where, and using only the common ones. It becomes a huge pain, as we end up using the old table layout for the HTML markup. And above all that, there is the pain of dealing with Outlook email client. No matter how much we hate it, most enterprises rely on Outlook for their day to day business. So making sure our HTML emails render beautifully on Outlook becomes a priority, no matter how impossible the task may be.
In this post we will talk about the small tweaks we can make in our HTML markup, to make sure the email renders smoothly and beautifully in Outlook 2010 and 2013 on windows and on mac.
Outlook 2010 often crashes on opening big HTML emails on it. We will discuss ways to optimise our content to fix this too.
Always remember what css properties you can use. https://www.campaignmonitor.com/css/
This list generally serves as a good reminder for what you can use while making an HTML email
BUT, if you want to optimise for Outlook,
1) Use only table layout for your markup. Do not use any divs in your markup. They cause issues as outlook associates some default styles with them.
2) Do not use padding/margin css properties anywhere. Only use table layout to render your content. It may be painful, but it is rewarding.
3) Do not use spacer images in your email markup. Try to reduce the number of images in your email. The more images there are, the more time Outlook will take to download them and render the email. Instead of spacer images, try to use where you would otherwise use spacer images.
(This is one of the reasons for Outlook crashing for bigger emails)
4) If you are using an image, always use https: URLs for the images. This helps in some cases where outlook treats some http url as a bad url and gets stuck.
One last hack if very big emails are still crashing outlook.
There is a property in Outlook settings for "Message Format" called
"Reduce message size by removing format information not necessary to display the message”
Make sure that this property is checked. If this is unchecked it may slow down the email rendering by about 20%. Which is a lot. Every millisecond matters.
If you do all the above, and do not deviate from it, then your html email should get rendered on Outlook pretty fast and properly, without crashing it.
If you still face any issues with big emails, feel free to contact me. Would love to help.
Cheers!
