Associated Content Tip of the Day: Web Writing Ground Rules

Here’s today’s web writing tip/article. Web Writing: The Ground Rules that Make a Good Web Article
This is what makes a good web article be it for AC, Mashable, or even C-Net magazine.

Web content has rules. Let’s get right to this. The primary rules of web writing are:

Titles must be search-engine friendly
A well-constructed article title in cyberspace means the difference between 10 people stumbling on it and 10,000 people actively finding it. Good titles include key words and key phrases. They have low competition, but still use common terms that the average information seeker would type into a search engine. Don’t use Oryctolagus cuniculus when you can use “rabbit.”

This and at least five more rules for web articles. These are the rules. There are no exceptions. Give it a read.

Associated Content Officially Announces Daily Page View Updates

We enter a new epoch of the Associated Content page view beta era. Over the last two years, AC has steadily decreased the time between page view updates until it is now happening daily. Technically, it’s been happening daily for a couple of weeks now, but in a move very unlike AC, they waited to make the official announcement until they we’re sure they could pull it off.

Here is the message AC sent out Thursday, 5 March 2009:

Associated Content now updates every Content Producer’s estimated page views on a daily basis. This means you’ll have consistently up-to-date information about how your content is performing. This is something our Community has been requesting for a long time, and we’re thrilled to be able to offer it to you.

Keep in mind that these numbers are only estimations until we’ve had a chance to verify them. We verify all page views at the end of the month before processing Performance Payments, and adjust the numbers when necessary. If you have questions about changes made to your page views, please send a message to admin@associatedcontent.com. And if there is an issue that prevents page views from updating daily, we will resolve it as quickly as possible.

We hope you’ll enjoy receiving daily insight into the popularity of the content you publish on AC!

Now you can watch your article’s progress in near-real time. What will you do with this information? Make a graph? Put it in a spreadsheet? (You’d do that with the PV Report Converter, by the way.) Twitter it?

Honestly, I think it’s a nice feature/service. It shows that AC listened and responded to their CP community. I just don’t obsess over page view counts as much as some, I guess. I like that when I do check, I can be confident that I’m seeing yesterday’s numbers. I don’t have to look around for “date of last update” and do math in my head. That’s cool, but it doesn’t make a difference in what or when I’m paid for those views.

So, whether you’re a compulsive count checker or a slacker like me, we can both enjoy the new daily updates. Now if, after two years of having the page view program, AC could just stop calling it a beta, I’d be even happier.

Associated Content to Start User Verification

As is becoming standard practice on my sites, Associated Content will be offering, nay, insisting that you verify your account via phone or text message. Their blog post, User Verification Launching Next Week, says this will start next week. It also outlines some pretty stiff penalties for those who don’t verify their accounts. The stiffest is losing all your bonus money.

Don’t let this slide folks. Read the entire blog post and beat the rush.

Associated Content Tip of the Day 26 Feb 2000: Promotion Techniques

Carol Bengle Gilbert dropped a great resource today with her Tutorial: Guide to the Basics of Content Promotion. Not only are the contents of the article spot on, the construction of the article is a template for effective web writing. You could read just the first paragraph and walk away with important knowledge.

Content promotion starts with the first strike of the computer key. Write content that facilitates promotion, and it will promote itself. The guide will show you how to make sure your content is doing its own self-promotion as well as introduce you to some helpful content promotion
tools to give your article a boost.

You’ll have to click the link to read the rest of all her great tips. My recommendation is read it, bookmark it, and read it about once a month. This is the kind of advice that never gets old.

AC Back Peddles Like a One-legged Unicyclist

Yesterday, we were in a puzzlement trying to decipher Associated Contents criteria for their “Top 100 Producer’s of 2008″ list. The numbers weren’t adding up with the information we had. Today we have more details. AC says the list is for producers who had the highest page-views for articles published during calendar 2008. Now we have a higher confidence that the list is correct and we can say, “Congratulations,” to the winners.

These new facts also validate yesterday’s theory #3. Those who had #3 in the office pool can collect their winnings under the broken street lamp, the one near the big bushes, in the parking lot after work.

