5

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!

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 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.

4

There is a new option on the horizon using Mosaico thanks to this extension

  • I'm really excited about this!!!!!! – frTommy Feb 25 '16 at 17:11
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.

  • Wow, what a great sounding extension! We'll have to try it. – Allen Hutchison Feb 21 '16 at 16:45
  • 2
    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. – Evan Feb 23 '16 at 18:49
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

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! It also lets you use purchasable templates built for other services from sites like themeforest and actually have them be usable in Civi.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.