Artificial intelligence

Is ChatGPT your next email developer?

There are two ways to build a marketing email:

  • Hand-coding
  • WYSIWYG editors

We swear by the former, not only for quality but also for speed. But what if there’s an even better, quicker way?

Enter ChatGPT. Much hype has surrounded the AI platform’s ability to code. It can conjure up HTML and CSS in seconds. So too can it generate Javascript functions or back-end PHP or even truly hardcore programming such as C++. Whether or not it does it correctly is a different matter.

Let’s not worry about that just now. We’re here to put AI email development to the test, so let’s find out if ChatGPT can put together a responsive mailing.

The quirky world of email development

If you work in email marketing in any capacity, you likely already know that it requires some unusual coding techniques. There are lots of devices and email services out there, and they have widely different ideas about how HTML and CSS should be interpeted. In order to construct a mailing that looks presentable on all of them, the developer needs to be aware of these limitations and inconsistencies and the arsenal of tricks to work around them.

Has this niche set of knowledge made its way to ChatGPT? We’ll start with a bare bones request.

Prompt:

Code a responsive email template

Result:

Unusable!

ChatGPT has produced a very basic HTML document with some styling, but I wouldn’t call it an email template. It doesn’t include any means of stacking content on mobile, and the structure is based on HTML div elements rather than tables. While divs are the building blocks of a web page, tables remain the most reliable method for email.

On the plus side, it has picked an inbox-friendly width of 600 pixels. And it’s nice to see that accessibility has been implemented via an image description and a proper heading tag.

My request was extremely minimalistic. I need to do my part here too, and that means being more specific about what is needed.

A little lot more instruction

Take two. We don’t want divs, so let’s tell ChatGPT to use tables. There are some basic universal requirements in responsive email, so we’ll nudge it in the right direction regarding those.

Prompt:

Code a responsive email template, using HTML tables for structure. Set the width to 600 pixels on desktop, with a fluid width on mobile. Include CSS classes to enable stacking of content on mobile devices. Include all known email client fixes that are still relevant. Set the page background to a light grey colour, and the email content area to white.

Result:

Better… but still broken beyond repair.

This time it has used tables for structure, so that’s a major improvement. It has also set a breakpoint. That’s the backbone of responsive email code and the point at which mobile-specific styling is triggered. There’s some kind of attempt at stacking code, but I can see at a glance that it isn’t going to work. We’re also missing the usual pile of fixes that make an HTML email possible.

A rethink is needed.

A different approach

Here’s what we’re going to do: hand code a simple email, and then provide ChatGPT with detailed directions in order to recreate it. This is a reverse way to approach our project, but perhaps if ChatGPT has a more defined goal it will be able to produce a usable template.

Our email will have a main image, intro paragraph and a button. Under those will be a couple of secondary features laid out side-by-side on desktop, and stacking on mobile. For the sake of this test, let’s forget about any header and footer.

Image of our intended email layout

Now for our prompt. It’s going to be a long one. Let’s give ChatGPT a fighting chance and focus primarily on structure rather than styling.

Prompt:


Code a responsive email template, with the following requirements:
• 600 pixels wide on desktop
• Fluid width on mobile
• A page background colour of #f1f1f1
• Email content area background colour #ffffff
• A hero section with an image, heading, paragraph of text, and a button
• The hero image should be 600 pixels wide, to match the email content area
• Button should be pill-shaped, with a background colour of #a56e53 and white text
• Under the hero section should be two secondary features
• Each of these must also have an image, heading, paragraph and button
• Secondary feature images will be 290px wide on desktop, to match their containing column, and expanding to full width on mobile
• Hero text and button should be a bit larger than those of the secondary features
• These secondary features should take the form of adjacent columns on desktop, each at 290 pixels wide
• Place a 20 pixel gap between them
• The secondary features must stack into a single column on mobile
• All parts of the email should have 20 pixels of padding on each side on mobile, except for the hero image which can be full width and touching the edges of the viewport
• All body text should follow this font stack: HelveticaNeue-Light, Helvetica, Arial, sans-serif
• All body text should be colour #61524b
• All heading text should be colour #a56e53
• Use lorem ipsum placeholders for text
• Enter all hrefs as # placeholders
• Apply links only to buttons. Do not apply links to images
• Include all known, currently-relevant email client fixes
• Include CSS or HTML comments around each section to explain what it is or does
• Set a mobile breakpoint based on a max width of 639 pixels
• To ensure compatibility with Outlook and other email clients, use HTML tables for structure