So today’s Footie^® award for “Plate spinning while riding a unicycle” goes to … Associated Content for their ability to explain their criteria after their awards were committed. Congratulations to AC on their Footie^® and congratulations to the recipients of AC’s Top 100 award.

For those who did not make the cut, good luck on the next awards cycle:

Just Kidding

HTML For Dummies: Lists with a Bullet

HTML lists come in several flavors. The two most useful are the ordered list and the unordered list. Both are easy to create with the <OL> and <UL> tags. Both types of lists use the same secondary tag, <LI>, to define the individual bullet points. One of the nice things about the ordered list is that if you need to add a bullet in the middle of the list, the numbers will update automatically because they are not really there until the file is opened in a browser. Here is how you put it all together.

This is my ordered list. The bullets will be numbers. <ol> <li>One is the loneliest number</li> <li>Two can be as lonely as one</li> <li>Three Dog Night was a good band</li> </ol>	This is my ordered list. The bullets will be numbers. One is the loneliest number Two can be as lonely as one Three Dog Night was a good band
This is my unordered list. The bullets will be dots. <ul> <li>In no particular order</li> <li>Here are the points</li> <li>I'd like to make</li> </ul>	This is my unordered list. The bullets will be dots. In no particular order Here are the points I’d like to make

 
 
You can even nest the list. This allows you to make lists within lists and each indent gets a new style of bullet. Two things to remember. The indentations here are only for your readability. The browser doesn’t care about returns and tabs. Also, if you nest your list, be very careful to close your tags correctly. Otherwise, the browser won’t understand what you’re trying to do. Here are two unordered lists inside an ordered list.

<ol> <li>The Simpsons</li> <ul> <li>Homer</li> <li>Marge</li> <li>Bart</li> <li>Lisa</li> <li>Maggie</li> </ul> <li>The Flintstones</li> <ul> <li>Fred</li> <li>Wilma</li> <li>Pebbles</li> </ul> </ol>

The Simpsons Homer Marge Bart Lisa Maggie The Flintstones Fred Wilma Pebbles

 
 
I hope your read the prequel
To truly not be frustrated by lists, you must understand how a site’s style sheet (CSS) can affect how your list is displayed. Take a minute and read “It’s out of control!” for a brief synopsis of style sheets.

A web master may have defined lists in their CSS to display a non-standard bullet. It could be any character. Sometimes it’s the &rsaquo; (›) character or the &rarr; (→) character. It can be any character the CSS says it will be, but the default (no definition) character is what everyone expects, a bullet dot (·).

A word of caution. Submitting lists to other sites is always a crap shoot. What looks good today can look like garbage in six months if the site decides to change their CSS.

For more about lists and to practice building your own lists go to W3School.

HTML For Dummies: De-Mystifying Line Breaks

To human eyes it all runs together, but to a browser, it’s very distinct

Let’s talk about line breaks and spacing. Most writing sites try to do some sort of text parsing when you submit an article. Their software scans your submission and tries to do some minimal formatting. The most common thing these sites do is look for double returns (you pressed “Enter” twice) and convert those into paragraph breaks. In HTML a paragraph is enclosed in the <p> tag.

You type:

          ... blah, blah, end of paragraph one

          start of paragraph two, blee, blee ...

After parsing the text, if the site translated into strict HTML, it looks like:

     <p>... blah, blah, end of paragraph one</p><p>start of paragraph two, blee, blee ...</p>

Notice that your double return was translated into </p><p> with corresponding open and close tags.

Not all sites will create strict HTML. Some will take advantage of the browser’s built-in correction capabilities. Proper HTML is “<p>text text text</p>”. However, if you just use <p> and never close it, most browsers will fill-in the closing </p> when they encounter another open-paragraph tag (<p>).

At AC, you can see what they did to your article if it’s still in the submission queue or if it’s a display-only submission, by putting it back in edit mode and looking at step two of the submission template. Here’s what my last article looked like when AC got done with it. I’ve added the bold to emphasize all the HTML tags. AC added the <p> and I supplied all the rest.

