How to Write Copy in the Post-PC Era

We live in the post-PC era. More and more people are switching to tablets and smartphones as their primary devices for consuming content on the Internet. In 2012, we saw an additional 600 million people using mobile devices for search.

The prediction for 2013-14 is that mobile usage for browsing will surpass all desktop devices. This transformation is making website owners and web designers realize they need a way to “speak” to thousands of different screens with different sizes and features.

That’s why “responsive design” came into play: fluid grids, flexible images, and other elements that make your site readable on any device, be it a smartphone, a tablet, or a PC. Reading from a desktop browser? Make your browser window smaller to understand what I’m talking about.

While web designers and developers work to find the perfect balance between usability and adaptability, we writers, copywriters, and all other types of content producers really should think about how this change affects the way we plan and produce content on a daily basis.

Surrender to the Cross-Device Reality

cross device

I have thought about a few factors that writers should consider in the post-PC era. However, first, I want to tell you about the mindset I think we all should develop. I think we should accept the fact that the way our writing will be consumed in the future is not completely under our control.

Gone are the days when we could faithfully translate our thoughts and ideas into a single visual identity. The copy, the articles, and the books we produced had just one version, one look, one representation.

Technology now helps us spread our thoughts faster and easier than ever before. This happens across a wide range of devices with different features. So, let’s trade the privilege of being read with less control over our words, and let’s surrender to the cross-device reality.

Shrink-proof paragraphs

One of the most obvious things that happens when a desktop browser text adapts to the smartphone or tablet screen size is that text shrinks. In fact, you should think carefully about the length of your paragraphs, as six or seven desktop lines could turn into an unreadable chunk of text on a mobile device. It’s probably safer to create short paragraphs: I would say 250-400 characters is the sweet spot.

shrink

To <br> or not to <br>?

Adding a break in the copy of a desktop website used to be a graphic shortcut with no negative consequences. In the title of a page, for example, you could set the number of lines it was displayed on with the <br> function.

What about the same title on a tablet? Think about how that same break function will perform on another device. How will it break the text? Will you like the final result? The general rule here is: try to avoid unnecessary breaks as they will produce ugly results you would not expect.

line breaks

Speak to the device

There is something else content producers really should think about – readers on different devices are in different consuming moods. So far, we have tackled formatting issues like paragraph sizes and breaks, but what about the messages we are conveying?

The content itself should adapt to people in different situations. For an online magazine, this could mean presenting shorter stories to smartphone readers. An academic site could make in-depth papers more prominent for tablet users.

This is not something just professional programmers can do, as there are many modern Content Management Platforms such as WordPress, Joomla! and Drupal which have responsive themes with “device recognition” built into them. Even Google has spoken and openly states that they prefer “Responsive Designs” to secondary mobile sites, as this keeps users on a single website.

So, in order to conform to Google’s wants, create a good user experience, and allow for ease of navigation on mobile browsers, we have to adjust the way we present our information. Fortunately, it is quite easy. Here’s a sample shortcode which modern WordPress themes used to control device displays:

[visibility show="desktop"]
Your Content Desktop
[/visibility]

[visibility show="tablet"]
Your Content Tablet
[/visibility]

[visibility show="mobile-landscape"]
Your Content Mobile Landscape
[/visibility]

[visibility show="mobile-portrait"]
Your Content Mobile Portrait
[/visibility]

Modularity

Along with these guidelines, we also should mention the importance of taking advantage of the latest text formatting options available. Toggles, accordions, and tabs are not new, but in combination with the power of “responsive design,” they help users navigate the content more easily.

modularity

Copywriters, especially, should make the most of the options to create modular website texts, pieces of content that are not “given” to the reader, but which unfold as the users explore them and show interest in them.

In the end, that’s what this is all about: creating an effective experience for our readers and providing value in a way that is not only entertaining, useful, or inspirational, but also high-standard according to the available technology.

Structure is everything

For websites dealing with a huge quantity of content, a good strategy is needed to create an excellent cross-device user experience. In those cases an ad hoc approach to adapting content is not feasible, as it would take too much time.

Even though we writers would like the written word to be always individually customized to its purpose, we sometimes have to rely on the power of technology to create a perfect content choreography.

Sara Wachter-Boettcher showed the case of Starbucks 2012 mobile site. It was clear that the CTA on product pages was not visible enough, because at that time the desktop right-hand column simply went to the bottom on mobile, regardless of the page content.

It’s not just about the device mood, but also the content mood. Can all types of content be treated in the same way? That’s why structure comes into play. If we know exactly our content types (for Starbucks, for example, that could mean product pages, location finder pages and blog posts), we can break them into microstructural units and have other elements create a perfect choreography with them, preserving content goals (selling, informing or anything else).

In this way CTAs, forms, page links or anything else can have the most effective location on the mobile or tablet page. As Sara Wachter-Boettcher puts it,

If you can define content types based on what they include at a semantic level [...] you can create sound rules to guide how they bend and reshape in responsive designs. You can let your content go, without fearing where it will end up.

Now it’s your turn

This whole “responsive design” landscape is quite new, and probably dozens of ideas popped into your mind while reading this article. Can you share any other advice writers should follow in this post-PC era? Leave your comments below.

About the Author: Dan Virgillito is a content strategist for Sterling Kreative. He works with clients day in and day out to create engaging content which is viewer friendly across all browser platforms.

  1. Confession – I have been guilty of using too often to fudge some formatting goal. But you are right, that is not a good technique for today’s responsive-oriented world.

    Your article is a good wake-up call to all of us to look farther ahead to stay in tune with user’s evolving needs and changing devices.

    I like tabs and accordions but don’t use them as often as I should. As a user I prefer the modularity they provide.

    • Yes Richard, same for me! I realised I had to use more tabs and accordions as I liked them as a user.

    • Great post this! Increase in usage of mobiles and tablets is being highlighted and business who haven’t gone mobile, its high time that they have a mobile optimized site to provide rich user experience on all devices across all platforms. A mobile app on android and ios platforms for ecommerce businesses would be great.

  2. I totally clicked on this article title thinking it was going to be about being offensive and controversial in your copy :)

    Having said that – great article, Dan! I love the notion of “content choreography”, and technology allowing us to present information in much more creative and helpful ways.

  3. Typical articles about content-writing tell you what to write & how to write it. Your refreshing post talks more about how to make it more readable, which is great. Thanks

  4. Great article and super useful! I’ve absolutely been guilty of using breaks to making headings in our e-commerce site emails look nice and well-balanced. I hadn’t even thought through the consequences on other devices! I have been enjoying your articles…all very helpful and applicable to work I’m doing on our site Delicious Karma! Especially for someone, like me, who’s a bit new to this online marketing world.

  5. Why not just use a responsive design? I’m a writer … not a coder. You’re complicating things for me. ;)

  6. Thanks for this – I’ve struggled with unsatisfactory results popping up on sites we designed, but had not settled down and thought out the Why and How to Fix. Appreciate your clear thoughts on the matter.

  7. I used to break my lines with a lot and it doesn’t pay off on a different screen size.Same could be said about the long chunks of text. Anyhow, great pieces of advice on the ux design and user-friendly copy

    • Thanks Anna, the break issue is quite important isn’t it? Feel free to share other ideas on how to make copy design-friendly!

  8. Very timely article. It will be interesting to see the state of the PC in a few years.

  9. “Responsive Copywriting”?

  10. This is very useful article Thanks,

21 comments

Please use your real name when commenting. Otherwise, your comment may be deleted.

← Previous ArticleNext Article →
Buffer