The project would follow the major following steps.
== 1. Make it pretty ==
Start with a graphic designer and a plan to create an attractive looking email. Don't worry about the code or the engine, just get it looking '''''wow'''''.
Here are some of them:
[http://stackoverflow.com/questions/2229822/best-practices-considerations-when-writing-html-emails] === Getting started guides === <p>Getting Started Guides: (from the stackoverflow link above)</p> * [http://www.campaignmonitor.com/resources/will-it-work/guidelines/]Campaign Monitor* [http://kb.mailchimp.com/article/how-to-code-html-emails/]Mailchimp* [http://www.sitepoint.com/code-html-email-newsletters/]Sitepoint* [http://www.reachcustomersonline.com/how-to-code-html-email-newsletters-all-new-version/]Reach Customers Online* [http://dev.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908]Tuts+
<p>Getting Started Guides:</p>=== CSS guides ===
<ul>
<li><a href="http://www.campaignmonitor.com/resources/will-it-work/guidelines/">Campaign Monitor</a></li>
<li><a href="http://kb.mailchimp.com/article/how-to-code-html-emails/">Mailchimp</a></li>
<li><a href="http://www.sitepoint.com/code-html-email-newsletters/">Sitepoint</a></li>
<li><a href="http://www.reachcustomersonline.com/how-to-code-html-email-newsletters-all-new-version/">Reach Customers Online</a></li>
<li><a href="http://dev.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908">Tuts+</a></li>
</ul>
<p>CSS Support & General Guides:</p>
<ul>
<li><a href="http://www.campaignmonitor.com/css/">Campaign Monitor | CSS Support Guide</a></li>
<li><a href="http://htmlemailboilerplate.com/">HTML Email Boilerplate</a></li>
<li><a href="https://litmus.com/help/email-clients/">Litmus | Email Clients FAQ's</a></li>
<li><a href="http://www.campaignmonitor.com/resources/will-it-work/">Campaign Monitor | Will it work?</a></li>
<li><a href="http://mailchimp.com/resources/guides/email-marketing-field-guide/">Mailchimp | Email Marketing Field Guide</a></li>
</ul>
* [http://www.campaignmonitor.com/css/]Campaign Monitor | CSS Support Guide* [http://htmlemailboilerplate.com/]HTML Email Boilerplate* [https://litmus.com/help/email-clients/]Litmus | Email Clients FAQ's* [http://www.campaignmonitor.com/resources/will-it-work/]Campaign Monitor | Will it work?* [http://mailchimp.com/resources/guides/email-marketing-field-guide/]Mailchimp | Email Marketing Field Guide === Inline tools === <p>You should always inline your CSS in html-email. Here is a list of <a href="[http://stackoverflow.com/questions/791070/what-tools-to-automatically-inline-css-style-to-create-email-html-code/17882057#17882057">]CSS Inlining Tools</a></p> === Responsive Guides ===
<p>Responsive Guides:</p>
<ul>
<li><a href="http://www.campaignmonitor.com/guides/mobile/">Campaign Monitor | Responsive Support Guide</a></li>
<li><a href="http://stylecampaign.com/blog/2012/10/responsive-email-support/">Style Campaign | Responsive Support Guide</a></li>
<li><a href="https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic">Litmus | Responsive How-To Infographic</a></li>
<li><a href="https://litmus.com/blog/our-favorite-responsive-and-mobile-email-resources">Litmus | Big List of Responsive & Mobile Resources</a></li>
</ul>
* [http://www.campaignmonitor.com/guides/mobile/]Campaign Monitor | Responsive Support Guide* [http://stylecampaign.com/blog/2012/10/responsive-email-support/]Style Campaign | Responsive Support Guide* [https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic]Litmus | Responsive How-To Infographic* [https://litmus.com/blog/our-favorite-responsive-and-mobile-email-resources]Litmus | Big List of Responsive & Mobile Resources <p>Here is <a href="[http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density">]a list of devices</a> by resolution and pixel density</p> === Templates ===
<p>Templates & Frameworks:</p>
<ul>
<li><a href="http://tedgoas.github.io/Cerberus/">Ted Goas | Cerberus Responsive Email Patterns</a></li>
<li><a href="http://www.emailonacid.com/blog/details/C13/emailology_a_free_responsive_email_template_using_media_queries_-_part_i">Email on Acid | Responsive Template</a></li>
<li><a href="http://briangraves.github.io/ResponsiveEmailPatterns/">Brian Graves | Responsive Email Patterns</a></li>
<li><a href="http://internations.github.io/antwort/">Antwort | Responsive Layouts</a></li>
<li><a href="http://zurb.com/ink/templates.php">Zurb | Ink Responsive Templates</a></li>
<li><a href="http://www.campaignmonitor.com/templates/all/">Campaign Monitor | Free Email Templates</a></li>
<li><a href="https://github.com/mailchimp/Email-Blueprints">Mailchimp | Email Blueprints</a></li>
</ul>
<p>* [http://tedgoas.github.io/Cerberus/]Ted Goas | Cerberus Responsive Email Patterns* [http://www.emailonacid.com/blog/details/C13/emailology_a_free_responsive_email_template_using_media_queries_-_part_i]Email on Acid | Responsive Template* [http://briangraves.github.io/ResponsiveEmailPatterns/]Brian Graves | Responsive Email Patterns* [http://internations.github.io/antwort/]Antwort | Responsive Layouts* [http://zurb.com/ink/templates.php]Zurb | Ink Responsive Alternate ExamplesTemplates* [http://www.campaignmonitor.com/templates/all/]Campaign Monitor | Free Email Templates* [https:</p>/github.com/mailchimp/Email-Blueprints]Mailchimp | Email Blueprints
<ul><li><a href=== Alternate Responsive Examples ="== * [http://stackoverflow.com/questions/20483059/responsive-order-confirmation-emails-for-mobile-devices/20497625#20497625">]Stack Overflow | Fluid Example</a></li><li><a href="* [https://litmus.com/blog/monsters-fluid-layout-stands-out-among-job-search-emails">]Email on Acid | Monster's Fluid Layout</a></li><li><a href="* [http://stylecampaign.com/blog/2010/09/fluid-mobile-email-design-part-4/">]Style Campaign | Fluid Mobile Email Design</a></li><li><a href="* [http://stackoverflow.com/questions/17674172/equivalent-to-float-in-outlook/17677304#17677304">]Stack Overflow | Floating Content</a></li></ul>
<p>Also the Ted Goas Responsive link above has an excellent fluid example. </p>
=== Troubleshooting Guides ===
<p>Troubleshooting & General Guides:</p>
<ul>
<li><a href="http://www.emailonacid.com/blog/details/C13/stop_yahoo_mail_from_rendering_your_media_queries">Email on Acid | Yahoo Media Query Bug Workaround</a></li>
<li><a href="http://stackoverflow.com/questions/9697788/html-email-is-colspan-allowed/16964122#16964122">Stack Overflow | Colspans and Rowspans in HTML Email</a></li>
<li><a href="http://templates.mailchimp.com/development/css/outlook-conditional-css">Mailchimp | Outlook Conditional CSS</a></li>
<li><a href="https://litmus.com/blog/update-banning-blue-links-on-ios-devices">Litmus | Banning Blue Hyperlinks</a></li>
<li><a href="http://stackoverflow.com/a/21485767/1435513">Stack Overflow | Webfonts in HTML Email</a></li>
</ul>
<p>You'll need to use <a href="* [http://msdnwww.microsoftemailonacid.com/en-usblog/librarydetails/hh846327%28v=vs.85%29.aspx">VML<C13/a> to get background images working in Outlook (Except <a href="stop_yahoo_mail_from_rendering_your_media_queries]Email on Acid | Yahoo Media Query Bug Workaround* [http://stackoverflow.com/questions/129701439697788/howhtml-makeemail-backgroundis-imagecolspan-onallowed/16964122#16964122]Stack Overflow | Colspans and Rowspans in HTML Email* [http://templates.mailchimp.com/development/css/outlook-newsletterconditional-in-outlookcss]Mailchimp | Outlook Conditional CSS* [https:/13259519#13259519">in the body tag</a>)litmus. Here are some VML com/blog/update-banning-blue-links-on-ios-devices]Litmus | Banning Blue Hyperlinks* [http:</p>/stackoverflow.com/a/21485767/1435513]Stack Overflow | Webfonts in HTML Email
<ulp><li><a href="You'll need to use [http://backgroundsmsdn.cmmicrosoft.com/">Campaign Monitor | Bulletproof Backgrounds<en-us/a><library/li><li><a hrefhh846327%28v="vs.85%29.aspx]VML to get background images working in Outlook (Except [http://buttonsstackoverflow.cmcom/questions/">Campaign Monitor | Bulletproof Buttons<12970143/a><how-make-background-image-on-newsletter-in-outlook/li>13259519#13259519]in the body tag). Here are some VML links:</ulp>
</div>
* [http://backgrounds.cm/]Campaign Monitor | Bulletproof Backgrounds
* [http://buttons.cm/]Campaign Monitor | Bulletproof Buttons
=== HTML Editing Tools === If you're looking for free HTML editing tools* [http://webdesign.about.com/od/windowshtmleditors/tp/free-windows-editors.htm] About.com The 10 Best Free Web Editors for Windows == 3. Work it into BE bxp ==
The hard part is now over. Your images are on a web server, you have responsive HTML which is cross email browser compatible. All we need to do now is customise it for use record by record.
We now need to set up something similar to a mail merge process as you can do with Excel and Word. i.e. the data in the Excel spreadsheet is populated into the Word document.
In BE bxp every form has a unique Id number. This number is used in the name of every field.
We need to get the field name for the field which contains the data we want to put in the email. Most commonly this is the first name of the customer.
Main Menu > Form Management > Form - Field Mapping > Field Mapping - Manage > Choose the form > You now see the field name for each field.
The name will appear as strCDA_X_field_Y_Z. X is the unique form Id. Z is the unique question Id. Every question also gets a unique number. If the question is a complex type and is made up of sub parts. Y represents the sub part. So if our form is ID 22. We are looking at the third question which is a complex - name block made up of Title, Firstname, Initial, Surname and in our mail we want the first name to be used our field would be strCDA_22_field_1_22. Each field is uniquely named and the field mapping gives you the field names.
BE uses a -- notation to let it know to perform a replacement.
bxp uses a -- notation to let it know to perform a replacement. Using the field mapping work out the field name need. Into your HTML at the appropriate places put --strCDA_22_field_1_22-- BE bxp then knows when using this to perform the replacement.
Go into the outcome to send the email
Main Menu > Form Management > Form - Outcome Manager > Outcome - Edit > Choose your Form > Choose the Outcome > External Communications > External Body > Paste in your HTML here.
Fill out the other External mail fields and test the process on yourself.
If you have built this properly, you should get your stunning looking email with proper replacements come straight back to you.
Give us a shout on support@allnonebxpsoftware.ie com and let us help you. [[Category:Module Specific:Form Management]][[Category:Module Specific:Communications Centre]][[Category:Topic:Communications]][[Category:Topic:Marketing]]