David's blog: Web design (bad)

Wednesday, September 4th, 2013

Complaining about how a company provides electronic statements is definitely a first world problem. However, today I went to get my most recent statement from Wright-Patt Credit Union, and I was reminded of a petty annoyance with their website.

I’m not picking on WPCU because I dislike them. On the contrary, I appreciate WPCU. I have a car loan with them, at a much better rate than that offered by the bank my car dealer recommended. And WPCU pays me much better interest on my HSA than I got when it was at BNY Mellon.

However, here’s something that can be improved on WPCU’s website related to getting statements:

To the left you can see WPCU’s page for choosing which statement you want to download. The best thing about it is that there’s a link for the current statement, which is the one people will most often want. That link’s not very prominent, though, and there’s a problem with it which I’ll explain below.

If you want a statement other than the most current one, or if you overlook the link for the current statement, you have to click on a dropdown to specify which month you want a statement for.

The problem with the drop down is that it lets you choose months for which there aren’t any statements available. For example, today is September 4th, but WPCU’s dropdown lets me ask for a statement for October, November or December of this year, wasting processing time on their end and wasting my time, if I would ask for one of those non-existent statements, with an error message.

A bigger annoyance with WPCU’s system for electronic statements is that whether I click on the link for the most current statement or I navigate the dropdowns to choose another statement, I also have to navigate yet another screen and click on another link (see the image to the right) to say that yes, I do in fact want to view the statement I’ve just asked for.

What’s that all about?

I told you what statement I want. Just give it to me. Do not show me another web page and do not make me click another link. What purpose does that serve?

If WPCU wants to improve the statement section of their website, they can take a tip from the website of another financial institution I use, Charles Schwab:

When you go to the statement selection page on Charles Schwab’s website, they don’t make you use dropdowns to select a statement. The most recent statements available are already listed with links to view them.

And, most importantly, if you click on one of those links, the PDF is available without any further clicking for viewing or saving. No need for an intermediary page to say that yes, you really do want to see the statement you just chose.

First world problem? Yes. Something I wish WPCU would fix? Also yes.

Wednesday, July 31st, 2013

Cleaning up a cluttered web page

Today’s post falls under both the tag Web design (bad) and the tag Computer tips. I’m going to show you a web site that has rather cluttered pages and tell you what you can do to fix it.

I’m going to pick on Andy Towle, whose website Towleroad (“a site with homosexual tendencies”) is a popular website for gay news. I’m picking on Towleroad not because I dislike it—indeed, I find it invaluable and visit it often—but
Some things I found annoying about
Towleroad’s design because I do visit it often enough that some things about it have finally annoyed me so much I decided to fix them.

What things? Let’s look at the Towleroad article I opened today that pushed me over the edge, “Gay Priest Addresses Pope’s and Cardinal Dolan’s Remarks on Gays.” You can see a screenshot of the page to the right.

The floating icons for Facebook and email and Twitter and more, the ones on the left side directly over the text of the article, were what pushed me over the edge. Yes, Towle earns his living as a blogger, and encouraging his readers to share his articles means more readers and potentially more money. I get why he wants to encourage sharing. I do not get, however, why he wants to cover up part of what he’s written.

Perhaps Towle is unaware that the sharing icons on his site cover his article text. If you open one of his site’s pages in a wider window, there’s a bigger left margin and the sharing icons just float there. But web designers have to be aware that not everyone has huge monitors, that not everyone maximizes their web browsers’ windows, and that some people zoom in to increase the font size. Your site should accommodate all those possibilities.

However, even if the sharing icons didn’t obscure the article, they’re still visually annoying, at least to me. These sharing icons remain visible even as you scroll down the page. “Please share!” they shout. “It’s more important that you share this article than that you read it.” Scroll down far enough and a “Share to Facebook” box pops up in the lower right corner (you can add this annoying feature to your site by visiting addthis.com). Okay, okay, I get it—Towle wants me to share his articles.

Sorry, but I don’t want to see these annoying share buttons, and luckily I have the tools to make Towleroad do what I want. Those tools are Customize Your Web and Adblock Plus. (Another tool about which I’ve written before is Greasemonkey, but I didn’t use Greasemonkey to fix Towleroad.)

Customize Your Web is an addon for Firefox that lets you do stuff such as removing elements from web pages and changing elements’ appearance as well as automating forms. All of that can be done with Greasemonkey, but Customize Your Web doesn’t require any knowledge of Javascript, so sometimes it’s a better choice.

A frequent task I use Customize Your Web for is entering my name and password on sites I visit frequently. Yes, you can tell your web browser to remember your login and password, but some banking sites disapprove of that so much they take steps to prevent your browser from doing that. (The design of banking websites could be another “Web design (bad)” blog post.)

