Artificial intelligence

The magic of Photoshop’s generative fill

Someone famous once wrote: any sufficiently advanced technology is indistinguishable from magic. And while I’m fairly certain that Adobe Photoshop isn’t secretly powered by wizards, its generative fill function really makes me start to question that.

Before we look at the wonders of which it is capable, let’s imagine a graphical challenge that we might face in day‑to‑day work.

Grass production

Here’s a picture of a dog:

Stock photograph of a dog lying on grass

It came from Unsplash, but let’s say it actually came from a client. And it needs to fit a square‑shaped slot in a template, but they absolutely do not want to crop it. They need the full dog. Therefore we need to extend the grass at the sides.

Once upon a time, this would have meant using Photoshop’s clone stamp tool. That lets you manually ‘grab’ regions of an image, to paint in elsewhere. With some smoothing and layering – not to mention a considerable amount of patience – the results can be quite convincing. But who has time for that when deadlines are looming?

It’s not necessary in this example, but sometimes this process would entail the tricky masking of objects. Hair in particular could be a nightmare. You might even want to grab portions of other images, like a kind of pictorial Frankenstein’s monster.

For old time’s sake, let’s complete our challenge using only the clone stamp. Here’s my somewhat rushed effort:

Stock photograph of a dog lying on grass. Photoshop's clone brush has been used to manually extend the grassy background

There is obvious blurring. It’s almost like an impression of grass rather than actual grass. A patient Photoshopper could painstakingly labour over such a task until it looks natural, but that isn’t practical in the real world of business.

We need a faster option.

Had your (content-aware) fill

In the early 2010s, Adobe introduced content‑aware fill. I always found this an oddly unassuming (if accurate) name for such a powerful tool. After all, this is a piece of software that sports a magic wand. Anyway, I digress.

Content-aware fill is an ‘intelligent’ tool that can remove items or extend images in a mostly‑automated fashion. You just need to make the selection, and optionally adjust the sampling data area. Sometimes it may take a couple of sweeps or some manual finishing touches, but essentially content‑aware fill does the work of a clone stamp without human intervention. And in a literal fraction of the time.

Here’s what it did with our dog photo:

Stock photograph of a dog lying on grass. Photoshop's content-aware fill has been used to manually extend the grassy background

That’s not bad. Gone is the unsightly blurring from my clone stamp version. But in its place is some fairly noticeable duplication. There are clusters of identical patterns here and there.

I’m looking for defects of course. A customer browsing a website or glancing over a marketing email is going to focus on the cute dog rather than scrutinise every blade of grass.

Even so, wouldn’t it be nice if this was perfect?

The big one: generative fill

Now for something state‑of‑the‑art. Generative fill is a recent addition to Photoshop’s toolkit and is powered by AI. Let’s try it on our photo:

Stock photograph of a dog lying on grass. Photoshop's generative fill has been used to manually extend the grassy background

No blurring. No duplication. Blades of grass and leaves have been completed in a realistic manner. You’d be hard pressed to spot anything artificial in that expanded area.

But we’re only scratching the surface of what this tool can do. While it’s possible to make a selection and click the button and trust the tool to know what to do, you can also guide it with written prompts. Should that dog really be out there without a collar? Let’s fix that.

Step one is to use the lasso tool to very roughly draw a selection around the dog’s neck. Next, we can enter a simple prompt: dog’s collar, red.

Stock photograph of a dog lying on grass. Photoshop's generative fill has been used to manually extend the grassy background, and add a red collar on the dog

And what spaniel is complete without a ball to chase? We can provide that too:

Stock photograph of a dog lying on grass. Photoshop's generative fill has been used to manually extend the grassy background, add a red collar on the dog, and place a tennis ball next to the animal

Pushing it further

Ok, so we expanded a little bit of grass and dropped in a couple of simple objects. In this day and age of generative AI, you might say: big deal. Let’s demonstrate what this tool can really do.

Here’s another image from Unsplash:

Cropped stock photo of two businesswomen at a desk

It’s a stretch, but what if we just loved that particular depiction of corporate life and wanted to develop the image beyond that stylised crop? Well, all we need to do is bump up the height and hit the generative fill button once more:

Cropped stock photo of two businesswomen at a desk, expanded with Photoshop's generative fill to show their faces

Actual people, believably sewn on to the original image. By default, Photoshop returns three variations. They’re not always so perfect, but that’s ok – pick the one you like, or spin again. Make no mistake, this is an impressive piece of technology.

Starting from nothing

Generative fill is very closely tied to Photoshop’s generate image functionality. You don’t need a base image. You can start from scratch.

So, technically speaking, I didn’t actually have to go stock photo‑hunting in the first place. I could simply ask Photoshop for:

Photoshop's generative image panel, being prompted to create: 'Overhead photograph of a cute, tan-coloured spaniel lying on its back on the grass. The dog is wearing a red collar. A yellow tennis ball is lying on the grass nearby.'

I flicked through six variations and decided on this one:

Photoshop-generated image of a tan-coloured spaniel lying on its back on grass, next to a tennis ball

Curiously, fake turf was present in all six images. That’s an eerie preference for the artificial!

What’s next?

AI will only become further engrained in Photoshop, and software in general. Perhaps more and more tasks will be accomplished via a prompt interface rather than a traditional tool panel.

