Here’s the thing: Everyone can write but not everyone is a writer. No matter what kind of freelancer/solopreneur you are or how big or small your business is, chances are high that you do a fair bit of online writing for your freelance business.

(Image source: Fotolia)

At the heart of it, writing is communicating. And the secret to effective communication online is the presentation. Here are a few tips to help you write for an online audience. Once you get the hang of it, writing for the Web is easy.

Recommended Reading: Tips And Tricks For Writing Fast (And Professionally!)

There are just a few things you should keep at the back of your head when writing, things like:

1. formatting For Clarity

When writing for the Web, it’s considered an offense if the text is not formatted properly. After all reading long blocks of text is taxing. Nobody has the time to slow down and read. We all scan and skim online.

How to fix it:

Write short sentences for better impact. Try to limit your sentences to 15-20 words at most. Even one word sentences and paragraphs are acceptable online.

Next, break your text into shorter paragraphs. Three sentence paragraphs are the norm but 5 sentence paragraphs are acceptable too. Make sure you mix them up with long and short sentences though!

If your text requires a lot of items that you separate with a comma, break them into lists or bullet points. Use sub-headings to help guide the reader through your text. Sub-headings give readers the gist of the text at a glance. It helps them absorb more information faster.

2. Writing in passive voice

It’s so easy to write in passive voice that most writers don’t even realize they’re writing in passive voice. Unfortunately, writing in passive voice is murder for online writing. It doesn’t speak to your reader.

Here’s an example of a sentence in passive voice, "The freelancer was hired by us." Here’s how we say it in active voice, "We hired the freelancer."

Now imagine reading both these sentences in, let’s say, an email. Which one sounds better?

How to fix it:

I can give you the technical explanation of how the subject in the sentence performs the action expressed in the verb but that’s just confusing and hard to remember when writing. Writing in active voice comes down to creating that connection with your reader.

Instead of referring to yourself or your audience in third person, write to them in first person. Imagine yourself having a conversation with someone while writing.

3. Wrong sentence length

Most of the time, non-writers give themselves away by their sentence length. Online, readers scan. This means that if your sentences are too long to scan, your reader will stop reading and move on.

Any sentence over 25 words – and that’s a very generous word count, loses readers’ interest. Imagine reading one sentence after another that is too long to read in a single breath. Just thinking about it is tiring, right?

(Image source: Fotolia)

Let’s do a quick test. Go to any online content you’ve written and randomly check the word count of your sentences. If quite a few of those sentences are between 20-25 words, you have a problem.

How to fix it:

Fixing this is very easy. All you have to do is break your text down to smaller sentences. Explore one thought, point or idea per sentence.

Make sure the sentence length is between 16-20 words maximum for optimum reading experience. It’ll be even better if you can manage shorter sentences.

Make sure your sentence length varies. Too many short sentences and the text becomes abrupt. Too many long sentences and it becomes tedious to read. Mix up the length of your sentences for a better reading experience.

4. Not having flow

One of the most popular writing advice (probably of all time) is: The purpose of your first sentence is go get the reader to read the second sentence and so on.

While the quality of writing is very important for that point, the flow and structure of said writing matters a lot too.

If your writing is not structured and is displayed in a haphazard manner, your reader will wonder what point you’re trying to make.

How to fix it:

Organize your writing into a structure and make it flow logically. Start with the introduction, then move down, stating all your points before summarizing them all in the conclusion.

Format your writing for the Web. Use short paragraphs and only explore one idea in it, use sub-headings, lists, etc. to make it easier to read.

5. Not respecting your readers

When writing for an audience, it’s so important to respect your reader. Just as in a face-to-face conversation, we show our respect by being friendly, respectful, and not talking down to them.

To be honest, there’s a very fine line between respecting your readers and insulting them. Sometimes being overly helpful can backfire too.

(Image source: Fotolia)

Take online tutorials for example. If you simplify them too much and explain every single thing, you run the risk of undermining your readers’ skills. If you don’t, you risk alienating your readers who might not find your tutorial helpful enough.

How to fix it:

Define your ideal reader and write for him. Taking the tutorial example a little further, if your target reader is a beginner, detailed tutorials that explain every little thing might be the way to go. If your readers are well-versed, then simply pointing them in the right direction would be enough.

For tutorials and all other types of online writing, make sure your writing comes across as friendly and doesn’t make your reader feel like you’re talking down to them.

Using ‘You’ and ‘Your’ are great ways to make your readers feel like you’re talking specifically to them, but make sure you don’t get patronizing.

