The idea

École Polytechnique Fédérale de Lausanne (EPFL) first approached us to ask for implementing and testing a set of email HTML templates that they had designed and wished to use on their Mailchimp accounts. One of the components they designed contained a seemingly difficult element involving an image with an overlapping colored square containing a title and a block of text.

We've appreciated Cruncher's involvement, their efficiency and reactivity.

While this is trivially simple to achieve in modern HTML and CSS, it is dauntingly hard to implement consistently in "Email HTML", because most email clients (Outlook, Gmail, Thunderbird, ...) still use archaic HTML rendering engines, only implementing a subset of the modern web standards that we take for granted on recent browsers. "Email HTML" instead often still uses the table-based layouts that we used to develop in browsers 25 years ago!

The solution to the "image with overlapping text box" problem involved developing an "image slicer": a small web app that would let the user upload an image, and which would then cut the image into three slices (one for the section of the image before the square, one for the section next to the square, and one for the bit below.)

The three slices would then be rendered reassembled in a table layout with the square: problem solved.

The next step

So now the users would have to instantiate the component on Mailchimp, visit the image-slicer web app we've developed, upload their image, download the three slices, upload them to Mailchimp, ... this all worked fine but was a bit awkward and not super user-friendly.

After some brainstorming with the client, we came up with the idea: why not go a step further and write a tool that would let their users create whole campaigns in an integrated environment, assembling newsletters by drag-and-dropping the developed content components?

The output would be a ready-to-send "HTML email" newsletter, mixing and matching the tested and validated components with user-produced content (rich text, images, events, layouts...)

Luckily, we have a very versatile tool to do just that: DjangoCMS.

Here is what it looks like.

Dozens of custom components can be selected from a list and added to the newsletter, rearranged by drag-and-drop, copy-pasted, and so on...

The central section of the editor always displays a side-by-side desktop and mobile live preview of the final newsletter.

To test the newsletter on their own email client, the editor can quickly email themselves a copy, or they can download the rendered email in different formats.

Lists, segments and forms

Users can create and manage subscribers lists. New subscribers can be easily added via a form, but most importantly they can be imported by uploading CSV or Excel documents.

The contents of the columns in the uploaded documents are automatically detected, transformed into separate fields (e.g. "First name", "Last name", "language") and linked to the subscriber.

Based on these fields, users can then create dynamic segments within their lists, based on e.g. the language of the subscriber, to better target their audience.

Complex filters such as "Language is Japanese OR French AND email address contains '@epfl.ch'" can be created and chained in a few clicks.

Users can also create subscription forms, select which fields (out of those defined above) should be displayed in the form, and then easily embed these forms into their own website.

When visitors fill out the and submit the form, they will be directly subscribed to the corresponding list and will receive the next newsletter.

Campaigns

Once a newsletter is ready to send, the user can simply select a subscriber list or a segment they wish to send it to.

They can also chose to send their campaign immediately, or program to send their campaign any time in the future.

Once everything is defined, the user can preview the campaign one more time and see exactly how it will look for each of the targeted subscribers.

After the campaign has started sending, the user will get detailed statistics on how many subscribers it was sent to, how many of them actually received and opened the newsletter, how many of them unsubscribed and so on. They can download detailed Excel reports for each figure.

Privacy-aware

The whole system is hosted on-premise in EPFL's own data centers, in Lausanne, Switzerland.

If you're looking for serious professionals to develop digital tools, don't hesitate. Contact Cruncher!

This has the huge advantage of not having to expose subscribers' personal contact information to third party services, operating in "less privacy-aware jurisdictions".