It may not be sorcery, but the distinction might not be that important when you can perform half a day’s work in seconds.

Artificial intelligence

What does AI mean for human creativity?

Great art is special. Despite the gratuitous overuse of superlatives on the internet, very few works can truly be described as awesome. A masterpiece is a rare thing, as it should be.

In order to produce a work that merits such a lofty accolade, the artist must possess a world‑class level of skill and talent. Nobody can compose a symphony for the ages or brush a Louvre‑worthy painting without first dedicating thousands of hours to mastering their craft. In short, it is hard work.

But what if it wasn’t?

The age of generative AI

When I first heard about Midjourney, I was intrigued. A platform in which you could type anything that pops into your imagination, and it will conjure up an image? It sounded too good to be true.

And in a way it was. After the initial novelty wore off, the glitch‑riddled results became tiresome. With the site’s communal nature, it quickly became apparent that the vast majority of requested images were inane dross. Keanu Reeves eating a bowl of baked beans? Hold my sides!

Things have moved on since then. Midjourney is much improved. In addition to drawing pictures, there are generative AI applications that can answer questions, offer advice, assess your writing, tell stories, generate code, create a logo, compose music, and produce full‑motion video. The creative results are usually blatantly unconvincing and have a telltale artificiality, at least without some post‑processing. Nonetheless, we’re talking about a technology in its early stages and one that is developing rapidly.

AI-generated illustration of a robot painting a picture

Technology’s role in art

Generative AI is far from the first catalyst for a technology‑versus‑talent debate. The camera was considered a threat to painters. Why go to all the messy palaver of a canvas and paints when you can simply press a button and capture a scene in an instant? Electronic music was – and sometimes still is – criticised as a rigid and soulless form of aural creativity.

But for every detractor, there is an advocate. There’s a convincing case to be made for the use of the tool being what matters, rather than the existence of the tool itself. Few would deny that Ansel Adams is a masterful photographer, or that Vangelis is a talented musician who had the vision to explore modern technology.

There’s another important point: despite initial fears, these new technologies did not replace their more traditional cousins. It seems silly now to imagine that synthesisers might have made acoustic instruments obsolete. There’s plenty of room in the creative world for painting and photography, both analogue and digital.

Art versus design

Art is subjective, and not only in terms of personal tastes. The very nature of art is a matter for eternal debate. Arguably the most important single value of art is expression. Expression of thoughts, and ideas, and emotions. These are innately human qualities that a computer cannot replicate. Not yet at least.

Design, on the other hand, represents a more functional dimension of creativity. There’s usually a defined objective, in contrast to the nebulous experience of art. While there is often an overlap between the disciplines, design is more clinical, and art is more interpretive.

Tearing down barriers

The challenge with any creative endeavour is taking the vision in your head and making it a reality. Skill therefore is a barrier. By virtue of being difficult to produce, a work of creativity is worthy of our attention.

But not everyone has the time, natural aptitude or even physical ability to become a great painter or musician or moviemaker. I doubt many people would consciously want to block someone’s desire to create. Therefore a more accessible point of entry is surely a good thing. Generative AI offers a means of creation from pure imagination, without a long and arduous path of learning.

Imperfectly perfect

Many years ago, I had an impromptu conversation with a stranger in a bar about AI‑generated movies. It was largely what if. At that point in time, I didn’t really expect to see such a thing become a reality in my lifetime.

One of the talking points was the concept of tailoring an existing film to personal preferences. I’m sure we’ve all watched films that were so close to greatness, were it not for a few niggling flaws. Well, what if a computer could refine it? Out with the immersion‑breakingly overblown finale, in with the ending of your dreams. It’s perfect now, right?

But is computer‑generated perfection really a desirable goal in art? Flaws are part of the human condition. Art is a thing to be discussed, warts and all. If everything is ‘perfect’, nothing is special.

A creative tipping point

We’ve established that technology in itself doesn’t negate artistry. A paintbrush or a violin is a piece of technology. Even the scratching of a mammoth into a cave wall requires a tool. So, unless we consider anything beyond melodic human wailing to be cheating, technology is a part of art.

Generative AI can often serve as a creative aid. Output can be influenced, refined and repurposed. That demands human creativity. And if there’s a human at the helm, then the finished work will still carry some kind of meaning. Something is being expressed.

But what happens when the tool becomes so sophisticated that the need for human input is thoroughly diluted? Right now we can tell a computer what we want it to generate. Maybe next we will only need to think it. Perhaps the technology will advance to the point that we can skip even that mental exertion, and instead wait to be served creations that the computer already knows to be to our liking. At some point, the balance swings towards computer-generated rather than computer-aided. Perhaps we are already past that point.

The WALL‑E warning

From Metropolis to The Terminator to Black Mirror, our storytelling has often incorporated themes about the dangers of technology. But the one that stands out to me as the most prescient is Pixar’s WALL‑E. For those that haven’t seen it, it depicts a future in which humans live a coddled but empty life. Machines cater for mankind’s every need, creating an existence of pure consumption while human connection and knowledge are lost.

Back to the real world. Current AI technology is primitive compared to the examples we’ve seen in fiction. Artificial general intelligence (AGI) has yet to be achieved, and perhaps never will. Nonetheless, it’s not unfeasible to imagine AI advancing to the point where our technological dependence becomes a serious concern. Creativity is just one aspect of our lives that is already influenced by AI. And while it’s correct to say that it is human ingenuity that brought us to this point in the first place, that is too indirect a factor when considering the potential long term effects.

