Survey Invite Email HTML Templates | XM Community
Question

Survey Invite Email HTML Templates

  • 26 January 2024
  • 2 replies
  • 161 views
R
Rank
Userlevel 5
Badge +11

Hi All,

 

I’m after some advice.  The HTML email templates we use are and have been static in their code and design since their development back in 2018.  Since then our digital studio department have been disbanded and so there is no longer any support and guidance.  We’re not just talking the visual look and feel but the behind the scenes conditional styling that I have since discovered is in the template and until now not realised its importance to ensure the design looks ok across many email clients and devices.

 

I’d be interested  to know what everyone else does.  How you manage your templates to ensure they remain in good working order and what software you use.  I’m a novice when it comes to HTML and CSS so I’m looking for something to deliver all this behind the scenes code with a polished design.

 

Currently I’m using word, exporting the design to html then using a combination of free online html editors but this does not obviously cover off any conditional styling.  Currently I’m stuck with injecting the new design into the old template in hope that it works ok (I keep it simple but never the less, the amount of time this takes to do this manually is not a workable solution).

 

Thanks in advance

 

Rod Pestell

2 replies

JesperAndersen
Rank
Userlevel 3
Badge +11

Hi @Rod_Pestell,

This can be a bit tricky, depending on the complexity. Personally I don’t like Word, as it might mess with some of the formatting, the same reason I avoid Excel for CSV files.

For the development of the template, I use a lot of sources, but the html editor from w3schools is easy to use:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_editor

There might be other and better options out there, but I just never had the need to, as this one works for me.

I would normally develop the template, then test in a mail (as you never know..) and then store in a library, to make sure I can easily use it. In most cases it will require variants, depending on the need, but that is easy to handle.

R
Rank
Userlevel 5
Badge +11

Hi @JesperAndersen 

 

Thanks for the reply.  let me post the start of our HTML template we currently have.  It shows a lot of conditional styles, eg. if content is Edge or if gte mso 9.  This is a template that over time no doubt needs to be updated and maintained.  So working with an html editor alone won’t have this information and understanding.  There are websites such as https://email2go.io/features/free-html-email-template-builder/ out there that provide a service that can test email templates and no doubt manage all these conditional styles.  It’s this that I am after advice on.

 

Email clients, still from my experience handle the layout of objects and elements differently, especially Outlook.  eg. a centre aligned table won’t centre in outlook so the work around is to put extra columns on the side and adjust to the same proportional size eg. 20%, 60%, 20%.

 

Thanks

Rod Pstell

 

<p>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
</p>
<p>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
</p>
<!--<![endif]-->
<!--outlook DPI fix-->
<!--[if gte mso 9]><xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml><![endif]-->
<!--outlook DPI fix ends-->
<style type="text/css">
    a[x-apple-data-detectors] {
        color: inherit !important;
        text-decoration: none !important;
        font-size: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }

    img {
        /* Allow smoother rendering of resized image in Internet Explorer */
        -ms-interpolation-mode: bicubic;
    }

    /* styles for mobile view */
    @media all and (max-width: 600px) {

        /* reset styles*/
        *[id]#wrapper+table,
        *[class].container,
        *[class].nav {
            min-width: 0 !important;
            -moz-text-size-adjust: none;
            -ms-text-size-adjust: none;
            -webkit-text-size-adjust: none;
            width: 100% !important;
        }

        /* nav styles*/
        *[id]#mobile-label {
            background-color: ;
            cursor: pointer;
            display: block !important;
            margin: 0 auto;
            padding: 22px 18px;
            -webkit-tap-highlight-color: transparent;
            width: 84px;
        }

 

Leave a Reply


Terms & Conditions