How can i make newsletter template compatible with mailchimp and campain monitor?

207 Views Asked by At

I want to make a newsletter template for mailchimp & campaign monitor ..

I know in newsletters we have to use table layout and inline styles and i have already done that in my template but i wonder if there are any specific rules i must follow to make my template valid for mailchimp & campaign monitor ?? or just use the following html for the both ??

This is my code :

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <table width="100%" align="center" bgcolor="#ebebeb">
            <tbody>
                <tr>
                    <td>
                        <table width="600px" align="center" bgcolor="#FFFFFF">
                            <tbody>
                                <tr align="center">
                                    <td style="padding:9px 18px;color:#696969;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:13px;text-align:left;line-height:150%">                                               
                                        <p><span style="font-weight: bold;">Hello friend,</span><br /><br />
                                            Why you make everything from scratch?! Now you can find thousands of full source code on the internet and save your time. Here you can find some awesome of them for your upcoming apps! </p>                                                
                                        <p align="left" style="font-weight: bold;">Don't re-invent the wheel!</p>
                                        <p align="right" style="font-weight: bold;"><span align="left">- NileWorx</span></p>
                                    </td>                    
                                </tr>

                            </tbody>
                        </table>
                        <br />

                        <table  width="600px" align="center" bgcolor="#FFFFFF">
                            <tbody>
                                <tr align="center">
                                    <td style="padding:9px 14px;color:#696969;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:13px;text-align:left;line-height:150%">

                                        <a style="text-decoration:none;" href="" target="_blank"><img src="" /></a>
                                        <div align="left">
                                            <a style="text-decoration:none;" href="" target="_blank"><h3 style="color:#49ADBD;font-size:12pt">Football Logo Quiz - Android</h3></a>
                                            <p style="text-align: justify;">Football Logo Quiz is a worldwide game. +10,000,000 are playing logo quiz games and we filled it with many good features. It has an admin panel and use AdMob to monetize it. It is easy to customize!</p> 
                                            <div style="font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-weight: bold;display:inline-block;width: auto; background-color: green;padding: 8px;color: #FFFFFF"><a style="color:#FFFFFF;text-decoration:none;" href="" target="_blank">VIEW FULL</a></div>
                                        </div>
                                    </td>                    
                                </tr>
                                <tr><td><hr /></td></tr>
                                <tr align="center">
                                    <td align="center">
                                        <table align="left" width="280" >
                                            <tbody>
                                                <tr>
                                                    <td style="padding-top:9px;padding-left:10px;padding-bottom:9px;padding-right:0;color:#696969;font-family:Helvetica;font-size:13px;line-height:150%;text-align:left">
                                                        <a style="text-decoration:none;" href="" target="_blank"><img src="" /></a>
                                                        <a style="text-decoration:none;" href="" target="_blank"><h3 style="color:#49ADBD;font-size:12pt">Success Quotes - Android & iOS</h3></a>
                                                        <p style="text-align: justify;">SuccessQuotes is an android motivational application. It has SQLiteDatabase with 1000 success quotes for more than 180 authors and sharing features.</p>
                                                    </td>                    
                                                </tr>                                
                                            </tbody>
                                        </table>
                                        <table align="right" width="280">
                                            <tbody>
                                                <tr>
                                                    <td style="padding-top:9px;padding-right:10px;padding-bottom:9px;padding-left:0;color:#696969;font-family:Helvetica;font-size:13px;line-height:150%;text-align:left">
                                                        <a style="text-decoration:none;" href="" target="_blank"><img src="" /></a>
                                                        <a style="text-decoration:none;" href="" target="_blank"><h3 style="color:#49ADBD;font-size:12pt">Facebook Feeds Notifier - Android</h3></a>
                                                        <p style="text-align: justify;">Never miss an important post!! .. keep in touch with your favorite facebook pages without opening the facebook application..</p>                     
                                                    </td>                    
                                                </tr>                                
                                            </tbody>
                                        </table>
                                    </td>                             
                                </tr>
                            </tbody>
                        </table>

                        <br />
                        <table width="600px" align="center" bgcolor="#FFFFFF">
                            <tbody>
                                <tr>
                                    <td style="padding-top:9px;padding-right:10px;padding-bottom:9px;padding-left:0;color:#696969;font-family:Helvetica;font-size:13px;line-height:150%;">                                        
                                        <p style="text-align: right;" align="right">
                                            Codecanyon: <a style="text-decoration: none;color:#49ADBD" target="_blank" href="http://codecanyon.net/user/NileWorx/portfolio?ref=NileWorx">Our portfolio</a>
                                            <br />
                                            Skype: <span style="text-decoration: none;color:#49ADBD">nileworx.support</span>
                                            <br />
                                            E-mail: <a style="text-decoration: none;color:#49ADBD" href="mailto:[email protected]">[email protected]</a>
                                        </p>                                             
                                    </td>                    
                                </tr>                                
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>

    </body>
</html>
1

There are 1 best solutions below

3
On

ahmed, this is Ros from Campaign Monitor here. One thing is writing HTML code, however if you want to use our email editor, you will need to use our template language to create editable areas in your template. Note that our template language differs from MailChimp's, so you will need to make two versions of your template.

If you're stuck on the code, I would highly recommend you create and export a template from our email builder.

Thanks, eng.ahmed - let us know if you have any other questions!