Right-click on an offending element and choose “Remove” For Towleroad, however, I just wanted to hide those annoying share buttons, and while I was at it, also hide some other annoying elements including the Facebook thumbs up at the bottom—which also obscures article text, the extra share buttons at the top—which don’t obscure anything but are ugly, and the scrolling news widget—which distracts me—I just want to read the damned article!

To invoke Customize Your Web so that you can choose elements to be removed, press <F10>. An “edit script” window will appear, and when you move your mouse over elements on the web page, the elements will be highlighted as you pass over them. Hover over an offending item, right-click, and choose “Remove.” Another dialog box will appear; check ”Target is optional in page” What a Customize Your Web script looks like
My Customize Your Web script for Towleroad (if you don’t do this and the element is ever missing when the page loads, the script will fail), and then click “OK.” Repeat for each element you want to remove.

After you have done this for all the offending elements, you’ll have a list of actions in the script editor. But wait! Before you click “Save,” there are a few things you need to do first. One is to double-click on the page’s URL in the “URL Patterns” box, and edit the URL so that instead of referring to a specific page, it refers to all pages on the domain—in this example, we want “http://www.towleroad.com/*”. (For some tasks such as automating forms, you do want to leave it referring to a specific URL.) Then, click on “Settings” and change “Time when script should run” to “After page is fully loaded”—elements are sometimes added to pages after the DOM content is loaded and thus cannot be removed until the entire page is shown.

When you click “Save,” Customize Your Web closes the script and then reloads the page you were on, running its script after the page loads. If you did everything right, all the offending elements will show as the page loads and disappear afterwards.