The best of both worlds

AI isn’t going away. Humans by nature push forward and strive for more. Onwards and upwards!

But it’s always nice to ‘get away from it’. Modern life takes place in the digital world to an unhealthy degree. Maybe it’s time to turn off the computer, dust off the old drawing pencils set, and create something a little more pure.

Email Marketing

10 typographical effects to prettify your emails


10 typographical effects to prettify your emails

Text needn’t be plain. Modern CSS can apply all manner of visual effects to text. That makes it possible to create some eye‑catching typography without resorting to using images.

Well, all of that is true in web design. Email on the other hand has inconsistent support for CSS from one application to another. But don’t worry – that’s nothing a bit of graceful degradation can’t handle.

1. Letter spacing

CSS property: letter-spacing

Kerning is typographical lingo for the gap between letters. Increasing the kerning is a neat way to bump up the visual impact of a text banner or heading.

Before:

After:

And the good news? It works everywhere.

2. Drop shadow

CSS property: text-shadow

A drop shadow can add a subtle illusion of depth. Unlike letter spacing, this CSS property isn’t so widely supported in email. But it works in Apple Mail on iPhones and Macs, and that alone makes it worthwhile. With no particular fallback considerations, text shadow is a perfectly viable design option.

3. Outline

CSS property: text-stroke / -webkit-text-stroke

An outline can accentuate a heading or call‑to‑action. Just like drop shadows, support is not universal. So consider it a progressive enhancement and don’t rely on it for contrast!

4. Pseudo 3D

CSS property: text-shadow (again, but fancier)

Masterful coders can wield CSS like a paintbrush. Code‑based reproduction of the Mona Lisa, anyone? To create something like this, you only need bucketloads of artistic talent, abstract thinking, coding prowess and mathematical aptitude!.

These works, incredible as they are, are the endeavors of hobbyists. But the point is that CSS can do a lot more than basic styling. You can combine effects with limitless potential for creativity.

For example: you can apply as many text shadows as you like. How about layering a few to create a 3D text effect?

5. Gradient fill

CSS properties: linear-gradient / background-clip / -webkit-background-clip

Colour gradients, a once‑beloved staple of web design, can be easily applied to a background in CSS. But with just one extra property, they can also be applied directly to text. Nice.

Beware if using this technique – some email clients will recognise the gradient, but not the clipping mask – thus leaving you with a coloured block and no text. These are essentially experimental techniques in email, so some degree of fallback content may be necessary.

6. Texture fill

CSS properties: background-image / background-clip / -webkit-background-clip

Gradients aren’t the only thing that can be applied as a text background. You can use an image. I guess you could call it a texture.

7. Web fonts

HTML element and CSS properties: <link> / font-family / @font-face

So far we’ve only looked at effects to be applied to existing text. But we’re missing a trick. A major part of typography is of course the choice of fonts.

Once upon a time, web designers were limited to a small pool of web‑safe fonts. Arial, Times New Roman and the like. The advent of web fonts meant that developers could remotely load any font under the sun onto the user’s computer… thus opening up a new world of typographical creativity.

Do web fonts work in email? The answer – as is so often the case with this medium – is sort of. Compatibility is all over the place. This article isn’t a how‑to on web fonts, so let’s note only the most important points regarding support. They work fully in Apple Mail, in an extremely limited form in Gmail, and not at all in Outlook.

Here’s a comparison of web fonts and their more prosaic fallbacks. When they work, they undoubtedly enhance an email. They also make it possible to produce designs that are more on‑brand. But the downside is that the fancier the web font, the bigger the fall! Perhaps one day all major email services will cater for them.

8. Rotation

