A recent example involves a page-peeler advertisement for a PGA golf tournament.

Upon entering Cleveland.com, the ad automatically folds out, covering a major chunk of the front page, then, a few seconds later, folds back. If you choose to close it before it closes itself, you must click on the dark blue area at top, marked “click here to close.” Clicking the ad closed, however, does not really “close” it. When you move your mouse pointer over to the top corner to grab the scroll bar, the ad reopens, causing you to have to “click here to close” again, which really doesn’t close the ad — again.

In a partial sleep-induced coma one morning (where was my coffee?!), I must have repeated this process three or four times until I  realized that I had to maneuver around the folded-corner ad to grab my navigation bar and scroll down the page. What a terrible user experience!

Advertisers struggle to grab users’ attention online. Eye-tracking studies repeatedly show people ignore banner advertisements. Usability god Jakob Nielsen calls it “banner blindness.” So page-peeling ads on sites like the Cleveland.com one break out of the traditional, ignored spots for advertisement online to capture readers’ attention. Do they work? Or better yet: Are they worth it? Probably not.

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.

Name/URL: J. And Alex Get Married (the wedding is over and the site is offline)
Type of work: CSS, HTML, overall design
CMS: WordPress
Briefly: My very good friends are getting married soon, and they turned to me to create a “clearing house” of information for their special day. With this in mind, I worked to create a site that was very informational while looking elegant and reflecting the personalities of the bride and groom. The theme was an obvious choice — coastal Maine is gorgeous and presents a great color palette.

I can’t say what I did or didn’t do that caused my site to disappear from Google search, but it has been fixed.

Most other sites I’ve created hit Google’s search within days. Me.com, however, took eight months. I finally remedied this oversight when I took it off my project backburner late last month. Before finding the solution, I made a few half-hearted attempts to find out why I wasn’t being listed.

I first tried adding my site to Google’s Webmaster Tools. Webmaster Tools show users what Googlebot is encountering as it scans their Web sites and provides other useful information. I figured giving Google permission to collect all it wanted about my online affairs would help. It did not. However, after performing a keyword scan on my site, Google spit out a strange list of keywords that were definitely not mine.

I then skimmed my site for hidden bits of code or those weird words from the list, perhaps from an sql injection attack. WordPress blogs are particularly susceptible to these and other security problems. Because of this, I did a few things to harden my install but found nothing wrong.

Back to Google. Sitemaps Generator, a WordPress plugin, is an easy way to submit your sitemap to the three major search engines. After you create a new post, the plugin generates a new sitemap and notifies Google, Live and Yahoo about the changes via ping. Does it help your site achieve a higher ranking? The plugin’s maker says it doesn’t know but “it can help Google to index and crawl your page better which may result in a more complete index of your page.” Even with the extra effort, no luck.

Meanwhile, Yahoo and Live both indexed my site, but no Google. Searches for help, including a couple of SEO companies’ forums, didn’t help either.

Finally, a random search yielded a great suggestion: Submit my site to Google for reconsideration. The Official Google Webmaster blog outlines how to do it. A couple weeks after submitting my site, it appeared.

You can only imagine my excitement. Much like Navin Johnson (aka Steve Martin in “The Jerk”), I knew I was “somebody” again. I am somebody!

Navin R. Johnson: The new phone book’s here! The new phone book’s here!
Harry Hartounian: Boy, I wish I could get that excited about nothing.
Navin R. Johnson: Nothing? Are you kidding? Page 73 – Johnson, Navin R.! I’m somebody now! Millions of people look at this book everyday! This is the kind of spontaneous publicity – your name in print – that makes people. I’m in print! Things are going to start happening to me now.

I am the kind of builder who puts together a house by eyeing it. Blueprints? A schedule? Who needs ‘em! I can guess on how much wood, shingles and plaster I need. Be glad I’m not a builder.

And while this strategy has served me well over the past 27 years, I’m beginning to learn that for large projects, having a blueprint is not a bad idea.

As I write more and more of my own code and decipher the old writings of previous designers, the more and more I realize the value of a plan and organization.

One of the best bits of advice I can give any Web site creator is to be organized and think what another might encounter if he or she opened your coding and had to perform maintenance on it.

Don’t name your styles in a style sheet by the attributes that they describe. In other words, no classes called “orangetext” for text that’s supposed to be orange. What if you want to make that text blue? The best style classes and ids match their function, such as “.middle p,” which might be a way of styling the text of a middle paragraph. It really depends on the project and your needs.

MySpace, incidentally, is one of the most high-profile offenders for its CSS. Among the classes: .blacktext12, orangetext15, .btext and .redbtext.

Also, be sure to leave commented out text in your style sheets and coding so sections of code can be easily searched for or identified.

I’ve long looked at the CSS on my blog and thought I should clean it up. While organizing and trimming code will make my pages leaner and easier to maintain, I am afraid that erasing one class or attribute that I made many months ago will cause my design to unravel.

This is the problem with large Web sites that have been around longer than this blog. Multiple users have multiple ways of doing things. Rather than carefully scoping out the coding of another, these users go in and lay down their own conventions. This create redundancies and also bloats  the size of the coding. Good luck going in and trying to fix something. I think that’s why you’ll find so many !important‘s in large site style sheets.

This much advice I can offer. As for planning, I need to stop making it up as I go and actually outline the names, styles and organization I’ll need before I write something up. This will help me cut down on bloated coding, debugging and maintenance time.

I could never write one, but I know many of my high school teachers loved when we outlined what we were going to write in an essay before we wrote it. Again, this felt very unnatural to me. I write as I go along! An outline seems to destroy writing as a creative, exploratory process.

But, an outline saves a ton of time, and when project deadlines are tight, going into it with a plan might not hurt, even if it’s not that much fun.