Unfortunately I had two minor problems with Towleroad which Customize Your Web could not fix. The first was that it wasn’t removing the scrolling news feed. If I’d played around some more I might have gotten removing that to work. The second problem was that Customize Your Web wouldn’t remove the Facebook “Recommend” button because that came from an IFRAME from another site (http://www.facebook.com/plugins/recommendations_bar.php).

Click on the “Block” tab above any Flash element to have Adblock Plus remove it
Click on “Block” above a Flash element to have Adblock Plus remove it However, Adblock Plus, the second tool I mentioned above, handily resolved both these problems. If you have Adblock Plus installed, when a flash element shows up on your page, a convenient “Block…” tab appears above it; click on it and you can have Adblock Plus block that Flash element. Then, to remove the “Recommend” button I right-clicked on its IFRAME and choose “Adblock Plus: block iframe” from the context menu.

What Towleroad looks like
after I removed annoying elements To the left you can see what Towleroad looks like now that I’ve removed all the elements that annoyed me.

No sharing buttons or thumbs up icons obscuring article text. No scrolling news widget updating as I read the article.

Just a few of the very many external sites Towleroad calls for scripts There was something about Towleroad that I could not fix, however, and that was the site’s load time. Load a page on Towleroad and wait as the page contacts a dozen external sites for various items. “Waiting for m.addthisedge.com…” “Connecting to static.crowdscience.com…” “Connecting to s16.sitemeter.com…” Towleroad loads scripts from crowdscience.com, scorecardresearch.com, chartbeat.com, crwdcntrl.net, popfeedback.com, cloudfront.net, onswipe.com, addthis.com, googletagmanager.com, blogads.com, widgetserver.com, technorati.com, quantserve.com, sitemeter.com, reinvigorate.net, and visualdna.com. Oh my fucking God, no wonder Towleroad pages take so long to load!

Now don’t get me wrong—I value Towleroad as a great source for LGBT news, and I don’t begrudge Andy Towle’s doing what he thinks is necessary to earn a living.

Well I guess I begrudge it enough that I do have Adblock Plus installed, so you could argue that I’m stealing from Towle by viewing his pages without ads. However, the way I usually read Towleroad is via ~~Google Reader~~ Feedly, visiting the actual website only if I want to see other readers’ comments. Towleroad includes the full text of their articles in their RSS feed, so if they really minded my not seeing their ads, they would either close their RSS feed or change it, as other sites do, to include previews only, requiring readers instead to click through to the website to read full articles (and to see ads).

Nonetheless it’s Andy Towle’s site and he can do what he wants. Yet he might want to consider whether he’s balancing the interests of his readers (avoiding annoying tactics, having quickly loading pages) enough with the necessary interests of earning money (getting readers to share articles to increase readership, using external tools for sharing and tracking). A difficult balance, I know, one that fortunately I don’t have to attempt.

Thursday, May 2nd, 2013

Annoying popups on NationalMemo.com

A friend posted a link to an article on NationalMemo.com. I went ahead and clicked the link because I was interested in the article, even though I absolutely hate NationalMemo.com’s website.

If you go to NationalMemo.com, you’ll encounter one of their annoying popups (click to embiggen) Why do I hate NationalMemo.com? Because of their stupid popups.

I might be more inclined to sign one of National Memo’s petitions if there were a link to it in a box next to the article, but by completely obscuring the web page, I am not only disinclined to sign their petition but I’m also disinclined to even visit their poorly thought out website at all.

And I’m not the only person who thinks this.

If you’re not a web developer, or if you think National Memo’s just not worth the bother, the solution is just that—no longer clicking on links going to NationalMemo.com.

However, tools are available to make NationalMemo.com stop its rude behavior, and doing so really doesn’t take long.

What do you need? Greasemonkey, an add-on for Mozilla Firefox that allows you to add your own bits of JavaScript to any web page you visit, in order to change its appearance or behavior.

If you use Google Chrome, you can try TamperMonkey; it’s supposed to be Greasemonkey UserScript-compatible, but I’ve not tried it myself. If you use Microsoft IE, you can try IE7Pro, but why are you using IE? (Yes, my NationalMemo.com screenshot was done with IE, but that’s because I have Adblock Plus (Firefox) / Adblock Plus (Chrome) installed in the browsers I regularly use, and so the popup National Memo tries to force on me is just blank in those browsers.)

Then you just need to create a quick UserScript for NationalMemo.com. Looking at the source of a NationalMemo.com page, you can see that they have a JavaScript function named lbx_show_lightbox_custom() that displays their popup (which they call a “lightbox”). With the power of Greasemonkey, we can replace NationalMemo.com’s lbx_show_lightbox_custom() function and no longer see their stupid popup.

To figure out how to do this, I googled around some for replacing javascript using Greasemonkey, and I found this very helpful page by Squak Mountain Consulting that explained how to do exactly what I wanted.

Using Squak’s example, I came up with the following UserScript:

// ==UserScript==
// @name DisableNationalMemo_lightbox
// @namespace http://www.davidlauri.com/
// @description Turn off the annoying lightbox that National Memo displays
// @include http://www.nationalmemo.com/*
// @version 1
// ==/UserScript==

// set up the javascript function we want to replace
var scriptCode = new Array();
scriptCode.push('function lbx_show_lightbox_custom(){');
scriptCode.push(' return false;');
scriptCode.push('}');

// put the script in a new script element into the DOM
var script = document.createElement('script'); // create the script element
script.innerHTML = scriptCode.join('\n'); // add the script code to it
scriptCode.length = 0; // recover the memory we used to build the script

// find the first <head> tag on the page and then add the new script just below it
document.getElementsByTagName('head')[0].appendChild(script);

A hint for testing this script on NationalMemo.com is that you should find and delete your NationalMemo.com cookies. They only do their stupid popup once (per day? per week? I don’t know), so if you visit their site first and then set up the UserScript, you won’t actually know if it’s their site deciding that you’ve already seen their stupid popup or if it’s your UserScript disabling their lightbox function.

Was it really worth the time it took to deal with NationalMemo.com’s stupid popup? Probably not, but I had fun finding a solution.

Wednesday, May 23rd, 2012

How to improve a government ~~form~~ website (part 5)

The Greene County Recorder website (click to embiggen) is a marvel of intriguing web design Today’s government form that can be improved (see earlier improvable government forms) is actually not a form but rather a website, specifically the Greene County Recorder website, a site so rife with intriguing design choices that one might hardly know where to begin.

The document search page on the Greene County Recorder website, before and after
a tweak with Greasemonkey:

Before (with grey labels):

(click to embiggen)

After (with bold green ones):

(click to embiggen)

However, I do know where to begin, namely with the Document Search page. A co-worker came to me because he had a hard time seeing some of the result page’s labels, specifically those that are in light grey on a white background. This intriguing design choice isn’t just a matter of taste; it’s really rather difficult to read light grey on white.

Luckily the Interwebs offer us the ability to override web designers’s choices which we find “intriguing” (or with which we simply disagree). The tool that comes to mind for this job is Greasemonkey, an add-on originally for Firefox that allows web surfers to install or write scripts that change the look or behavior of a web page. Do you prefer Google Chrome? Greasemonkey user scripts are supported directly in Chrome. (Do you prefer IE? Why?! If you insist you can try this.)

You can find lots of Greasemonkey user scripts already written for popular websites, but I didn’t bother trying to find one for the Greene County Recorder website because, already having extensive experience with Javascript and CSS, I have no trouble rolling my own Greasemonkey scripts. This blog post is not intended to cover that topic fully (Google is your friend if you want to learn how) but rather is just to report on what I did about the Greene County Recorder website’s stupid choice of grey text on white.

An easy option for using Greasemonkey to change a web page’s appearance is to inject some custom CSS that overrides how certain elements appear. Luckily one smart thing the Greene County Recorder’s web designer did was to enclose each of the offensive grey labels in a SPAN tag tied to a particular CSS class: <span class="style1">. So all we have to do is change the CSS applied to the “style1” class. (Actually after I first tested this, I realized there was also one DIV with the “style1” class.)

So here’s a user script that changes all the style1 class SPANs and DIVs from light grey to bold and green (honoring the Greene County Recorder’s web designer’s overall choice of colors):

// ==UserScript==
// @name Fix grey labels on Greene County Recorder website
// @namespace http://www.davidlauri.com
// @description Change formatting of style1 class SPANs on Greene County Recorder website
// @include https://www.co.greene.oh.us/recorders/*
// @include https://co.greene.oh.us/recorders/*
// ==/UserScript==

(function () {
//EDIT ME

var newstyle = "span.style1, div.style1 { color: #006400 ! important; font-weight: 900 ! important; font-size: 105% ! important; } ";

//END EDIT ME

var ss = document.createElement("style");
var t = document.createTextNode(newstyle);

var root = (document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]);
ss.appendChild(t);
root.appendChild(ss);
})();

