Name/URL: Village of Sugarcreek sites
Type of work: CSS, HTML, overall design
CMS: WordPress
Briefly: Several organizations in Sugarcreek, Ohio — including the village, business association and two events — wanted a new look to help market themselves online. Working closely with the business association, I developed these sites. (One event, the Fabulous 50s Fling, will launch soon.)

Sugarcreek’s Swiss heritage is very important to residents and organizers in that area. Gingerbread-style architecture, mountain imagery and Swiss flags color the village’s real-life landscape. With this in mind, I developed an aesthetic that alludes to that history, including hints of the Old World architecture and mountains.

City workers are able to easily update council agendas and other information through the content management system. In addition, the mayor and business association president have blogs to provide timely information to residents and visitors.

Name/URL: Washington DC Area Vis Practice Moot
Type of work: CSS, HTML, overall design
CMS: Expression Engine
Briefly: A large DC area firm is sponsoring a practice court event for university students. The organizers sought a competition Web site to convey the basic facts of the event, including a sign up.

I created a basic private login area for the organizers to log in, check who has signed up and download a spreadsheet of the registrants.

In addition, I took an event with no logo or identity and created a simple, clean look. Details were confined to one page due to the simplicity they wished to express.

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.

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.