Navigate Yahoo! Mail

Navigate Yahoo! Mail

Find your way around the Yahoo! Mail interface, and speed up common tasks with keyboard shortcuts.

Yahoo! Mail has been a runaway success because it's easy to use. Web-based email gives users an account they can access from any machine with an Internet connection. You don't have to know how to configure an email client such as Outlook to use Yahoo! Mail; you just need to know how to use a browser. You won't have any trouble using Yahoo! Mail to send messages across the Internet, but by taking a few minutes to learn how Yahoo! Mail is organized, you might find ways to speed up the way you send email.

Yahoo! Mail Layout

You can get to your Yahoo! Mail by browsing to http://mail.yahoo.com. You can also type mail! into any Yahoo! Search form to go directly to Yahoo! Mail. This even works from external search forms, such as the Firefox Quick Search Box [Hack #13].

In addition to using the mail! shortcut, you can get to most Yahoo! properties by typing the property's name into a Yahoo! search form and adding an exclamation point. Try others, such as directory!, finance!, tv!, and movies!.

Yahoo! Mail is really four applications in one, and here's a quick look at how you can use each of them:

Mail

As you'd expect, this is the heart of the application, where you can read and send email via your web browser.

Addresses

This is your personal address book, where you can store not only a contact name and email address, but also phone numbers, home and work addresses, birthdays and anniversaries, and free-form notes about each contact. You can access your address book directly at http://address.yahoo.com.

Calendar

This is a space where you can plan your schedule by adding events and tasks to a calendar. You can view the calendar by week, month, or year, and see your tasks as a to-do list. You can also share your calendar with others. Your calendar is available directly at http://calendar.yahoo.com.

Notepad

Your notepad is a place for simple text notes to yourself. If you have some class notes, a shopping list, or any sort of simple text, your Yahoo! notepad will make it accessible from any computer with Internet access. You can add notes to your notepad directly at http://notepad.yahoo.com.

You can access any of these four applications from the tabs in the Yahoo! Mail navigation bar shown in Figure.

This navigation bar is available toward the top of every Yahoo! Mail page. In addition to the navigation tabs, it shows you the path to checking and composing email, searching your email, and editing your preferences with the Mail Options link in the upper-right corner. Be sure to note the location of the Mail Options link, because it's the key to setting your preferences.

The Yahoo! Mail navigation bar

Keyboard Shortcuts

If you want to give your mouse muscles a break, you can also navigate with a few built-in keyboard shortcuts. These shortcuts are simply combinations of keys you type to move around within Yahoo! Mail. For example, say you're looking through events in your calendar and you realize you need to fire off an emergency email related to something you've found. You could click the Mail tab and then the Compose button from the navigation bar. Or you could type Ctrl-Shift-P on the keyboard, and you'll find yourself at the new mail form.

It takes a bit of keyboard dexterity to hold both the Ctrl and Shift buttons down while pressing a letter. But once you get the hang of it, you can speed up some of the most common tasks:

Check mail

Ctrl-Shift-C

Compose new mail

Ctrl-Shift-P

View folders

Ctrl-Shift-F

Open the Advanced Search form

Ctrl-Shift-S

Get help

Ctrl-Shift-H

These keyboard shortcuts are available anywhere within the Yahoo! Mail application, including your address book, calendar, and notepad.

Custom Keyboard Shortcuts in Firefox

If the built-in keyboard shortcuts aren't enough for you and you use the Firefox browser, there is a way to add your own custom keyboard shortcuts. A Firefox plug-in called Greasemonkey lets users add their own bit of JavaScript to any website, which means they can add their own features, such as keyboard shortcuts.

To get started you need to install the Greasemonkey plug-in, available at http://greasemonkey.mozdev.org. Click the Install Greasemonkey link, and you should receive the plug-in automatically. With that, you're ready to write your code to implement the shortcuts.

Anatomy of a keyboard shortcut.

This code builds on top of some JavaScript functions that already exist at Yahoo! Mail. Yahoo! Mail uses a function called addKey() to implement its own keyboard shortcuts across the site, and the following Greasemonkey script simply uses that function to add new shortcuts. This also means that the script is entirely dependent on Yahoo!, and if Yahoo! changes the code at any point in the future, this script will become useless.

The primary pieces of the addKey() function are the first and third arguments sent. The first argument is the character code of the key that is pressed, and the third argument is the location the browser should navigate to when it encounters that code. So, if you'd like to show the address book when you click Ctrl-Shift-A, the first task is to find the character code for the letter A.

Finding the character code for any given keyboard key isn't obvious, but you can accomplish the task with some JavaScript. Add the following code to a blank web page:

	<script>
	document.onkeydown = showKeyCode;
	function showKeyCode(e) {
		var code;
		if (!e) var e = window.event;
		if (e.keyCode) code = e.keyCode;
		else if (e.which) code = e.which;
		var character = String.fromCharCode(code);
		alert('Character ' + character + ' code: ' + code);
	}
	</script>

Bring the webpage up in a browser, and then press any key. As you press the key, an alert window will let you know the code for the character you just pressed. As you press G, for example, the script will send the alert: Character G code: 71. You'll need the character code for any keyboard shortcut you'd like to create, and once you have them listed, you can move on to the Greasemonkey script.

The code.

Save the following code to a file called yahoo_keys.user.js. It is important to include the .user.js extension because that's how Firefox knows the script is a Greasemonkey script rather than a standard JavaScript file.

	// ==UserScript==
	// @name			Yahoo! Mail Keys
	// @namespace		http://hacks.oreilly.com/
	// @description		Uses existing Yahoo! Mail functions to add a keyboard 

	shortcut
	// @include			http://*.mail.yahoo.com/*
	// ==/UserScript==

	(function() {
	
	// Trash | CTRL-T
	oKey.addKey(84,-1,"location='/ym/ShowFolder?rb=Trash'","shift+ctrl");

	// Draft | CTRL-D
	oKey.addKey(68,-1,"location='/ym/ShowFolder?rb=Draft'","shift+ctrl");

	// General Prefs | CTRL-G
	oKey.addKey(71,-1,"location='/ym/Preferences'","shift+ctrl");

As you can see, each line of the script is calling the existing addKey() function. The first argument is the character code, and the third is the location the browser should visit when that key is pressed. The last line shows that the letter G (character code 71) should bring up the Yahoo! Mail Preferences page.

By studying Yahoo! Mail URLs, you can come up with your own keyboard shortcuts. If you have a custom mail folder called Business that you'd like to access when you press Ctrl-Shift-B, you could add a line to the script like this:

	
	// My Business Folder | CTRL-B
	oKey.addKey(66,-1,"location='/ym/ShowFolder?rb=Business'","shift+ctrl");

Running the hack.

To install your keyboard shortcuts, open yahoo_keys.user.js in Firefox. From the Tools menu, click Install User Script. Greasemonkey will ask you to confirm that you'd like to install the script for use at Yahoo! Mail. If it all looks good, click OK. From there, you can reload Yahoo! Mail to start using your custom shortcuts.

Although Yahoo! Mail is easy to navigate even without keyboard shortcuts, you might find that you're able to accomplish routine tasks a bit more efficiently without the mouse.