TAL .001: Fix Copy/Design Misalignment With Shortcode Markup

The Arete Letter

Find out how you can use shortcode markup to empower your copywriters and designers.

In this week’s letter, you’re going to learn how your copywriters and designers can work together more effectively – and, in the process, lower your costs.

1. The Problem

I see too many web and graphic designers get handed copy documents that look like this.

poor design enablement

The actual writing is fine. The problem is how it’s formatted.

When anyone – you, your boss, a designer, a client, whoever – looks at a ‘raw text’ document, it’s impossible to understand the copywriter’s intentions.

Web copy can’t be divorced from design. Good design enhances effectiveness, but, when copy docs look like the above example, designers have to guess the copywriter’s intentions.

Is this a heading, or bolded text? Is this a paragraph? Text for a grid layout? Or an accidental fragment that got missed during editing?

The results of this are the same in almost every organisation: worse design outcomes, longer design task times, and higher cognitive loads for designers.

Some copywriters understand this and submit their work as a PDF mockup or beautified Word doc. But this approach creates problems too.

Significantly longer copywriting task times. The copywriter’s poor design creating the illusion of poor copy. And unfriendly formats creating friction during reviewing/editing.

2. The Solution

Over the past year, I’ve developed a way for copywriters to make copy docs accessible – without spending more time on tasks.

It’s called shortcode markup.

shortcode markup example

It pairs built-in word processor styles (e.g. the Styles tab in MS Word) with a square-bracket markup language. Shortcodes come in self-contained (e.g. [image]) and trammelled (e.g. [accordion][/accordion] varieties.

Here’s an example of a web page hero header written in shortcode markup and translated into a web design.

trammelled shortcodes

Each shortcode indicates a specific design element. Because the language is standardised, copywriters can communicate to designers their exact layout intentions – no more confusion or sloppy copy.

Importantly, shortcode markup doesn’t tell designers how to do their jobs. It just gives them a sense of how the copy should flow.

You can view the full implementation guide here.

3. Implementation

Tech Needed: Microsoft Word, Google Docs, or other word processing software

Ease of Uptake: Easy

  1. Put aside half an hour for your copywriters and designers to read this blog.
  2. Add the blog to your team’s cloud environment and style guide for easy access.
  3. Make shortcode markup required for all copy submissions.
  4. Collect feedback from your team. Expect some initial pushback.
  5. If feedback is consistently negative over 90 days, scrap it. I’ve tested shortcode markup internally and in field environments for 12+ months, but that doesn’t mean it’s right for every team.

By Duncan Croker

Duncan is a copywriter with a background in editing and storytelling. He loves collaborating with brands big and small, and thrives on the challenges of hard marketing.