If you too use the Greene County Recorder website and dislike their grey labels, you can install this Greasemonkey user script on your computer. If you”d prefer the grey labels be some color other than green or formatted in some other way, you can copy the script above and modify the line between the lines that say “EDIT ME” and “END EDIT ME.”

Wednesday, April 6th, 2011

Another pretty but user-unfriendly restaurant website

Joya's Bistro logo

This box is about the same size as the functional area of Joya Bistro’s website. What if each of my blog entries were constrained to an area this small?

Remember how a couple weeks ago I blogged about how unfriendly the Meadowlark Restaurant website was because it crammed its functional information into a small box with a scrollbar? Well today I read about a new restaurant and their new website does the same thing, meriting another entry in my blog’s Web design (bad) category.

Today’s culprit? Joya’s Bistro, whose site you can see either in the screenshot below (which you can click to zoom) or at the actual website:

The screenshot, again from my admittedly big ass 1920x1200 screen, like the Meadowlark website, has a helluva lot of wasted space. The main content, again like the Meadowlark website, is divided into a pretty picture and some text, and the portion of the Joya website reserved for the functional information—whether that information is their menu or their events—is only about 350x300 pixels, small enough that you have to scroll in order to see all the text.

Two things make Joya Bistro’s website even worse than that of the Meadowlark:

One, it’s Flash-based. Why on earth should somebody need Adobe Flash to visit a restaurant’s website? Because someone visiting a restaurant’s website wants to listen to music instead of reading the restaurant’s menu?!

Two, the menu doesn’t even include prices. Go to Meadowlark’s website and you can find out how their food costs, even if you do have to scroll a bit; don’t bother going to Joya’s website if you care about finding out their prices.

Update 4/7/11: Are you a restaurant owner who wants a pretty website in which you can cram the important stuff into a small box with a scrollbar? Contact papadokComputing, a Dayton-based company offering “premium IT Consulting and Solutions for both the home and business environment.” To visit Papadok’s website is to understand how Joya’s website came to be.

Update 5/2/13: Sadly, Joya’s Bistro closed in March 2012.

I thought for a while that papadokComputing might also be out of business because my link to their site, http://papadok.com (no “www”), no longer works, redirecting to the non-existent http://www.papdok.com site. http://www.papadok.com (with the “www”) works, but it’s poor practice not to check whether your domain name without the “www” is working.

Thursday, March 24th, 2011

Great restaurant,
beautiful but user-unfriendly website Today I went to lunch at one of my favorite restaurants, Meadowlark, and this morning, in anticipation, I went to their website to take a gander at their menu. Unfortunately, the Meadowlark’s website, a work of art by Living Pixel Design, merits an entry in my Web design (bad) category.

Why, you might ask, given how beautiful the site is.

This box is the same size as the functional area of Meadowlark’s website

Should I jam all the text of my blog entry into a box this size?

I suppose it wouldn’t hurt if the point of my blog entry were to show off some fabulous photos.

It wouldn’t hurt either if visitors coming to my blog wanted to see the pretty pictures and didn’t care about reading the text.

I will admit that Meadowlark’s page is beautiful. It’s just not very functional.

To answer that question, take a look at the site, either at the screenshot below (which you can click to zoom) or at the actual website:

The screenshot, from my admittedly big ass 1920x1200 monitor, has a helluva lot of wasted, but beautiful space. Look at the functional area of the Meadowlark website, the brown rectangle divided even further into a changing collection of pretty photos on the right and a scrolling column of text on the left. How big would you guess that functional area of the Meadowlark website to be? Actually there’s no need to guess—look at the CSS for Meadowlark’s website, at the entry that says:

#main {
  margin-left: 600px;
  margin-top: 0;
  width: 818px;
  height: 600px;
  background: transparent
  url(http://www.meadowlarkrestaurant.com/images/container.png) 0 0 no-repeat;
}