The best thing about Inauguration Day 2009 is … I went to work. The traffic lights all functioned. The other drivers were courteous. There were no blazing tire fires on the sides of the road. No barricades. Besides work matters, people in the office discussed their holiday weekend and their favorite television shows. And that’s how it should be.<p>The best part about Inauguration Day is seeing a parade of High School bands instead of tanks in the streets of Washington, D.C. It does the soul good to know the people standing on the sidewalks are waving flags and not throwing Molotov cocktails. The best thing about Inauguration Day is it was a peaceful transition of power.<p>Now, I don’t want to detract from those who made the pilgrimage to D.C. to participate in the festivities. Attending the event is a perfectly acceptable choice. Some feel it was a historic event. Some just happened to be near by. Others have been unable to orgasm in the intervening months since election night and needed some release. Who am I to judge? That’s the great thing about Inauguration Day. We can all celebrate in our own, peaceful way.<p>Even now, in the twenty-first century, dictatorships and despots still rule much of our globe. Just yesterday, Taliban <strike>wackjobs</strike> fundamentalist bombed five schools in Pakistan¹ because they think educating girls is a <strike>sin</strike> crime. A peaceful transition of government is almost something rare. One that is mandated by the will of the populous through their uninhibited vote, is something rarer still.<p>Whether you relished Obama’s inauguration speech or took snide pot-shots at it, is unimportant. That you had the freedom to do either or neither is. I had the freedom to work in peace and safety. I didn’t have to take up arms. I didn’t have to hide my family in the basement. I didn’t have to stare down tanks and shoot guerrillas. My most difficult decision was where to have lunch because all the restaurants were open. I chose a burger at my desk so I could listen to the speech on my computer. Then I went back to my daily routine, safe in the knowledge that bombs would not fall on the building. Not because of the speech, but because of our Constitution, every citizen who defends it, and those who participate in the process.<p>Some of the world hates the United States of America, but most of the world just envies the fact that we can sleep in peace tonight. When you climb into bed tonight, think about those poor Canadian children in war-torn Qu&eacute;bec² who are going to bed hungry and frightened. The best part about Inauguration Day 2009 is … this isn’t Canada.<p>¹<a href=”http://www.google.com/hostednews/ap/article/ALeqM5hkiMxbHNH0BqgpWA2ZG6VD6wVTmAD95Q9ULG0″>School bombings in Pakistan, AP</a><br>²Qu&eacute;bec is not really war-torn, it just looks that way to those snobs in Ontario.

It’s very difficult for a human to read that continuous block, but a browser has no trouble seeing all the tags and spacing the text accordingly. You can see the final output & format of the article on the AC site. Notice how the <p> tags tell your browser to display a blank line between the paragraphs? That’s the magic of HTML. If you ever need to edit an article, putting it back with the tags intact will save you a lot of heartburn.

Deconstruction
A concrete example is always worth a thousands words. You have the HTML of the article above and the final results at AC to compare. We’ve discuss here what the <p> tag is doing. Let’s take a look at the other tags. Most of these tags were presented in the first five articles of this series.

Here I used the <strike> tag to make it look like there are leftover edits in the article:
<strike>wackjobs</strike> = wackjobs
<strike>sin</strike> = sin

Here is a footnote that leads to the AP article about the school bombings:
schools in Pakistan¹ = schools in Pakistan¹

Here is the actual footnote at the end of the article:
<a href=”http://www.google.com/hostednews/ap/article/ALeqM5hkiMxbHNH0BqgpWA2ZG6VD6wVTmAD95Q9ULG0″>School bombings in Pakistan, AP</a> = School bombings in Pakistan, AP

Here is a combination of the French é character and 2^nd footnote:
Qu&eacute;bec² = Québec²

And this last one allowed me to control the single spacing between the footnotes:
</a><br><sup> =
Well it doesn’t equal anything by itself, but the <br> caused the browser to make a one line return so the superscript for 2 starts on a new line.

Find and replace
This brings me back to a point I made in this installment. Invest in a decent HTML and/or text editor. It is so easy to mark-up your text with a decent piece of software. It’s also just as easy to unmark the same text. A global find & replace from tags to text or the reverse will change your unreadable HTML into something legible. Another trick is to save your HTML document and open it in your browser (File > Open File). You can then see exactly how it will look on the web. Without a decent find & replace function, I would have spent much more time writing today’s article. I was able to grab the HTML of the AC article, paste it here, and do a global replacement on the < and > characters to their equivalent escape characters so you could read the HTML and not have it translated by your browser.

