Tuesday, March 19, 2024

Web Developer Class: The Minimalist Approach to Building a Menu

There is nothing worse than a web site that looks like it was built 10 years ago. If you’re lucky enough to have a visitor land on your page, and the first thing they notice is that you’re using conventions that went out of style five years ago, chances are they are going to leave your page very quickly. You do not want your visitor’s first thought to be, “Gee, when was the last time this site was updated?” While you don’t have to implement all of the latest widgets and the newest tools to your site as they are released, it’s still a good idea to keep current with what the most-visited sites are doing.


According to Alexa, the top-five most visited sites are Google, Facebook, YouTube, Yahoo and Windows Live. Let’s break down the styles for their menus and navigation:


  1. Google – No drop down menus and they have 10 options across the top of the page, all of which use a basic font with no decoration. Google is famous for their minimalist approach. After looking at the next four sites, you’ll notice that the minimalist approach is widely used for horizontal navigation.

  2. Facebook – No drop down menus and only three options across the top of the page. However, there are more menu items along the left side of the page.

  3. YouTube – They have one drop down menu, but only to access your account. The other top menu options are direct links without the drop down effects. There are also more menu items on the left side of the page.

  4. Yahoo – Once again, there are no drop down menus, but they do use menus on both the top of the page and the left side of the page.

  5. Windows Live – Microsoft appears to be the exception to the no-drop-down-menu rule. They do use drop down menus, but like the other top sites, they have a minimalist approach to the options and offer only five navigation items across the top.

What can we learn from this? First, a minimalist approach to navigation is best. Place only 5 to 10 items across the top of the page and keep the decorations to a minimum. If you have many more options for your visitors, then place the long navigation laundry list of items running along the left side of the page. Second, it appears the drop down menu is no longer a fashionable feature to a site.


Several years ago I was on a team to help redesign an entire site. The navigation and menus were closely looked at for best optimization. This was at a time when drop down menus were all the rage and new tricks and techniques were being introduced. During the testing of this multi-tiered drop down navigation menu, I noticed the User was required to exercise extreme finesse to use it. If the mouse or cursor drifted off from the center of the menu, then the entire menu would collapse, this could prove extremely frustrating if you had drilled down to the third tier of the menu.


Needless to say, I am very happy to see the drop down menu trend has come and gone. In its place are simple, uncluttered and basic options. You only have a few quick seconds from the time a visitor lands on your page to the time if they decide if they are going to stay or not. You do not want your visitor clunking through a clumsy drop down menu in those first few seconds. What you want is for them to start clicking, navigating and finding what it is they are looking for. Most visitors will tolerate clicking through two or three pages to find content, however, visitors will continue to click through more than three pages if they feel they are on the right path to finding what they want.


By providing only a few, general navigation choices along the top of the page, visitors don’t have to guess which menu they want to click. For example, if you have a real estate site, the top level menu might include, “Listings” as opposed to “Houses,” “Condos,” and “Commercial.” The latter are excellent second level page menu items or could be listed along the left side of the page.


Another consideration when building your menu is to keep it uncluttered. You might have noticed after looking at the top five sites that the majority of these horizontal menus have solid colored backgrounds, little or no images and no extravagant fonts. They all adhere to the idea of keeping things simple. Many of them don’t even use buttons for the menu items. It’s just simple, undecorated text.


The best way to implement this simple, undecorated top level menu with no images is using a table. You could use CSS, but that might be overkill. Here’s what it looks like:

Page 1 Page 2 Page 3


And here’s what the HTML code looks like:


<table CELLSPACING=”5″ width=”1000″>
<tr>
<td>
<a href=”Page1.htm”>Page 1</a>
</td>
<td>
<a href=”Page2.htm “>Page 2</a>
</td>
<td>
<a href=”Page3.htm”>Page 3</a>  
</td>
</table>

If your site still uses drop down menus with more than 20 items to choose from, it might be time to update your site. Take a look at your analytics and determine what the top few areas of your site are; doing so should provide you the menu options for your horizontal menu.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured