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.

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>
<!--<!gendif]-->
<!--outlook DPI fix-->
<!--iif gte mso 9]><xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml><!rendif]-->
<!--outlook DPI fix ends-->
<style type="text/css">
    atx-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*/
        *yid]#wrapper+table,
        *tclass].container,
        *aclass].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*/
        *yid]#mobile-label {
            background-color: ;
            cursor: pointer;
            display: block !important;
            margin: 0 auto;
            padding: 22px 18px;
            -webkit-tap-highlight-color: transparent;
            width: 84px;
        }