1. Plan Your Route

Planning is one of the most important steps in any web design process. You should be planning out your content and your navigation before you pick up a pixel. Plan how you want your visitors to get from A to B on your website. Make sure they can get there as quickly as possible. Your most important content should be easy to access and at the top level.

2. Be Consistent

Your navigation needs to be consistent throughout your site. This means keeping your main navigation areas in the same place and ensuring that you use the same colors for links across the site. Your main menu should appear in the same place on every page, although you should feel free to have page specific sub-menus for drilling down into different content.

Using a different color(with a lesser saturation) for visited links and adding an icon to external links would make the site more accessible though.

3. Keep Clicks to a Minimum

Your visitor should be able to locate what they want as quickly as possible. This means that you should keep clicks down to a minimum. If a visitor has to spend more than minute searching for content then your navigation isn’t working. You can help to improve this by having a sitemap, pull down menus, anchor text and tables of contents.

4. Make it Easy to Get Home

These days the web design standard is for the logo to be located above “the fold” – i.e. is visible to the landing visitor before they scroll down the screen. This is usually linked to the home page. People browsing the web have come to expect this so you should make your logo clickable. In some cases it may also be appropriate to have a home button on your navigation bar. Should your visitors get lost (which they shouldn’t if you are following these steps) they should always be able to get back to your home page.

5. Be Searchable

Search functionality is such an important aspect of web navigation. A visitor should be able to search your site. This is particularly important if you have a large amount of content and pages. It will help your visitor to pinpoint what they want without having to manually search through your whole site to find it. Google makes it easy to add custom search functionality to your website with Google Custom Search Engine.

Adding the search functionality on 404 pages will be useful for the visitors to browse through other sections of your website.

6. Make the Wording Accurate

It has become trendy, in certain circles, to have navigation buttons that are pretty vague. You may think that this makes you look cool, that you’re breaking the mold, but really it can be annoying and frustrating for your visitors. If you have used wording in your navigation that you think makes you sound cool/clever/cutting-edge, change it. You should not assume that anyone else will have a clue what you are talking about. Not everyone else thinks like you, right? Keep your navigation language specific, direct and to the point.

7. Pagination

Some websites just have the next/previous button which doesn’t give any clue on the number of pages. Pagination simply means dividing the content into discrete pages. Can you imagine a book without pages?

This is useful especially for blogs, e-commerce websites, where the content blocks/product listings are huge in number.

8. Read More links

Visitors hate to read huge blocks of text content. They always prefer to read the excerpt and choose the one they like to read further. It would be a good idea to show excerpts (wherever applicable) with a “read more” button linking to the in-depth article.

9. Include a Site Map

A site map should be a key part of your navigation toolbox. This isn’t so important for small sites, although it can come in useful and is great for SEO, but if you have a huge site with lots of pages and information it is a necessity. When I visit a big institution’s website the first place I go to find what I need is the sitemap. You should make it easy for your visitor to find the link to your sitemap. This is often at the bottom of the page, but if it’s important to your navigation you could include a link in the main navigation bar. Some sites, like Apple, for example, include the whole of their sitemap in their footer.

10. Breadcrumbs

Breadcrumbs are those little links at the top of a page, usually below the navigation bar, that show where you have been and where you are now. They make it easier for a visitor to figure out where they are at that moment, and how they got there. They take the form of Home > Sub-Page > Sub-Page.

11. Keep to the Essentials

Too many links on your navigation can end up causing it to be cluttered and confused. You should keep the top level of navigation for your most important content – i.e. the content that you want your visitors to get to first. Anything else can be dropped down a level or two. This helps to keep your navigation clear and focused. Sub-pages can be contained in dropdown menus and flyouts.
In some cases, it would be more meaningful to add icons.

12. Test

At the end of any web design process, you get to the next most important stage – testing. You need to test your navigation to make sure that it is actually a useful navigational tool. Don’t just test it yourself. Ask your friends and family, people unfamiliar with the site to test it for you. That pair of fresh eyes will help to pick up on any problems and inconsistencies. You should also test your navigation to make sure that it works cross-browser. You might find that your navigation bar appears differently in Firefox and Chrome, or that IE doesn’t like those rounded corners you’ve so lovingly added.
Follow these steps and you should be on your way to 100% navigation success!

