• Replies 4 replies
  • Subscribers 337 subscribers
  • Views 165 views
  • Users 0 members are here
Related

HTML Gift Certificate template and Outlook

John Calvi
$organization

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

Parents
  • $organization

    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

Reply
  • $organization

    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

Children