This is just from my personal observation while using the Internet…did I hit the nail on the head?
Note: I don’t run my sites for any profit, and I realize sites that are designed for profit have to make money…but sometimes all the “attention-grabbing” text gets a little much for the average Internet user, you know? 🙂
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. 😀
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)
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. 😀 )
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)!
Just like clothing fashions, web fashions go in and out of style, even within a year. I remember when transparent iframes and HTML tables were all the rage back in the mid-2000s, for instance. Today’s super-sleek, Apple-Corporation-like webdesigns are on trend for the moment, but they may fall by the wayside soon. And, when they do fall out of fashion, most of us webdesigners will feel the pressure to “move with the times.”
I say, however, that we don’t necessarily have to throw out all of our “old” design practices with every new trend that comes along. Instead of “keeping up with the Joneses” (or the webmasters), how about some “timeless Internet fashion” blended in with new trends?
Timeless Webdesign Tip #1: Create a Design that’s Easy to Use
Whatever content you have, whether it’s text article, photos, videos, sound clips, etc., make sure your site is easy to read and browse:
A site that’s easy to look at and use is a site that will please visitors. Think about what you like to see when you visit a site–this will help you get the design process started.
Timeless Webdesign Tip #2: Keep your Site Organized
Group your pages together logically in your navigation structure, and create a sitemap for larger sites. You can also put in breadcrumb navigation if you have lots of subsections.
Having an organized site makes it easier for your visitors to find what they’re looking for on your site, which means they will more likely return for another visit. And isn’t that what all us webdesigners want?
Timeless Webdesign Tip #3: Interpret New Webdesign Trends for Yourself
Instead of copycatting what everyone else seems to be doing in webdesign, take time to study the new style, and figure out what you like about it. Use web trends as a way to inform and inspire your designs, not as a rigid rulebook for how you “ought to” make your sites look.
You might find, for instance, that you like that new color scheme everyone seems to be raving about, but you don’t like the layout it’s commonly used with. Instead of forcing yourself to use a layout you don’t like, just incorporate your most favorite parts of the color scheme into a layout of your own making. This keeps your site looking fresh and updated, without forcing it into a design cookie-cutter.
Summary
Since web trends are almost always changing, but there are definitely design concepts that never go out of style–and there are ways to personalize each trend for yourself as it comes along. After all, who wants to browse 10 different sites that all look the same? Help your site stand out with your own personal style!