Responsive email builder

Try it now

The challenge was to build a simple tool for Arizona PBS staffers to use to make truly responsive email content. While the third-party system they used had a WYSIWYG editor, it fell short on modern smartphone email apps and didn’t easily support inserting ad units hosted on another third-party ad server.

Leaving the header and footer of the email hard-coded into the third-party system, I built them a simple app to create and save templates for regular emails, updating the content with each send.

The end product is fully responsive code – including MSO tags for Outlook – which users could paste into the email system and send.

Give it a try.

When you load the tool, no template will be selected. Select the one called “EditMe,” or select the default and click “Copy template” to make your own.

You’ll see a form for each “row” in the single-column email, and options to move rows around and insert images. With each change, the preview to the right updates.

The preview pane is (optionally) draggable so you can position it to better see your updates.

Here’s one of the Arizona PBS emails built with this simple system:

Tools used:

  • PHP
  • JavaScript/jQuery
  • Bootstrap
  • Email on Acid for testing
  • MSO markup for Outlook compatibility
  • AJAX
  • JSON