CSS property: transform: rotate(#deg);

Text doesn’t always have to lie horizontally. A little bit of rotation can make a big visual impact.

9. Text scaling

CSS property: font-size: #vw

Huge text‑based headings can sometimes present a challenge on mobile. Multiple breakpoint‑triggered classes to resize the font can work, but it’s pretty clunky and requires some trial and error. If only there was a way to scale the text smoothly, as if in an image.

Well, there is. One of CSS’s many units of size is viewport width, or vw for short. That lets text scale relative to the screen size. It’s surprisingly well‑supported among mobile email clients.

Here’s an example, placed on a background image because, well, why not?

10. Animation

CSS properties: animation / @keyframes

CSS comes equipped with a couple of options for movement: transitions and keyframe animations. In the right hands, the latter can produce some richly complex animation. The results are far smoother than an animated GIF, and they’re not limited to that format’s paltry 256‑colour palette.

Here’s a very simple example with some skewed text. To see what can really be achieved, I recommend checking out the myriad examples on CodePen.

Note: this is a GIF-based recording of a CSS animation!

Is this really worth doing in email?

Maybe, maybe not. I’ve written in the past about the value of simple design for this somewhat fragile medium. But I’ve also written about all manner of experimental interactive content. Clearly those concepts are at odds.

But I believe there’s a time and place for both ends of the spectrum. There are accessibility and compatibility considerations for sure. Often an image with an alt tag will be the better choice than CSS text effects. But if you’re feeling adventurous and fancy producing an email that looks spectacular on the strongest email clients… then I reckon it’s an adventure worth having.

Email best practice

Have a think about that link

Links are a cornerstone of the web. After all, the HT in HTML stands for HyperText. And HyperText is a fancy way of saying text with links.

Marketing emails are of course also based on HTML. And marketing emails also largely revolve around links. They’re a fundamental aspect of the medium. Better get them right, then!

Think like a customer

You built your email. So you know where everything is and what everything does. Your customer, on the other hand, is viewing your mailing without this inside knowledge.

Before linking anything that isn’t a call‑to‑action, ask yourself: is the destination obvious? It makes sense to link a product image or your brand logo, as their role is self-explanatory. But links applied to section headings or paragraphs of text or decorative images don’t necessarily have a clear purpose. If in doubt, leave it out.

Stay focused

An email should have a purpose. That purpose should be apparent at a glance. If an email is instead saturated with links, that purpose becomes diluted. Multiple secondary links result in a confusing user experience and muddied mailing reports.

There’s a balance to be struck between options and aimlessness. While an email may be made up of multiple stories and products, each of those items should link to a single place. Focused, fast, and fit for the medium.

Button up

Large, button-styled links are an email design stable… and with good reason. They’re easy to see and easy to press.

A button’s link should always go to the same place as any other part of the feature. And yet it’s surprisingly common to see emails in which the button leads to a different destination than the associated image or heading. Why?

If a secondary link is essential, an outlined ‘ghost button’ is an excellent design choice. A marketing email is rarely a thing to be perused. In this fast-paced environment, effective visual cues can make all the difference.

Example of a primary button alongside a ghost button.

Now that your buttons are in place, you just need some text to put on them. About that…

Say the right thing

Calls-to-action are often dull and repetitive. Find out more, buy now, or the dreaded click here. Yawn.

While a user is likely skimming over product descriptions or other paragraphs of text, a call‑to‑action is short and prominent enough to be seen in its entirety. The more specific the phrasing, the better. Shop gift cards is instantly more descriptive – and noticeable – than the generic shop now.

There’s also an opportunity to be creative, where appropriate. Really Good Emails are masters at this. Every email has a unique call-to-action that oozes with brand character while being relevant to the topic, such as uncage the beige or give a ship. Cheeky!

Screenshot of a Really Good Emails mailing.

Accessibility is a guiding light

Good design and accessibility are intertwined. By following the tenets of accessibility, you are automatically on-course to producing a good email.

The implementation of links is a factor in that. Much of it comes down to common sense. Does it make sense to apply a link to this thing? Is it clear what will happen when I press it? Are there too many links to the same place? Or are there confusingly many links applied to parts of a single feature? Are clickable elements sufficiently spaced apart?

Better links, better emails

The humble link seems like something that is difficult to get wrong. But in reality it deserves as much consideration as any other aspect of email design. Plan it out, and link it through.

Email Marketing

Email: the big picture

Email is a wonderful marketing medium. Its ROI is legendary. One might go so far as to say that it’s the best marketing channel. They might even be right – but there’s a better way to look at it.

A component of a larger machine

What’s the best meal in a restaurant you’ve ever had? Compliments to the chef! Of course, the (head) chef isn’t alone in the kitchen. There’s a sous chef. And a saucier. In fact, there’s a whole team’s worth of culinary talent.

We can keep zooming out. The waiter who delivered exceptional service, the interior designer who cultivated the perfect ambience, the couriers who delivered fresh ingredients, and the farmers who produced them. Remove any part of the equation and it all falls apart.

Email marketing is also a part of a bigger picture. The most effective marketing campaigns are those in which multiple channels actively work together. But even when this hasn’t been consciously planned, it’s still happening to some degree. An email engager wasn’t always a subscriber. They arrived via your website or social media or by some other non-email means. That raises a question.

Who gets credit?

Attribution in marketing can be seen through tunnel-vision. It’s a little too easy to give exclusive credit to the most recent link in the chain. The truth of attribution is that it’s often more fuzzy than focused.

Even when a clear click-to-conversion can be tracked from a particular email, who’s to say that a series of emails hasn’t influenced that decision? Maybe there wasn’t even anything particularly tempting about that latest email, but it happened to serve as a convenient conduit to your website.

We haven’t even left the scope of email and this is already becoming blurry. There are broader factors to consider, such as your social media activity, or web content, or external influences like third party reviews or good old-fashioned word-of-mouth. A complex series of events leads up to every conversion. The marketing report may assign success to Wednesday’s email, but it’s worth taking a step back and considering the full story.

Clicks aren’t everything

It goes without saying that clicks are one of the key indicators of an email’s performance. After all, the goal of a marketing email is usually to drive traffic to a landing page. A click therefore seems like the email’s final goal, before Team Website takes the baton.

By that theory, all clicks could be considered equal in value. Except they aren’t. An enthusiastic clicker might be disappointed by the content they’re met with online. Is that a weak landing page’s fault, or a misleading email? Most likely some hard-to-measure ratio of the two.

Are conversions therefore the best way to measure an email’s success? Maybe, but not the only one. A non-clicking opener has potential latent value, as does a non-purchasing clicker. As humans we often think in absolutes, but reality is rarely so black and white. Sales may be the most direct way to gauge an email’s performance, but its real contribution to your brand runs deeper.

The depth of design

Design is another aspect of email that is easy to oversimplify. An email’s design isn’t just its layout and colours. It’s the whole shebang. Copy, imagery, links – they’re all intertwined.

Even the subject line isn’t as isolated or single-purpose as it may appear. Its influence extends beyond the initial open, and perhaps beyond the scope of that one email. Words are a big part of your brand’s personality.

Design considerations like responsive layouts and dark mode and accessibility should not be treated as standalone concepts. It’s far better to make an accessible design… than to make a design accessible.

Back to reality

It’s easy to preach. In the real world and the hubbub of business, there isn’t always the luxury of stopping to think about the big picture. It might even come across as an excuse. Hey, this email had a terrible click rate… but at least it raised awareness!

Nonetheless, it’s worth pausing from time to time to consider how everything fits together. There’s a causal chain. Nothing is random. No two things are truly distinct. These concepts aren’t only relevant to email or marketing or business, but to every aspect of our existence.

Artificial intelligence

6 ways to spot AI-authored copy

Generative AI can do some amazing things. It’s a painter and musician and coder and, of course, author.

How good it is at performing those roles is a topic up for debate. AI artwork regularly drifts into accidental surrealism, with superflous human limbs and bizarre fusions of objects.

But what about AI-generated copy? While the glitches can be glaringly machine-like in a picture, they’re more subtle in a passage of text. Here’s how to spot them.

Repeat offence

My father was an avid reader and writer. He’d often take a keen interest in the essays that I wrote for school. One of his most useful pieces of advice was to avoid repeating myself.

He was right. Repetition weakens writing. A lack of variety in phrasing can make an article dull. Redundancy labours a point through duplication. Human authors do their best to avoid these.

A computer on the other hand will be unlikely to police itself to nearly the same level. Snippets on a topic will be pulled from here and there and this and that to build an article. There’s a strong probability that key points will be repeated over and over and over*.

*Sorry, blatant repetition, I know.

Yesterday’s news

Generative AI platforms are trained on huge sets of data. Unless the platform in question has live access to the internet, its knowledge base only extends as far as the last update. The platform would not be privy to latest developments on any given topic.

Old news is unengaging at best and misleading at worst. Humans and search engines alike favour high quality, original content. Out-of-date doesn’t necessarily mean no longer correct. It can simply be information that has become so commonly known that further publication is redundant. Customers prefer personalised email to non-personalised!? Hold the front page!

Get your facts right

If you’re using a generative AI tool to produce or aid articles, never take it for granted that the software knows what it’s talking about. Because, technically speaking, it does not know what it is talking about. It algorithmically reproduces and combines content from multiple sources – which can include information that is no longer true, or perhaps has never been.

As a reader, keep an eye out for factual errors and especially contradictions. If it smells fishy, trust your instincts and verify the information elsewhere.

What’s the story?

A good quality article written by a human has a story-like flow. There’s a beginning and a conclusion. Computer-generated articles on the other hand often hit an abrupt end.

And what’s a story without a message? A good story makes you think and feel something. A robotic author literally feels nothing, so why should you as a reader?

Don’t you dare

Language models by default are clinically impartial. A platform won’t automatically spit out a controversial opinion that makes you stop in your tracks. It’ll compile a collection of neutral statements of fact.

You can coax it out of its formal shell of course with prompting. The results are perfect – if you’re aiming for a plasticky have a nice day flavour.

A human’s opinion piece carries real emotion and real sentiment. Even an article that you fervently disagree with can be an excellent read. There’s a human-to-human spark that is missing with AI.

It just feels… off

You’ve probably heard about the uncanny valley. It’s a term often applied to computer-generated or animatronic simulations of human faces. Our brains are acutely conditioned to recognise faces with their every nuance and motion. It would take something very special to fool us.

AI-authored articles often fall into a linguistic uncanny valley. Attempts at personality are injected jarringly, equivalent to writing “LOL” in the middle of a legislative document. Instead of a human voice shining through the words, there’s a perceptible artificiality to those written by a computer.

Image of mannequin faces that demonstrate the uncanny valley effect.
This, but in words.

How much does it matter?

If we read something and enjoy or learn from it, does it matter if a computer wrote it? What if it was only computer-aided? Platforms like ChatGPT can be very useful as idea generators.

Is it ok if the text is a piece of marketing blurb rather than an opinion piece? How about a social media post, or a response to? Can there be any value to fiction or poetry conjured through ones and zeroes?

Ultimately it’s up to each of us as individuals to decide how we feel about AI, but it’s hard to deny that authentic human content is going to become rarer. With that in mind, it can’t hurt to be able to tell the difference.

Email Marketing

8 ways coding skills make you a better marketer

Marketing is a profession of contrasts where the creative blends with the analytical. Scope for imagination sits alongside the need for logic.

In today’s digital world, there are few careers that cannot benefit from some coding know-how. Marketing is no exception. A little bit of programming knowledge could be the secret code to becoming a better marketer.

1. Transform your mind

Learning to code isn’t just about what you can do. It’s about the way you think. There are direct benefits from learning a particular programming language, but it’s perhaps the indirect benefits that are most valuable.

Speaking from personal experience, my approach to problem-solving fundamentally changed after learning JavaScript. When a complex challenge arises, my reaction is no longer oh [expletive], how are we going to solve this. The logic-based thinking that comes with coding can be applied to all manner of situations. A calmer thought process means less stress and more refined solutions.

2. Embrace efficiency

Who couldn’t use a little more time in the day? Repetitive (but still essential) tasks can add up and chip away at the clock, stealing away time from bigger projects.

Taking a programming approach to such jobs can make all the difference. The solution doesn’t necessarily need to involve a single line of code – just a bit of logic. Instead of manually compiling reports, is there an Excel formula that can achieve the same thing in a fraction of the time? Maybe you could record an action in Photoshop to apply a branding effect in a single click. An ounce of automation is worth a pound of manual procedure.

3. Become the toolmaker

Tailoring or modifying an existing piece of software won’t always be enough to solve your problem. For unique challenges, you sometimes need a unique tool. With programming knowledge, you can be the one to create it.

A client of ours required tracking to be hardcoded on links in a very specific manner. The syntax varies depending on the URL. What descriptors have already been used? Is there an anchor tag? Are other parameters already applied?

Manually performing such a task multiple times per day and dozens per week is both time-consuming and vulnerable to human error. The smart solution is to build a custom tool to do the job. Efficient and reliable results, along with the satisfaction and mental exercise that coding brings.

4. Master your software

It’s true what they say – once you learn one programming language, it becomes much easier to learn another. Modern CRM platforms and ESPs often come equipped with proprietary scripting languages. Salesforce Marketing Cloud has AMPscript, Oracle Responsys has RPL, and so on. These kind of scripting languages invariably open up a deeper level of dynamic content than a drag & drop interface can offer.

The syntax of these languages differs from platform to platform, but the underlying logic is very similar. Everything boils down to if this, do that. By thinking in terms of procedures and variables, you unlock your software’s full functionality – and value.

5. Talk tech

As a marketer, you may or may not ever be personally required to carry out any coding work. But even if your role is less hands-on, I’m willing to bet that you need to communicate with developers regularly. Knowing what is technically possible and how it can be achieved is a major advantage. A new project is off to a great start when everyone is working from the same technical foundation.

6. Unify the channels

There are lots of specialities in marketing, including our favourite: email. Specialised however is not synonymous with isolated. A strong marketing strategy combines multiple channels.

Theory is one thing, but technical understanding completes the picture. An email developer can benefit greatly from knowing a programming language that lets them build web content or process data. A custom API can connect software systems and make sophisticated multi-channel strategies possible. Your programming knowledge can be the bridge between channels and applications.

7. Become a journey planner

Multi-channel marketing is a concept that goes hand-in-hand with customer journeys. Any decent CRM or ESP software will include a workflow-based editor that lets you funnel and personalise the path that each customer follows. These can become enormously complex, often combining drag & drop rules with internal and external scripting.

Learning programming act as a logical conditioning for the mind. Use that power to plan, analyse and fine-tune complex customer journeys.

8. Stay at the cutting edge

Digital marketing is a fast-moving field. It can be challenging to stay on top of the latest developments. But with a coding foundation, it becomes easier to keep up… and maybe even be a pioneer.

I’ve seen a number of technical landmarks in email marketing over the years. Responsive design, product recommendations, live images, interactivity, Gmail annotations, AMP for Email, AI-generated content – the list goes on. Adoption rates can often be slow. Teach yourself some technical skills on the side and you can be the one to keep your brand at the digital forefront.

Crack the code

One of the beautiful things about coding is that you absolutely do not need to know a language inside-out before you can start putting it to good use in the real world. In fact, real projects are an essential part of the learning process. With just a moderate understanding of a single programming language, you can improve yourself as a marketer and make a real difference in a relatively short space of time.

Your choice of language doesn’t even matter. Python, PHP, JavaScript, whatever you fancy. They all have practical applications and cognitive benefits. So jump in, learn some code, and power up your marketing.

Email Marketing

Beyond the subject line: your inbox marketing toolkit

Your email subject line has a tough job. With just a few words, it needs to:

  • Grab the reader’s attention
  • Tell them something useful

That’s a big ask, given that perhaps only around 40 characters will be visible on mobile. There’s only so much screen space before you hit the triple dots of truncation.

Example of a subject line truncated on mobile

But that’s okay, because your subject line isn’t alone out there.

Preview text

Message previews – or preheaders as they’re widely and perhaps erroneously called in the marketing world – pull some opening text content from your email into the inbox. That lets the user see some information up-front before deciding if an email is worth opening. The number of characters pulled into the preview varies depending on device and email client.

Brands commonly use the preview text as a secondary subject line of sorts. This is often combined with a trick to blank out any trailing content such as nav bar links, thus making it look neat and tidy in the inbox. It’s worth mentioning that Apple Mail recently disabled this trick as it essentially suppresses the message preview’s originally intended functionality.

In any case, the message preview is valuable pre-open content for you to work with. Use it in conjunction with your subject line to inform the reader rather than bait them.

Sender name

Well, that’s done already is it not? Sender is your brand name, and that’s that. Not necessarily!

There’s some flexibility in your sender name. Adding an individual’s name, where relevant and true, can add a personal touch. Person at YourBrand might just give your emails a more human touch than YourBrand alone.

The sender name can also be tailored to the nature of the email. A separate sender name for editorial emails like newsletters can help to distinguish them from purely marketing content. The Biz @ The Email Factory for instance!

BIMI

I killed some time on a flight recently by playing a logo quiz on my phone. Our ability to recognise and recall logos, or even portions thereof, is proof of their power. A brand’s logo is its face, and our brains are masterful at processing faces.

That brings us to BIMI: Brand Indicators for Message Identification. Appropriately for an acronym that sounds a bit like “be me”, this is a means of showing your brand logo in the inbox. The instant power of brand recognition could be the deciding factor between open and ignore.

Mock-up of a logo shown via BIMI

Annotations

Gmail has built-in functionality that allows marketers to show additional content in the promotions tab. These are known as email annotations. They come in two main flavours.

Deals let you show an offer – perhaps a discount – completely separate from your subject line. An optional offer code, start and end date round it off. After all, your customer cares about what your email has to offer them. Everything else is just wrapping.

Product carousels are perfect for retailers. A horizontally scrollable array of products, browsable and clickable without ever having to open the email.

It’s worth mentioning that senders must first contact Google for approval before these features become available. If you don’t ask, you don’t get!

Emojis

Love them or hate them, emojis are a part of internet life. Although they’re not a piece of inbox anatomy like the items above, emojis are so distinct from traditional alphanumeric copywriting that they deserve special mention.

There is some evidence to suggest that emojis in subject lines can increase email open rates. That statement would carry a lot more weight were it not for the presence of “some” and “can”. Ultimately, like most aspects of marketing, it depends. It depends on your brand, your choice of emoji, how often you use them, your creativity.

Used correctly – whatever that may mean for your brand – emojis can pair with creative copywriting in an engaging way. Just be sure not to use too many, or interrupt sentences. Accessibility matters.

A collective effort

It’s reassuring to see that the competition for inbox attention isn’t solely determined by the subject line. In fact, it may not even be the most important factor in determining opens. The life of a subject line isn’t such a lonely one after all.

Email Marketing

A quick guide to email pop-up culture

Excuse me! I’m an email subscription pop-up. I hope you don’t mind the interruption. You can tell me to go away, if you like… or you can pop in your address and look forward to some juicy content in your inbox. Does a 15% discount sweeten the deal?

Modern websites are full of things popping up. Cookie permission(ugh), app downloads, browser notifications. And of course email subscription pop-ups. Let’s take a closer look at the latter.

But aren’t pop-ups annoying?

Yes, they are. People hate pop-ups. I’m not using the H-word for dramatic effect. G2’s survey on the topic found that over 80% of respondents felt that strongly. By contrast, fewer than 5% expressed positive feelings towards pop-ups.

So why use them? Because they work! The average email pop-up converts nearly 4% of website visitors. And that can’t be chalked up to people who were going to subscribe regardless. Pop-ups offer a 100% increase in subcriptions when compared to a static sign-up box. The stats don’t lie – pop-ups are worthwhile.

Take a pop-up at it

We’ve established that email pop-ups are simultaneously annoying but effective. Ultimately any annoyance is likely to be short-lived, whereas the benefits for those who subscribe are ongoing. I know I don’t hold a grudge against thatgoddamnwebsite.com for the time it asked me if I’d like to receive a newsletter.

The aforementioned survey backs this thinking up. The primary reason for pop-up hatred is that “they’re everywhere”. That’s a factor of ubiquity that is neither focused on nor controlled by any one brand. A single pop-up on a single website is no big deal.

Still, this doesn’t mean that your pop-up should be slapped onto your website without a plan. Apply a bit of strategy and you can mitigate the annoyance factor while squeezing out a few more conversions. Here’s what to consider.

Content with context

It’s useful to remind oneself that a pop-up is part of the website, and not some detached entity. Its content can change, both contextually and periodically. As with all content, if you can personalise it to the user in some way, great.

That personalisation could be a simple as page-specific wording. Is the user browsing a particular department on your website? Focus on that. Are you able to track where the user came from, or what they’ve been doing on your site? That’s some pop-up-tailoring data at your disposal.

Lovely bit of copywriting from theme park Holiday World’s pop-up

Something for your trouble

Time on the internet passes in a sped-up form, like some kind of digital dog years. Every second is valuable. Signing up may only take a few moments, but dismissing a pop-up is even quicker. It’s seconds versus milliseconds.

An incentive helps to swing the odds a little. For retailers, that often takes the form an introductory discount. Entry into a prize draw is an alternative. If yours isn’t an ecommerce business, you could offer a white paper in exchange for subscribing.

Fruit and veg grocer Abel & Cole offers new subscribers a 50% discount on their first offer. And, hey, their 4th as well. Nice.

An opportunity to learn

What you ask the user to input into a pop-up box is up to you. Email of course is essential. Customer name is optional.

But how about interest checkboxes? Your data on an imminent subscriber could be meagre to non-existent, and we all know how valuable personalisation is in email marketing. Giving people the means to tailor their emails up-front is a great way to get to know your subscribers better.

Fashion retailer Peacocks lets the customer choose what kind of content to receive.

Feeling triggered

There are several ways to make a pop-up pop up. Instant, time-based, scroll-based, exit intent, click-based. Each of those has a range of options to consider. How many seconds should elapse before the message appears? How far down the page is sufficient? Are multiple triggers appropriate? It’s probably worth mentioning that Wisepop’s stats on pop-up conversion rates hugely favour click-based triggers.

You don’t necessarily need to think within the scope of a single page. A global pop-up plan could be just what you need. Perhaps you want to set off on the right foot and leave the pop-up until the user has clicked onto a second page.

Design considerations

Pop-up designs come in various forms. The most popular is an in-your-face middle-of-the-screen prompt. Some variations even go for broke and fill the entire viewport. A more subtle option is to slide a box or tab in from an edge of the screen, quietly requesting attention rather than demanding it.

There’s also a clever hybrid design that blends aspects of a static sign-up box and a pop-up. Place a sign-up box somewhere on the page, and highlight it as the user scrolls past. A glow effect, a wobble animation – there are plenty of creative options.

Fenwick’s email pop-up is particularly uninstrusive. A little tab peaks in, with succinctly transparent copy. Interact or ignore as you wish.

Don’t give up to soon…

A lot of websites have a single email pop-up. Dismiss it, and that’s that – at least until the cookie that suppresses it expires.

But it’s very easy for a user to instinctively dismiss a pop-up the moment it appears. Just because the user zapped it this time, doesn’t mean that they won’t ever be interested. Creating a series of infrequent pop-ups – distributed across a series of days or weeks – gives you additional chances to gain a subscriber.

…but know when to stop

A series of two or three pop-ups is fine. But stop before asking becomes pleading. You’ll also want to consider what the user is currently doing. A disruptive message springing up while watching a video or filling out a form is likely to cross the line from annoying to infuriating.

Always include an easy-to-find static sign-up box somewhere on your website in addition to any pop-ups. Minds can be changed!

Don’t guess. Test

If ever there was a piece of website content that can benefit from comparitive A/B testing, it’s a subscription pop-up. Put a plan in place to test a theory, give it time to gather statistically significant results, and discover what your visitors respond best to.

Continuing the theme of testing – don’t forget to test that the pop-up displays properly across a range of browsers and devices! While trawling the internet for example pop-ups, I found a surprising number that failed visually or functionally in some way. Some had truncated text or unintended partial scrolling, others clashed with cookie pop-ups and were accidentally dismissed alongside them.

Don’t forget to say hello

Your pop-up is just one of many landmarks in your customer journey. Don’t leave new subs hanging – greet them with a welcome email and let them know their subscription matters.

And now it’s time to say goodbye. Thanks for popping in.

Email Design

Three experimental CSS effects to spice up your emails

Three experimental CSS effects to spice up your emails

CSS is the technology that makes the web pretty. It’s also used in email, albeit in a more primitive and fragmented form. A lack of universal support for the more modern features of CSS means that email developers tend to stick to the basics.

And that’s a pity, because some fancy CSS effects could mean the difference between plain-old-email and something that truly stands out. Let’s break with convention and think outside the (in)box.

Fixed positioning

One of the primary roles of CSS is layout. On a web page, an element can be set to a fixed position. While the rest of the page scrolls, that particular element stays put. That can be handy for components of an interface in a web app, for example.

Fixed positioning doesn’t work properly in email, not even in the otherwise ever-reliable Apple Mail. But luckily the email industry is home to some bright sparks who love to push the boundaries of the medium. Email on Acid’s Halloween email features a clever workaround for fixed positioning, originally conceived by Mark Robbins.

Being able to place an element independent of scrolling opens up a host of creative options. Here’s an example we knocked together based on the same principle:

Parallax scrolling

Those who owned a Nintendo in the 90s will perhaps remember this term. Before home technology had the muscle to render true 3D graphics, programmers used a variety of clever tricks to create an illusion of depth.

One of these techniques was parallax scrolling. The concept is simple. Graphics are placed on separate layers. ‘Distant’ objects move slowly, while ‘nearer’ objects move quickly. It lends the feeling of a third dimension to an otherwise two‑dimensional environment.

That brings us to the the perspective attribute in CSS. A web page, or part of it, can be pulled into a third axis. The result is layering of content that exists in different planes, and thus scroll at their own pace. Hello illusion of depth:

3D objects

Let’s continue the theme of three dimensions. CSS isn’t only capable of layering items. It can rotate them in 3D space. That means, with a bit lot of effort, a developer can sculpt and manipulate 3D objects. Check out some examples in this YouTube video.

These are impressive feats for sure. But so too is constructing a replica of the Eiffel Tower using only matches and glue. Complex 3D in CSS is a labour of love, not something you’ll be knocking together for Tuesday’s marketing email. So let’s think about something that could realistically be implemented in an email. How about a greetings card? That’s two rectangles, pivoting around a fold.

By combining this idea with some interactive triggers (also courtesy of some experimental CSS), a subscriber could manipulate a customised greetings card:

Oh, and that laminated sheen on the cover is achieved by sliding a white gradient across the surface. Lovely!

Are these effects really useable?

Full disclosure: pushing the limits of CSS in email is going to present you with compatibility and accessibility problems. Not insurmountable ones, but ones that will take effort to overcome. You’ll need to think about fallback content and graceful degradation. You might even want to give people the option to specifically opt in or out of such mailings.

We reckon the payoff is worth the effort for visually‑driven, energetic brands. And, hey, not only do you spice up your email – you also play a role in evolving the medium of email.