{"id":590,"date":"2014-10-25T11:14:16","date_gmt":"2014-10-25T15:14:16","guid":{"rendered":"http:\/\/www.gregcruce.com\/?p=590"},"modified":"2016-04-30T22:13:42","modified_gmt":"2016-05-01T02:13:42","slug":"7-tips-for-writing-for-the-web","status":"publish","type":"post","link":"https:\/\/www.gregcruce.com\/7-tips-for-writing-for-the-web\/","title":{"rendered":"7 Tips For Writing For The Web"},"content":{"rendered":"

Writing copy for the web isn’t the same as writing for a newspaper, book, or ads – it requires understanding how users read online. Understanding that users scan content instead of committing full-force to in-depth reading is required, and this means that our content and style of writing should\u00a0support the user’s natural reading preference as much as possible. \u00a0Thankfully, it’s not difficult to achieve.<\/p>\n

Here are 7 tips for how to make your content better online<\/strong> so that users find what they need. Throughout the article, we’ll use an example that we are writing an article for changing a flat tire and we will use the infamous latin text Lorem Ipsum for filler where needed.<\/p>\n

Break Up Content Into Sections<\/h2>\n

Content that is a gigantic run-on paragraph is extremely boring, and it’s also difficult to read. \u00a0This method can work well for a book, article, or essay, but online users have the option of leaving your site to find another. \u00a0This can lead to an increase in bounce rate for your key landing pages, as well as a short time on site metric. \u00a0Here are some examples of good and bad content broken up into sections.<\/p>\n

Examples (click bars below to expand):<\/strong><\/p>\n

Content As One Long Section<\/span><\/div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat aliquam tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed at urna sem. Fusce tempus elementum tortor, eget iaculis felis finibus eu. Vestibulum ut ipsum viverra, hendrerit ex eu, ultricies ipsum. Nunc a libero mauris. Mauris vestibulum metus ut leo imperdiet interdum. Morbi tortor enim, condimentum sed tincidunt vel, ornare non nulla. Donec vel leo eros. Sed vitae nisl quis ipsum viverra volutpat. Proin at risus tortor. Phasellus congue convallis euismod. Morbi dapibus, nibh eget iaculis sagittis, neque velit ultricies diam, sit amet fringilla dui nibh sit amet mi. Duis sed tellus a mi egestas luctus. Nullam lobortis scelerisque ante nec maximus. Proin diam mauris, tincidunt nec erat vel, vulputate tincidunt ante. Vivamus placerat ante arcu, at bibendum neque blandit eu. In hac habitasse platea dictumst. Aenean dui enim, sagittis id congue at, ornare maximus massa. Pellentesque eget dolor lectus. Fusce hendrerit mattis commodo. Etiam at arcu dui. Donec elementum vehicula lorem, a commodo dolor pretium sit amet. Aenean sit amet vehicula dolor. Fusce id nisl vel erat pretium posuere non ut eros. Sed bibendum urna nec velit hendrerit, in malesuada massa congue. Suspendisse in vehicula ipsum. Vestibulum at consequat erat. Vestibulum porta, sem quis aliquam dictum, purus arcu suscipit diam, quis fermentum ipsum odio laoreet ante. Vivamus tristique gravida tellus, rhoncus convallis magna fermentum vitae. Cras nec magna magna. Donec a augue eget tortor dapibus vestibulum vel at neque. Aliquam ac ex vel justo hendrerit porttitor ac id felis.<\/div><\/div>
<\/div>\n
Content Broken Up Into Sections<\/span><\/div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat aliquam tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed at urna sem. Fusce tempus elementum tortor, eget iaculis felis finibus eu. Vestibulum ut ipsum viverra, hendrerit ex eu, ultricies ipsum.<\/p>\n

Nunc a libero mauris. Mauris vestibulum metus ut leo imperdiet interdum. Morbi tortor enim, condimentum sed tincidunt vel, ornare non nulla. Donec vel leo eros. Sed vitae nisl quis ipsum viverra volutpat. Proin at risus tortor. Phasellus congue convallis euismod. Morbi dapibus, nibh eget iaculis sagittis, neque velit ultricies diam, sit amet fringilla dui nibh sit amet mi. Duis sed tellus a mi egestas luctus. Nullam lobortis scelerisque ante nec maximus. Proin diam mauris, tincidunt nec erat vel, vulputate tincidunt ante.<\/p>\n

Vivamus placerat ante arcu, at bibendum neque blandit eu. In hac habitasse platea dictumst. Aenean dui enim, sagittis id congue at, ornare maximus massa. Pellentesque eget dolor lectus. Fusce hendrerit mattis commodo. Etiam at arcu dui. Donec elementum vehicula lorem, a commodo dolor pretium sit amet. Aenean sit amet vehicula dolor. Fusce id nisl vel erat pretium posuere non ut eros. Sed bibendum urna nec velit hendrerit, in malesuada massa congue.<\/p>\n

Suspendisse in vehicula ipsum. Vestibulum at consequat erat. Vestibulum porta, sem quis aliquam dictum, purus arcu suscipit diam, quis fermentum ipsum odio laoreet ante. Vivamus tristique gravida tellus, rhoncus convallis magna fermentum vitae. Cras nec magna magna. Donec a augue eget tortor dapibus vestibulum vel at neque. Aliquam ac ex vel justo hendrerit porttitor ac id felis.<\/div><\/div>

<\/div>\n

From the above examples, we can see the the last section,\u00a0Content Broken Up Into\u00a0Sections<\/strong>, has the best readabilty and allows the user to scan the content at will. \u00a0Writing content this way certainly allows for better readability, and helps users who prefer to scan content.<\/p>\n

Putting a Call To Action<\/a> between sections is another great way to break up content.<\/p><\/div>\n

Use One Topic Per Paragraph<\/h2>\n

This compliments\u00a0the first point – if every major section has a different header, then every paragraph should revolve around a single topic. \u00a0This makes it easier to digest content, as well as makes the writing neater and clean.<\/p>\n

Also, don’t be afraid to have short paragraphs. \u00a0As long as the topic is unique and seperate from the previous topic, most of the time it will warrant being used in a separate paragraph.<\/p>\n

Use Section Headers<\/h2>\n

Further enhancing our first point is to use section headers to break up long content and summarize the section. \u00a0This is the greatest way to allow users to scan your content, and is the easiest way to improve readability. \u00a0Furthering our content example above, we will add some sample headers to improve readability.<\/p>\n

Examples (click bar below to expand):<\/strong><\/p>\n

Content Broken Up Into Sections<\/span><\/div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat aliquam tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed at urna sem. Fusce tempus elementum tortor, eget iaculis felis finibus eu. Vestibulum ut ipsum viverra, hendrerit ex eu, ultricies ipsum.<\/p>\n

Nunc a libero mauris. Mauris vestibulum metus ut leo imperdiet interdum. Morbi tortor enim, condimentum sed tincidunt vel, ornare non nulla. Donec vel leo eros. Sed vitae nisl quis ipsum viverra volutpat. Proin at risus tortor. Phasellus congue convallis euismod. Morbi dapibus, nibh eget iaculis sagittis, neque velit ultricies diam, sit amet fringilla dui nibh sit amet mi. Duis sed tellus a mi egestas luctus. Nullam lobortis scelerisque ante nec maximus. Proin diam mauris, tincidunt nec erat vel, vulputate tincidunt ante.<\/p>\n

Vivamus placerat ante arcu, at bibendum neque blandit eu. In hac habitasse platea dictumst. Aenean dui enim, sagittis id congue at, ornare maximus massa. Pellentesque eget dolor lectus. Fusce hendrerit mattis commodo. Etiam at arcu dui. Donec elementum vehicula lorem, a commodo dolor pretium sit amet. Aenean sit amet vehicula dolor. Fusce id nisl vel erat pretium posuere non ut eros. Sed bibendum urna nec velit hendrerit, in malesuada massa congue.<\/p>\n

Suspendisse in vehicula ipsum. Vestibulum at consequat erat. Vestibulum porta, sem quis aliquam dictum, purus arcu suscipit diam, quis fermentum ipsum odio laoreet ante. Vivamus tristique gravida tellus, rhoncus convallis magna fermentum vitae. Cras nec magna magna. Donec a augue eget tortor dapibus vestibulum vel at neque. Aliquam ac ex vel justo hendrerit porttitor ac id felis.<\/div><\/div>

<\/div>\n
Content Broken Up Into Sections With Headers<\/span><\/div>
<\/p>\n

How To\u00a0Change A Flat Tire<\/h3>\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat aliquam tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed at urna sem. Fusce tempus elementum tortor, eget iaculis felis finibus eu. Vestibulum ut ipsum viverra, hendrerit ex eu, ultricies ipsum.<\/p>\n

Tools And Skills\u00a0You Will Need<\/h3>\n

Nunc a libero mauris. Mauris vestibulum metus ut leo imperdiet interdum. Morbi tortor enim, condimentum sed tincidunt vel, ornare non nulla. Donec vel leo eros. Sed vitae nisl quis ipsum viverra volutpat. Proin at risus tortor. Phasellus congue convallis euismod. Morbi dapibus, nibh eget iaculis sagittis, neque velit ultricies diam, sit amet fringilla dui nibh sit amet mi. Duis sed tellus a mi egestas luctus. Nullam lobortis scelerisque ante nec maximus. Proin diam mauris, tincidunt nec erat vel, vulputate tincidunt ante.<\/p>\n

Steps To\u00a0Change The Tire<\/h3>\n

Vivamus placerat ante arcu, at bibendum neque blandit eu. In hac habitasse platea dictumst. Aenean dui enim, sagittis id congue at, ornare maximus massa. Pellentesque eget dolor lectus. Fusce hendrerit mattis commodo. Etiam at arcu dui. Donec elementum vehicula lorem, a commodo dolor pretium sit amet. Aenean sit amet vehicula dolor. Fusce id nisl vel erat pretium posuere non ut eros. Sed bibendum urna nec velit hendrerit, in malesuada massa congue.<\/p>\n

Cleaning Up And Safety<\/h3>\n

Suspendisse in vehicula ipsum. Vestibulum at consequat erat. Vestibulum porta, sem quis aliquam dictum, purus arcu suscipit diam, quis fermentum ipsum odio laoreet ante. Vivamus tristique gravida tellus, rhoncus convallis magna fermentum vitae. Cras nec magna magna. Donec a augue eget tortor dapibus vestibulum vel at neque. Aliquam ac ex vel justo hendrerit porttitor ac id felis.<\/div><\/div>

<\/div>\n

We can see that with the addition of section headers, we’ve really helped our users out by giving them a short, descriptive summary about the section.<\/p>\n

Using HTML\u00a0H1-H6 tags as section headers is a great SEO optimization technique<\/a><\/p><\/div>\n

Modify Lists To Become Bullet Points<\/h2>\n

Whenever your content calls for a list of items, consider putting that content into a bulleted list. \u00a0Lists are a great way to draw the eye to a specially designed element, while noting that the elements are of a list. \u00a0Take a look at the following.<\/p>\n

Examples:<\/strong><\/p>\n

Content Without Bullet Points<\/span><\/div>
Changing a flat tire is a necessary evil to owning a car. \u00a0Thankfully, your car should come with the tools you need included. \u00a0Here is a basic list of items you’ll need – jack, lug wrench, spare tire, gloves, knowledge of a jack point (or car instruction manual)…<\/div><\/div>
<\/div>\n
Content Without Bullet Points<\/span><\/div>
Changing a flat tire is a necessary evil to owning a car. \u00a0Thankfully, your car should come with the tools you need included. \u00a0Here is a basic list of items you’ll need:<\/p>\n