How To Use CiviCRM's Mosaico Extension To Create Responsive Emails

At Wanna Pixel, Inc., we have been excited about Mosaico, a drag-n-drop email builder native to CiviCRM, for quite awhile. Most designers and nonprofit staff alike have struggled to use the CiviCRM mailing feature to create responsive email campaigns. Three years ago, I wrote an article about the responsive template I created for CiviCRM users, hoping to help ease this struggle.

Before Mosaico, there were two options for email building when using CiviCRM.

• Use responsive html templates and spend hours editing them whenever you wanted to make a change.
• Integrate with MailChimp and lose some data and token access.

CiviCRM Core Team, Veda Consulting, and CompuCorp worked together to create a beautiful extension for CiviCRM’s mailing feature which integrates with Mosaico, a drag and drop tool created by VoidLabs.

Our big question was: Will our creative and development team be able to use, recommend and train our nonprofit clients to create satisfactorily beautiful emails without having to integrate with a third party email builder such as MailChimp, or painstakingly editing raw HTML templates?

I have to admit, I’m impressed. Veda Consulting and CompuCorp have done an incredible job in creating this beautiful Drag and Drop extension for CiviCRM’s email tool.

We've written a blog post detailing how to use Mosaico to create beautifully responsive emails. Head over to the blog to check it out!

Here are some things we loved about Mosaico in our test run.

• You have access to all CiviCRM's native tokens.
• Your email content will be saved in your CiviCRM database.
• When you are in a design block in Mosaico, it is easy to toggle between global and local style settings. By contrast, in MailChimp, there is a lot of saving and exiting and navigating to your global styles. Then when you do navigate to global styles, it is divided up among things like page, content, body, etc. I’ve always found it a bit confusing and never can quite figure out where some of my styles are coming from. Mosaico makes this extremely simple, always keeping you inside of one panel.
• In Mosaico, you can edit all headings, links, and content in the WYSIWYG editor. In MailChimp, it always opens up a separate window to edit, adding one extra click and a slight delay as well.
• In short, Mosaico is simple, containing everything you need and nothing you do not need.