For the past several weeks, Ohio.com, the online home of the Akron Beacon Journal, has positioned a button ad on the right side of its home page where Dr. James George, DDS promotes his dental services. (By the way, doesn’t this guy look like James Lipton?)

Ohio.com doesn’t use its medium, the Internet, in the right way for two reasons:

1. The ad is an annoying Flash animation that blocks you from clicking on any news story in the path of a blimp that zips across the page.
2. If the blimp entices you to click on George’s button, an external application fires up to read a linked pdf.

Usability expert Jakob Nielson notes in his Top 10 Mistakes in Web Design that

Users hate coming across a PDF file while browsing, because it breaks their flow. Even simple things like printing or saving documents are difficult because standard browser commands don’t work. Layouts are often optimized for a sheet of paper, which rarely matches the size of the user’s browser window. Bye-bye smooth scrolling. Hello tiny fonts.

Worst of all, PDF is an undifferentiated blob of content that’s hard to navigate.

PDF is great for printing and for distributing manuals and other big documents that need to be printed. Reserve it for this purpose and convert any information that needs to be browsed or read on the screen into real web pages.

Worse yet, on slower computers or Web connections, unexpected pdfs have the tendency to crash browsers and computers. Even if that doesn’t happen, pdfs really slow down the users’ experience as their computers manage an unexpected download. On faster machines, less savvy users are disorientated, not recognizing that they are actually in an external application. I’ve witnessed this many, many times.  All sorts of other usability issues pop up with pdfs as Nielson notes in another post.

Ok, so we’ve established that pdfs generally are not user-friendly. What should have Ohio.com done?

1. If there must be an annoying flying blimp, which I’m sure the client loved, render it in javascript or some less obtrusive form of Flash so users can navigate to surrounding stories without interference. You still grab the readers’ attention but don’t meddle with their ability to use your product. (Journalists should also contemplate the ethical dilemma the blimp creates by obtruding their content.)
2. Get off their lazy butts and create a landing page for Dr. George. What an awesome upsale! Or at least do it like George does on his Web site. Although surrounded by an ugly wrapper, George’s coupon page allows you to print gifs of his money savers by opening them in a pop-up window. (If I wanted to get picky, I would point out that pop-up blockers are standard with many modern browsers and are on by default. By making the coupons a pop-up, many users will not see them — at least not easily.)
3. At minimum warn users that an external application will open a pdf of the coupons.

Ohio.com’s ad salespeople are really doing Dr. George a disservice by linking to a usability-unfriendly pdf of his printed ad and deploying story-click-blocking animations. They are not alone. Many newspapers republish pdfs of their print ads online as a “service” to readers — but more accurately as a disservice to their advertisers. The online salesforce would do better to take advantage of the Web’s abilities rather than lazily posting a pdf of the newspaper ad.

Designing HTML e-mails is a challenging art and far worse than any struggles you’ll have trying to make a page look pretty in IE or Firefox.

Remember Web standards? Toss them. You’ll have much more luck coding at random — and I wish I were kidding. Designing engaging HTML e-mails is a great challenge.

Blocked images

Not only do different e-mail clients support various Web standards, many also block images by default. Users can choose to download or view the images, if they even notice their absence. Some clients show broken image icons; others do not. Not all show the images’ alt tags, either.

So don’t expect your pictures to be seen. You must design as if no one will see the e-mails’ supporting graphics. While you, Mr. Web Designer, may understand this reality, you will have to explain this extra carefully to the copywriters and graphic artists who are working on your e-mail project. The e-mail’s words are the verbal glue that keeps the message together.

How an upgrade can be a downgrade

Believe it or not, Outlook 2004 supports CSS better than 2007. Campaign Monitor, a Web e-mail marketing software company, outlines 11 e-mail clients’ handling of CSS. The 2007 edition even drops floats for block-level elements. Why?

Amazingly — unbelievably — 2007 switched from Internet Explorer HTML rendering to Word(!).

2004 features that 2007 drops

• Background-image and -repeat
• Display
• List-style-image, -position and -type
• Position
• Width
• Word-spacing

These words come to mind when I describe Outlook 2007. Microsoft took a huge step back with this edition.

Coding advice

So you want to create an HTML e-mail. My best advice:

• Put everything in tables if you want it to layout right
• Don’t use an external style sheet or style sheet in the head. Make everything in-line.
• Double up on your styles, and use old, deprecated HTML style tags to step in just in case your in-line CSS isn’t working. Learn to love font tags — they’re back!
• Test! Start in Outlook, then send test e-mails to Google, Yahoo, AOL, Hotmail and any other e-mail client your users are likely using.
• Markup your code in HTML comments so you know where your tables and sections start and end.
• Study Mail Chimp and Campaign Monitor‘s free e-mail templates.
• Support the E-Mail Standards project and look at its list of e-mail clients and their support of various Web standards.
• Despite the restrictions, e-mails can look pretty, assuming your images make it through.

The blogging software automatically inserts a rel=”nofollow” after hyperlinks in the comment section of its blogs. Google, Yahoo and other search engines do not follow links tagged this way. But what if you are legitimately including URLs in comments on WP blogs? Don’t your brilliant comments/links that contribute to the value of the Web deserve a little link love from search engines?

You can’t do much for the comments you submit on other sites, but you can help out your fellow bloggers by:

1. Manually editing the “nofollow” out of your blog’s WordPress source code, or
2. Using a plugin.

Which option should you use?

Manual edit

You are a control freak, aren’t you? Hacking your WP source code isn’t hard, but it can be tedious, especially as updates become available. This means keeping track of your changes and making sure they aren’t erased when you copy over the upgrade files.

I don’t do this to the WordPress sites I manage because it’s too much of a bother to keep track of the edits. Laziness certainly plays a role, too.

Online marketing guru Douglass Karr said he had troubles with the Do Follow plugin and developed his own hands-on solution. In his blog, he gives some tips on how to manually pluck the nofollows out of your comment section.

Plugins

Perishable Press provides a comprehensive list of dofollow plugins. I picked the DoFollow plugin due to its very simple options. Others allow you to specify how many comments a commenter must make, or what length of time must pass, before his or her nofollow is removed.

No spam

I already use WP-reCAPTCHA to prevent comment spam and have Akismet, which comes with WordPress, turned on. Between the two, and moderating my own comments, spam *knock on my wood desk* isn’t much of a problem. Because I “trust” the comments I approve on my own blog, I’m not worried about blog spam, either.

Why nofollow?

Philosophically, the automatic inclusion of nofollow in WP comments makes some sense, especially for bloggers who lack tech savvy or install a blog and forget about it. But moderating your comments and installing basic anti-spam plugins is all a blogger really needs to fight evil spam. Having nofollows around blog comments hurts legitimate efforts to illuminate discourse and drive link love to useful sites.

Discussions about nofollow continue. Here SEOmoz talks with Google’s Matt Cutts, who helped develop the tag in 2005.