and you can see that the functional area of Meadowlark’s website has been intentionally limited to an area that is only 818x600. Look further at the CSS (for the “scroll-pane” entry) and you’ll see that the meat of Meadowlark’s website—the part that displays their menus, their specials, their news—has been intentionally limited to an area that is 480x330!

Imagine my frustration that to see what’s for lunch today at the Meadowlark I have to scroll through an area that uses about 5% of the available space on my huge ass monitor!

Now, sure, web designers today shouldn’t design websites assuming that everyone has 1920x1200 monitors, but according to w3schools.com, most people today are using computers with screens that are 1024x768 or higher. 480x330 is still less than 25% of a screen that’s 1024x768. My cell phone, a Motorola Droid, has a screen bigger than 480x330 (its screen is 854x480).

Do you go to restaurant websites to look at photos or to read menus? If the Meadowlark were an art gallery (primarily an art gallery, that is—you can find interesting art on sale there, none of which is showcased on their website), then sure, limit the text area and put the focus on the art.

Perhaps I’m the only one of Meadowlark’s customers who goes to their website to try to read the text of their menus. If that’s the case, why bother putting the menus online at all?

(Lunch, by the way, was delicious, as usual. I had a cup of potato soup and some scrumptious macaroni and cheese made with “true Swiss Gruyere, sharp Cheddar and just a smidge of aged French blue cheese.”)

Wednesday, May 26th, 2010

If you didn’t know that on most forms on most web pages you can press the TAB key to move from one field to the next, or if you’re the type of person who prefers to use your mouse, this post isn’t for you because this post is my latest Web design (bad) post (it also counts as Whining). Today’s culprit? Panera Bread® of Central Ohio.

If you’ve visited my blog before, you may know that I like Panera, I really do. One of the things I like about Panera is that on every receipt is a link to a “tell us how we are doing” survey, a survey whose completion enters you into a drawing to win $2,000. What a great way to build customer loyalty.

The web developer who created the survey website for Panera, however, cares less about customer loyalty and smart user interfaces and more about making sure no one types numbers into his or her numeric fields. Look at the source for one of the panerasurvey.com pages, and you’ll see that numeric fields have onKeyPress="return TextCounterNumber()" attached. If you’re not a web developer, all you need to understand is that this bit of code looks at every character you type into the associated fields to determine whether it’s valid or not. Numbers are valid. Anything else is not.

That’s not so bad. It’s making sure users can’t mess things up by typing letters into a field that should have only numbers. Kinda smart.

Here’s the bad part. On the vast majority of forms on the web, users are not forced to take their hands off their keyboards and use their mouses to click on the next field in a form. That’s something the web inherited from non-web forms. Never mind that the vast majority of computers users may not realize they can advance from field to field with the TAB key; web developers should know that.

Once you’re in the order number field on this form, you’re trapped until you use your mouse to click someplace else. However, after you click on the month field with your mouse, you can use your keyboard to select values and press TAB to go to the next field.

You may think this isn’t worth complaining about, and in the grand scheme of things, you’re right. But Panera’s survey includes a screen on which they ask people to tell them of any concerns, and I’ve mentioned the fact that their survey form doesn’t adhere to web standards. Yes, it’s a small annoyance, but it’s also something that would be incredibly easy to fix. It’s also something I’m reminded of each and every time I go to fill out a Panera survey, something I’m prompted to do by each and every receipt I get from Panera.

What finally prompted me to write about this? Something else about Panera that bothered me—a Panera staff person not bothering to wipe off a drippy drink before handing it to me. So far that’s happened only once (and it wasn’t my favorite Panera staff person who did it), so I’ll leave that whining for another day (although, as it happens, my best friend just stopped by my desk as I was writing this, and he said, about the drippy drinks, not the poorly designed web form, “Oh, yeah, I hate when they do that”).

Saturday, January 9th, 2010

Neither the folks at The Melting Pot®, which is sponsoring a sweepstakes for the new movie Valentine's Day, nor the folks at Brandmovers®, which created the fun site for the sweepstakes — meltingpotvdaysweeps.com, noticed the typo smack dab at the top of their fun game (click to embiggen):

Sunday, September 6th, 2009

