Be Careful When You’re Formatting Code

Sometimes designers make decisions that need to be overridden. And sometimes you are the designer yourself, and you need to look at your work from a distance and see why you’re making your readers miserable.

A popular Ubuntu blog recently changed its theme, so that all quotations are transformed to upper case:

We could probably argue with the designer for days about why it’s a bad idea to have large blocks of text in all upper case. We might be convincing, and we might not. Perhaps in the end it really is a matter of taste, and all the Editor can say is that he hates reading large blocks of upper case. He also dislikes the use of an opening quotation mark as a design element when there is no corresponding closing quotation mark.

But when it comes to code—in this case, Linux text commands—the result of this dubious design decision is an absolute catastrophe.

The problem, you see, is that Linux is case-sensitive. These commands need to be entered in lower case. Having gone through an HTML text-transform to upper case, they are now completely useless. They cannot be copied and pasted into a terminal.

Linux users who don’t understand the command-line interface will simply be baffled. Linux users who do understand it will either groan loudly and laboriously type each command, or paste the commands into a word processor and change the case, which is still far more effort than they should have to go through. (An even farther-out possibility is to find the code in the original HTML source for the page and copy it from there. Again, why should we have to bother?)

The simple moral is this: think about how your design decisions affect your readers. And be especially careful with code, or anything else that needs to be copied exactly. Don’t wreck it with clever formatting.

Web Design: Don’t Neglect the Basics

A little notice printed in red at the top of a Web site for a very large paint manufacturer’s catalog:

Note: While in the catalog order pages, using the browser back key could produce undesired results.

There is almost nothing more basic to browsing the Web than the browser’s “back” button. If your Web site produces “undesired results” when visitors try to go backward by doing what every Web surfer has done since the days of NCSA Mosaic, then you just need to start over and do it right this time.

Choosing Stock Photos

Sometimes you’re expected to come up with an illustration to go with what you’re writing, and you naturally turn to whatever archive of stock photos is handy. But you do need to exercise some intelligence when you’re picking a stock photo, or you’ll end up with something like this, from the BBC:

Here we have what appears to be an actual photo of the rain that did not fall.

Remember that your readers are expecting your illustrations to illustrate—that is, they expect them to be pictures of the things you’re talking about. It’s fine to choose a stock photo of torrential rain to illustrate a story about torrential rain. But illustrating the idea of “no rain” with a picture of rain makes you look a bit stupid. And when that happens, people aren’t paying attention to your message anymore, because they’re trying to figure out how you came to have a picture of the rain that wasn’t there. It’s not just an embarrassment: you’ve failed to communicate.

Exactly Backwards

Even though most people use computers and this Internet thingy, the National Weather Service apparently still has to feed information to various ancient systems that have only an upper-case character set. You, the average intelligent reader, would imagine that the natural thing to do would be to write the text normally and make a simple program, which an eight-year-old could write, to convert the text to all upper case for teletype distribution.

But that’s because you don’t work for the National Weather Service. Instead, all “weather products”—warnings, alerts, advisories, “public information statements,” and so on—must be written in all upper case all the time, and distributed that way on the World-Wide Web, here in the year of our Lord 2011.

That sometimes leads to awkward adaptations, as in this “public information statement” on the Pittsburgh office’s Web site:

FOR AN INTRODUCTION TO DUAL POLARIZATION
 RADAR BROWSE TO THE WARNING DECISION
 TRAINING BRANCH WEB SITE AT...

 ...LOWER CASE...
http://WWW.WDTB.NOAA.GOV/COURSES/
DUALPOL/OUTREACH/INDEX.HTML

The problem, of course, is that it’s literally impossible to use that Web address in any other way than typing it by hand—and it’s a very long address. You can’t click on it. You can’t copy it and paste it into your browser’s address bar.

That’s simply an unacceptable way to convey information to people on the Internet.

There’s a larger lesson here. If you have a few stragglers in your audience who haven’t adapted to this century’s technology, don’t let them dictate to the great majority. Instead, find a way to make use of current technology that still doesn’t exclude the minority.

Oh, and the other lesson is this: don’t write a whole article in all caps. It’s very annoying.

Web Design: Test in Four Browsers

If you visit Yahoo! Mail with the Chrome or Chromium browser, you get a message saying that the site hasn’t been tested with your browser. (But it works fine.) If you visit a certain page in the Amazon empire with Opera, you’re told that your browser isn’t fully supported, and you should download Internet Explorer or Mozilla Firefox.

Recent statistics say that Internet Explorer and Firefox make up three-quarters of the browser market. There’s some reason to suppose that Internet Explorer’s share is seriously overestimated, but for the moment let’s accept those figures as given.

If you tell people they can’t see your site without Internet Explorer or Firefox, you’re telling one in four visitors to take a hike. If you had a retail business, would you have a bouncer at the door kicking out every fourth customer? Would that make any sense at all as a business strategy?

But your technical people say that they can’t make your site work with Safari or Opera or Chrome. Well, the Editor does not like to use strong language, but in this case your technical people are lying. What they mean is that they’re too lazy even to find out whether it works, or that they made some mistake in coding the site that some browsers ignore but others don’t, and they can’t be bothered to debug it.

You can’t test every browser: there are dozens, and some of them (like Dillo or NetSurf) aren’t meant to do everything the modern Web can do. But you can test that your site works for more than 99% of visitors if you test it in four browsers. That’s because almost all modern browsers (excluding the stripped-down ones) use one of four page-rendering systems:

1. Gecko, used by Firefox, SeaMonkey, and several others

2. WebKit, used by Safari, Chrome, Chromium, and several others

3. Presto, used by Opera

4. Trident, used by Internet Explorer.

Internet Explorer runs only on Windows (there was a Mac version years ago, but that’s ancient history). Safari runs on the Mac and on Windows. The rest run on Mac, Windows, and Linux. If you can test your site in one browser from each of those four groups, you can be pretty sure it works for nearly everyone who visits your site. And it’s not a huge investment. Every single browser we’ve mentioned is free to download. The links are right up there in the list.

For the record, the Editor would like it to be known that his site has been tested in Firefox, SeaMonkey, Chromium, Opera, Epiphany, Arora, MidoriInternet Explorer, and Dillo, and it works just fine in all of them. So you have no excuse for not reading this article.