Since the dawn of the mobile web, digital designers have been asking copywriters to shorten their text.

“It’s too much copy!”, we’d say, dressed in all black and looking cool.

The old way:

The solution is easy! Just ask your copywriter friend to write two additional versions of what they originally wrote; one that’s about 50% shorter, and another that’s shortened even further to just a few bullet points. I’m sure they’d be happy to do that for you.

Or maybe there’s a better way that uses AI…

The new way

The Root Problem

Since the most common tactic in responsive web design is to keep the font size consistent across devices, it means that when websites get narrower on smaller screens, there’s nowhere for long paragraphs of text to go but down. Which means you have to scroll. A lot. And that’s annoying for many users.

A Solution

Use ChatGPT to shorten the text! That’s literally all this blog post is about. Keep reading for some more specific tips and tricks. Or don’t. You do you.

Medium Sized Screens

Here’s a prompt to generate a shortened paragraph that’s about 60% as long as the original. (I know the prompt says 10% the characters, but I had to use a crazy small number, otherwise it didn’t shorten it enough.)

Use this prompt in ChatGPT to generate shortened text for medium-sized screens:

Given the following Original Text, please create a Shortened Version while following these guidelines:

1. Maintain Original Tone, Style, and Voice: If the original text is formal, the Shortened Version should also be formal. If the original is casual, the shortened version should reflect that. The Shortened Version should feel like it was written by the original author in the same moment it was originally written.

2. Keep Key Information: Ensure that the key points and main ideas are still present in the Shortened Version. Don't lose the main message when trying to make the Shortened Version.

3. Length: the Shortened Version should contain 10% the characters as the Original Text

Original Text:
[Put your original text here without the brackets]

Shortened Version:

I realize that a prompt this large probably isn’t necessary to get a decent shortened version. But it makes me feel better to explicitly state these rules and who knows, it might make writers who are AI-skeptical feel more at ease with this technique.

Small Screens

For small screens, feel free to modify the above prompt, or you can use this prompt to generate bullets.

Use this prompt in ChatGPT to generate bullet points for small screens:

Given the following Original Text, please create a Shortened Version that is 1-3 very sparse bullet points consisting just 3-8 words max.

Original Text:
[Put your original text here without the brackets]

Shortened Version:

The HTML

This structure is simple and works well enough. (You could argue that it’s a waste of bandwidth because technically you’re transferring extra text, and you’d be right. But whatever. Yolo.)

<div class="content-lg">
    <p>A lot of text goes here for big screens.</p>
</div>
<div class="content-md">
    <p>Shorter text goes here for medium screens.</p>
</div>
<div class="content-sm">
    <ul>
        <li>Bullets...</li>
        <li>go...</li>
        <li>here...</li>
    </ul>
</div>

The CSS

/* Mobile First: Hide everything except the small text */
.content-lg { display:none; }
.content-md { display:none; }

/* Medium Screen: Hide mobile, show medium */
@media only screen and (min-width: 440px){
	.content-sm { display:none; }
	.content-md { display:block; }
}

/* Large Screen: Hide medium, show large */
@media only screen and (min-width: 740px){
	.content-md { display:none; }
	.content-lg { display:block; }
}

And there you have it. Hopefully you’ll get some mileage from this approach, and that magical partnership between the writers and designers will continue to evolve into 2024 and beyond.

Oh, and definitely try to use GPT4 for this technique. In comparison GPT3 is just spicy autocomplete.