HTML for Email

    Follow

    gCast has two methods of creating emails.

    1. Using the gCast drag and drop email creator or
    2. Via HTML (and using a modified version of the tinymce editor)

    If you are bringing your own HTML to the party there’s a couple of things you should know.

    1. The following code markup is not supported in the tinymce editor

    <!doctype>

    <head>
    <meta charset="utf-8">
    <title>Title</title>
    </head>
    <body>
    </body>

    One of the reasons behind this is whenever an email is sent from the gCast platform the HTML supplied contains a wrapper which includes it’s own and which allows for additional options outside of the supplied HTML. Having versions of the code could potentially conflict.
     
    2. When
     
    <title>Title</title>
     
    is supplied via a template import the editor currently replaces the
     
    <title>
     
    with
     
    <p>
     
    The simple workaround is to remove the title, as gCast uses the subject line as the title when the campaign is sent.

    3. Inline CSS is supported, however output is often dependent on the email client the email is being viewed on. Here’s some hints and tips for designing your email for general use and using it with the tinymce WYSIWYG editor and gCast.

    4. Design like it’s 1999. Use tables and don’t build your template like you would a website.

    5. HTML emails width between 600 – 650 pixels is a good size.

    6. <style> in the header is supported in gCast but does not work in Gmail.

    7. Inline style, eg specify styling within a table <td style=”font-family: Arial; font-size:12px">

    8. External CSS eg <link rel='stylesheet' HREF='mystylesheet.css' TYPE='text/css'> is not supported.

    9. Cell padding is ok, avoid using cell spacing (Gmail in internet explorer doesn’t seem to acknowledge cell spacing)

    10. Avoid background images but if you want to use them

    • Background-image in the header will work in most email clients but not Gmail
    Example 
    <style>
    body {background-image:url (myimage.png);}
    </style>
    Background image within table cells will work in most clients but not outlook (PC)
    Example
    <td style="background-image:url (myimage.png);">
     
    11. Specify alignment within a table cell eg “left” or style=”text-align:left”
     
    If none specified most clients will align to the left except for when email is opened or viewed in IE, when it’s defaults to the center. Use left, right or center to specify alignment. Justify will not work in all clients.
     
    12. Video/Flash animation is not supported in email.
     
    13. GIF animation is limited.
     
    14. Font support. Only used web standard fonts.
     
    15. Responsive – Responsive email design is completely reliant on the smart phone operating system AND Email client. For example whilst responsive email design will work on an iPhone and the default mail client, if you were to install the outlook app on the iPhone, your responsive design wouldn’t work.

    We recommend testing your HTML emails out by sending your test email out through gCast.

    If you’re searching for email design inspiration, check out these responsive templates. They’re not built specifically to work with gCast, however a simple modification to the width of tables and images (due to sitting within the wrapper mentioned in point 1) you can have your templates looking like this.

    Products such as Litmus and Email on Acid are great for reviewing your campaign across many devices.

    Was this article helpful?
    0 out of 0 found this helpful

    Comments