(See DDN Fail #1, #2, #3 and #4)

A particularly offensive comment from today:

The comments below it aren’t much better:

(Click any of the above to embiggen.)

Given that the staff of the Dayton Daily News can’t be bothered to proofread the links they themselves set up on their website, it should be no surprise that they also can’t be bothered to monitor comments left on their website by fine members of their reading audience, comments that others of their readers are invited to “report [as] abuse,” but really, why would anyone bother to report abusive comments since it seems that the majority of comments found on the DDN are abusive?

Today the DDN has an article about the upcoming Dayton mayoral election, and sure enough, it’s attracted some ignorant, racist, and vulgar comments, the text of one in particular of which I will not type out here for fear of attracting the wrong kind of Google searchers but which you can read in the image to the right. This particular comment was posted at 9:42 a.m., the racist two below it were posted at 9:40 a.m. and 9:24 a.m., and it was two hours later when I discovered them on the site. If you go to the comments for this article now, you’ll see that someone did finally click on “REPORT ABUSE,” spurring a DDN staffer to finally remove the abusive comments.

It seems to me, however (and yes, this isn’t the first time I’ve done so), that the DDN could copy a feature from nytimes.com and institute moderated comments, at least on articles which would attract comments in need of moderation. The DDN doesn’t publish each and every letter to the editor they receive, so why should they publish every single comment submitted on their website?

Unless, of course, the DDN would rather to continue to sink down to the gutter instead of to aim for the sky.

Update 09/07/2009: Wow, a day later and there are still ignorant people leaving unmoderated comments. Comments such as these are exactly the reason why the DDN should go to moderated comments instead of allowing people to spew shit and then clean up belatedly afterwards.

(Click to embiggen the above image)

Saturday, August 29th, 2009

(See DDN Fail #1, #2 and #3)

On today’s DDN homepage is a link to an editorial:

But if you click the link, the page doesn’t exist:

(Click any of the above to embiggen.)

Earlier this month I wrote about an annoying Dayton Daily News fail involving the search function on their site. This morning I found that in addition to it’s sometimes not being possible to use their search to find stories you know exist on their site, it's also impossible to rely on the links the DDN staff themselves put up on their site.

As you can see from the screen shots to the right, one of today’s “Stories you’ll want to read” is an editorial that declares that “Ohio pensions already cost enough.” Well, for once, this was indeed a story I wanted to read (many of the stories they think I’ll want to read, I really have no interest in), so I clicked on the link… and found myself on a helpful page that told me they couldn’t find the page I requested and perhaps the story I wanted was “an older news story” and thus no longer available except in the DDN archives. Brilliant.

Also, don’t try going to the DDN Opinion page, where the top listing under “Local editorials and commentaries” is this same “Ohio pensions already cost enough” article, because the link there also does not work.

And, God forbid, do not try typing “Ohio pensions already cost enough” in the (un)helpful search box at the bottom of their “We can’t find the page you requested” page, because if you do, you’ll be redirected to a page that says “Page Not Found — We’re sorry. The Web address you entered is not a functioning page on our site.” How helpful is it to include a search function on your 404 page when the search function DOES NOT WORK!!

Rule #1 of web development, Cox Ohio Media — whenever you update something on the web, go test it immediately afterwards. No one’s perfect (I don’t even claim to be), and because we all make mistakes, we need to check our work. I’m no newspaper guru, but I understand that in the olden days, this was often done by a proofreader. I do develop websites myself for a living (and yes, sometimes make mistakes), but every single time I create a link, I check it after publishing it to make sure it works, especially if it’s a link I’m highlighting (as in something such as “Stories you’ll want to read”).

The Dayton Daily News, a never-ending source of material for my Web design (bad) tag.

Thursday, August 20th, 2009

(See DDN Fail #1 and #2)

Useless DDN search field:

Useless DDN search results:

Useful Google search results:

(Click any of the above to embiggen.)

My friend John was quoted today in the Dayton Daily News in a piece by Joanne Huist Smith about a planned historical marker for famous lesbian Daytonian Natalie Barney. He told me about the article, and so I went to the DDN website to look for it. Entered “Natalie Barney” in the handy dandy search field at the top of every DDN webpage, clicked on the “SEARCH” button (powered by YAHOO!) and got… nothing related to Natalie Barney whatsoever.

So I popped over to Google and searched for “site:daytondailynews.com Natalie Barney,” and sure enough, the article for which I was looking was the very first result.

So what does this prove? Well, first, it proves that Google’s better than YAHOO! for searching, which is no big surprise. But it’s yet another illustration of the Cox Ohio media team’s web-ineptness. How difficult could it possibly be for them to come up with a search function in-house that includes the articles published most recently on their own website? Yes, they’re no New York Times (they’re really no New York Times!), but why wouldn’t they want to copy some of the features of nytimes.com?

This illustrates something else as well, namely that Google News, instead of being a threat to newspapers by aggregating their content, is actually an asset to newspapers by making it easier for newspapers’ readers to find the content on newspapers’ websites. Plus it shows that Cox Ohio made a poor bargain when they chose to out-source their search to YAHOO!.

Tuesday, April 21st, 2009

Reading an interesting opinion piece today by Kathleen Parker that appeared Sunday in the Washington Post and yesterday in the Dayton Daily News, I came across a less obvious instance of Dayton Daily News FAIL than yesterday’s example, one that though less obvious is probably more egregious.

If you read the Washington Post’s version of Parker’s article, you’ll notice phrases such as “radio ads” and “National Fair Housing Alliance” and “report,” phrases that are in a different color from that of the rest of the text in her article, that are underlined and that when you click on them with your mouse bring you to other websites related to them. If you’re unfamiliar with this concept, it’s called hyperlinking, and it’s what the World Wide Web is all about.

In contrast, the Dayton Daily News’ version of Parker’s article, although otherwise a copy, headline and all, has no such differently-colored, underlined phrases linking to other websites. This omission demonstrates that my claim yesterday that the DDN web team is still at Web 0.2 is wrong; they don’t get the web at all.

(In fairness, other sites reprinting Parker’s syndicated column have stripped the links as well, for example, the Jewish World Review’s version; why do they do that?)

Monday, April 20th, 2009

The Dayton Daily News published an article today about Austin ~~Pike~~ Boulevard that shows how technologically-inept they are:

(Click to embiggen)

There’s a lot that could be said about this story’s content, stuff that DDN writers won’t say — such as how the nameless “local officials” quoted in the story as hoping for the sparking of “development in the area” aren’t helping Greater Dayton by promoting on-going urban sprawl — but what struck me (and other readers who commented on the article) is that the article was about a “radically different intersection design that will be the first of its kind in Ohio” yet included no graphics or photos to illustrate what this new type of intersection looks like.

Yes, if you go to the story now, you’ll see a graphic, but it was added hours after the story hit the DDN website, and it features text that is illegible, and you can’t even click on the graphic to make it large enough to read the text in it!

Forget Web 2.0 when it comes to Cox Ohio Publishing. They're at Web 0.2.

Update: They updated the article yet again with a link to an enlarged version of their graphic, but as you can see from my screenshot, that hadn’t occurred to them initially!

Wednesday, February 4th, 2009

EasyParkDowntown.org as it looks in Firefox
(click to embiggen)

EasyParkDowntown.org as it looks in Internet Explorer
(click to embiggen)

The Dayton Daily News had an article today about the Downtown Dayton Partnership's fancy new EasyParkDowntown.org website. The article's author, Tim Tresslar, must be a faithful reader of David Esrati's blog because this is not the first time he's written about something that Esrati wrote about first (update: actually Dayton Business Journal wrote about it first). Esrati's blog entry about EasyParkDowntown.org was not favorable.

And I have to say I'm not impressed with EasyParkDowntown.org either, but for other reasons, namely web design reasons. The interactive map on the site was created using Adobe Flash, a cumbersome tool for websites (read some of my earlier gripes about Flash on websites), and the coder added some JavaScript to his page to make sure the Flash object is resized to take up the entire size of the browser window. Actually it makes the Flash object larger than the browser window, cutting off text and making it impossible to scroll down to see the rest of the content, especially in Firefox but even in Internet Explorer. Their helpful "Let's get Started" text mentions buttons you can click in order to hide or show layers of information on their map, but you can't see the buttons if your web browser's set to a size their web developer didn't anticipate (for example, maximized Firefox or Internet Explorer windows on my 1920x1200 laptop screen or my 1440x900 external LCD)!

Did anyone even look at this application after it was published but before it was announced to the world?

From the work I do I know that some organizations are willing to pay big bucks, thousands of dollars, for applications such as this (for example), and they're too ignorant to know better. I gleaned the data from EasyParkDowntown and rolled my own webpage based on Google Maps in a couple hours. Check it out and see if you don't agree that it's friendlier to end users: www.davidlauri.com/easyparking

Here's one way in which my version is friendlier — try printing from my version and try printing from EasyParkDowntown.org. Completely ignoring the fact that if you print using your browser's File->Print command on their site you won't get what they intended, even if you do realize that to print you have to click on their print icon (the little pic of the page at the right of the icons below their map), what you get isn't at all useful. Want a list of parking garages to take with you? You're not gonna get it from EasyParkDowntown.org!

One last gripe — if you're coming downtown to go to the Oregon District, you won't find any of its parking on EasyParkDowntown.org. Is it because most people don't consider the Oregon District to be part of downtown (or Greater Downtown)? Or is it because the Oregon District Business Association wouldn't participate in the Special Improvement District tax that funds the Downtown Dayton Partnership?

Monday, July 9th, 2007

Dayton City Paper lets
you see exactly how
each of their print
edition pages looks,
but good luck actually
being able to read them
Zoom in to try

Today's award for poor website design goes to none other than the Dayton City Paper, which underwent a major redesign (for the worse, in my opinion) in the past year. I've never been a frequent visitor to the site, although I do manage to pick up a hardcopy of the paper every week. Their previous online incarnation was at least usable, pretty much text only, but with a newspaper, the text of the articles is probably the most important part, right? Wrong, at least according to the Dayton City Paper, which has decided not to publish any text at all on its online site, only pictures.

So long as you don't use screen reader software (just one of many reasons websites should be mainly in text), you can read every page of the Dayton City Paper, provided that you don't find the font size too small. If you do find the text too small to read, tough shit, because it's not really text at all but a JPG of the page,

A sample paragraph at actual size

and thus increasing the font size in your browser does zilch. You could try something like the Image Zoom extension for Firefox, but a bit-mapped image of text zoomed to 200% is only marginally easier to read.

Perhaps the most important reason websites are text-based is that text is easy to search. Not on the Dayton City Paper's website though. They realize visitors to their website will want to search,

This is not a screen capture
—this is an actual image
I saved off their site!

and they mock us by putting a picture of a search field at the top of their site. Yes, literally a picture of a search field, not even a real field that does nothing. How insane is that?

(actual size)

That the folks at Dayton City Paper even bother to save their calendar pages as images and upload them to their website is beyond my comprehension. Do they think that having those calendar pages online in that form is useful to anyone? Can you read the example calendar item to the left?

Now posting their pages as images does make life easier on the Dayton City Paper staff and might also make their advertisers happy (every ad is shown online exactly as it appears in the print edition), and they needn't worry about people plagiarizing one of their articles by cutting and pasting. I guess if the City Paper staff is happy, who cares whether the site's useful to readers?

One last whine about the Dayton City Paper before I move on, and that is that I find it incredibly annoying that they list contactus@daytoncitypaper.com as the e-mail address alongside the info about any of the authors of their articles, even if an author doesn't work for them. For example, last July they published an article by Dan Frosch (and misspelled his last name in the byline). Googling for the syndicated article, I found Dan Frosch's real e-mail address (and the real spelling of his name).

Now given that I sometimes like to make fun of the Dayton City Paper's larger rival, the Dayton Daily News, it's only fair that I point out that in comparison to daytoncitypaper.com, daytondailynews.com is a real pleasure. Actually Cox has really improved daytondailynews.com over the past year or so, by doing the following things:

No longer using Flash to display photos
No longer charging for access to the text of articles in their online archives
Publishing contact information (phone and e-mail) for the reporters who write DDN articles (and these reporters are willing to answer questions posed by e-mail—very helpful)
Making Dayton Daily News content available via RSS
Having content not available in the print editions available online (blogs such as Scott Elliott's on local education are a good local news source)

Now I realize the Dayton City Paper can't hope to compete with the resources the Dayton Daily News has (just as the DDN can't compete with the truly nice newspaper website the New York Times has), but that doesn't mean it has to shoot itself in the foot with a lame-ass image-only website. (An independent weekly that has a site I admire is Seattle's the Stranger, home of "Savage Love", a sex advice column by the paper's editor, Dan Savage, who once told me I was an idiot.)

Saturday, June 30th, 2007

This is just another brief whine about the misuse of Flash on the web for forms. Today’s culprit is SuperCuts, who will give you $2 off the first time and $1 each time off thereafter if you sign up for their haircut reminder service.

supercut.com’s non-functional form
(not as pretty as kyintrigue.com’s)

Unlike the fine folks at KYintrigue, SuperCuts doesn’t think babies born last year will be signing up (you have to be 18 at SuperCuts but not at KY), but their form is plagued by the usual problems. You can tab from first name to last name, but hit tab again and you land on email address. Don’t they want you to fill out birthday? Sure they do (it’s asterisked), but you must use your mouse to enter it. Ugh.

What makes stuff like this worse is the premium that corporate types are paying to get it. I know of a national organization that paid $10,000 for a Flash-based web site and then wondered afterwards why they couldn’t do things like highlight text and copy it or bookmark individual pages, all the sorts of things people have learned to expect from regular HTML pages. What’s even more insane is that it takes extra time (and thus extra money) to develop these forms in Flash that lack the functionality of regular HTML forms. Oh, but they’re pretty, aren’t they?

Update 5/1/2013: I had occasion to read this blog entry again, and sure enough, SuperCuts has updated its profile registration form to be just a plain HTML version. Not as pretty as their old Flash form, but oh so much more functional.

Monday, June 11th, 2007

kyintrigue.com's pretty but non-functional form

One of my pet peeves when it comes to websites is the use of Flash. There are times when it can be appropriate, to show an animation or for a game, for example, but there are many more times when developers use Flash just to make something pretty without considering how much functionality they're disabling.

Consider the pretty sweepstakes entry form at kyintrigue.com (don't ask how I got there) — a very sophisticated stylishly adult site featuring translucent dropdown boxes for state, month, day and year, none of which allow you to select values using the keyboard. See how easy the designer of this form has made it for babies born in 2006 and 2005 to select their birthdates? He or she obviously has no clue that in Firefox (and now in IE7 too) on a regular HTML dropdown you can select a value in the list by typing it. Would you rather select your birth year of 1965 by typing those 4 digits or by clicking on a slider and dragging it until you find 1965? You know my answer already.

Blog tools

Months
Tags
Email