How to Format Your Content for Your Web Site (or web designer)

As both a web designer and writer, I love both the design and copywriting aspects of creating a site. I often work with writers who want to write all of their own copy (which is awesome), but writing and formatting your web copy is WAAAYYY different than composing a compelling piece of fiction or non-fiction.

This post isn’t about how to write your copy but about how to format it because one of the biggest gifts you can give your designer is to format your copy correctly for the web.

It’s also a gift for your website’s visitors.

Be friendly. Format your content in a way that makes it easy to read. You want visitors to stick around and read it, right?


Why is web copy formatted differently than other writing?

It’s all about how people read on the web. They aren’t curled up on the couch with a cup of tea, ready to dig in for a long afternoon of reading websites. That’s how we read novels.

People SCAN websites. They read quickly, searching for the information that they need which means that we need to adjust how we write and how we format that writing.

If you study the written content on some of your favorite websites, you’ll begin to see what I mean. You’ll want to format your own content accordingly.

How should you go about formatting your website copy?

1) Think SHORT – short paragraphs, shorter sentences, short words.

Writing short allows for white space which gives your readers’ eye a place to rest. Even in a really good novel, have you ever skimmed over a super long paragraph? Right, me too.

Too much text in giant chunks is overwhelming for readers.

Paragraphs should be 1-3 sentences (and yes, it hurts the English teacher in me to write that. If any of my former students ever read this, I’ll probably hear about it).

Sentences should be ten-fifteen words. Cut long ones in half. This isn’t to say that you must write like a simpleton, but you don’t want to write like Jane Austen or Charles Dickens either.

The goal here is CLEAR COMMUNICATION, not sounding smart (unless of course your blog is about organic chemistry or aeronautical engineering – then knock yourself out with sounding like the genius you are!).

Also, the web has gone mobile, to itsy-bitsy little screens. Writing SHORT allows for your writing to be much more readable on a small screen.

2) Use bullet points and lists

Readers can scan lists quickly for the information that they’re looking for. And, the WordPress editor has a built in bullet function. They’re easy to use and style.

If you’re writing all of your copy in a Word document, use the bullet point tool rather than typing them in on the keyboard. They’ll translate directly over into the WordPress editor.

3) Use Headings and Sub-headings

Using clear headings and sub-headings assists your online reader in scanning your content. If they can’t find what they’re looking for quickly and easily, they won’t stick around to dig through your copy. They’ll leave.

So break your pages and posts into sections using headings. To do this in Word, use the Styles bar and NOT the bold function.

If you use bold to highlight text, when you or your designer copy your text into WordPress, it’ll all have to be reformatted. But, if you use the Styles tab and assign Header 1 or Header 2 to those areas of text, they’ll be perfectly styled after you copy and paste your text onto your site.

4) Identify any text you want in a different color with a COMMENT

Even if you type your text in another color, it won’t copy into WordPress. If you’d like a specific piece of text in another color, you need to use the comment feature which lets the designer know what to do.

If you write: “Welcome to my website” (make this pink).

And your designer doesn’t catch it, you’ll have “(make this pink)” ON YOUR WEBSITE.

To avoid that little travesty, use the comment feature in Word. That way, your designer will absolutely see your notes.

First, highlight the entire segment of text you’d like in a different color. Then, click on the insert tab at the top and the comment button.

You can then leave a note for your designer to “make this pink” (or whatever you decide your designer needs to know) which is a clear indication that you’d like the highlighted text a pink color (or bolded or whatever you want).

Similar to the font color, if you’ve got a piece of text you’d like to link to another page on your site or another website altogether, highlight the text you’d like linked and put the link in a comment.

6) Create one file for each web page

Rather than sending a single, multi-page Word doc with all of your copy, create a file for each of the main pages on your website. I tend to work on one page at time, and it’s easier to open one file for that work rather than to scroll through a super long doc looking for what I need.

It’s up to you to write and structure your content how you want it. When I upload content to a client’s site, I make sure the fonts are consistent and that the design looks good, and as a writer (and English teacher), I’ll give all of the content a good proofread to catch any spelling and punctuation errors.

But, if you want it to look a certain way, I can only make that happen if you let me know how you want it to look.

What’s next?

If you’re currently working on your website copy, follow these formatting guidelines to make BOTH your web designer and your future visitors happy.

If you’ve already got your site up and running, download the formatting checklist and run your pages through it. If you need to make some revisions, you’ve now got the guidelines to do so.

Here’s to writing short!



You May Also Like