My momma didn’t raise no fool.

More resources @ W3schools

HTML For Dummies: It’s Out Of Control!

Let’s remember that this series of “HTML for Dummies…” is in the context of submitting articles to other sites. This is not about creating your own web site where you have total control. When you submit articles to writing sites like Associated Content, you have to play by their rules and some things are just our of your hands. How your article is presented is the big one. I’m not talking about all the dressings around the article like advertisements and links. I mean the little things like choice of font, type size, and indents. Those are controlled by the sites overriding Cascading Style Sheet (CSS).

What is a CSS?
A cascading style sheet is a special block of code that contains the definitions for specific attributes of a web page. Huh? I see you’re nonplussed by that definition. OK. What does that mean to you? It means some things are just out of your hands.

Good web masters want their sites to have a consistent look and feel. The best way to do this is with a CSS. There they can define to exacting detail what everything should look like. If they want all the article titles to be 18pt/bold/italics, they define that in the CSS and there is nothing we writers can do to change it. We don’t have access to the CSS on other people’s sites. We just have to live with it.

The CSS even controls things like how hyperlinks are displayed. For example, here at WordPress, if I include a HREF anchor (like in the next paragraph), it shows up as bold, blue text. Another site might display it as underlined, red text. It’s all up to the CSS.

So why do you care?
You care because knowing this, you can avoid futile attempts and useless tagging. Don’t even bother trying to use the <font> tag in your submissions. Most sites will strip it out because they control the font definitions from the CSS. Remember what I said in yesterday’s installment, keep it simple.

Next
Next time, I’ll de-mystify line breaks and paragraph markings so you can give your spacing a polished look.

HTML For Dummies: Know Your Limitations

I hope y’all are enjoying the series of articles, “HTML For Dummies…” I’ve tried to keep to the basics. After all, this series is not meant to be a programmer’s guide to everything HTML. My intent is to provide some basic knowledge that any writer can apply. I’m writing this series because I strongly believe that anyone who submits articles to the many writing sites (e.g. Associated Content, Constant Content, Demand Studios, a blog) should have the right tool for the job. That tool is the hypertext mark-up language, HTML.

Every site is different. And therein lies the true power of formatting your articles with HTML. Each site may have its own funky editor, but 99% of them let you circumvent their editor and submit HTML. Imagine the convenience of submitting the same article to all the sites you write for without having to tweak each submission. Copy once. Paste many times. Done. But, as I said, each site is different so it’s important to keep a few things in mind.

Keep it Simple
There is much, much more to a true HTML document than just the basic formatting tricks I’ve been writing about. A full-blown HTML document is pretty daunting to the non-programmer. You can see for yourself by selecting “View › Source” from your browser’s menu.

It is vital to understand that your article will become a part of a larger HTML document. Once you fill out a site’s submission form, they are going to add all sorts of other HTML around yours to produce the final product. You can concentrate on your writing and a few simple formatting tags. They have to worry with all the details needed to flesh out the page to their standards. This takes a lot of pressure off you, but imposes some restrictions, too.

The best thing you can do is keep to the basics. If you don’t, you run the risk of interfering with the site’s added HTML. It’s not unusual for an unclosed tag in your article’s body to confuse a browser so that it can’t display your article correctly. I’ve seen cases where a simple greater-than sign (>) caused all the text following it to disappear completely.

Know the Site
It may take some trial and error to figure out the nuances of a particular site, but almost all are going to accept the simple bold, italics, underline, superscript, subscript, etc. tags. Most are not going accept the more difficult div, form, input, etc. tags.

If you plan to do anything above and beyond, you should test it first. If the site allows you to remove your submission, you can always post a test document. If the site does not allow you to remove content, you should contact their support before attempting something like a table or image inset.

Got Software?
Though I know everyone has their favorite writing software like MS Word or Google Docs, it makes a lot of sense to get a decent text editor. Text editors like TextPad and UltraEdit were written with programmers in mind, but they have some really nice features that make adding HTML to your article very simple.

