Responsive email template

[olamborelle]

Hi,

We have been advised to prepare "responsive" email for our mailings, so the style and layout will adapt if contacts are reading our mailing on a mobile / small screen display. Typically, this requires some style element with media queries.

See examples here:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Alternatively, one can mimic responsive / media queries, with very elaborated inline style.

So my question is: is there any easy way to have a style element in the header? as I understand the email template should contain normally only the "body" of the email?

Thanks,

Olivier.

[olamborelle]

Hi,

Maybe another possible solution:

Where is the email "skeleton" file where I could add a <STYLE>...<> element in the header of EVERY mass email generated by EspocrM?

Thanks!

[wondertrout]

I found this elsewhere - https://mjml.io/

Everything works ok except for <style> commands. These seem to get stripped out by the built-in template editor in espocrm, regardless of where they originate from (i.e., manually entered or from source HTML).

It would be brilliant if there was an easy way to stop the editor plugin stripping out <style> tags!

[shalmaxb]

You can use style inline. This is the only way to get style in emails, as quite no email client would be able to function with style links.
I use for my Newsletters:

To create Templates: https://dashboard.unlayer.com/create/blank
To get the style inline: https://templates.mailchimp.com/resources/inline-css/

After that you can load this into the email editor of espoCRM and add your tags.

You won`t get the editor stopping to strip out, what it not wants.

[espcrm]

Gave it a test, annoying that we can just copy/paste HTML code, need to use an email to received the code then open it. But to find out about this inline-css it is a great idea that I didn't know exist.

[rabii]

only limitation is inline styles doesn't support media query and hence emails don't looks great on mobile. i hope the team will improve this area sometimes.