Afternoon
Long time listener, first time caller.
Firstly, thanks to the Tess team for the Gift Certificate template in the recipe book.
I've managed to tweak it for our purposes. For the first attempt, it all works fine... until it hits the Outlook desktop app. Then it's ..wonky, and missing the pic.
This:
Becomes this:
Has anyone attempted this template and made it work in Outlook that is willing to share the Vector Markup Language they've added to make it work, and to explain it to this relative novice?
Your assistance and patience is appreciated.
Thank you
JC
Hi JC -
Getting CSS and HTML for email clients like Outlook can be challenging, particularly with overlay types of layouts. Each email client supports its own version of the CSS and HTML standard, so you can't guarantee that Outlook, Gmail, Apple Mail, and others will display what you've designed as you'd like.
Outlook, for example, doesn't support background images, as you've found here. (The background-image attribute.)
You may need to use tables to accomplish your design, and the "background" attribute for a table cell.
A few resources that can get you started:
https://www.campaignmonitor.com/css/email-client/outlook-2007-16/ - This is a good list of all of the CSS selectors and attributes that do not render in outlook (you can find other email clients there too with their restricted lists).
https://backgrounds.cm/ : A tool that helps you generate the CSS you need to properly display a background image, with a fallback color if the image doesn't work for some reason. My previous suggestion of a table cell is the "Single Table Cell" option in that tool.
https://www.emailonacid.com/blog/article/email-development/how-to-code-emails-for-outlook-2016/ - A good blog to get you started with HTML emails for outlook.
I hope this helps get you where you want to be with your design!
Chris Szalaj
Product Owner, Business Facing Products
Tessitura Network
Thanks for all this Chris.
Back to the proverbial drawing board... and attempt to decipher all of this.
Have a great day.
Well Done on popping your forum cherry John! I'm also now exploring the wonderful world of html and outlook is not a team player!!! I've been Avoiding images for the moment just to get them up and running but would love to expand on this knowledge - maybe we can forma lil Sydney based learnnig group?
We managed it for a background image in Wordfly earlier in the year but it is a little fiddly. Would be nice to have that for HTML templates. As JC found there are a few default templates that come with MSO/VTM code in them