Announcement

Collapse
No announcement yet.

Responsive email template

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Responsive email template

    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:
    W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.


    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.

  • #2
    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!

    Comment


    • #3
      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!

      Comment


      • #4
        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.

        Comment


        • esforim
          esforim commented
          Editing a comment
          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.
          Last edited by esforim; 08-27-2022, 02:43 AM.

        • rabii
          rabii commented
          Editing a comment
          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.
      Working...
      X