Related posts:

1. A simple CSS based usability tip for search buttons
2. How to improve the page rank of your twitter profile page
3. IE CSS hack without using any hacks!

Ben the bodyguard This is almost like watching a short film

Nike better world You’d be already familiar with this.

TEDx Portland A unique use of the parallax effect.

ResolutionIM Don’t take your eyes off the rocket as you scroll.

David Beckham

Manufacturedessai

APO

Tutorial to create a vertical parallax using CSS and jQuery

And finally, an awesome detailed tutorial explaining how to create a vertical parallax using jQuery and CSS.

Related posts:

1. Everything you need to know about Parallax
2. Parachutes/Hot Air Balloons – An Emerging Trend in Webdesign
3. Trend Review: Web2.0 Rockets and Gliders in Webdesign!

Do you have the habit of hitting the search button multiple times even before it loads the search results? Well… I used to do that and so do many other users. Clicking the search button multiple times results in additional server requests and slows down the page’s loading time.

Why do users click again?

Because they are users! They aren’t developers who understand what happens in the back end.

Its our job as developers/designers to let the user know that the results are being loaded and to ask them to wait until it loads.

How do I do it with just CSS?

Its pretty simple. Click and hold the search button below and see.

I am sure, I don’t have to explain how it works for the experts, but if you are novice continue reading…

The trick is to use CSS sprites and show the animated loader image while the user clicks the button(on focus), indicating that the page is being loaded. You can download the sprite here.

Now, how do I avoid multiple clicks?

Its impossible to disable a button just with CSS, but we can ask the user to wait by replacing the hand/pointer with a “wait” cursor. So this is how the final CSS code looks like.


input.submit{
width:16px;
height:16x;
display:block;
overflow:hidden;
text-indent:-999px; /* To remove any default text on the button*/
line-height:16px; /* required for safari */
background:url(search-sprite.gif) no-repeat 0 0; /* This will display the search icon by default */
cursor:pointer; /* Hand cursor for the normal state */
border:none;
padding:0;
}

input.submit:active{
background-position: 0 -32px; /* And finally, this is the one that shows the loader */
cursor:wait; /* Shows the wait cursor on click */
}


If you really want to disable the button, check out this JQuery solution. And, don’t forget to put in your thoughts and ideas.

Related posts:

1. IE not interpreting text-indent on submit buttons ?
2. 10 CSS properties that ‘were’ impossible to implement in IE6
3. IE CSS hack without using any hacks!

Recently, while working on some client projects, I noticed a few requirements(I know there are many) that were common. I strongly feel, this will be useful for your next web project.

1. Empty form field value on focus/click

The requirement/issue:

This is a very common requirement. You would have noticed form fields that have a value by default which disappears when you click/focus on them. When you click outside, the value appears again.

Solution:
The jQuery emptyonclick Plugin works like a charm. All you need to do is download this plugin to your project directory and include the following code within the head tags.

Now add the class “emptyonclick” to all form fields that you would like to empty onclick.

You can find more about the usage here

2. Truncate lengthy text with either a “more” button or 3 dots at the end

The requirement/issue:

I am sure that most of you would already have faced this issue, especially with lengthy breadcrumbs. You don’t have to run behind and bother a programmer anymore for a solution.

Solution:

Truncate is an awesome jQuery plugin that helps you achieve this in seconds. Download the plugin and include the following code within the head tags

Replace the .classname with the class name of your HTML element that contains the text. Also, the number 60 in the code above is the maximum number of characters you would like to allow before truncating. Replace that with your value.

Adding a “more” link at the end of the text is another cool usage. You can find more about the usage here.

3. Adding classes to the first and last list items

The requirement/issue:

I don’t think there will be a HTML/CSS developer who haven’t abused wordpress for not adding first and last classes for their lists

Just imagine a menu that needs a different background for the first and last list item. You’ll find this handy when creating themes for a CMS like wordpress where you have no control over the HTML code.

Solution:

After spending a few minutes on google, I found this snippet

This can also be achieved using the :first-child and :last-child CSS pseudo-classes.

Related posts:

1. 10 CSS properties that ‘were’ impossible to implement in IE6
2. IE CSS hack without using any hacks!
3. IE not interpreting text-indent on submit buttons ?