6. No call-to-action

Web writing is all about convincing your reader to take an action after reading your content. It could be something as simple as them leaving a comment or as complex as them trusting you enough to buy something from you.

If there’s no call-to-action in your writing, how will they know what you want them to do? Or why you’ve written the content?

How-to-fix it:

Include a call-to-action at the end of your content. If you’re writing a blog post, ask them share their thoughts, let you know if they agree or disagree or ask them to leave a comment outright.

Inviting readers to share your content through social media is a call-to-action too. If you want them to buy something, or sign up for a newsletter etc., let them know by adding a ‘Buy now’ or ‘Sign up here’ call-to-action.

7. Improving your Reach

At the heart of it, it’s as simple as formatting your text, writing in active voice, having a call-to-action and above all – respecting your reader. The good thing about writing is that once you know what to watch out for, it’s simple to improve.

Recommended Reading: Writing For The Web: Tips & Common Mistakes We Make

Start by practising the above in your emails. For other forms of online writing, write as you usually do but take the time to proofread and edit it with these tips in mind. After a few times, these mistakes will jump out at you as you write and before you know it, your writing would have improved!

In this post we are going to create something real and functional, and we are going to make use of the structural selector, box-sizing and CSS3 gradients from our previous lessons to create a custom theme for jQuery UI Accordion and sharpen our CSS skills.

Here is what the final result is going to look like:

Recommended Reading: How to Keep Your CSS3 Code Markup Slim

HTML Markup

To begin with, let’s put the following div with the id accordion that will contain the entire accordion’s content.

<div id="accordion">  	<!-- the content -->  </div>

We will have five random sections of web-related topics for the accordion’s content, such as HTML5, CSS3, Sass, Dreamweaver and jQuery. This is just an example; you can actually put anything for the content, as long as you keep the markup changed accordingly. Here is the markup based on these 5 topics.

  <h3><a href="#">HTML5</a></h3>  <div>  	<p>  		<strong>HTML5</strong> is a markup language for structuring and presenting content for the World Wide Web, and is a core technology of the Internet originally proposed by Opera Software. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997) and, as of July 2012, is still under development.  	</p>  </div>  <h3><a href="#">CSS3</a></h3>  <div>  	<p>  		Unlike CSS 2, which is a large single specification defining various features, CSS 3 is divided into several separate documents called "modules". Each module adds new capabilities or extends features defined in CSS 2, over preserving backward compatibility. <em><strong>Source:</strong> <a href="http://en.wikipedia.org/wiki/Css">WikiPedia.org</a></em>  	</p>  </div>  <h3><a href="#">Sass</a></h3>  <div>  	<p>  		<strong>Sass</strong> makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.  	</p>  </div>  <h3><a href="#">Dreamweaver</a></h3>  <div>  	<p>  		<strong>Adobe Dreamweaver</strong> (formerly Macromedia Dreamweaver) is a proprietary web development application originally created by Macromedia. It is now developed by Adobe Systems, which acquired Macromedia in 2005.  	</p>  </div>  <h3><a href="#">jQuery</a></h3>  <div>  	<p>  		<strong>jQuery</strong> is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 55% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.  	</p>  </div>

Each section consists of an h3 that will become the section’s header and a div that will wrap the section’s content entirely, and then we put them inside the accordion div that we’ve created before.

At this point, we just work on the HTML markup so nothing will happen yet when we view it in the browser.

jQuery UI Accordion

Our accordion will be based on the jQuery UI, so we need both the jQuery and jQuery UI libraries to be included in the head tag and we will link those files directly from the CDN, as follows.

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>  

Then, put the following script after them.

  $(function() {  	$("#accordion").accordion();  });  

Now, the accordion should already work. When you click on the header, the content will expand, and it will collapse when we click on another header.

However, our accordion still looks plain white, so let’s add some styles to it.

Basic Styles