Result:

Nice try… sort of.

In order to test this properly, I’ve saved a local copy and manually added my image references. Here’s how it looks in a browser:

Image of ChatGPT's email as seen in a web browser

At first glance, that isn’t too bad. The general layout, colouring and sizing are all correct. So too are the button shapes, and the secondary features switch to a single column on mobile as requested.

But there’s some strange overlapping going on. Our images are offset to the right, and sit partially over the grey background. This in turn causes some unwanted horizontal scrolling on mobile.

Behind the scenes, the true extent of the errors comes to light. It has reverted to a div-based structure, and uses some CSS code that won’t work universally in email.

Nonetheless, for the sake of completeness I’d like to test this as an actual email. It works, more or less, on iPhones and the Gmail app. Webmail is a mixed bag. Outlook however is where it all falls apart:

ChatGPT's email as seen in Outlook 2019

Outlook is the primary reason that email development requires such unorthodox coding methods. A lot of code that works just fine on a website, simply isn’t recognised by Outlook. Here we can see that the adjacent columns have failed and the pill-shaped buttons are reduced to tiny rectangles. To fix that would entail a complete recode.

No need to re-invent the wheel

So far, ChatGPT has failed to code a responsive email from scratch. To add some faux drama, let’s say our make-believe client is becoming impatient waiting for our make-believe email.

It’s time for a last ditch effort. At The Email Factory we already have a tried & tested template. We don’t need a new one. How about we give our base template to ChatGPT and then ask it to complete some content within that framework?

Result:

Now we’re getting somewhere.

But that doesn’t mean success. This time the template works reasonably well in a browser and even in Outlook, although the dodgy buttons are still present. The secondary features however don’t expand to full width on mobile:

ChatGPT's email using our template, as seen on an iPhone

That can however be easily fixed manually. In fact, it may be feasible to fix everything in this code rather than to start again. But I don’t want to do it myself, as that defeats the purpose of this experiment. Instead I’ll tell ChatGPT what needs to be corrected.

A few pointers

Final try. I’ve fed back some information to ChatGPT for it to make the necessary changes.

Result:

A huge step backwards.

Well, that was a big let-down. Instead of applying some finishing touches to the template, the layout has exploded. It no longer stacks on mobile. The code is now full of Microsoft conditional statements – a technique that should only be used sparingly and under specific circumstances. And the buttons? Still ugly in Outlook:

ChatGPT's corrected email as seen in Outlook 2019

Maybe with painstakingly detailed prompting and a lot of patience we could finally achieve a working email. But we’re already far beyond the point of convenience.

The current state of play

In my experience so far, ChatGPT has only done one thing consistently: fail. And I don’t only mean within the limited scope of this one project. I’ve had similar results when trying to generate marketing copy or website code. The output is usually along the right lines but ultimately too broken to actually use.

It’s clear that I set my expectations too high. The tales of ChatGPT’s near-miraculous capabilities were captivating, so perhaps the reality was always going to be disappointing. If there’s a perfect way to illustrate ChatGPT’s close-and-yet-so-far nature, it’s to ask it for an anagram.

Prompt:

Tell me an anagram of "The Email Factory"

Result:

The Fairy Comet Elf

I’ll save you the bother of checking that – it’s wrong. Trying to recreate that manually, letter by letter, results in this:

The Email Fctory e f

Re-evaluating our AI email development experiment

This project is arguably unfair from the outset. ChatGPT is a language model. Just because it can output code doesn’t mean it is a coder, or even knows what programming is.

Even so, it’s widely known that ChatGPT can generate code. So, despite all the mistakes and unusable templates, the fact that it can make a somewhat reasonable attempt is impressive.

Where do we go from here?

ChatGPT and AI in general are progressing at an incredible pace. It wouldn’t surprise me if everything I’ve written about AI email development above is laughably antiquated one year from now.

Perhaps when that time comes, I’ll prompt it to:

Write an article about how you surpass human email developers

Artificial intelligence

Up your marketing game with generative AI!

Artificial Intelligence (AI) has long been a topic of discussion, with most debates focussing on its potential to surpass human capabilities. However, it is crucial to shift the focus from comparing AI to human excellence towards understanding how AI can enhance individual skills and abilities. So I was pleased to read a recent interview with Neil Tennant of the Pet Shop Boys. He highlighted the value of AI as a tool to assist and improve creative processes – even for him!

Neil Tennant’s viewpoint aligns with the idea that AI can be a valuable resource even for established musicians and artists. He cites the example of a song, "Forest Floor," which the Pet Shop Boys never finished. Tennant suggests that if AI had been available at the time, he would have used it to generate multiple versions of the chorus, potentially uncovering an unexpected gem. This demonstrates how generative AI can act as a creative catalyst and assist artists/experts in overcoming writer’s block or exploring new avenues.

The real question: does AI make me better?

Often, discussions surrounding AI revolve around its ability to outperform humans in specific fields. However, the true value of AI lies in its capacity to amplify individual potential. When we reframe the question to focus on what AI can do for us, the possibilities become apparent. This mindset shift opens up new opportunities for marketers, designers, and generalists who may lack specialized expertise in certain areas. By leveraging AI, individuals and organizations can level up their skills and accomplish tasks that were once time‑consuming or costly to outsource.

AI as a levelling-up opportunity

The potential of AI to level up individuals in various fields is evident, especially for jobs requiring multiple skills – marketing being a prime example. If you are a marketer who also has responsibility for email, or an email marketer who lacks specialized expertise in an aspect of the role or have limited resources at your disposal, leveraging generative AI to enhance their skills, produce quality content, and maximize their productivity.

AI in copywriting

Copywriting plays a vital role in marketing, and AI‑powered generative models have proven to be valuable aids in this domain. While there are skilled copywriters who excel without AI, many marketers can benefit from using AI to generate and refine copy. By providing a straightforward brief to AI language models like ChatGPT, marketers can swiftly create subject lines, short‑form copy, bullet points, and newsletters, all while maintaining control over the desired tone. This collaborative approach allows individuals to become better email marketers and enhances their overall productivity.

SubjectLinePRO for instance, is a valuable tool I use that harnesses the power of ChatGPT to assist in writing and then testing compelling subject lines. Several other AI‑powered solutions are available in the market, offering similar benefits. These tools empower marketers with limited copywriting skills to craft engaging content more efficiently and effectively.

AI in image creation

The process of sourcing images for articles or marketing materials can be time‑consuming and expensive. AI‑powered image creation tools, such as Bing Image Creator, have revolutionized this aspect of content creation. Marketers can now generate their own images based on their envisioned concepts, saving time and eliminating the need to rely on external designers. Although having a skilled designer will still result in superior outcomes, AI empowers individuals – like me, who lack that luxury to produce higher‑quality visuals that effectively convey their ideas.

Three email-themed illustrations in different styles, generated by AI.
Images created by Dela Quist using Bing Image Creator

AI in email coding & deployment

While generative AI is a powerful ally, certain aspects of marketing particularly email, still require caution. Challenges related to email deliverability, rendering and accessibility across various email clients necessitate expertise or collaboration with coding specialists. Agencies like The Email Factory (who I recently joined as a NED) specialise in optimizing email design and build to ensure rendering consistency and compliance with industry standards. In terms of email deployment, segment creation etc. I am yet to see a tool that performs those functions.

By recognizing the areas where AI is yet to reach its full potential, marketers can make informed decisions about when to insist on expertise.

Conclusion

Generative AI’s role in the creative process is not to replace human expertise but to augment and empower individuals in their respective fields. By adopting a mindset that focuses on AI’s capacity to enhance personal abilities, rather than comparing it to the best human talents, we open ourselves up to a world of opportunities. Neil Tennant’s perspective, along with real‑life experiences, supports the argument that AI is a tool for levelling up and improving individual skills. Marketers in general, Email Marketers in particular, can benefit from AI‑powered solutions for copywriting and image creation, enabling them to excel in their roles without extensive specialization. Embracing AI as an enabler rather than a competitor will ultimately lead to personal growth and professional advancement in the evolving landscape of marketing.

This article and associated images were produced by me using #chatgpt ChatGPT and #Bing Image Creator.