Today, we’re revisiting the long-ignored second part of my Navigation Placement series, New Ideas to Try. I have significantly revamped the post, making it about 300 times better (and with more mobile-friendly design advice this time!). Click and read through!
Tag Archives: navigation
Glasses Off: 4 Awesome Webdesign Sites
Here in the HTMLab, I’m fairly skilled at what I do (namely, HTML and CSS), but many of my articles would not be complete without some heavy-duty online research and self-teaching. Listed below are four sites whose tutorials make it easy for even this self-taught, non-technical webdesigner to understand:
WebDesignerWall
Awesome articles abound here about the subtler points of design (which I definitely need help with!)
WebDesignLedger
This site covers everything from helpful webdesign tools to overarching Web trends…really informative!
Webdesign Tuts
Need a tutorial on how to make a webdesign visually work? Webdesign Tuts (part of the TutsPlus network) likely has the help you need, for both front-end and back-end design.
Webdesigner Depot
This site literally runs the gamut of everything a webdesigner is concerned about (even marketing and branding)! You could spend hours browsing and learning.
Easy-to-Code Navigation that Scrolls With You: It’s Possible!
These days, navigation that follows a user down the page is a very attractive and user-friendly design. When a user doesn’t have to scroll all the way back to the top of the page to get to the navigation, and doesn’t even have to fool with clicking a “back to top” link, it’s a wonderful thing.
But it’s a little challenging for us web designers to get it done, as I discovered while researching for this blog post; there are plenty of designers looking for ways to make this happen in their own layouts, and there are just as many solutions in various programming languages.
Eventually, I just opened my trusty Notepad++ and started knocking together some code myself–and I accidentally found a very, very simple CSS solution.
Robin’s Sticky Nav Bar: The (Code) Recipe
Click to see my simple “sticky nav bar” demo! (opens in new window)
To make the above page navigation work, it took about an hour of experimenting with HTML and CSS, creating a dummy layout and the like. But finally, on a whim, I stuck the following bits of code into my navbar div:
#navbar {width: 900px; height: 40px; padding: 0px; position: fixed; top: 0px; background-color: #0f00a1; box-shadow: 2px 5px #000555;}
The code in bold above is the important bit to see here; this was the magic wand that transformed my plain ol’ horizontal navbar. Once you style your own navbar the way you want it, all it takes is two code bits–“position: fixed;” and “top: 0px;”–to make it stick to the top of the page.
And, to make it centered like the rest of my layout, I made sure to put my navbar div within a container div called “wrap,” styled like so:
#wrap {width: 900px; margin: 0px auto; padding: 0px;}
The following HTML code is what I mean by “putting the ‘navbar’ div within the ‘wrap’ div:”
<div id=”wrap”>
<div id=”navbar”>
<span id=”sitename”>my dummy site name</span> <a href=”#”>about</a><a href=”#”>faq</a><a href=”#”>products</a><a href=”#”>services</a><a href=”#”>support</a><a href=”#”>home</a>
</div>
<div id=”sidebar”>
more code here, etc…
</div> (this ends the “wrap” div)
That’s really all the magic there is to it! (This design works in Firefox, IE, and Chrome; I have not tested it in any other browsers, but it seems that these three handle it identically, so I have hope that it works with all browsers similarly. If you find that this code doesn’t work in a browser I haven’t tested, let me know!)
One Small Caveat:
Fixing your navbar to the top of the page with “position: fixed” works great–but only if you don’t mind your navbar being the very topmost thing to display on your layout. If your ideal navbar is located beneath your header image to begin with, but then sticks to the top of the page when your user scrolls down, then just using “position: fixed” with a different pixel value in “top:” won’t make that happen. (Believe me, I tried–it was fail. I ended up with a navbar just stuck randomly in the middle of the page blocking the content. :/)
So, what to do if you want a navbar that will stick to the top of the page, even if it’s not at the tip-top of the layout to begin with? Well, from what I found in my research, you’re likely going to have to use Javascript/jQuery to make this more complex navbar. Here are two forum/discussion sites which explain these methods much better than I ever could.
jQuery and Javascript Methods for Sticky Nav Bars
- How to Make a Nav Bar that Scrolls with the Page Past a Certain Point: Stack Overflow Discussion (both Javascript and jQuery methods suggested)
- Making a Nav Bar Scroll with the Page @ Codewalkers Forums (Javascript method successful)
Summary
“Sticky” nav bars are sleek, clean, user-friendly–and fairly easy to achieve with these three methods presented here. I hope at least one of these helps you with your next layout!
When and How to Use a Horizontal Drop-Down Menu
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
- Make your categories many and your links within each category few, so that your menu displays in a compact fashion.
- Choose an easily-readable medium text size for your menu options (12-14 pixels for most fonts).
- Make sure your link color and the menu’s background color are different enough from each other to be readable.
- Don’t go crazy with link animations or graphics in your drop-down menu–just text links that match the colors of your site will be much more professional and usable.
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)
Icons Are Like Candy
Due largely to the advent of apps, many webdesigners are choosing to do more of their site’s navigation with the help of icons rather than text. After all, doesn’t it look so much cleaner just to use an icon in place for an RSS feed, or for a Twitter account, than to spell out “RSS Feed” or “Twitter” in text?
Well, yes and no. Icons can look clean and tidy–that is, until you have tons of them on the page. Too many icons can make your site look more like somebody’s cluttered desktop. Plus, if every single navigation link on your page is an icon, users can get easily confused about what to click or tap to navigate your site.
Just like candy, small doses of icons are best, so that your design looks sleek and doesn’t suffer from icon overload. But how many icons is too many? It really depends on how you organize them on the page. See below!
Think carefully about where you place and arrange your icons.
Considering your layout, how and where would your icons be best placed? For some layouts, a small table of icons might work best if you only have a tiny bit of space on your sidebar, in your header, or in your footer in which to display them–see an example below:
But if you have a small strip of space across the top or along the side of your content, you can place icons there, as seen below:
Horizontally-aligned icons can look cool as part of a navigation bar…
…and vertically-aligned icons can look neat on a sidebar.
Give at least 10px of space between your icons.
Visual spacing around your icons is hugely important. Whether you choose to arrange them in a table, like the example above, or whether you choose a vertical or horizontal strip, leave a bit of space around them. This will prevent them looking all crowded together and unreadable. The icons in my example above are spaced 10px apart, giving each one enough space to be clicked on and understood as separate entities.
Be ready to reduce the number of icons.
Take a hard look at all your icons–if they’re collectively taking up at least 200px of vertical/horizontal space, you might have too many. One way I get around this design issue is to design my icons’ display, leave it alone on my hard drive for a few days, and then come back to it with fresh eyes. With time away from it, I can better tell if there are too many even to my eyes. In that case, I pick out the most important ones (the ones I really want my visitors to click on) and put the rest on another page, well-spaced. Try this–your users’ eyes will thank you!
Make use of alt and title text.
For some layouts, you may not want the added clutter of text displaying every time you hover over an icon. For that, you can use alt text in the <img> tag and title text in the <a> tag to stand in for the text hover labels I showed how to do earlier. See how the alt and title text works in the icon table, below:
(Optional) Make a text “hover label” for each icon.
Whether you choose to do a mouse cursor hover effect for desktop users, or a “tap-to-reveal-text” effect for mobile users, it’s important to make it clear exactly what the icon represents before your visitor clicks on it.
There are plenty of dynamic script-heavy ways to do this (like using Foundation), but if you want to label your icons the old-fashioned way, here’s my hack:
1. Put link text below each icon; make the a:link and a:visited text color the same as the background color, and make the a:hover text color a strongly-contrasted color, like the examples below:
For this, I put each icon into its own table cell, and then put a line break between image and text within the link, like so:
<td valign=”top”><a href=”http://www.facebook.com/”><img src=”facebook.png” border=”0″>
<br>facebook</a></td>
For this example, I gave each icon its own table cell and row, and just put a few non-breaking spaces between linked image and linked text, like this:
<tr><td valign=”top”><a href=”http://www.facebook.com/”>
<img src=”facebook.png” border=”0″> facebook</a></td></tr>
Remember that you can have multiple lines of text displaying underneath or to the side of your icons in this format (just using HTML line breaks), as shown below:
The size of your icons is your choice–but think it through!
Icon size is a personal choice, but it also depends on the grandness of the layout you’re designing. If you have a very simple layout, small icons might look sufficiently different enough for users to notice them; if you have a very detailed, graphics-intensive layout, you’ll likely want bigger icons so that they stand out more.
(Also, for responsive layouts meant for mobile designs, big icons are easier for fingers to tap. This message brought to you by a girl with big fingertips. :D)
Summary
Adding icons as part of your site’s navigation is up to you–just remember that a few pieces of icon “candy” go very far on a web design!
Navigation Placement, Part II: New Ideas to Try
In last week’s post, we looked at 3 traditional navigation placements in layout design, and briefly discussed the pros and cons of each. But there are some tricks to changing up and decorating the navigation itself without making it too hard to use, as you’ll see!
Idea #1: Mix in a few icons as well as text links.
Font names, from left: Webdings, Wingdings, Wingdings 2, Wingdings 3, Stateface, Socialico, Nymphette, Entypo, Bergamot Ornaments, Modern Pictograms.
Navigation doesn’t have to be just plain, boring text links–icons are a modern webdesigner’s friend! For instance, you could use the Facebook icon shown above to link to your site’s Facebook page, or you could use the speech bubble icon to show where users can leave comments, etc.
Most designers rely on icon fonts for this; Modern Pictograms, Socialico, and Entypo (all linked above) are some of my favorites, and there’s a more comprehensive list here. To use your icon fonts, you can either link and style them directly in your CSS using the CSS property @font-face (more about that here), or you can use a graphics-editing program to type out each of your needed icons and save them as individual images. Just make sure your icons all have transparent backgrounds so that they blend in more seamlessly with your layout.
(Note: I included some ornamental icons as part of the above graphic as well, for the purpose of dressing up your navigation if you don’t like the idea of just having clickable icons and no text. Icon fonts are multipurpose!)
Idea #2: Keep similar links together.
A long list of unsorted links down one side of the layout can be a lot of text for your visitors to read when they are browsing your site. How about grouping like pages together within your navigation instead?
An example would be my City of Heroes site, Skies over Atlas–I placed all my site content links going down the left side, and used a horizontal navigation bar underneath the header image for my guestbook links, my contact email, a “back to homepage” link, and the links to the Twitter and Tumblr account associated with the site. Even though the navigation is in the same general area on the page, one part of it is devoted to site content, and the other part is devoted to user interaction.
You could also accomplish this with the old standard three-column layout design. Have your main content navigation on whichever side you like, and on the other side, you could have user navigation, admin area, links to your other websites–just anything that isn’t really related to your main content.
Sorting your navigation this way can help your user more easily pinpoint what area of the site they wish to go to. Of course, be sure to label which area is which so the user does not have to read everything to find out where things are!
Idea #3: Combine your header and navigation for a super-streamlined design.
For the tidiest, most mobile-friendly design, pull your navigation into your header space–in fact, just a site logo or site name text plus a horizontal navigation bar can BE your header! This way, your navigation is up where your users see it when the page first loads, and it leaves more room for your content so that perhaps your pages won’t even scroll so much. Your navigation bar can then be colorful or even patterned to play off the colors in the rest of your design, drawing attention to it without making it huge or heavy with text links.
Additionally, using social media icons alongside text links in a horizontal navigation bar at the top of the page can highlight your navigation further, bringing the user’s attention to it as the rightful central hub of your site. As a user, I love seeing an organized navbar like this; I know I won’t have to worry about searching the rest of the page for info I need!
Summary
I hope the ideas in this two-part series have started your brain percolating about navigation. It may sound like the most boring part of your website, but with these tricks, it certainly doesn’t have to be!
Navigation Placement in a Web Design, Part 1: Traditional Placements
Part of designing a website is determining where the site’s main links–its navigation–should be displayed in a layout. It’s important to place the navigation in a clearly visible spot, where the user does not have to scroll or hunt endlessly for it.
Yet many of us webdesigners balk at just putting the navigation in the same tired old places in a layout every time; you want to be able to innovate just a little, make your layout look different from everybody else’s. Yet your site must still be easy to browse.
With that in mind, what are some of the traditional navigation placements?
Position #1: Left of Content
Many websites nowadays have at least some navigational links placed at the far left of their layouts, like the graphic above. For left-to-right readers, this works great, because the left-to-right reader’s eye instinctively navigates to the top and/or left of any page to begin viewing, and having navigation placed there can direct them quickly to your content.
However, this placement being so traditional means that it can be rather boring in terms of design. How much can you innovate a left-aligned navigation without simply imitating what a thousand other webdesigners have already done?
Position #2: Center-Aligned Over Content
This navigational position is great for sites that don’t have a whole lot of links in their navigation, and it’s become a big trend in design as of late. It looks clean and sharp, blends in with the layout a lot better than left-aligned, and it allows room for one or more sidebars of extra content beside your main content block. (This has been especially adopted for mobile-friendly layouts!)
However, this presents a problem when users (especially desktop users) are viewing extra-long pages of content: in order to browse to another page, you have to scroll all the way up to the top again to click on another link. All the “Back to Top” links in the world can’t permanently solve that problem.
Position #3: Right of Content
This is actually a favorite navigation position of mine, because it’s a bit unexpected. This way, users are drawn to your index page’s content first. If you’re creating a site that’s meant to be browsed slowly and thoroughly, this is a great design, and it works well for personal sites.
But the problem with this navigation position is also that it’s unexpected. People may spend more time hunting for links than they do clicking on them. How can you draw more attention to the links without putting them somewhere else on the page?
This and many other issues are tackled in Experimenting with Navigation Placement–click to read the 2nd part of this article!
I love display: block!
Since being introduced to the CSS property display: block by a dear online friend, I have used it to great effect in several layouts, mainly for navigational purposes.
How display:block Looks and Works
This is how I generally use this CSS style in my layouts, because I’m making only the links in my navigation display in a block format:
#nav a {display: block;}
Here’s an example of what display:block can do, from one of my domain’s previous layouts:
I love how clean it makes the navigation look; I actually like it so well that I’ve used display: block-style navigation on a lot of my websites. (I guess I’m a proponent of the saying “if it ain’t broke, don’t fix it.” :D)
A Few Padding and Margin Tricks with Display:Block
There are ways that you can space the links out or crunch them together to create any effect you desire, just using widths and heights specified in your CSS:
- For 10px of space all around each link: #nav a {display: block; padding: 10px;}
- For 10px of vertical space between links: #nav a {display: block; margin: 0px 10px 0px 10px;}
- For 10px of horizontal space between links: #nav a {display: block; padding: 0px 10px 0px 0px;}
(Note: when you do padding or margins with 4 numbers like I just did, the first number corresponds with the top part of the link block, the second number corresponds with the left side, and so on, clockwise around.) And this is just for demonstration; there are lots of ways you can innovate with padding and margins when it comes to using display: block! Try different pixel widths and heights, and see what works best for your site.
Using a Background Image with Display: Block
Secondly, I like that you can decorate the link “blocks” with background images, like a simple gradient or a pattern, especially for an a:hover link pseudoclass. Having a navigation link highlighted by a pretty pattern in the background when you hover over the link can be just the right touch of detail for a design. Doing something like this would involve your own version of the following code:
#nav a:hover {display:block; background-image: url(‘your_image_name.gif’);}
That code is basically just what I did for my main domain’s 11th layout, seen again here:
See the faint blue gradient over the first part of the word “domain?” That’s the background image hover–no Javascript needed!
Other Beautiful Things about Display: Block
Lastly, I like that you don’t need a “<br>” between each navigation link. It’s one less thing you have to type, which is always good for a web designer, since we’re usually typing large amounts of semi-intelligible code at a time. And it’s amazing how a missing <br> tag can quickly bungle up a layout! (Believe me, one little bit of unnecessary code can make quite a headache!)
In short, display:block can give you a CSS-only way to do something that looks as neat as a table without the clunky borders or endless <td> tags in your code. I love it!