[Silk UI Framework] Email formating

[Silk UI Framework] Email formating

  
Forge Component
(45)
Published on 10 May by OutSystems Labs
45 votes
Published on 10 May by OutSystems Labs
Hi,

I'm using the default silk email templates which are nice but when I receive the email, formating is missing almost plain text version.

Do I need to include some CCS or am I missing something else?

Cheers
Steve   
Hello Steve,

The Silk UI Patterns for the emails are structure elements and you need to give the styles to your text and elements you may use inside.

However, you are absolutly right: When you copy the Template you should get the correct styles, and right now that's not happening. The reason for that is that the template emails are depending on the Dublin Theme, and they should not, because if they do then most of the email clients will not get the CSS from the theme.

Tha's why on the Silk UI WebSite, you can find the following message: "These patterns should be used in a Web Flow with theme "Email", available on the SilkUIFramework module, which is intentionally empty.".

I´m adding this issue to our backlog and we will solve it as soon as possible.

Best regards,
Samuel Jesus
Hi Samuel,

so where do I put the styling if the Email theme is empty intentionally?
Do you have an example? 

Cheers
Steve
Hello Steve,
 
Whenever you create an email, the Theme file content is dumped inside the email.
Also, when the email reaches around 200kb, the email content is handled by a lot of Email clients (for example Gmail) as an attachment to the email, forcing the user to download the attachment in order to see the email.

By leaving the Theme empty, you are reducing the risk of this happening. With this in mind, you can have a small set of classes specific to your email inside the Email Theme. However, some Email Clients don´t handle that too well.
 
From our investigations, the most "universal" way to solve the issue is by using inline styles. To do that in the platform, you need to add tag "style" on the extended properties of the element you want to change, and the css properties on the value:
 
 
Right now, I don't have a good example to share with you, but as I told you on my previous post, we will fix the email examples from the SamplePages as soon as possible.
 
Best regards,
Samuel Jesus
I heard that the newest version of silk fixes the problems with the email in applications.  Is there an examples on email usage?
Hello Rebecca,

Yes, the newest version of Silk UI solves the issues of the email compability with Outlook. 
You just need to use the email structures from Silk.
If you want to see some examples, check out the Silk UI Sample Pages.

Best Regards,
Samuel Jesus