Answers.Body: <p>We worked on our main email template this last summer, using the 'Sample Responsive Design Newsletter - Single Column Template' from within Civi as a springboard.  We also created an account with <a href="http://mailchimp.com/" rel="noreferrer">MailChimp</a> to see how MailChimp put their templates together.</p>
  
  <p>As old as they are, HTML Tables are still the way to go because of how differently email clients handle display.  We used <code>&lt;style&gt;</code> tags as needed and used media queries within those <code>&lt;style&gt;</code> tags.  We ended up using a good bit of the CSS from our website to maintain our look; we just had to adapt our website's CSS to work with tables.</p>
  
  <p>Here is an example mailing we did from last summer:
  <a href="https://glenwoodcc.org/civicrm/mailing/view?reset=1&amp;id=77" rel="noreferrer">https://glenwoodcc.org/civicrm/mailing/view?reset=1&amp;id=77</a>  We usually email short snippets and point back to our website, so we typically only have one main header image, one heading and then the content.  Our two column footer was a challenge to sort out responsively with tables, but we got there.  We also have a template that repeats the simple template so we could have multiple sections (image/heading/content) to the email.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-02-20T21:20:33.273Z
Answers.LastActivityDate: 2016-02-20T21:27:20.887Z
Answers.LastEditDate: 2016-02-20T21:27:20.887Z
Answers.UserDisplayName: Allen Hutchison
Answers.Body: <p>There is a new option on the horizon using Mosaico thanks to <a href="https://civicrm.org/blogs/parvez/a-new-beginning-for-civimail%E2%80%A6" rel="nofollow">this extension</a></p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-02-25T17:11:57.533Z
Answers.Text: I'm really excited about this!!!!!!
Answers.UserDisplayName: frTommy
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-02-25T02:12:35.200Z
Answers.LastActivityDate: 2016-02-25T02:12:35.200Z
Answers.UserDisplayName: petednz - fuzion
Answers.Body: <p>I have not had much opportunity to test this method but I think broadly speaking it is a good approach to create templates responsive, more or less quickly. Then:</p>
  
  <ol>
  <li><p>First you have to create a responsive template using a tool for generating templates like the MailChimp generation tool for example.</p></li>
  <li><p>Second you can adapt the template to your needs and remove unnecessary code that generation tool introduced on the template.</p></li>
  <li><p>Finally to take advantage of css header styles that include these types of templates, exist this fantastic extension <a href="https://civicrm.org/extensions/css-inline" rel="nofollow">https://civicrm.org/extensions/css-inline</a>.</p></li>
  </ol>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-02-21T16:45:57.803Z
Answers.Text: Wow, what a great sounding extension! We'll have to try it.
Answers.UserDisplayName: Allen Hutchison
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-02-23T18:49:37.927Z
Answers.Text: IMBA has been using the css-inline extension for a while now with great results. One thing to note: if you place CSS styles in the <head> tag of an email, CiviMail won't send the email. It'll error out. You have to link to the CSS file, then it works like a charm.
Answers.UserDisplayName: Evan
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-02-21T16:03:16.670Z
Answers.LastActivityDate: 2016-02-21T16:03:16.670Z
Answers.UserDisplayName: Francesc Bassas i Bullich
Answers.Body: <p>We started with the Zurb responsive email templates, created headers and footers from those along with templates for the "body" of our emails. This allows us to pick the correct header for the type of email (donation appeal, eNews, action alert, etc.) then a general "layout" for the body (1-column, 2-column, hero image or not, etc.) for quite a bit of flexibility. Eventually I'll create "mini-templates" for the body, so we can stack templates on top of each other to build larger emails. The CSS for each style is contained in the header file and then inlined using the css-inline extension.</p>
  
  <p><a href="http://zurb.com/playground/responsive-email-templates" rel="nofollow">http://zurb.com/playground/responsive-email-templates</a></p>
  
  <p><a href="https://civicrm.org/extensions/css-inline" rel="nofollow">https://civicrm.org/extensions/css-inline</a></p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-02-23T18:53:21.600Z
