CSS Menus Made Simple

CSS is wonderful stuff.  Really.  If you know what you’re doing, you can twist standard, boring HTML elements into almost any display state you like, all while maintaining the sort of semantic accessibility that’s so important for things like SEO and section 508 compliance.

One of my favorite examples is turning a standard HTML list into a menu.  As with all things, we begin by using HTML to define the kind of information being displayed.


Simple, straightforward, boring, yet effective at communicating that this is an unordered list of links.  Take note of the IDs I’ve included; these will be important later.

Enter CSS to make this menu beautiful.  Let’s say we have an image prepared that is meant to serve as the menu.  And let’s say this image is using gradients or drop-shadows or a font that isn’t safe for use on the web, all good reasons to make it an image rather than text on a background.

We begin by defining the image, text and all, as the background of our menu item list and setting its width and height to exactly match the width and height of the image.  We’ll also need to break the list items out of their display state and redefine them as blocks.  While we’re at it, let’s hide the text; it’ll just be getting in the way of our beautiful menu image anyway.


ul#menu {
 background: url(/path-to-images/main-menu.png) top left no-repeat;
 height: 31px;
 width: 500px;
}

ul#menu {
 list-style-type: none;
}

ul#menu li {
 display: inline;
}

ul#menu li a {
 display: block;
 text-indent: -9999px;
}

Now, we’re going to need to move these anchors around in a minute, so we need to set their position to absolute.  To make it work correctly, we’ll also need to create a positioning context by setting the containing list’s position to relative.  Don’t worry; it’s not going anywhere.  This is just a trick that makes the list items move absolutely in reference to the menu rather than the whole page.


ul#menu {
 background: url(/path-to-image/main-menu.png) top left no-repeat;
 height: 31px;
 position: relative;
 width: 500px;
}

ul#menu {
list-style-type: none;
}

ul#menu li {
display: inline;
}

ul#menu li a {
 display: block;
 position: absolute;
}

Okay, we’ve got the image in place and the anchors redefined as blocks within it.  Now it’s time to position them.  Remember those IDs I defined earlier?  By referencing those, we can set each menu item’s unique width, height, and position.


ul#menu li a#menu_item_1 {
 height: 19px;
 left: 9px;
 right: 6px;
 width: 91px;
}

ul#menu li a#menu_item_2 {
 height: 19px;
 left: 107px;
 right: 6px;
 width: 91px;
}

ul#menu li a#menu_item_3 {
 height: 19px;
 left: 205px;
 right: 6px;
 width: 91px;
}

ul#menu li a#menu_item_4 {
 height: 19px;
 left: 304px;
 right: 6px;
 width: 91px;
}

ul#menu li a#menu_item_5 {
 height: 19px;
 left: 402px;
 right: 6px;
 width: 91px;
}

Finding these values can take a bit of work.  Often times, I’ll open the image up in PhotoShop and measure them out.  I may also use the Firefox Web Developer Toolbar’s Edit CSS function to place them incrementally.  Just apply a static background color to each menu item block, adjust the size and position until it’s where you want it, then remove the background color and save.

Voila!  Now you have a menu that is beautiful, fully accessible, and all-around… wait, what’s that?  You want rollover states, too?  No sweat.

You already have the entire menu defined.  Now all you need are images to swap in as backgrounds when the user mouses over the menu items.  Note that these should be the exact height and width of the menu items themselves, and should mesh seamlessly with the background image to keep your users none the wiser.  It helps to have a modified version of the original menu that you can cut into chunks for this purpose.

Once you have your rollover images ready, just define them as background images for the active and hover states of your existing menu items, like so.


ul#menu li a#menu_item_1:active, ul#menu li a#menu_item_1:hover {
 background: url(/path-to-images/menu-1-rollover.png) top left no-repeat;
}

ul#menu li a#menu_item_2:active, ul#menu li a#menu_item_2:hover {
 background: url(/path-to-images/menu-2-rollover.png) top left no-repeat;
}

ul#menu li a#menu_item_3:active, ul#menu li a#menu_item_3:hover {
 background: url(/path-to-images/menu-3-rollover.png) top left no-repeat;
}

ul#menu li a#menu_item_4:active, ul#menu li a#menu_item_4:hover {
 background: url(/path-to-images/menu-4-rollover.png) top left no-repeat;
}

ul#menu li a#menu_item_5:active, ul#menu li a#menu_item_5:hover {
 background: url(/path-to-images/menu-5-rollover.png) top left no-repeat;
}

Congratulations, your new menu is now beautiful, fully accessible, and dynamic, to boot.  Not to mention, your design is also fully removed from your HTML.  As a bonus for using a pure CSS solution, there’s absolutely no JavaScript to muddle up your cross-browser compatibility.

Why NYTimes.com Gets a Majuscule “A” for Usability

Case: “Majuscule”

Whenever I’m presented with something I don’t know, I have an almost instinctive habit of looking it up.  It’s not necessarily a bad habit; in fact, several of my coworkers seem to rely upon it.  And I could argue that it’s foolish not to do so with the wealth of the world’s knowledge at my fingertips, but admittedly, it’s just a compulsion of mine.

The other day I was monitoring Reddit, as I have been apt to do since I began my experiment in social media, and I came across a curious NYTimes.com article about the capital “I”. For some linguistic reason that I don’t fully understand, however, they didn’t use the word, “capital.” Instead, they called it, “majuscule.” If you already knew what this word meant without reference, I tip my hat to your vocabulary, because I had no a clue.

