On April 4th of this year, somebody forwarded me email that said in part “12 days from today, all cell phone numbers are being released to telemarketing companies and you will start to receive sale calls. …..YOU WILL BE CHARGED FOR THESE CALLS.” I immediately assumed it was a hoax. If it wasn’t, I was going to be worried.
Instead of checking a rumor site like Snopes.com, I decided to go directly to Do Not Call registry, which I knew was run by the Federal Trade Commission. Not knowing the best URL for the site, I typed “Do Not Call” on Google and chose “I’m Feeling Lucky.” I didn’t feel so lucky when I got to a page that looked like this:
Focusing on text area at the top, take a look at how it displays in the Firefox browser:
Here you can’t read the text leading up to the link “The Truth About Cell Phones and the Do Not Call Registry.” Upon seeing this, I immediately thought I had gotten to a spoofed or phishing site. Since April Fool’s Day had just passed, my second thought was that it was simply a good joke or parody.
Beyond the inexcusable display problem, here are some reasons why the site didn’t seem “official”.
- The Do Not Call Registry is managed by the Federal Trade Commission, but there’s no FTC logo on the site.
- Visually, it looks nothing like the FTC.gov website.
- There’s no link to the FTC.
- It doesn’t have a clear text indication that it’s a United States Government site, and it just says “National Do Not Call Registry” withougt indicating which nation it is for.
Admittedly, the domain name ends in ‘.gov” which seemed to be the only reliable indicator that this is indeed an official U.S. government website.
My biggest concern was that the message about “The Truth about Cell Phones and the Do Not call Registry” can not be read at all. I repeat: If you’re using any browser other than Internet Explorer, you can’t read a very simple and important message on the homepage. To show the page in several different browsers, following are screenshots created with the free online Browsershots.org site. At this site, you can submit a single URL to get screenshots in up to sixteen different web browsers. Interestingly, the site looks fine in Internet Explorer 5.5, which is often not the case. It doesn’t look good in any non-Microsoft browser.
| Opera 9.23 Ubuntu 6.06  |
Konqueror 3.5 Ubuntu 6.06  |
MSIE 7.0 Windows XP  |
MSIE 6.0 Windows XP  |
Firefox 2.0.0.6 Windows XP  |
| MSIE 5.5 Windows 2000  |
Firefox 1.5 Windows 2000  |
Safari 3.0.2 Windows XP  |
Safari 1.3.2 Mac OS X 10.3  |
Safari 3.0.3 Mac OS X 10.4  |
How Long Has This Gone On? How can it be fixed?
Though I first saw this display problem in April, it has probably been broken since January 1, 2007. This exact date is known because of this comment in the cascading style sheet (CSS) fie that defines the page display.
/* Added 1/17/2007 for info about the cellphone email */
Based on a meta tag in the underlying code, the designer was probably working in Microsoft Visual Studio 7.0. I don’t know how Visual Studio renders web pages, so it’s not clear whether this is a common “Microsoft problem”. Visual Studio is a sophisticated and complicated program. As it turns out, the solution to this problem isn’t. Change three lines of code and it should look great. Here’s how:
- On about line 156 of the HTML code, convert to
. There should be quotes around the class “BannerBox” but it works without this correction..
- On about line 165 of the HTML code, convert the closing element to
- Though this makes the text legible, it is a bit inelegant because the BannerBox section width falls outside of the page view. To fix this, remove this style rule on line 259 of the CSS file: width: 100%;
There are probably other ways to fix this code, but this one should work. The basic solution is to convert an inline element to a block-level one
To read the technical differences between
Solutions for Display Problems: Government Guidance and Browser Testing
To avoid display problems that make basic information unviewable, web designers should review basic design guidelines and do some simple testing. Though some design problems are complex to fix, many are easy to identify. As it turns out, the Department of Health and Human Services provides simple and unambiguous guidelines that address this specific topic. Also, there are free and low-cost ways to check your site in multiple browsers.
On the United States government website Usability.gov you can find many helpful guidelines about designing usable websites. In addition, here you can download or purchase the book: Research-Based Web Design & Usability Guidelines. Chapter four of this book includes hardware and software guidelines. The first guideline in this chapter reads:
4:1 Design for Common Browsers
Guideline: Design, develop and test for the most common browsers.
Comments: Designers should attempt to accommodate ninety-five percent of all users. Ensure that all testing of a Web site is done using the most popular browsers.
Source: Research-Based Web Design & Usability Guidelines, p.30 (U.S. Dept. of Health and Human Services 2006).
This book contains a wealth of web design guidelines, each presented with colorful examples and citations to studies to support them. The book doesn’t give guidance on how to apply these guidelines, but with browser testing it’s thankfully pretty easy. The most basic approach is to install one or two alternate browsers on your primary computer. Firefox and Opera are stable programs and they are both free. If you want to go a step further, try one of the following options.
- Browsershots.org: use this free online tool to test a single web page in up to sixteen browsers on three operating systems. You submit a URL and a series of comptuers creates screenshots to view online or download. The ten examples above were created this way.
- Install Multiple Versions of Internet Explorer For people who want to test multiple versions of Internet Explorer 7, a program from TredoSoft provides a way to do this on a Windows-based computer. Once you’ve got IE 7, install their program to enable runtime versions of IE going back as far as version 3, which was released in 1996.
- Browsercam.com: This is a commercial service used to create screen shots in dozens of browser versions, including rendering for display on Personal Digital Assistants (PDAs).
Conclusion
DoNotCall.gov is not a bad website. It is just surprising that a critical design error existed for eight months when there was a simple way to fix it. Hopefully by the time you read this article, the problem will be gone.
Here are four good things about the DoNotCall.gov site:
- The text is not sized with pixels, which means that people who use Internet Explorer 6 can resize the text if it’s hard to read.
- The navigation buttons are text and not images, which means that they too can be resized.
- The entire site is available in English and Spanish. Both versions look and function the same way.
- The site uses Access Keys for site navigation. This allows users to use keystrokes to jump to certain sections of the site. The DoNotCall.gov access keys are assigned to letters, which may interfere with browser menu commands, but at least the designers thought of this accessibility feature.
If you’re designing a website, at a very minimum, look at it in at least one browser other than Internet Explorer. If people can’t read critical text, that’s a problem. If content is different but legible, that’s life!
Copyright © 2007 Roger V. Skalbeck. All Rights Reserved.