First, we need to reset all the default element styles to maintain style consistency across different browsers with Normalize.css, and then we add a background color in the html tag. We also remove the default underline from the link as well as the outline when it is in active or focus state.

  html {  	height: 100%;  	background: #e3e3e0;  }  a {  	text-decoration: none;  }  :focus, :active {  	outline: 0;  }  

Further Reading: Reviewing Styles Priority

We will also apply border-box model for box-sizing in all elements, as follows:

  * {   	-moz-box-sizing: border-box;   	-webkit-box-sizing: border-box;   	box-sizing: border-box;  }  

Further Reading: CSS Box-sizing

Styling the Accordion

In this section we will start styling the accordion sections. First, we need to specify the accordion div container for 300px and center it.

  #accordion {  	width: 300px;  	margin: 50px auto;  }  

The accordion’s content will have a slightly white color while the text inside it will have a dark grey color #777, then we will also reduce the font size to 10pt.

  #accordion .ui-accordion-content {  	width: 100%;  	background-color: #f3f3f3;  	color: #777;  	font-size: 10pt;  	line-height: 16pt;  }  

The content is wrapped with a paragraph tag, this tag by default has a top and bottom margin, so here we will remove the margins and replace them with 20px of padding.

In case you did not wrap the content within the <p> tag or have other elements, rather than select specifically for p, we will select any direct elements from the .ui-accordion-content like this.

  #accordion .ui-accordion-content > * {  	margin: 0;  	padding: 20px;  }  

Also, if we have links in the content, we will turn the color to dark grey #777.

  #accordion .ui-accordion-content a {  	color: #777;  }  

Next, we will style the accordion header; the accordion header is an h3 tag which by default has a top and bottom margin as well, so we need to remove them both.

  #accordion .ui-accordion-header {  	background-color: #ccc;  	margin: 0px;  }  

We also need to put some styles to the anchor tag inside the header. We will turn the text on the anchor tag white, indent the text for 10px, and lastly reduce the font size to 12pt.

  #accordion .ui-accordion-header a {  	color: #fff;  	line-height: 42px;  	display: block;  	font-size: 12pt;  	width: 100%;  	text-indent: 10px;  }  

We will give each header a different color. This can be done by selecting each header with the structural selectors, and as for the first header, we can select it by using the :first-of-type;

  #accordion .ui-accordion-header:first-of-type {  	background-color: #fa9300;  	background-image: -moz-linear-gradient(top,  #fa9300 0%, #dc621e 100%); /* FF3.6+ */  	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fa9300), color-stop(100%,#dc621e)); /* Chrome,Safari4+ */  	background-image: -webkit-linear-gradient(top,  #fa9300 0%,#dc621e 100%); /* Chrome10+,Safari5.1+ */  	background-image: -o-linear-gradient(top,  #fa9300 0%,#dc621e 100%); /* Opera 11.10+ */  	background-image: -ms-linear-gradient(top,  #fa9300 0%,#dc621e 100%); /* IE10+ */  	background-image: linear-gradient(to bottom,  #fa9300 0%,#dc621e 100%); /* W3C */  	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9300', endColorstr='#dc621e',GradientType=0 ); /* IE6-9 */  }  

For the second to the fourth header we can select them using the :nth-of-type(n) selector, as follows;

  #accordion .ui-accordion-header:nth-of-type(2) {  	background-color: #389abe;  	background-image: -moz-linear-gradient(top,  #389abe 0%, #2a7b99 100%); /* FF3.6+ */  	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#389abe), color-stop(100%,#2a7b99)); /* Chrome,Safari4+ */  	background-image: -webkit-linear-gradient(top,  #389abe 0%,#2a7b99 100%); /* Chrome10+,Safari5.1+ */  	background-image: -o-linear-gradient(top,  #389abe 0%,#2a7b99 100%); /* Opera 11.10+ */  	background-image: -ms-linear-gradient(top,  #389abe 0%,#2a7b99 100%); /* IE10+ */  	background-image: linear-gradient(to bottom,  #389abe 0%,#2a7b99 100%); /* W3C */  	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#389abe', endColorstr='#2a7b99',GradientType=0 ); /* IE6-9 */  }  #accordion .ui-accordion-header:nth-of-type(3) {  	background-color: #f87aa0; /* Old browsers */  	background-image: -moz-linear-gradient(top, #f87aa0 0%, #c86585 100%); /* FF3.6+ */  	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f87aa0), color-stop(100%,#c86585)); /* Chrome,Safari4+ */  	background-image: -webkit-linear-gradient(top, #f87aa0 0%,#c86585 100%); /* Chrome10+,Safari5.1+ */  	background-image: -o-linear-gradient(top, #f87aa0 0%,#c86585 100%); /* Opera 11.10+ */  	background-image: -ms-linear-gradient(top,  #f87aa0 0%,#c86585 100%); /* IE10+ */  	background-image: linear-gradient(to bottom,  #f87aa0 0%,#c86585 100%); /* W3C */  	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f87aa0', endColorstr='#c86585',GradientType=0 ); /* IE6-9 */  }  #accordion .ui-accordion-header:nth-of-type(4) {  	background-color: #a8b700;  	background-image: -moz-linear-gradient(top,  #a8b700 0%, #82922a 100%);  	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8b700), color-stop(100%,#82922a)); /* Chrome,Safari4+ */  	background-image: -webkit-linear-gradient(top,  #a8b700 0%,#82922a 100%);   	background-image: -o-linear-gradient(top,  #a8b700 0%,#82922a 100%);  	background-image: -ms-linear-gradient(top,  #a8b700 0%,#82922a 100%);  	background-image: linear-gradient(to bottom,  #a8b700 0%,#82922a 100%);  	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8b700', endColorstr='#82922a',GradientType=0 ); /* IE6-9 */  }  

… for the fifth or in this case the last header, we can select it by using the :last-of-type;

  #accordion .ui-accordion-header:last-of-type {  	background-color: #b3bec4;  	background-image: -moz-linear-gradient(top,  #b3bec4 0%, #95a0a4 100%);  	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3bec4), color-stop(100%,#95a0a4));  	background-image: -webkit-linear-gradient(top,  #b3bec4 0%,#95a0a4 100%);  	background-image: -o-linear-gradient(top,  #b3bec4 0%,#95a0a4 100%);  	background-image: -ms-linear-gradient(top,  #b3bec4 0%,#95a0a4 100%);  	background-image: linear-gradient(to bottom,  #b3bec4 0%,#95a0a4 100%);  	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3bec4', endColorstr='#95a0a4',GradientType=0 ); /* IE6-9 */  }  

Alright, now let’s have a look at the result for a while.

It starts looking good, however, you may have realized that we did not explain everything about the structural selector in details, so if you are confused about how this type of selector works, we suggest you read our previous post first, CSS3 First-of-type, and come back afterward.

Last Details

Let’s put more details for our accordion, as one pixel can make a lot difference in the final result.

  #accordion .ui-accordion-header a {  	text-shadow: 1px 1px 0px rgba(0,0,0,0.2);  	text-shadow: 1px 1px 0px rgba(0,0,0,0.2);  	border-right: 1px solid rgba(0, 0, 0, .2);  	border-left: 1px solid rgba(0, 0, 0, .2);  	border-bottom: 1px solid rgba(0, 0, 0, .2);  	border-top: 1px solid rgba(250, 250, 250, .2);  }  

In the snippet above, we added border-right, border-left, border-bottom for one pixel with rgba color mode.

The borders color are actually black, but since we lower the intensity to 20%, the color became transparent and produced a sort of darker-color-version of the background.

We also did the same for the border-top, but we apply a white color instead of black to create a sort of highlighting effect.

However, if you take a look at the header closely, the top side just doesn’t look right; it seems like the header has no border at the top, so here we will do a trick to mimic the border-top as we are not able to add border-top twice at a single rule set.

Here is how we do it. We add an inner shadow with a negative value for the vertical length, but since we don’t need this inner shadow for the last section, we will just remove it.

We also add another inner shadow but this shadow will appear at the top, so it will look like the header’s shadow.

  #accordion .ui-accordion-content {  	box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, .4),  				inset 0px 1px 1px 0px rgba(0, 0, 0, .2);  }  #accordion .ui-accordion-content:last-of-type {  	box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, .2),  				inset 0px 0 0px 0px rgba(0, 0, 0, .5);  }  

Internet Explorer

Last but not least, let’s don’t forget our friend Internet Explorer. The :nth-of-type selector and its kind currently is not supported in IE6 to IE8, so should you want better compatibility in IE, you can use Mootools and Selectivizr.js.

Put the following two lines, before the jQuery and jQuery UI:

  <!--[if lte IE 8]>  <script type="text/javascript" src="js/mootools.js"></script>  <script type="text/javascript" src="js/selectivizr.js"></script>  <![endif]-->  

Finally, we can now see the live demo and download the source of our accordion from the links below.

• Demo
• Download Source

Final Words

We have come through all the steps. As you can see, each new selectors like the :nth-of-type and new properties like the box-sizing in CSS3 come with many benefits and solve many problems in web design.

In this tutorial we have used the :nth-of-type to select each accordion’s header without adding extra classes or using classes generated from the jQuery UI, we have also used box-sizing so that we have no worries calculating the proper width of the element. And since we have used CSS3 Gradients for the headers, we have fewer HTTP requests.

Thank you for reading this tutorial, I hope you enjoyed it.