As I went to double-click this word to copy it for a dictionary search, something magical happened. Without having to open a separate window, type in a domain name, wait for it to load, paste the word, hit submit, and wait again, a window popped up with the definition of majuscule.

I was awestruck. Had I inadvertently done something clever? No, the page that popped up was still on NYTimes.com. After a bit of searching, I discovered that this was a standard feature of the site. Every time a user double-clicks a word on NYTimes.com, a window pops up with the definition. From the NYTimes.com website:

Point: Intuitive Usability

To say that this is a brilliant example of usability would be a massive understatement. Without being aware that the site offered this functionality, I nonetheless availed myself of it without doing anything out of the ordinary. The site designers saved me precious seconds and left me with a very positive impression by giving me exactly what I wanted, almost before I knew I wanted it.

The take-home lesson is that usability is about making something easier to use. The more intuitive the feature, the more readily and happily users will adopt it. In this case, I didn’t even have to know the feature existed for it to improve my experience. I wanted something, went about my normal routine of getting it, and got it much faster than expected. If this had been a restaurant, I would’ve exclaimed, “Now that’s service!”

The question to ask yourself is, what is my website doing to make my users’ lives easier? Where can I cut out needless steps? What features could stand to be more intuitive?

A Golden Delicious Lesson in Usability

Golden Delicious Apple

Case: A Hassle a Day…

I love apples. In fact, I eat one almost every day with lunch, to the point where you might think I’m testing the, “An apple a day keeps the doctor away,” hypothesis. As the title of the post might suggest, my favorite variety is golden delicious.

Now, aside from rinsing off pesticides, apples don’t really require any preparation in order to eat. That’s the beauty of them. You can eat them as soon as you pick them up. Of course, you could wash them, peel them, slice them, or use them as ingredients in other dishes, but if you’re like me, you value them for their convenience (and flavor, of course).

What I find to be decidedly inconvenient, however, are the stickers that get placed on them. At every grocery store I shop at, I find the same sticker with the “4020” item number on my apples, supposedly placed there to make them easier to process at checkout. This could possibly be valuable to someone who buys apples for the first time, but checkout is a no-brainer for the rest of us, so the added value is practically nonexistent.

On the other hand, it’s frustrating to peel off. What is supposed to be a no-preparation-necessary food instead requires me to take precious seconds prying a sticker off with my fingernails. It is a needless extra step that irritates me on a daily basis.

Point: …Keeps the User Away

Is this feature adding value? That is the question you need to ask whenever a design decision impacts the user experience. My question to the grocery industry is this: Do you think you’re adding value by putting product code sticker on my apples?

It may seem like a little thing, but any usability expert knows that little things can mean a big difference. In my case, the sticker is worsening my experience. It is reducing the value of my interaction with the product, and by extension the store, by needlessly increasing the steps toward achieving gratification.

Is it enough to make me stop buying apples? No, of course not. Assuming equal quality and convenience, however, it might mean the difference between me buying apples at a grocery store that doesn’t use stickers instead of one that does. Depending on how many people are irritated by these stickers, and how much, that might mean a significant loss of revenue.

The question to ask yourself is this: What are my apples stickers? What small things am I doing that are large problems in the eyes of my users? Am I listening to my users and addressing their concerns?

Remember, usability matters in every context, on every scale. Worry about the big things first, but don’t forget that little things matter, too.

Launching a Successful Website, Step Six: Maintenance

“Good decisions are not made; they are managed.”
– John Maxwell

Maxwell’s point is that just making a good decision is easy. However, most people fail to live up to their good decisions. Only those who stick to their goals with consistency can ever achieve them. That is to say, the decisions that bear fruit are those that are managed well day in and day out.

The same logic applies to websites. You can follow all of my other steps for launching a successful website. As a result, your launch may be a resounding success. Without regular maintenance, however, that success can only be temporary. Anyone can build a website, but the most successful websites are those that are managed well after launch. Thus, in many ways, step six is the most important step of all.

First and foremost, you have to deliver on your promises. If you’re a blogger, post regularly, engage your commenters, and converse openly with others in your niche. If you’re an ecommerce site owner, maintain proper product listings, ecommerce gateways, and distribution systems. Whatever your site is supposed to do, put in the work to make sure it keeps doing it and doing it well.

Toward this end, you must enforce accountability. People are more diligent when they are held responsible. Identify which of your experts is tasked with each aspect of site maintenance, then develop metrics to track their performance and monitor them on a regular basis. Ideally, good performance should be rewarded to keep everyone’s interests aligned with the site’s success.

It’s also important to address user concerns. Only the simplest sites can hope to persist after launch without problems cropping up. If your visitors or your experts are complaining, attempt to resolve the issue. Give any feedback you receive its due consideration; even the belligerent ravings of a disgruntled user can reveal a genuine problem that deserves attention.

In a similar vein, it’s important to know your market. If you run a gadget site, but you don’t know about the latest and greatest gadgets available, your site will fall behind its competitors. Likewise, if you run a news blog, but you don’t keep an eye on the top headlines, nobody will give your posts the time of day. Know what’s happening in your market and how those changes affect your website. Otherwise, it will fail no matter how well it is maintained.

Lastly, and most importantly, remain vigilant. Your site may be buzzing along fine one day and experiencing serious problems the next. It doesn’t pay to become complacent and assume that everything is fine. Regular review and quality assurance will go a long way toward rooting out problems that don’t crop up elsewhere.

With all the work you’ve already done to plan, build, and launch the site, what matters now is that you know what needs to be done to maintain the its momentum and ensure that those things are done with consistency.

In my next post, I’ll address the final aspect of launching a successful website: Growth.