Tag Archives: layout

Navigation Placement in a Web Design, Part 1: Traditional Placements

tradionalnavplacements
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

navleft
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

navtopcenter
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

navright
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!

ilovedisplayblock
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!