The worst way to style your visited links

Generally, paying attention to the a:visited property is good. In some cases, styling the visited link is detrimental to the user experience.

Here's a comment on designer David Airey's blog:

Justin Pease, a web designer, has a link to his site. Once I click the link, it turns dark grey and loses its bolding.

This visited link style makes it blend in with the surrounding text. The only way to tell it's a link now is to hover over it, or click it.

The point of the visited link style is to show you what pages you've been to on a site. It could be a link you want to avoid, or a link you'd like to get back to. When the link blends in, it tells the user that there is no link there.

An underline on a:hover is not enough

Avoid making your visited link color a similar color to your body text. Links should not blend in, they should always stand out. Adding a hover state like an underline or color change doesn't matter, because users don't look at websites with their mouse. They use their eyes. You're asking them to guess what is and isn't a link when you could easily let them know.

Take care with your color choices, especially if you're going to remove the underline from your links. Even the smallest mistakes can make a great impact on your user's experience.

The second worst way to style your visited links

Ever since CSS became popular, people have moved further away from the blue underlined links that were universally understood. Styling your site is your prerogative, and styling your links can help bring about a sense of identity. Often, the bright blue links just don't suit a site's color scheme. The purple visited links are even harder to fit in.

Many people choose to style the a tag and neglect that this style takes precedence over the :link, :visited, :hover, :focus, and :active states. A lot of people just style the hover state and forget about the rest.

Why visited link styles are important

Here's an example from a guitar tab site called ultimate-guitar.com. People submit their interpretations of how a song is played, and others get to read it and rate it. A tab tells you exactly how to play a song on the guitar, and the chords tell you loosely how to play it on any polyphonic instrument (guitar, piano, etc). The trouble is that anyone can submit a tab, whether they really know how to play the song or not.

I'm trying to learn how to play the song Jesus, Etc., by Wilco. Here are my options:

List of available tabs from ultimate-guitar.com. Five entries are available: two with 5 star ratings and two with 4 star ratings. All links are bright orange.

Having a lot of choices is common on big tab sites. Let's say I go for the top choice. It's rated five stars, and if it's faulty, I'll go to the other five-star entry. I try it, and it turns out the two people who rated it are nuts. I go back to the index and I see:

List of available tabs from ultimate-guitar.com. Five entries are available: two with 5 star ratings and two with 4 star ratings.

The link I clicked looks the same as the rest. If I just spent 3 and a half minutes trying to play this song, I have no idea which link I already clicked on.

Your user needs to know where they've been

In the above example, I'm just as likely to click on the same link again, although I've already decided that's not the page I need. That's wasting my time and expecting too much of my memory. In a directory like this, when your user is forced to result to trial and error, it's especially important.

Visited links don't have to be purple

They can be any color you want, just as long as they're different from normal links, and different from normal text. A common choice is fading your standard :link color. Here's an example from digg.com:

Screenshot from Digg shows a light blue, underlined headline and a blue, underlined headline

Visited links not only help users avoid pages they don't want to go to, they help users find pages they want to get back to. Styling the visited links in your site's content will vastly improve your users' experience.

Customizing WordPress permalinks, removing /category/

This post assumes you have WordPress's "pretty permalinks" set up already and have configured your htaccess file.

Some people don't like the date-based structure of WordPress's "pretty permalinks." Personally, I think it'd be more valuable for SEO to have a link that looks like this:

/blog/categoryname/post-title/

than the wordpress standard, which is: /blog/year/month/day/post-title/. From a usability standpoint, I could see why a blog that's not a personal journal would be better sorted by category than by date.

In your WordPress administration panel, go to "Permalinks" underneath "Settings" in the left hand navigation.

Under common settings, select Custom Structure and enter in the following: 

/%category%/%postname%/

This will make your permalinks look like /blog/categoryname/post-name/. Whenever you make changes to the Permalinks Settings, WordPress will tell you to "update your htaccess file" if your don't have it set up as writable. Don't waste your time. Once your htaccess file is set up for WordPress permalinks, it will stay the exact same unless you change the install directory.

Remove /category/ from permalinks

On the same page (Settings->Permalinks), under Optional, enter a period into the Category Base field. The only difference this makes is in the category links generated by WordPress. Had you left the field blank, /blog/categoryname/ would still load up the archives for that category.

However, if you had left the field blank and used the template tags wp_list_categories or the_category, WordPress would still create links like this: /blog/category/categoryname/. The period removes the /category/ part from those automatically generated links.

Photoshop: quick black & white preview

A lot of big name designers think it's a great idea to look at your layouts in black and white to get a more clear idea of spacing, hierarchy and contrast. This is a quick way to work in monochrome in photoshop:

Go to the Layers palette and make sure you have the topmost layer selected. Click on the black and white circle at the bottom and select "Black & White" from the menu.

This will add a layer called "Black and White 1" that will make anything below it monochrome. Make sure this layer is at the top of your document or else it won't be of much use. Now you can show or hide this layer as you work and preview what you've done in black and white.

Using ALT tags properly in emails and XHTML

ALT tags are heavily misunderstood. ALT tags are great for accessibility and slower connections, but they are often misused. This is a big trend in emails I've received lately:

Sample email reads: spacerspacer spacerspacer Wells Fargo spacerspacer Start Saving Time and Money

This is what I see before I click "show images in this email." In other words, this is what everyone sees first. No one should be able to know your "spacer" exists, even if images are disabled.

Here's another email viewed from my Gmail inbox:

Gmail preview reads: corner corner tablel

This preview should list the first line of text in the email. Instead it shows the ALT text for images that serve to style the email.

No ALT Tags?

Don't get me wrong. Not using ALT tags means your code won't validate and screen readers will read the image's src attribute aloud. There's talk of changing this in HTML 5, but for now we're stuck with XHTML and HTML 4.

Use Empty ALT tags instead

An empty alt tag looks like this: 

<img src="image.png" alt="" />

It signifies to the browser, email client, or screen reader that this image has no informational content. It says "this image is just for decoration, move along." This is what should have been used in the emails posted above. Empty ALT tags will validate. An image with no ALT tag will not.

Accessibility

Think about this from an accessibility standpoint. Before you click "show images," you're basically seeing what a screen reader does. I can't think of a more useful way of making your emails accessible and degradable. Look at this and think about how ALT tags really help visually impaired users.

Is it helpful when showing a stock photo of a man with a briefcase to say "picture of businessman?" No way. Stock photos like this never communicate any visceral information, they're just there because your marketing team likes them.

Be smarter with your ALT text. Your logo needs ALT text, because it says your company's name. Your big promotion banner needs ALT text because it describes your big promotion in your favorite font. Use your best judgment, think about what your image communicates and you'll do well.

« Older Entries
Newer Entries »