Tag Archives: web

USPS Web Site Usability

Gotta love USPS and their web site programmers!  While placing an order at usps.com recently, I diligently followed all of their instructions, particularly with respect to the required fields when setting up the account for billing purposes.  I skipped the “nickname” field because it was not flagged as “required”.  An asterisk was not shown next to the field.  However, if you try to complete the page without creating a “Nickname” for the credit card, you will be prompted to enter a Nickname.

Required Not Required Field
Required Not Required Field

If the field isn’t shown as required then why do I have to fill it in?  Did any one QA the development of the web site?

Safari / CSS Issue

Recently I’ve been updating one of the web sites I work on in my spare time (www.ralongalumni.org) and testing the updates in a variety of common browsers. Apple Safari on Windows is one of those browsers; Safari on my iPhone another.

I’d been having one tiny issue: some of the typefaces would not display correctly on some pages. The problem was most noticeable in the title in the masthead. The title should be in Copperplate Gothic Bold at .9em, but is instead some sans-serif typeface and is significantly smaller than it should be. Other text items on the page are not set in the correct typeface either.

Safari CSS Problem

The problem wasn’t on every page. Some pages rendered completely correctly. The whole scenario really confused me as it worked correctly when testing locally in Safari and other browsers (like FireFox).

Safari CSS Correct Local
FireFox CSS Correct

The problem only showed when the pages were finished and viewed from the server.

The problem was one stray line in the <head> section of some pages.

<meta name=”copyright” content=”R. A. Long High School Alumni Association” />
<!– this css file doesn’t exist –>
<link rel=”stylesheet” type=”text/css” href=”./styles/navbar.css” />
<link rel=”stylesheet” type=”text/css” href=”./styles/main.css” />

The navbar.css file didn’t exist on my server or on my local system. The entry in the <head> section was leftover from earlier experimental versions of the website. And those versions were built before I had access to the Safari browser.

I “discovered” that navbar.css was the problem by accident. I figured that as long as I was trying to figure out why pages worked in Safari when served from the server and others did not, I would clean up the markup. As soon as I did that, it all worked … magically.