Answers.LastActivityDate: 2016-02-23T18:53:21.600Z
Answers.UserDisplayName: Evan
Answers.Body: <p>We actually just launched a web app in free open beta to help convert mail templates from tools like mailchimp that offer great template creation interfaces to places like Civi. The site converts over all the merge tags, adds the required anti-spam tag requirements based on the service, makes a plain-text version for the 1% of people who want that, and finally does the CSS inlining for you. Go give it a shot and give some feedback if you could <a href="http://mailtemplateconverter.com" rel="nofollow noreferrer">mailtemplateconverter.com</a>! It also lets you use purchasable templates built for other services from sites like themeforest and actually have them be usable in Civi. </p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-25T00:47:32.427Z
Answers.LastActivityDate: 2017-03-25T00:47:32.427Z
Answers.UserDisplayName: LorenV
Body: <p>Has anyone created a mobile responsive email newsletter template to work with Civimail? If so, can you please share the link to an example of the email newsletter which uses the template? If you have suggestions for how to create it easily, please share some tips. Thank you!</p>
  
Tags: <civimail>
Title: Mobile responsive email template
ThreadText: # Mobile responsive email template
  
  (Asked by: username_0 on 2016-02-20)
  
  Has anyone created a mobile responsive email newsletter template to work with Civimail? If so, can you please share the link to an example of the email newsletter which uses the template? If you have suggestions for how to create it easily, please share some tips. Thank you!
  
  **Tags:** civimail
  
  
  ---
  
  ## 5 answers
  
  ### Answer by username_1 on 2016-02-20. Score: 5
  
  We worked on our main email template this last summer, using the 'Sample Responsive Design Newsletter - Single Column Template' from within Civi as a springboard. We also created an account with [MailChimp](http://mailchimp.com/) to see how MailChimp put their templates together.
  
  As old as they are, HTML Tables are still the way to go because of how differently email clients handle display. We used `<style>` tags as needed and used media queries within those `<style>` tags. We ended up using a good bit of the CSS from our website to maintain our look; we just had to adapt our website's CSS to work with tables.
  
  Here is an example mailing we did from last summer:
  <https://glenwoodcc.org/civicrm/mailing/view?reset=1&id=77> We usually email short snippets and point back to our website, so we typically only have one main header image, one heading and then the content. Our two column footer was a challenge to sort out responsively with tables, but we got there. We also have a template that repeats the simple template so we could have multiple sections (image/heading/content) to the email.
  
  
  ---
  
  ### Answer by username_2 on 2016-02-25. Score: 4
  
  There is a new option on the horizon using Mosaico thanks to [this extension](https://civicrm.org/blogs/parvez/a-new-beginning-for-civimail%E2%80%A6)
  
  > **Comments:**
  > **username_3**: I'm really excited about this!!!!!!  
  
  ---
  
  ### Answer by username_4 on 2016-02-21. Score: 3
  
  I have not had much opportunity to test this method but I think broadly speaking it is a good approach to create templates responsive, more or less quickly. Then:
  
  1. First you have to create a responsive template using a tool for generating templates like the MailChimp generation tool for example.
  2. Second you can adapt the template to your needs and remove unnecessary code that generation tool introduced on the template.
  3. Finally to take advantage of css header styles that include these types of templates, exist this fantastic extension <https://civicrm.org/extensions/css-inline>.
  
  > **Comments:**
  > **username_1**: Wow, what a great sounding extension! We'll have to try it.  
  > **username_5**: IMBA has been using the css-inline extension for a while now with great results. One thing to note: if you place CSS styles in the <head> tag of an email, CiviMail won't send the email. It'll error out. You have to link to the CSS file, then it works like a charm.  
  
  ---
  
  ### Answer by username_5 on 2016-02-23. Score: 2
  
  We started with the Zurb responsive email templates, created headers and footers from those along with templates for the "body" of our emails. This allows us to pick the correct header for the type of email (donation appeal, eNews, action alert, etc.) then a general "layout" for the body (1-column, 2-column, hero image or not, etc.) for quite a bit of flexibility. Eventually I'll create "mini-templates" for the body, so we can stack templates on top of each other to build larger emails. The CSS for each style is contained in the header file and then inlined using the css-inline extension.
  
  <http://zurb.com/playground/responsive-email-templates>
  
  <https://civicrm.org/extensions/css-inline>
  
  
  ---
  
  ### Answer by username_6 on 2017-03-25. Score: 1
  
  We actually just launched a web app in free open beta to help convert mail templates from tools like mailchimp that offer great template creation interfaces to places like Civi. The site converts over all the merge tags, adds the required anti-spam tag requirements based on the service, makes a plain-text version for the 1% of people who want that, and finally does the CSS inlining for you. Go give it a shot and give some feedback if you could [mailtemplateconverter.com](http://mailtemplateconverter.com)! It also lets you use purchasable templates built for other services from sites like themeforest and actually have them be usable in Civi.
  
  
  ---
  
  