Requirements
1. Firefox Sorry IE users!
2. InFormEnter AddOn for firefox
3. Details about your logo/website (will explain this below)
4. Image of your logo in various dimensions (will explain this as well)

I assume that you’ve already read my post – 22 Sites & Galleries to submit your logos. In this post I’ll walk you through my logo design submission process, which can be made use for CSS gallery submissions as well.

Step 1: Bookmarking the gallery forms

The first step is to bookmark all the submission forms of famous galleries. I know it’s not that easy, but trust me it will make things easy. Open a blank firefox window and then open all the logo gallery submission forms mentioned here in separate tabs. Once you’ve opened all, go to Bookmarks Menu > Bookmark All Tabs (or Shift + Cmd/Ctrl + D)

This would open a pop-up, wherein you can add a name for the bookmark folder. Choose ‘Bookmarks Toolbar’ from the dropdown and click the “Add Bookmarks button”.

Awesome! You’ve created a ‘Bookmark folder’ for your logo submission which you can now access from your Bookmarks toolbar.

Whenever you come across a new submission form you can add them to this folder.

Step 2: Prepare a list of all possible form fields

The next task is to make a list of all possible submission form fields. I’ve created one for logo design submission. If you’re the creator of the logo, the first 8 items remain same for all your logo submissions. We’ll see how to make use of this list in the next step.
————————————-
First Name
Last Name
Full Name
Email Id
Twitter Id
Designer Website Title
Designer Website URL
Designer Bio

Title/Name of the logo
Logo Punchline/tagline
Logo URL (if your logo is already online)
Description of logo
————————————-

Step 3: Using InFormEnter to fill the forms

I hope you’ve already installed this addon. If not do it right now, it’s really worth! Now you should see a blue arrow icon on the bottom right of your Firefox status bar. Click the icon and select “InFormEnter Options”.

So you have the pop-up ready to enter the list of form fields mentioned above. See the image below to know how I created the list for the “Beetle Nut” logo

Step 4: Prepare your images for submission

This is critical since the image dimensions accepted by each gallery varies. Here goes a list of sizes accepted by most logo galleries.
————————————-
284×130
300×180
320×260
325×260
394×197
400×400
500×247
500×300
550×338
620×340
640×360
880×440
————————————-
I usually create a folder for each logo, re-size the logos and name them based on these dimensions. But make sure the file size is low. See the images below.

This makes the form submission process easy!

Step 5: Start Submitting… Enjoy!

Once InFormEnter is activated you would notice a blue icon near each form field. Now all you need to do is click the icon and select the entry! As simple as that!

Do you already follow a better procedure? If so please share it here.

Related posts:

1. 22 Sites & Galleries to submit your logos
2. Twibies.com – The ultimate twitter resource for designers
3. Dark Elegance: A Free Drupal Theme

Step-1: Let’s review the HTML part first.



The following are the images that I’ve used for this tutorial. The image without saturation is a .gif and the colored one is a .png. You may right click and save the image.

Colorful PNG Image

Desaturated GIF Image

Step-2: The stylesheet

I included the following code in the stylesheet
body{
background:#000;
text-align:center;
}

div.bg-image{
background:transparent url(images/pd.png) no-repeat center !important;
width:134px;
height:134px;
}
Let me walk you through the CSS. The first part simply applies a background color to the body and center aligns the div element. In the second part, I’ve specified the width and height of the div (134px) based on the image dimensions and have given the .png as the background image. Everything works fine?

Step-3: Solution for IE

This the most interesting part that does the magic.

I added another line of CSS code just below
background:transparent url(images/pd.png) no-repeat center !important;
and the following is the code
background-image:url(images/pd.gif);

Check out the result in IE! Awesome…. isn’t it? In all other browsers except IE you will see the colorful png image.

Consolidating the entire thing

So. the final css would look like:
body{
background:#000;
text-align:center;
}

div.bg-image{
background:transparent url(images/pd.png) no-repeat center !important;
background-image:url(images/pd.gif);
width:134px;
height:134px;
margin:0px auto;
}

For your ease, I have attached the sample files as a zip. Feel free to download it and do let me know your feedbacks.

Related posts:

1. Min-width issue in IE6