First, they color code everything so you won’t get stuck with your tag open. Second, they come with sidebars that add tags with just a double-click. They even spell check. They don’t replace Word for things like grammar check, but they are worth a nominal investment if the destination for your writing is the web.

Next
Next time, we’ll discuss some of the pesky things that are out of our control like cascading style sheets. Happy writing!

HTML For Dummies How to Make a Footnote, Superscript and Hard Spaces

Creating superscripts in HTML is easy with a simple combination of the SUP tag and a few basic codes. If you missed the article on HTML tag basics, read up on them now: Part One of HTML for Dummies, W3Schools Getting Started.

The SUP tag
The SUP tag tells your browser to put the enclosed characters in superscript. It very easy to apply. Simply put the tag around the text you want in superscript. Here are a few examples.

• Basic footnote:  …end of my sentence.¹ = …end of my sentence.¹
• Dagger note:      …more thoughts.^&dagger; = …more thoughts.^†
• Double Dagger note:  …running out.^&Dagger; = …running out.^‡

Let’s stop for a moment and look at the basic construction. You open the superscript tag with ^{and close it with the corresponding}. This is no different than any other HTML tag. Anything between the two will render in superscript. It doesn’t have to be just a simple number. You can put other HTML codes in superscript just as easily. This is handy when you need to label something with a trademark or copyright symbol. As with the daggers above, HTML provides an easy way to type the escape code for common special characters.

• Trademark:   BrandName^TM = BrandName^TM
• Copyright:    Protected Work^&copy; = Protected Work^©
• Registered:   I am registered^&reg; = I am registered^®

Spaces
The space is something we seldom think about, but HTML has a different way of looking at spaces. I’ve seen long forum discussion over the need for two spaces at the end of a sentence. Some line up on the side of “It’s not proper,” and bemoan others for not using two spaces. What these people don’t realize is, in the world of HTML two spaces equal one space. In fact, any number of contiguous spaces equals one space. This includes the TAB and even the RETURN character.

A browser will collapses multiple white-space characters to a single space when the document is rendered for display. There are two ways around this and both are tricky and troublesome. You will not want to try this just to force two spaces at the end of each sentence. It would be laborious and unreadable in its native state.

Forcing a space
HTML has a special escape character that tells the browser, “This is a space and don’t your forget it.” It’s called the non-breaking space character and the code for it is &nbsp;. With the non-breaking space you can force any number of hard spaces into your document. For example, “I want 5 spaces between the dashes – &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; – of this sentence,” yields “I want 5 spaces between the dashes –       – of this sentence.” If I had just pressed my space bar five times, the sentence would look like, “I want 5 spaces between the dashes – – of this sentence.” I really did press the space bar five times, but your browser ignored my feeble attempts and collapsed the five spaces to one.

The non-breaking space is fine for what it’s worth, but you’ll have a difficult time making things line up properly if that is your intent. That’s because fonts come in two flavors: fixed width and variable width. Most browsers default to a variable-width font like Times Roman. This means the number of spaces between letters can vary depending on the surrounding letters’ widths. Fixed-width fonts line up nicely because all the letters take up the same number of pixels. So how can you override the browser’s default?

The PRE tag
PRE is a HTML tag that tells the browser that the enclosed it “pre-formatted” text. Your browser then usually chooses a fixed-width font like Courier to display the enclosed. A word of caution is in order. The PRE tag is still subject to the web site’s style sheet (CSS) and it may display in a way that makes you sad…in your pants. For example:

This block is enclosed in a PRE tag.  WordPress' CSS has rendered it in tee-tiny Courier letters
that are almost impossible to read.  I didn't do this.  The CSS did.  However, I can control
the line returns.  I pressed "Enter" at the end of "letters" and "control" to make the text wrap.

Since I would have to spend about an hour rewriting my own style sheet to replace WordPress’, you’ll just have to use your zoom feature to read the PRE text above. Not all sites will render PRE tags like the above example. You’ll just have to experiment with the site to see how they do it. The PRE tag is good if you want to display something like code snippets or other text where the exact formatting of spaces and returns is important. It’s handy for technical writing, but not something the average writer really wants to use.