Responsive Email in Salesfoce

Creating a responsive Email that works in SF

For this instance we needed not only to create an automated “newsletter” style email that would be sent from Salesforce but also gather the information from the project section in Salesforce.  There are various steps that i had to take some you will need if you want to intergrate using salesforce, others you’ll only need if you just tryin to create a responsive “newletter” style email. But this made shooting a email with the information automaticly polutated super easy.

Step 1 Salesforce Mapping – I had to map the fields i would collect in salesforce project. I create multiple fields with the information that would be delivered on our email.

 

Step 2 – Content –

Step 3 – Layout & Design

Step 4 – Responsive code – I searched a few places to pull some code for the foundation, and came across (http://zurb.com/playground/responsive-email-templates) I used the template to adjust some of the design, and stay close to the source. The code is very simple, and uses external css with Media Queries.

Step 5 – Getting it into Salesforce. Adding the tags from Salesforce that would map to the information was pretty simple, and were added to the html.

Salesforce does not allow external css to be present for first step was getting all css inlined. I used the converted to turn all css inlined, it did the trick and even kept the media queries. http://templates.mailchimp.com/resources/inline-css/

In order to send i used a work around in Cases > Email, and change the source to projects so it may gather the right information.

It doesnt look very pretty at first,

but when sent to a client they only see the information you have gathered for them.

 

And the Email is fully responsive on a mobile device: