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.


Code a responsive email template



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.


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.


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.


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


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?


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.


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.


Tell me an anagram of "The Email Factory"


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

Email Design

Can AI design a marketing email?

AI is a big deal at the moment. And by “the moment”, that likely means from this point onwards in human existence.

We’ve previously talked about AI’s skills as a copywriter and its influence on email marketing in general. Now it’s time to look at another major branch of AI content generation: imagery.

The journey begins

Midjourney is one of the most advanced and best-known AI image generators in the market. If you’re not familiar, let me explain – it’s a form of digital magic that needs to be seen to be believed.

Picture something in your head. Anything. Now type it into Midjourney’s prompt bar. Within seconds, it will generate four images based on your input. How about:

a Jaguar E-Type parked next to the Eiffel Tower in the rain

Four AI-generated images of a Jaguar E-Type in front of the Eiffel Tower

Incredible, right? Pictured unmistakably are the vehicle, landmark and weather conditions of my choice. But after the initial wow factor has worn off, it doesn’t take much scrutiny to spot the flaws. In one picture the Jag is making a nuisance of itself in the face of oncoming traffic. In another there’s not one Eiffel Tower, but two. This is a landmark that surely doesn’t need any more replicas!

As a user, there are several options at this point. We can spin again and get four brand new images based on our original prompt. Or we can ask Midjourney to create variations of what it’s already generated. Maybe we’d like to do some manual editing in Photoshop, feed the image back to Midjourney and ask it to work from that. Perhaps we’d prefer to rewrite our prompt and be a little more specific.

But let’s move on. We could play with whimsical pictures of this and that all day, but we’re here to examine Midjourney’s potential visual contribution to email marketing.

An a-eye for design

We’re going to test this from two distinct angles:

  • Overall email layout
  • Individual images

I should preface this by saying that Midjourney clearly isn’t intended for the design of websites or emails. It’s a tool with an artistic bent (and one that gives it a distinct character from its rivals). Nonetheless, let’s see what it can do as a source of design inspiration.

We’ll work with purpose. Our goal is to design an email for a make-believe travel company. Its brand colours are a sunny blue and a beachy tan. Those can sit on a traditional white background, with body copy rendered in an eye-pleasingly contrasting dark grey. AI can’t read our minds (yet), so my request is quite specific:

Marketing email for a travel company. Beach imagery. White background. Dark grey text. Use of colours #6084f7 and #c1aa60

And here’s what it came up with:

Four email layouts created by AI

TO TE MAIAY THI – do you know what language that is? It’s mangled English. And that’s an indicator as to how AI image generators work. The output is a visual echo, based on countless source images that have been fed in. That’s why it’s not uncommon to see distorted intepretations of brand watermarks or artist signatures. As with all AI products, we’re seeing the results of complex algorithms rather than any real intelligence.

But can we make use of these mock-up emails? Of the four images above, option 1 is the most useful. It may have largely disregarded my colour choices, but in terms of layout and volume of content it’s the most plausible as an email. Now we’ll conjure up some imagery to bring it to life.

It’s a kind of image-ic

The big beach image from our layout mock-up is pretty nice:

AI-generated image of a beach

That picture is of too low resolution to use in its current form but thankfully Midjourney is a flexible tool. I’m going to feed the image back to the platform, along with some instructions:

[beach.jpg] panoramic illustration of a yacht next to a tropical beach with palm trees and rocks --ar 11:4

That ‘ar’ tag at the end is a way to define the aspect ratio of our images. We don’t want the default square shape in this case, so I’ve picked dimensions that suit a long strip-like image.

Here’s the result:

Four AI-generated images of beaches

I like option 4. So let’s upscale it to a useable resolution, and I’ll modify the colours a little in Photoshop to make it more on-brand.

Final, modified version of an AI-generated beach image

We have a layout. We have a main image. Now we can move onto the final step.

Assembly required

Let’s put the AI-generated components into an actual email. If this was a real commercial mailing, we’d have generated many more trial layouts and images, and made a lot more edits along the way. Working with AI tools feels a bit like the infinite monkey theorem. Spin and spin again until we finally get the result we had in mind.

But what we have here is good enough for experimental purposes. Here’s the final product:

Is it a revolutionary design? No. Could the main image be better? Yes. The point isn’t perfection but progress.

Some final thoughts on AI email design

AI content-creation tools are becoming more sophisticated and widespread. It’s not far-fetched to see image generators becoming an everyday tool that lets marketers conjure up fresh, on-brand graphics in seconds.

In answer to the opening question – can AI design a marketing email – my verdict is sort of. It can certainly help. But at the current rate of progress, who knows what it’ll be capable of a year from now.