[Silk UI Web] Email formating

Steve Jordan

Question

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

24 Jun 2015

Samuel Jesus

Staff

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

24 Jun 2015

Steve Jordan

Hi Samuel,

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

Cheers
Steve

25 Jun 2015

Samuel Jesus

Staff

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

25 Jun 2015

Rebecca Hall

I heard that the newest version of silk fixes the problems with the email in applications. Is there an examples on email usage?

13 Nov 2015

Samuel Jesus

Staff

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

13 Nov 2015

GBCS

Hi Samuel, Just came to say hi.

First time I saw someone with sir name Jesus, ha ha. :D

BTW, I was looking at my friends HTML template today and found I the css styles didn't appear in Outlook.

So If we use inline css will it work on all email clients?

Is there any way I can edit the auto-generated html template?

Thanks for the help!

31 Oct 2017

Samuel Jesus

Staff

Hello No War,

Some email clients don't deal well with stylesheets, so adding CSS inline would solve that specific issue.

However, that does not solve everything.

When creating emails, imagine that you are coding in the year 2000: Use tables instead of Divs. CSS3, what's that?

Basically, you need to keep your emails HTML and CSS as simple as possible.

In order to make your life a bit simpler, we created some UI Patterns specific for emails and 2 sample emails that you can copy and reuse.

If you still need to have some custom CSS (or even HTML) on your email, I would suggest you check how the structures/styles were done on these patterns/samples. Also, check my post above where I talk about email size.

You can also check this link that contains some of the CSS compatibilities across several email clients.

Please let us know if you need any further assistance.

Cheers,

Samuel Jesus

02 Nov 2017

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines