When and How to Use a Horizontal Drop-Down Menu

February 27th, 2012 by , in Monday in the HTMLab
Tags: , , ,

Before beginning this post, I thought I’d be all smart and helpful and write a tutorial on how to do a horizontal drop-down menu using CSS. That was before I Googled how to do it, and discovered that no less than five people had beaten me to the punch. :D

I linked to those five tutorials (at the end of this article), and took a new tack: WHEN and HOW to use such a design. As with all styles of design, there are times where such a menu is appropriate and times where it completely breaks the look and functionality of your whole page.

Why Use a Horizontal Drop-Down Menu?

If you’re considering using a menu like this, you probably want to condense and simplify your navigation, or you want to use your sidebar space for something other than navigation (like ads, links, recent posts lists, etc.). Both are worthy goals–using as much screen space as you can closer to the top of your page ensures that more content can be displayed “above the fold,” so that the user does not have to scroll down.

Also, horizontal drop-down menus are great for decluttering a website’s look–somehow, it adds a sleekness that vertical navigation just never gives. If you’re looking for ways to neaten up the appearance of your site, such a menu design could be the very thing you need. And of course, if you already have a simple navigation (just a few pages in a couple of categories), then this look is perfect for your site.

When to Keep Away from This Menu Style

Just because you CAN do a horizontal menu with drop-down space doesn’t mean you SHOULD.

If you have just a few categories with lots of links in each one, you should not use this style–it will make your drop-down menu way too big and clunky on your page.

Also, if you have content high up on your page that you don’t want covered up at all (like sidebar widgets or important updates), I’d advise against this style, because your users will automatically be drawn to the menu and may never see your content.

How to Implement a Horizontal Menu Beautifully

Four Visual Degrees of Drop-Down Menus: From Worst to Best


#4. Not only is this menu HUGE, covering up much of the page underneath it, but its links are formatted in this weird, widely-spaced, almost tabular layout. It is visually confusing–everything looks the same, and it’s scattered all over the place.


#3. This menu is a little bit better–it’s big but doesn’t cover up the whole page underneath it. But its text formatting is strange; why all the space between each item, and why such huge font? Plus, the two top categories in bold are a bit vaguely worded, which means no one is going to click on them.


#2. This menu is more compact, with manageable font size and spacing, and a simple two-column link layout. But it still feels a bit “busy” with links.


#1. We have a winner! This menu is very compact, yet has big enough font size to read. Plus, it’s got high-contrast colors between the background and text colors, and its links are sorted alphabetically. Makes it very, very easy to find what you want, which is the point when designing a good navigation menu of any sort.

Learn How to Code and Design This Menu Type

AListApart (basics)
Onextrapixel (combines HTML, CSS, and JQuery)
CSSNewbie (VERY easy to understand–even I got it!)
Sperling.com (a little more jargon-heavy, but still a good reference)
MyCSSMenu (if you don’t want to fool with the code)

no comments

Font Series Wrapup: Fonts You Need for Your Toolbox

February 20th, 2012 by , in Monday in the HTMLab
Tags: , , ,

As an ending to this series of font-tastic posts, I am recapping some of the best fonts I discovered while doing font research. The five I have chosen for today’s post are, in my opinion, the most usable and easily-read of all the fonts in each category I wrote about (fancy fonts, sans-serif/serif body fonts, bitmap fonts, and symbol fonts). I hope you find them as useful and awesome as I have–I’ve already downloaded them all for use in my future designs!

(By the way, I provide links back to the articles I wrote for each category, so it’s easy to check through the articles and see if you agree with my picks. :D )

Best Fonts from This Article Series

Best Bitmap Font:

Ernest
Why? Because it provides the smallest and yet most readable text for itty-bitty graphics. I’ve long used it for link buttons, but it has a variety of uses around a website.
Best Symbol Font:

CD-Icons
Why? Because it has a ton of symbols–even symbols for special characters, like accented E’s, etc. It literally has a symbol for every character you can think of, and they are all useful in an icon-based design.
Best Fancy Font:

