Posted on February 27th, 2009%
In the past, I implemented web page titles (i.e. the code in the <title> tag) the same way that one would implement a breadcrumb – that is, from the least-specific to most specific. For example:
Web Site Name: Category: Page Name
That is similar to how a breadcrumb would look:
Home > Category > Page Name
Note that I said this is how I did it “in the past.” Today, I read 9 Common Usability Mistakes In Web Design over at Smashing Magazine, which states in mistake #3:
Putting the name of the website last puts more emphasis on what the page itself is about, rather than on website branding, which is still there.
This makes perfect sense, and the article illustrates the idea well with screenshots.
Needless to say, I’ll be refactoring web projects to invert titles at my . . .
→ Read More: Usability tip: Implement web page titles as inverted breadcrumbs
Posted on November 4th, 2008%
 While using Google GMail today, I noticed that they put a blue highlighting around the text input boxes when they have input focus. It’s a nice touch that makes it just a bit easier for users to identify which field their typing in. (Safari users, of course, get this on all web sites out of the box.)
Getting this to work on your web site is a simple matter of applying some CSS styles. The trick is to give your normal inputs fields a 1px border and a 1px margin; then, when they have focus, give them a 2px border (with a different color if you so choose) and no margin. This will ensure the dimensions of the element don’t change when the border width changes.
The following CSS provides an example of styling text boxes (both text and password inputs, and multi-line text boxes) and select lists (single and multi-line) with an alternate outline when holding the input focus.
input[type=text], input[type=password], textarea, select {
border-top: solid 1px #8e8e8e;
border-right: solid 1px #d1d1d1;
border-left: solid 1px #d1d1d1;
border-bottom: solid 1px #e4e4e4;
margin: 1px;
padding: 2px;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
border-color: #4488cc;
border-style: solid;
border-width: 2px;
margin: 0;
}
Like many good web tricks, this’ll look great in Firefox but won’t do anything in Internet Explorer. That’s because IE (through version 7) doesn’t support attribute selectors (as in [type=text]) or the :focus selector. To get things to work in IE, we need to rely on a little more CSS and some JavaScript.
. . . → Read More: Outlining textbox input fields (and getting it to work in IE)
Posted on July 24th, 2008%
From time to time, clients ask me if I’d include a “splash page” for their web site. In every situation, I try very hard to convince them not to do this.
I just had a client ask me about having a “start page link to the home page” (in other words, a splash page), and here’s my response…
. . . → Read More: The case against splash pages
Posted on May 19th, 2008%
It seems I always have usability issues with Verizon‘s web sites. After checking to see if, after two weeks, they figured out why an old cell phone number of mine was still showing up on my online profile (they didn’t, it’s still there), I decided to see if FiOS TV was in my area.
They have a nifty Check Availability page where you enter your phone number (if an existing Verizon customer) or address to find out if you can get this service. Being a Verizon customer, I enter my phone number, click the “Can I get it” button, and wait…
While you wait, you do get a little graphic that is somewhat more useful than a spinning Ajax cursor.
So, is FiOS TV available to me? Well, I don’t know. The response you get says nothing about FiOS TV — instead, it tells you about your FiOS internet service.
But wait, that isn’t what I asked! . . .
→ Read More: Is Verizon FiOS TV in your area? Don’t try checking online.
Posted on May 15th, 2008%
About a week ago, I had to contact Verizon to find out why a cell phone number I haven’t owned for three years was showing up on my online statement. In the process of the call, they reset my online account password, and now I can’t log in. (Hence the misuse of the phrase customer support.)
Today, I went to Verizon’s web site to reset my account information, where I was asked to provide my email address and phone number.
Clicking submit opened up Firebug! Thanks, Verizon, for letting me do your debugging work for you. Does this mean I’m on the . . .
→ Read More: Verizon lets you debug your own form submissions
|
|
Recent Comments