[Silk UI Web] Silk makes Emails big >150kb

[Silk UI Web] Silk makes Emails big >150kb

Forge Component
Published on 14 Jun (4 days ago) by OutSystems Labs
63 votes
Published on 14 Jun (4 days ago) by OutSystems Labs
Hi Guys,

It came to my atention that emails send with a SilkUI look are pretty big.
This can grow from 150 till 250kb per email, all because of the css include.
Do you have some advice what we can do to reduce the size a bit?

first of all: don't use html-emails. it's not needed at all.
for proper correspondence, you will have to make a pdf. this is much more friendly to the eye.

if you thought browsers are a mess with styling, I wish you good luck with all the email-clients.

last, if you really really really need css/html for email, question it again and ask yourself why.
if it still is needed. make it easy as possible. less is better,

Hello Freek,

As you correctly identified, the reason why your email is so large its because whenever you create an email, the Theme file is dumped inside the email.

That's why Silk has some patterns specific for email and an email flow referencing a Theme that is left intentionally empty.
By leaving the Theme empty, you are reducing the size and with that increasing the email client compatibility.

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, so use caution.

Please let us know if you have any more questions.

Samuel Jesus

Hi Samual,

As your mention we use the specific email patterns from Silk.
You mean to create a extra Theme that is compleetly blank and use that as default in the webflow correct?
Only why use the Silk pattern then, I would suspect that if I use the Silk Email Pattern it automaticly will create small emails.
Hello Freek,

Silk UI Email Patterns do not control your Webflow, and its inherited Themes, so we cannot prevent that CSS and the effect they will have on the size of your email. That is why you should use an empty Theme on your flow.

Actually, you do not have to create an extra Theme, because Silk UI Framework already provides you one:

When you start a new application based on a Silk UI Theme (in this case, I'm using Dublin), the generated module (eSpace) will contain the following flow, ready for your emails:

As I explained before, you should use this empty Theme in order to keep your email size as small as possible. 

The reason why you should use the Silk UI Email Patterns is to help you easily build an email that will be compatible with most email clients.
In order to have that compatibility you have to build your HTML email with a specific set of rules, and since that rules are quite restrict, the Silk UI Email patterns already give you that rules implemented (in an optimized way), so that you only have to work on the content itself.

As a reference you can check the Silk UI Sample Pages, which have 2 email examples implemented following these recommendations.

Samuel Jesus
Hi Samuel,

Thanks I already did this but I had not the
/* Email Theme */
In the style sheet, I think this is a bug because if there is no content in there at all it will include css from the Espace base theme. Thats why it did not get smaller after testing but now it works.
Hello freek,

First of all sorry for the late reply.

So far I was not able to replicate that issue.
Can you share with us a simple eSpace with this issue?

Best Regards,
Samuel Jesus