• Full width image (responsible UX)
• Two columns layout (responsible UX)
• Three columns layout (hybrid UX)
• Bulletproof buttons style
• Send email automatically
• Test email with Jenkins

1. • don't be panic first, deeply breath and go through this bug check list and check some useful notes here.

   • Couldn't achieve the responsible font size on different screen.
     Check the image added in the email template, sometimes the image increase the max-width of the template and the email client cannot do the media requirement correctly.

2. Special Issues on Outlook

• Outlook2007-2016 on Windows 7 the bullet indent is not right.
  Using the inline sytle mso-special-format:bullet can fix it.
• Outlook2007-2013 on Windows(7-10) Image shown up in real size. For example if the header image is 1180x400, then this image will break the max-width of the mail 600 px.
  Using the right size of the image is important while creating the email HTML.
• Outlook2007-2013 on Windows(7-10) some copy has been cut off.

3. Special Issues on Pardot

• Pardot render all the http or https link into the track link for analysis in its platform. So in order to avoid the webfont links treated as track link just put it in <style> tag.

• I personally don't like the test email feature from Pardot, since it is too too slow, local server might be pretty fast. Use command line here can make life much easier. Here is my try, installed SendEmail service on MacOS.

brew SendEmail

/usr/local/Cellar/sendemail/1.56/bin/sendEmail -f [email protected] -t [email protected] < youttestemail.html -s smtp.gmail.com:587 -xu [email protected] -xp password

• Jenkins pipeline service is perfect to test the created template on your own email client, and the speed is extreamly fast. If you never use it before, you can follow this post to configure the Jenkins Email plugins, then create the pipeline and configure it as the screenshot, then add the script to the pipeline part and build it.

pipeline {
   agent any
    stages {
        stage('clone repo and clean it'){
            steps{
                sh "rm -rf HTML-Email-Template"
                sh "git clone https://github.com/sparrowxiao/HTML-Email-Template.git"
            }
        }
        stage('Ok') {
            steps {
                echo "Ok"
            }
        }
    }
    post {
        always {
            emailext mimeType: 'text/html', 
            body: '${FILE,path="/Users/Shared/Jenkins/Home/workspace/send-test-email/HTML-Email-Template/01-standard-template.html"}', recipientProviders: [[$class: 'DevelopersRecipientProvider'], [$class: 'RequesterRecipientProvider']], subject: 'Test'
        }
    }
  
}

• Litmus: I like their email render feature

• Campaign Monitor: I like their resource section