The Three Amigos: Copy, Design, and Code

The Three Amigos: Copy, Design, and Code

The Three Amigos: Copy, Design, and Code

Bex Osborn

Marketing Strategist

15 Jun 2022

Copy, design, and code go hand in hand. We like to view it as the whole package, a well-balanced combination of visual and verbal information. At ActionRocket we specialise in creating designs that communicate information, so the concept of designing words is very close to our hearts. Highlighted here, by three of our ActionRocket amigos, each skilled in copy, design and code, are the essentials to what makes up a unified digital campaign.

A word from our Copywriter, Nicole Holden.

1. A clear main objective understood by all

Grasping the main objective of a campaign is the clear starting point for everyone. Understanding it identifies the direction, core message and where the user needs to end up.

2. Identify the target user.

It’s all about them Understanding who the audience or user is informs on how to talk to them with the right information, which ultimately persuades them to click through to where you want them to go.

3. The brand core message

An identifiable brand core message is one of the main things you want your audience to remember. Once you know what this main message is, you will have a clear picture of what language to use to illustrate it.

4. It’s not just about what you say, but how you say it

From the homepage to the call-to-action, to social media and email, having a consistent tone of voice that recognises the audience and represents the brand’s values and core message is crucial.

5. Digital readability

As the majority of digital readers scan, every section of copy should be bite-sized. Copy should, rather than focus on features, talk about benefits and/or pain points and how to overcome them.

Lastly… an integral stage for any digital content campaign. Revise, re-read…improve.


A resolution from our Designer, Sam Beddoes.

1. Always start with a sketch

Using a pen and paper to sketch out designs is the fastest way to get ideas out of your head. Never jump straight into design digitally - it’s slower and you’ll get lost in the details before you get the basics nailed down.

2. Keep it brief and focused

Email is a rapid, semi-etheral medium that most people will only read once. Try showing someone your design for 10 seconds. If they can’t work out what your email wants them to do, you might want to give it a bit more focus. Make sure people can view, comprehend and act upon your message within seconds.

3. Email is the invitation, not the party

It can be tempting to stuff everything you want to say in an email, but keep things short and sweet. Give people just enough information so they can work out if they want to know more, and tempt them with that CTA.

4. Whitespace is your friend

Less is almost always more when it comes to email design. Including plenty of whitespace allows your content to breathe, making it clearer where people should be focussing their attention while reading.

5. Keep your GIF file size down

Some snazzy GIF animation is a great way to make your designs stand out. However, if your file size is too big, people with poor connections might miss out. Try to keep them below 1.5MB ideally (and 2.5mb at a push). See how you can help optimise in our 3 step guide to email-friendly MEGA-GIFs .


It’s in the CSS from our Coder, Weng Lam.

1. AMA

It’s awesome when a designer asks our code team questions during their design process. It means they are looking to try something new and different to what they’ve done before, and want to know if it’s possible. It also gives us a heads up on how to approach the build from the start.

2. Lorem ipsum dolor sit amet

Whilst we can appreciate how useful latin placeholder copy can be, it’s best that it’s replaced with final copy at build stage. This means that during send we can be confident that the layout will appear as we deliver it to our clients. There is always the risk that inserting copy post build could create changes of the layout, which may reduce the effectiveness of the design.

3. Desktop & Mobile design

It’s great when our code team are supplied with a desktop and mobile design from our designers. The less time we need to spend converting a desktop sized image into a mobile one, the more time we can focus on the code itself. This also helps us to not have to make any assumptions to how the email should look in mobile view, and is also helpful for clients to see both versions at the design stage.

4. We love an images folder

When we start a build it’s always super helpful for our designers to hand over a folder of images alongside their designs. Depending on the complexity of the email, sometimes it takes longer saving out images than it does coding it! So, to already have assets and gifs saved out helps us out with the build massively.

5. Coding workshops

Occasionally our code team host coding workshops with our designers to showcase new functionality elements, or just for the designers to brush up on their code. It keeps them up to date on how we code so they can create assets in a certain way or size to help speed up the build. Educating our designers on code updates enables them to design emails which are possible, rather than something we might have to compromise on.

Let’s

create

together

Got a project or want to know more about what we do? Drop us a message here, and we'll get back to you.

Let’s

create

together

Got a project or want to know more about what we do? Drop us a message here, and we'll get back to you.

© 2011-2024 Action Rocket Ltd. All rights reserved.