Watch the video playlist

Writing for the Web

The words you choose for your design are equally—if not more—important than the colours and layout of your design. Without words your website isn’t understandable.

Why designers need to craft words

There are many reasons that you need to be able to write: to craft the messages of your interface, to convey your ideas, to attract new clients and keep old clients, to tell stories and more.

Design with text

To me, writing the content of a website is always the first thing I do. I open up a new Markdown file and start writing out what content will be on the page, the headings, the paragraphs, the links, the buttons, etc.

Of course, no writing should be started without solid research and understanding of the project and the problem.

The words of your website and interface convey so much information about you, your product and your brand. They help people understand and use your product—and generally they’re more effective than icons. One word means much more than one icon.

Links

How people read on the web

They don’t. But they will, if they’re interested.

Some older eye-tracking studies (2008) show that less than 20% of text is actually read.

When people first come to a page they generally scan for important keywords, looking for things that catch their eye. People usually have a specific purpose when they come to your website: to find some information. So they scan until they find something recognizable.

If they find a recognizable piece they’ll read a little further. If people feel that you have answers to their questions then they’ll read in-depth. But the content has to be enticing.

Our eyes jump around the page focusing really quickly on different things: headings, lists, bold words, etc. trying to find the information. Watch the video below to see it in action.

Links

Writing for the web

The Web is primarily text, in fact without CSS the Web is only text. Spend time making text that will resonate and help your user—always target the text at real human beings, not robots or computers.

  • Be honest & kind: with your content, it’s noticeable to users. Don’t be hip or clever. Don’t be a robot.
  • Be clear and concise: if one word will work, use only one word. Cut out the unnecessary.
  • Don’t assume: you are likely not your core audience. Don’t overuse acronyms, don’t use jargon, don’t use catchphrases. Not everybody fits into your worldview: real life is messy. Remember that nothing is ever boolean: some people are neither male nor female and they deserve equal consideration.
  • Don’t interrupt: focus on your message and on delivering what people want.
  • Highlight: make important keywords more visible, headings obvious, use bulleted lists for important info (see how I’m following my own rules).
  • Inverted pyramid: conclusion at the top; the first paragraph or two must hold the most important information.
  • Front load: start headings, paragraphs, and bullet points with information-carrying words; all other words will be skipped
  • Never use “Click here”: it conveys no information.
  • Use normal words: use the words that normal people use; write for your friend.

Iterate

When writing web content the first effort isn’t good enough. Iterating on the text and content is just as important as iterating the design.

  • Try different variations,
  • Get people to review the text,
  • Read it out loud,
  • Get the computer to read it out to you.

I remember reading a blog post a long time about about writing for the web (though I can’t find the original source). It said:

Write the content you think you need for your website. Then half its length. Then half it again.

Adaptive content

The content of our websites has become very modular, think about how it will work in different situations at different lengths.

Here’s some places you’ll find your content, that isn’t on your website:

  • Search results
  • Social media shares: Twitter, Facebook
  • In e-mails to friends
  • Quotes on other websites
  • Mobile apps

Think about how your content can adapt to these scenarios, length-wise, tone-wise, etc.

Creating a connection

People connect with other people: with their wit, emotion, personality & stories. Adding these things to the writing of your website is extremely helpful.

I like to think of a personified animal that represents my brand or website and figure out how they would talk to people. Think of your website as a living organism and give it personality through the text.

  • How do you want your users to feel?
  • What connection are you trying to convey with the words?
  • What kind of personality is your website?
  • How would the personality react?

Links

Tools to help write your website

There’s a bunch of different tools information architects and writers use when starting websites and apps.

Content inventory

If you’re re-creating a website that already exists, a content inventory is a way to organize and understand all the content that already exists on a website.

It’s a big spreadsheet of information about every page of content, who’s in chart of it, where it’s located, its status, etc.

It’s helpful when working with clients so everybody knows what the content is, where to find it, who’s in charge etc.

The content inventory might include the following headings:

  • Unique ID
  • Title
  • URL (Source)
  • Owner
  • Status

See a sample content inventory.

Interfaces in text

As I mentioned way above, I always start my websites in a text file. I write the name of the page at the top then start writing the content. I mark specific things as buttons, lists, bold, headings, etc. I usually use Markdown because it makes sense to me.

Here’s an example for a lightbulb company:

# Standard bulb selection

## Traditional
*This style adds an air of classicism.*
- Energy use: Lots
- Colour: Very warm
- Sizes: Small to large
[Add to wish list] [Add to cart]

## Incandescent
*Adds a warm, natural glow to any room.*
- Energy use: Moderate
- Colour: Warm
- Sizes: Small to long
[Add to wish list] [Add to cart]

## Compact Florescent
*Adds a modern cool feel to dark spaces.*
- Energy use: Minimal
- Colour: Ranges between cool and warm
- Sizes: Small to medium
[Add to wish list] [Add to cart]

I’m using Markdown syntax to convey information: headings, importance, lists, etc. After I’ve got the text in a good state I continue on to other things like wireframes, style tiles and coding.

Content templates

Content templates are about finding chunks and patterns in your text—they are structural and can be very helpful for development to see common code styles.

A content template is a structured document, I usually use Markdown and YAML, that describes a specific piece of content.

If your website was about volcanos, a content template for a specific volcano may look like this:

---
name: Olympus Mons
location: Tharsis Bulge, Mars
type: Shield Volcano
height: 22 km
width: 600 km
---

**Olympus Mons** is a large shield volcano on the planet Mars making it the second tallest mountain in the Solar System, behind the central peak of *Rheasilvia*, an impact crater on the proto-planet [Vesta](http://en.wikipedia.org/wiki/4_Vesta), which stands slightly taller. It stands almost three times as tall as [Mount Everest](http://en.wikipedia.org/wiki/Mount_Everest)'s height above sea level.

YAML front matter is used to structure pieces of information, and Markdown is used for more free-form content.

Sitemaps in Markdown

☛ Learn more about Markdown before continuing.

I like to use Markdown to create my sitemaps because it’s more lightweight and easier to manipulate. Using only lists and nested lists.

There are even CSS transformations to make the sitemap more visual for clients.

An example sitemap in Markdown using nested lists:

- About Volcanoes
  - What’s a Volcano
  - Plate Tectonics
  - Types of Volcanic Eruptions
    - Stratovolcano
    - …
- Volcanic Matter
  - Lava
  - Tephra
  - Magma
  - Igneous Rocks
- Volcanoes of the Solar System
  - Active
    - Eyjafjallajökull, Iceland
    - Mount St. Helens, USA
    - …
  - Inactive
    - Mt. Vesuvius, Italy
    - Olympus Mons, Mars
    - …

Links

Video list

  1. Writing for the web: Using computer speaking for proofing
  2. Writing for the web: Writing an interface
  3. Writing for the web: Content templates