Leo Dominguez

Example

News sites are great areas to introduce article tools such as voting, share with friend, commenting features, etc. These tools can create a sense of belonging, allow for interactivity, and encourage reader participation, which can ultimately increase readership. This demo will explore methods to add such tools unobtrusively while adhering to web standards.

Here's an example view of what a headlines page might look like. Select a headline to view an example article.

You can erase all recommendations, comments, etc. to test this demo fresh.

Code

The idea behind these tools is they should exist separately from the content of the article. Keeping them separate should add to the informative nature of such a site without interfering with the content one is trying to present.

The article tools in this example are simply hyperlinks in a paragraph. They could be anything, list items, images, even button elements if you can brave the styling. One reason I've decided to keep them as hyperlinks is because I wanted them to appear in more than one place, specifically at the beginning and end of the article. By making my tools something that doesn't need a unique identifier associated with them I can use them anywhere on the page.

<div class="articletools">
	<p><a class="recommendthissubmit" name="recommendthissubmit">Recommend [0]</a> | <a class="emailthissubmit" name="emailthissubmit">E-mail</a> | <a class="printthissubmit" name="printthissubmit">Print</a> | <a href="#comments" class="commentlink">Comments [0]</a></p>
</div> <!-- end of articletools -->

The recommend tool is pretty straightforward. Server side logic should be implemented to prevent spamming recommendations. In this demo the hyperlink is removed after a user recommends an article. The hidden form can then add a record to a recommend table in your database.

The e-mail tool on this example page uses the dreaded technique known as mailto! I personally can't stand these kinds of links since it assumes I have a default e-mail client configured (webmail users out of luck) so why did I use it here? E-mailing a page using a form and processing it server side is the ideal way to go for features like this, but that's a different demo all together. For the sake of simplicity in this demo, the e-mail links use Javascript to compose a message with the title of the page in the subject, and a link to the page in the body. You can also have the Javascript submit to a hidden form so you can keep track of how many times this article was e-mailed (at least when using the e-mail link). With this information you could display a "Most E-mailed Articles" list somewhere on your site. This mailto approach would probably be most useful in company intranets where workstations are more likely to have a default e-mail client configured.

Ah, the lovely print option. So many sites think they are being so helpful by providing similar links. While some users prefer to just use File > Print, others may find this type of link easier to use. The example on this page is as easy as it gets. Clicking on print with this example simply brings up the printer options and away you go. No preview page, no regeneration of the same content in a "printer-friendly" format. Ideally this should have already been taken care of with your use of a print stylesheet! If you print preview this page, you'll notice only the article content appears; the navigation, ads, and any other irrelevant information is simply not displayed! Many sites can benefit from such an approach, this eliminates the need to duplicate your efforts with so called "printer-friendly" versions of the exact same page.

The comments feature is where the users can work for you. What better way to drive traffic and readership up? The users do the work for you, by generating more relevant content with each post. For example purposes things are being kept simple. Obviously the <cite> information for each post would be replaced with whoever is logged in if your site requires membership. Or, if this resides on an company Intranet, information associated with say, an NTID may be listed. Editing, deleting, and moderating comments are also necessary to prevent things form potentially getting out of hand.

An aspect that may be overlooked in this demo is the use of unique identifiers for different elements, and the way the page sends the user to these elements. For example, the headlines page section has links to the actual article and the article's comments. If a user clicks on the comments link, they will be taken to the comments section of the article first. The comments section has an id of "comments", so the link simply needs to have a destination anchor specified. Each comment also has a unique id generated so users can see their comment immediately after they post it. This also allows people to link to the specific comment within the article.

<div id="comments">
	<h2>2 comments for "Headline-2"</h2>

	<div id="comment-18">
		<p>Go Packers!</p>
		<p><cite>Posted by 76.167.132.170 at <a href="#comment-18">12/15/2007 4:57:01 AM</a></cite></p>
	</div> <!-- end of comment -->

	<div id="comment-19">
		<p>Packers suck!</p>
		<p><cite>Posted by 76.167.132.170 at <a href="#comment-19">12/15/2007 4:57:16 AM</a></cite></p>
	</div> <!-- end of comment -->
</div> <!-- end of comments -->

If you look closely at the markup generated in this demo you will notice... no... inline... Javascript! It's a beautiful thing.

Credits

MailTo Syntax

New Line Code (HTML, Java, URL & Escape Sequence)

HTML mailto attribute - HTML tips

The Mythical Mailto:

learn web standards :: css guide - printing

A Print CSS Primer

famfamfam.com