Dhe Mysterious
Why? Because it has a well-defined character set, and yet it has a beautiful wispy quality to it too…strong but soft. Great for titles and headings, but not too bold.
Best Sans-Serif Body Font:

Alido
Why? Because it’s not Arial, Verdana, or Helvetica, but it is still legible–it’s different without being tiring on the eyes after reading a page or two written in it.
Best Serif Body Font:

Timeless
Why? Graceful without being overpowering–and again, it looks different enough from Georgia, Garamond, and Times New Roman.

Summary

Fonts are, for me, one of the most important parts of web design, because a good font choice means that people can read your content (what they came for). Making a website beautiful AND easy to use/read is what webdesigners are all about, after all!

I hope that this font article series has helped you discover new fonts for your own site designs. It certainly has been fun for me to review all these different fonts (and find new favorites)!

comment (1)

Keeping Up with the Webmasters

September 12th, 2011 by , in Monday in the HTMLab
Tags: , ,

As fast as Internet changes, it’s incredibly hard to keep up with the latest trends in news and social media, let alone web design trends. (Sometimes you’re lucky just to get one design up that works!) Just like clothing trends, web fashions go in and out of style, sometimes faster than we can keep track of.

Some examples: remember using HTML tables to align your content on the page? How about transparent iframes? Huge RSS feed buttons (or just huge navigation buttons in general)? Animated “email-me” buttons?

These were all web trends of the last ten years, and as the software for making websites has advanced, so have our designs. We’re all now looking for super-sleek, slinky Apple-Corporation-like webdesigns that shine and reflect like an iPad’s screen, but that trend may not last long, just as HTML tables and iframes went the way of the dodo bird in the world of elite web designs.

Basically, whenever somebody finds an innovative way to design, it catches on, and suddenly everybody’s got to have a site that looks like that. And sadly, if you don’t create a site that conforms to these “web-fashion rules,” you’re likely to get trolled by people who are apparently the gods of modern webdesign, pooh-poohing your “sad little attempt at design.” (Yes, I’ve had that happen to me, thankfully not recently, but it made me pretty mad.)

I don’t hold with such elitist snobbery, nor do I hold with copycatting whatever everyone else is doing on the internet. I like to go my own way, design my own ideas, because where I come from, “copycat designs” are called plagiarism. ^_^ I’m the same way with my clothes–I don’t like following fashion trends because they change too fast and I don’t like to look like everyone else. Instead, I pick pieces that I like and that look pretty on me, and who cares if they’re from the dreaded “last-season” pile or not.

While following this “pave-your-own-way” belief in both fashion and web-fashion, I’ve found a few timeless design concepts that seem to make my users just as happy as if I’d jumped on the sleek-n-sexy bandwagon with everyone else:

Robin’s Timeless Web-Fashion Guidelines

What to Do with New Trends, Instead

Now, I’m not saying completely ignore new webdesign trends. It’s good to stay up on what other people are designing, because you might find that someone has discovered a new way of setting up a page that would be much easier than your current setup. Or you might come across a color scheme that everyone seems to love, and you love it, too.

Any time you find something in a new trend that you like, feel free to use it as inspiration for your next great layout or page structure. If you loved that itty-bitty box at the top right of the page set aside for “Latest Tweets,” figure out how to code it and put it on your page, but don’t feel bound to make the little box look exactly like the other person’s. If you loved that black/steel-gray/teal-blue color scheme and think it would look good for your new site, go ahead and design a new layout around it, but don’t feel obliged to lay out your page in the exact way the other designer had it. Use web trends as a way to inform and inspire you, not as just another trend to blindly follow.

Summary

Web design trends are constantly changing, but you don’t always have to drop everything you’ve been doing in favor of the “new hot look.” Sometimes, keeping up with the webmasters is too much trouble. Instead, do what YOU think fits your site–design what YOU think looks best and showcases your content, and maybe incorporate some elements of the “new hot look” if you like it. After all, who wants to browse 10 different sites that all look and feel the same?

no comments