This second part will cover building a modal window and coding its behavior. If you don’t know what I already explained, please go back to the first article here and come back once you finish that one. However, if XHTML, CSS and jQuery are your friends, you may pick things up as we go, so just go ahead and read this part of the tutorial.

Let me remind you the concept we described in the previous article. We have a horizontal menu with a few categories. Each category has multiple subcategories and each such subcategory may contain a random number of products. For easier and faster movement of users thorough the site, we won’t reload the page once a subcategory is clicked. Instead, we will display all products in a modal window.

Here’s a screenshot of the menu and one simple modal window.

How does the modal work?

Once someone clicks a subcategory link, the modal window will be displayed and the products will show up. The modal will close when products are clicked, and the browser is targeted to a new page, when the user clicks the close button or when the overlay is clicked. It isn’t that hard is it?

The main issue is that we need different content in the modal window. Each subcategory will have its own products and we need to find out which products to display. We will do this with the help of jQuery as you’ll find out in just a few minutes.

But first, lets get to coding the structure and design of the modal window. First of all, we have the overlay mask, which will be an empty div. We need to make sure the overlay mask will be on top of all site content but beneath the modal window, so we will use z-index:1100 for modal content and z-index:1000 for the overlay. The overlay won’t be displayed unless a subcategory is clicked, so display:none is also mandatory. You should also choose your favorite color for the overlay, and set it absolutely to top left 0 pixels.

<div></div>

#overlay-mask {
	display:none;
	z-index:1000;
	background-color:#333;
	position:absolute;
	top:0;
	left:0;
	}

The modal window will be something like this. An outer div to hold everything in place, another inner div to hold the products, and a link that will server as a close modal window button. Because we want the button to span all the way, we had to use an outer div for the content of the modal, so that’s why there’s 2 divs and not just one.

<div class="all-rounded">
<div>
		<a class="thumb" href="http://www.ultimatewasher.com" target="_new"><img src="images/wash1.jpg" alt="Wash1" width="102" height="102" /><span>First thumb</span></a>
 
		<a class="thumb" href="http://www.city-rentals.ca" target="_new"><img src="images/wash2.jpg" alt="Wash2" width="102" height="102" /><span>Second</span></a>
 
		<a class="thumb" href="http://www.tonsoftools.com" target="_new"><img src="images/wash3.jpg" alt="Wash3" width="102" height="102" /><span>Third</span></a>
 
		<a class="thumb last" href="http://www.carriergenerators.com" target="_new"><img src="images/wash4.jpg" alt="Wash4" width="102" height="102" /><span>Fourth</span></a></div>
<a class="close bottom-rounded">Click to close</a></div>

As you see, each product is in fact a link containing a product thumbnail and some text. Lets see how we style them. the purpose of the tutorial is creating the modal window, not styling it, so the style is really basic, especially if you take out the rounded corners.

#overlay-content {
	width:500px;
	}
 
#overlay-content div {
	width:450px;
	padding:25px;
	padding-bottom:10px;
	}
 
#overlay-content a.close {
	display:block;
	padding:0px;
	border-top:1px solid #333;
	font-size:15px;
	line-height:25px;
	height:25px;
	text-align:center;
	}
 
#overlay-content a.thumb {
	display:block;
	width:102px;
	height:122px;
	padding:0px;
	margin:0px 14px 0px 0px;
	float:left;
	text-decoration:none;
	}
 
#overlay-content a.thumb img {
	display:block;
	width:102px;
	height:102px;
	padding:0px;
	border:0px;
	}
 
#overlay-content a.thumb span {
	display:block;
	width:102px;
	height:20px;
	padding:0px;
	text-align:center;
	color:#999;
	}
 
#overlay-content a.last {
	margin-right:0px;
	}
 
#overlay-content div {
	overflow:auto;
	}

The first two lines are just setting the dimensions of the modal window, for the purpose of a modal window that contains four products, all on the same line. The anchor tag with the “close” class is in fact the button that will be displayed in the bottom of the modal that will be used to close to modal window if needed.

The thumb classed anchor will contain the image and the text description contained in a span tag. As all thumbnails have a small right margin, we need the additional last class to remove the right margin from the last product in the modal. The overflow is used to cancel the collapsing of the inner div that contains only floating elements.

We finished with structure and styling, so lets move on to jQuery coding. Take a look at the code in its entirety and try to understand it. The explanations will follow it just below.

var opacity = '0.8'; // can be up to 1
 
$('a[name=modal]').removeAttr('href'); 	//javascript on, no need to redirect to a link here
$('a[name=modal]').click(function ()
	{
	var maskHeight = $(document).height();
	var maskWidth = $(document).width();
	var windowHeight = $(window).height();
	var windowWidth = $(window).width();
	var contentWidth = $('#overlay-content').width(); // width
	var contentHeight = $('#overlay-content').height(); // and height of content area
 
	//Set height and width to mask to fill up the whole screen
	$('#overlay-mask').css({'width':maskWidth,'height':maskHeight});
	$('#overlay-mask').css('opacity',opacity);
	$('#overlay-mask').css('display','block');
 
        // put the overlay content area in the center of the window
	$('#overlay-content').css('display','block');
	$('#overlay-content').css('left',(windowWidth-contentWidth)/2);
	$('#overlay-content').css('top',(windowHeight-contentHeight)/2);
	});
 
	// move overlay content to center of the window
$(window).resize(function ()
	{
	var maskHeight = $(document).height();
	var maskWidth = $(window).width();
	var windowHeight = $(window).height();
	var windowWidth = $(window).width();
	var contentWidth = $('#overlay-content').width(); // width
	var contentHeight = $('#overlay-content').height(); // and height of content area
 
	//Set height and width to mask to fill up the whole screen
	$('#overlay-mask').css({'width':maskWidth,'height':maskHeight});
	$('#overlay-content').css({'left':(windowWidth-contentWidth)/2});
	$('#overlay-content').css({'top':(windowHeight-contentHeight)/2});
	});
 
var $scrollingDiv = $("#overlay-content");
$(window).scroll(function()
	{
	$scrollingDiv.stop().animate({"marginTop": ($(window).scrollTop()) + "px"}, "fast" );
	});
 
$('#overlay-mask').click(function ()
	{
	$('#overlay-mask').css('display','none');
	$('#overlay-content').css('display','none');
	});
 
$('.close').click(function ()
	{
	$('#overlay-mask').css('display','none');
	$('#overlay-content').css('display','none');
	});

The opacity variable will set the overlays opacity. It would look really odd with a non transparent overlay, so perhaps anything below .8 will do just fine. Except if you have it completely transparent when there isn’t going to be any overlay.

We find all anchor tags that has “modal” as name, and remove their href attribute, as we don’t want to move to another page before seeing the overlay, don’t we?

Then we have the on click behavior. As soon as an anchor link that has an attached modal window is clicked, we get the sizes of the document as well as those of the window. We also check out the width and height of the content inside the modal window.

Next, we set the width and height of the overlay mask using css attributes. We want the overlay to span across the entire page, right? We then set its opacity and make it appear in the page by changing its display property from none (set in the css) to block. We do the same with the content div, and also put it in the center of the browser window.

We also have a resize behavior, which will be triggered if you resize the browser after the page has loaded. If that happens, we check out the dimensions of the document and browser as well, and reset the content window in the center of the page. In the same time, we modify the width and height of the overlay so that it matches the changes triggered by resizing the browser.

If the page has a scrollbar and we scroll either up or down, we use the scroll jQuery trigger to animate the modal back to the center of the page. The stop function there before the animation will make sure that older animations will be stopped if the scroll is used continuously or with small pauses.

Finally, once the overlay mask or close button is clicked, we need to close the modal window, and the last two lines of code do just that.

One small, but real problem!

We haven’t taken in consideration the most important aspect. Each time we load the modal window the content needs to be different. The above code only works for the same content in the modal window such as a contact form, and we need to fix this issue.

First of all, we remove content from the overlay-content inner div and leave it empty. This div will auto-populate with proper content when a subcategory is clicked. Next, we add rel attributes to modal anchor links (those that were named “modal”). We will use unique rel attributes to identify the content we need to load.

We will also add divs that have classes corresponding to each rel attribute, which will contain the content we will load on click. We have to make this divs hidden so they don’t pop up god know where inside your site’s layout. Simple right? But how do we do this via jQuery? Even simpler, using only three lines of code.

Once a modal anchor is clicked we identify its rel attribute, get the html contents of the div that has the same class name as the rel attribute, then populate the inner div in the overlay content with the html content we found. Cool! Here’s the code for that, which we add just below the .click function.

var rel = $(this).attr('rel');
var modal_content = $('.'+rel).html();
$('#overlay-content div').html(modal_content);

And we’re done. You can check out the demo over here, or perhaps you’d like the source code? If so, you can download the source codes for the first part, which is just the sliding menu from here, or if you want the real deal you can get full source codes for modal window too from here.

1. select categories, wait for a page to load
2. select a subcategory, wait for another page to load
3. check out products
4. click to go to desired product

The typical web user only wants to click once or twice to get to the product they want. And if clicks are unavoidable, make sure page loads are minimized! The more clicks and the more page loading they have to go through, the higher the risk they will get lost and never come back to your site. The good news is that you can achieve a good navigation menu that reduces page reloads.

This article is an in-depth tutorial on how you can achieve an expandable navigation menu using valid xhtml coding, valid css and a bit of javascript.

The concept

In order to achieve a fully functional menu for our huge website, we need one that will enable users to choose a category or subcategory in a timely manner, then browse hassle-free for the product they like. In Part 1 of the tutorial, we will create a horizontal bar that contains all the main categories of the products our customer is selling. This menu bar will expand so users will see all sub-categories. In Part 2 of the article, we’ll create the functionality where clicking on a sub-category will trigger an overlay that displays a list of the individual products.

In the image above there’s a sketch of what the site layout should be. We have the menu bar, right under the menu comes a header that can contain images, paragraphs of text, news. You get the picture. Then comes the content area. The menu will expand and push the header together with all elements that come after it down the page, as you can see in the following image.

Sneak peak at what we’re building here

Just in case you cannot wait for the end of the article, just check out the demo over here.

Coding the HTML and CSS

The navigation bar will consist of an unordered list. I have chosen this tag because menus contain lists, therefore an unordered list is the best way to go for this. The part of the menu that will slide will be contained by a div, each item in the navigation menu having a separate div for its information. We will have the header and the content section also contained in a div. Here’s a view on the XHTML structure.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 	
<head>
	<!– head meta tags, css , javascript links will be here–> 	
</head> 	
<body> 	
	<div id="wrapper"> <!– used only for cosmetic purposes. IE: The site background image in the top –> 		
		<ul id="menu" class="all-rounded"> <!– the menu ul I talked about. all-rounded class will round the corners –> 				
			<li><a href="" target="_self">home</a></li>
			<li><a target="_self" >cleaning</a></li>
			<li><a target="_self" >cooking</a></li>
			<li><a target="_self" >gardening</a></li>
			<li><a href="" target="_self">about us</a></li> 			
		</ul> 			
	<div class="menu-extend cleaning"> <!– extended menu div –>
		<ul> 					
			<li><a href="" target="_self">Pressure Washers</a></li>
			<li><a href="" target="_self">Pressure Washers Accessories</a></li>
			<li><a href="" target="_self">Hoses and Water Fittings</a></li>
			<li><a href="" target="_self">Water Pumps</a></li>
			<li><a href="" target="_self">Dry Vacuums</a></li>
			<li><a href="" target="_self">Wet Vacuums</a></li>
			<li><a href="" target="_self">Industrial Vacuums</a></li>
			<li><a href="" target="_self">Specialist Vacuums</a></li>
			<li><a href="" target="_self">Vacuum Cleaner Bags</a></li>
		</ul>
 		<ul>
			<li><a href="" target="_self">Steamers</a></li>
			<li><a href="" target="_self">Scrubber Dryers</a></li>
			<li><a href="" target="_self">Buffers</a></li>
			<li><a href="" target="_self">Floor Care Chemicals</a></li>
			<li><a href="" target="_self">Carpet Care Chemicals</a></li>
			<li><a href="" target="_self">Carpet Cleaning Machines</a></li>
		</ul>
		<ul>
 			<li><a href="" target="_self">Trolleys</a></li>
			<li><a href="" target="_self">Household Cleaning Chemicals</a></li>
			<li><a href="" target="_self">Vehicle Cleaning Chemicals</a></li>
			<li><a href="" target="_self">Cleaning Equipment</a></li>
			<li><a href="" target="_self">Brooms and Brushes</a></li>
			<li><a href="" target="_self">Interchange System</a></li>
		</ul>
		<span class="clear">&nbsp;</span> 
	</div>
 
	<div class="menu-extend cooking"> <!– same as above div –>
		expanded menu goes in here for cooking
		<span class="clear">&nbsp;</span>
	</div>
 
	<div class="menu-extend gardening">
 		expanded menu goes in here for gardening
		<span class="clear">&nbsp;</span>
	</div>
 
	<div id="header"> <!– header div with an image –>
		<img src="images/header.jpg" width=900 height=200 alt="Header" /> 		</div>
 
	<div id="content"> <!– finally the content area –>
		<h1>Fancy menu</h1>
		<p>Fancy menu info goes here </p>				 		</div>
	</div> 	
</body> 
</html>

I chose to round up the corners of the menu. To create this effect we will use some CSS level 3 and browser specific markup. The navigation bar will also have vertical separators between the items. The separator is consisted of two different lines, each with a custom color. We won’t use images for the separators. Instead we will use the css border property. Each list item in the navigation bar will have a 1px solid left border, and a 1px solid right border. The first element in the list and the last one won’t have the left border, and right border respectively. Here’s the html markup of the modified list, to reflect that there won’t be the above mentioned borders, and the css code:

8
9
10
11
12
13
14

<ul id="menu" class="all-rounded">
	<li class="no-left-border"><a href="" target="_self">home</a></li>
	<li><a target="_self" >cleaning</a></li>
	<li><a target="_self" >cooking</a></li>
	<li><a target="_self" >gardening</a></li>
	<li class="no-right-border"><a href="" target="_self">about us</a></li>
</ul>

.all-rounded	{
	border-radius:9px;
	-moz-border-radius:9px;
	-webkit-border-radius: 9px;
	}
 
/* these are the rounded corners */
#menu  {
	display:block;
	margin:0px auto;
	width:898px;
	border:1px solid #DD4CAB;
	height:48px;
	background:url('../images/menu_bg.jpg') repeat-x; color:#DD4CAB;
	 } 
 
/* ul style */
#menu li {
	display:block;
	width:178px;
	height:48px;
	line-height:48px;
	float:left;
	text-align:center;
	border-right:1px solid #DD4CAB;
	border-left:1px solid #AD3B87;
	}
 
/* li items style */
#menu li.no-left-border {
	border-left-style:none;
	}
 
/* no border as we said */
#menu li.no-right-border {
	border-right-style:none;
	}

Because I chose to round the corners of the menu, there are some issues while hovering the menu items, so the links that are held by the li items will have to have rounded corners as well. The first link in the menu will have rounded corners on the left side, while the last one will have rounded corners on the right side. Here’s the code for that:

#menu li a	{
	display:block;
	height:48px;
	color:#DD4CAB;
	text-decoration:none;
	}
 
#menu li a:hover	{
	display:block;
	height:48px;
	color:#DD4CAB;
	text-decoration:none;
	background:url('../images/menu_bg_hover.jpg');
	}
 
#menu li.no-left-border a:hover  {
	border-top-left-radius:9px;
	border-bottom-left-radius:9px;
	-moz-border-radius-topleft:9px;
	-moz-border-radius-bottomleft:9px;
	-webkit-border-top-left-radius:9px;
	-webkit-border-bottom-left-radius:9px;
	}
 
#menu li.no-right-border a:hover  {
	border-top-right-radius:9px;
	border-bottom-right-radius:9px;
	-moz-border-radius-topright:9px;
	-moz-border-radius-bottomright:9px;
	-webkit-border-top-right-radius:9px;
	-webkit-border-bottom-right-radius:9px;
	}

Coding the behavior of the menu using jQuery

I am not going to reinvent the wheel here, but jQuery seems to be the best javascript framework out there. If you’re not familiar to jQuery you can find some great tutorials and examples over here.

Javascript for menus? Are you insane!

Some people out there say you must not use javascript for navigation under any circumstances. I am sorry guys, but if you write your code professionally, using javascript for menus can seriously enhance your site’s functionality. The trick they’re talking about is what do you do when javascript is unavailable in the visitors browsers? Well, you have to code your menu in such a way it has progressive enhancement and works just fine if javascript is off. And yes, this menu achieves progressive enhancement. If javascript is turned off, the menu will be directly visible, including the part that should slide when needed. Nothing is inaccessible. Moreover, search engine’s bots will see the site just as if they were a visitor without javascript, so search engine optimization is preserved if using this menu.

Let’s get down to the jQuery

jQuery uses html IDs and classes to identify elements in the html page that it needs to work with. Our menu currently has unique ID, but the “cleaning”, “cooking” and “gardening” links don’t, so we add a class for each of them. The classes are unique too.

8
9
10
11
12
13
14

<ul id="menu" class="all-rounded">
	<li class="no-left-border"><a href="" target="_self">home</a></li>
	<li><a target="_self" class="cleaning-but">cleaning</a></li>
	<li><a target="_self" class="cooking-but">cooking</a></li>
	<li><a target="_self" class="gardening-but">gardening</a></li>
	<li class="no-right-border"><a href="" target="_self">about us</a></li>
</ul>

In order to achieve progressive enhancement, we must first disable javascript and load the menu page. So far, due to our code the menu displays in its entirety, including the part that in a few minutes will slide beautifully if javascript is on. But if it has to slide, it has to be hidden first, and this is the trick we pick out from our sleeves. The first thing we’re to do with jQuery is to hide the sliding part of the menu. By doing this, people having javascript turned on will not see the menu until they click to expand it. They will only see the menu bar. Here’s the jQuery code needed to achieve this:

$('.menu-extend').hide();

The rest is simple. When you click one item in the navigation bar, you are taken to a page. This happens for the Home and About us links. When you click one of the links in the middle of the menu, the menu will slide and reveal the contents. If there’s another menu visible, clicking to expand one other item will make the expanded section slide back under the navigation bar, then the required content will slide back out. How cool is that?

jQuery code step by step
There’s a bit of jQuery to be written here, so you can take a peak below to the full source code, then continue to the part I dice the code in pieces and explain what I’ve done.

jQuery(document).ready(function($)
 	{
 	// start the magic
 	// if javascript is on, the menu will work ok
 	// Therefore we hide the expanded menu 	$('.menu-extend').hide();
 	$('.clear').height(0);
 	// if the "Detailed menu" button is clicked, fade it out and fade in the "Close menu button"
	// also slide the expanded menu into place
 	$('.cleaning-but').click(function ()
 		{
 		var isVisible = $('.menu-extend').is(':visible');
 		var isVisiblecleaning = $('.cleaning').is(':visible');
 		var isVisiblecooking = $('.cooking').is(':visible');
 		var isVisiblegardening = $('.gardening').is(':visible');
 		if(isVisible)
 			{
 			if(!isVisiblecleaning)
 				{
 				if(isVisiblecooking)
 					{
 					$('.cooking').slideUp("1000", function() { $('.cleaning').slideDown("1000") });
 					}
 				else if(isVisiblegardening)
 					{
 					$('.gardening').slideUp("1000", function() { $('.cleaning').slideDown("1000") });
 					}
 				}
 				else
 				{
 				$('.cleaning').slideUp("1000");
 				}
 			}
 		else
 			{
 			$('.cleaning').slideDown();
 			}
 	    });
 	$('.cooking-but').click(function ()
 		{
 		var isVisible = $('.menu-extend').is(':visible');
 		var isVisiblecleaning = $('.cleaning').is(':visible');
 		var isVisiblecooking = $('.cooking').is(':visible');
 		var isVisiblegardening = $('.gardening').is(':visible');
 		if(isVisible)
 			{
 			if(!isVisiblecooking)
 				{
 				if(isVisiblecleaning)
 					{
 					$('.cleaning').slideUp("1000", function() { $('.cooking').slideDown("1000") });
 					}
 				else if(isVisiblegardening)
 					{
 					$('.gardening').slideUp("1000", function() { $('.cooking').slideDown("1000") });
 					}
 				}
 				else
 				{
 				$('.cooking').slideUp("1000");
 				}
 			}
 		else
 			{
 			$('.cooking').slideDown();
 			}
 	    });
 	$('.gardening-but').click(function ()
 		{
 		var isVisible = $('.menu-extend').is(':visible');
 		var isVisiblecleaning = $('.cleaning').is(':visible');
 		var isVisiblecooking = $('.cooking').is(':visible');
 		var isVisiblegardening = $('.gardening').is(':visible');
 		if(isVisible)
 			{
 			if(!isVisiblegardening)
 				{
 				if(isVisiblecooking)
 					{
 					$('.cooking').slideUp("1000", function() { $('.gardening').slideDown("1000") });
 					}
 				else if(isVisiblecleaning)
 					{
 					$('.cleaning').slideUp("1000", function() { $('.gardening').slideDown("1000") });
 					}
 				}
 				else
 				{
 				$('.gardening').slideUp("1000");
 				}
 			}
 		else
 			{
 			$('.gardening').slideDown();
 			}
 	    });
 	});

The first jQuery code is $(‘.clear’).height(0);. This is used to set the height of the clearing div to 0. We added a clearing div to each of the expanded menu’s divs because all content inside them floats to the left, and would therefor cause the expanded menu div to collapse. By adding the clearing div we avoid that, but we also add 20 unnecessary pixels to the expanded menu’s height. We fix this problem with the code mentioned above.

Then, we have three different onclick functions. Each one does the same thing, but is triggered by a different element in the menu. I will explain the first one. $(‘.cleaning-but’).click(function () is used to trigger clicking on the href tag that contains the link to cleaning menu. That link is identified by the cleaning-but class we added previously. When that link is clicked we don’t have just one behavior, so everything has to go inside a function.

var isVisible = $(‘.menu-extend’).is(‘:visible’); is used to check if there’s any menu currently expanded. The variable will hold either true or false values. Here, the expanded menu is identified by the general class used for it menu-extend. We will use the same process to check what expanded menu is in fact expanded, be it the one for cleaning category, or another one. We will identify those by their unique classes cleaning, cooking and gardening.

We first check if the menu is visible. if(isVisible) will return true if there’s an expanded menu, or false otherwise. If false, we will simply slide down the menu using $(‘.cleaning’).slideDown(); located on the else side of the if. If there’s an expanded menu, we check to see if it is exactly the one we clicked. If it is the same one, we will slide it back up using $(‘.cleaning’).slideUp(“1000″);. If it is another one, we slide up that div using a similar piece of code, then slide down the one needed. $(‘.cooking’).slideUp(“1000″, function() { $(‘.cleaning’).slideDown(“1000″) }); slides up the cooking expanded menu, and after that process is completed, it slides down the cleaning menu. The syntax for such a process is $(‘identifier’).slideUp(duration, callback event – the one triggered after first one is completed);

Here’s a live demo version of the menu. Zip archive download will be available once we publish the second part of this article!

In the concept part we said that the contents of the expanded menu are in fact subcategories, and clicking on a subcategory will reveal the products located in that category. But that is another story and we will discuss it in the second part of the article.

Coming up next
Part 2: Displaying menu items using overlay

In 2009, Netflix awarded a $1 million USD contest prize to researchers who could significantly improve their proprietary recommendation engine. In theory, the more Netflix DVDs that customers add to their watch list, the longer that subscriber will remain with the service, since new movies will just keep coming. The prize may seem hefty, but Netflix was so impressed with the results that they granted the prize and immediately announce that there would be a sequel to the recommendation competition.

So how can a freelance web developer implement an enterprise-quality recommendation engine for your smaller e-retail clients? You may think that you’d have a tough time competing with Amazon or Netflix on functionality. However, low-priced service providers are now focused on enabling that process of discovery for small-site shoppers. These engines have low monthly costs, can be easily implemented in an afternoon, and work on the idea that you need to incorporate behavioral targeting in addition to monitoring a customer’s previous purchases.

Strands Recommender provides one of the low-cost recommendation engine options. Their engine suggests products of interest based on a specific customer’s purchases, visits, searches, wish lists, and other behavior. The system is quite flexible as well, with back-end capability to configure your recommendation display widgets. The retailer can also create rules and product filters for each widget, where results can be previewed prior to being applied to the site.

Click for more detailed information on Strands’ eCommerce solutions. They can help make your eCommerce clients successful, and strengthen your site proposals by creating additional ROI.

• of awful, low quality
• displayed in the worst way possible

The first issue is usually solved by using stock photos. There’s a bunch of free stock photo galleries and there’s even more with paid subscription. However, the second issue is tricky. In the past years you have come to know quite a few css/js powered image display tools like LightBox. Then there’s ThickBox, which I consider somewhat nicer. Both can be used in order to enlarge small thumbnails, but they both seem odd. Moreover, it depends on how you display the thumbnail, as some might not know immediately that clicking the image will provide a full size screen shot.

Brown

Take for example Brown University’s website in the screen shot. If you hover the images in the post, you will see a “+ Zoom” message in the upper left corner of the image. You will then try to go to that corner, and unfortunately, when you reach the “+ Zoom” button, it will start blinking (tested in Safari and Firefox). Now, that is really confusing. Not to mention that you can click anywhere in the picture to see the full size version. But oops, you do not know that.

Don’t panic, because I think I have found the best solution out there, and I am sharing this with you. If you check the latest version of Media Temple’s website, they too have screen shots in their control panel FAQ section. And those images are displayed perfectly. Rounded corners, borders, captions. But that’s not all of it. The great is about to be revealed. If you hover the image, in any given point, your pointer transforms into a “+” magnifying glass. What comes more natural to “enlarge” than a magnifying glass? Nothing! You even have text annotation, “Click to enlarge”, stupid.

Media Temple

Clicking will reveal a full size photo, more annotations, and in the upper central area of the image, navigation controls. YES! No need to scroll for next, previous etc buttons down to the bottom of your screen. You can even move the photo around, start slideshows, go to next picture, enlarge it even more and obviously hit the “X” close button. Now, if you do not want to go with the mouse around your screen to the “X” button, you will see your mouse pointer transformed into a “-” magnifying glass. Now, what comes more natural to “zoom out” than a magnifying glass with a minus inside it? Nothing!

Media Temple

Media Temple uses HighSlide JS, which is released under commercial license, but they do have a free version for you to try out.

Hands down for Media Temple!

Do you have a favorite or unique example of image handling you’d like to share?  Let us know via the comments section below.

If you liked this article, please subscribe to our RSS feed and social bookmark this post using the links below.

Update: A demo of this method can be found here: The Ultimate Navigation CSS Level3 Demo – by Bogdan Pop

One of the toughest tasks in the process of developing your web applications or web sites is choosing the best navigation system. Let’s face it, the easier people get around in your website, the more delighted they are.  With this in mind, you have been reading articles on user interface design, layout, and by now you are  implementing breadcrumb trails and other list handling techniques, such as the ones described in taming lists article at A List Apart. Everything evolved and now you implement drop down menus. But does this really work on big websites?

BIG websites have an impressive number of pages, features and widgets. Having a drop down menu makes life easier, and breadcrumb navigation shows your location lets you get out of there fast.  One issue is that navigation is usually fixed, and if you scroll down the page you get lost. You cannot jump to a similar page, you cannot take a peek at what else is there, and so on. The usual solution would be adding a footer navigation, or adding a top link that takes you back to the navigation area.

Of course, this works ok for you, but users do not really like going back and forth like Sisyphus. There is one solution. Mac OS X has flawless navigation systems, as far as I am concerned. The newly implemented stacks work like a charm, but I am referring here to the menu bar usually seen on top of the desktop. This is what you will achieve in your web applications easily by following the guidelines of this article.

I will use some CSS level 3 tags, which unfortunately do not validate. The good thing is that I will use them for styling purposes only. If you want a validating XHTML 1.0 Transitional menu you will just have to remove that fancy styling.

Building the menu bar

The menu I will build is based on the drop down menu technique, and it is derived from one of Stu Nicholls menus available at CSS Play. This menu will use small Javascript in order to work on IE, but latest updates on CSS Play provide full CSS validation menus.

Let’s start with the content of our menu. below you will find a small list which will be the foundation of our ultimate navigation.

	
<div id="menubar">
<ul id="navmenu">
	<li><a href="javascript:void()" target="_self">The site</a>
		<ul>
			<li class="start"><a href="#" target="_self">About</a></li>
			<li class="expand"><a href="#" target="_self">My account</a>
				<ul>
					<li class="start"><a href="#" target="_self">Profile</a></li>
					<li><a href="#" target="_self">Change password</a></li>
					<li><a href="#" target="_self">Change avatar</a></li>
					<li><a href="#" target="_self">My submissions</a></li>
					<li class="end"><a href="#" target="_self">My awards</a></li>
				</ul>
			</li>
			<li><a href="#" target="_self">Lorem</a></li>
			<li class="end"><a href="#" target="_self">Ipsum</a></li>
		</ul>
	</li>
	<li><a href="javascript:void()" target="_self">Articles</a></li>
	<li><a href="javascript:void()" target="_self">Interviews</a></li>
	<li><a href="javascript:void()" target="_self">Partners</a></li>
</ul>
</div>
	

Now that we built a basic menu using lists, lets apply the CSS to it. Please note that my style will make the ending menu look similar to OS X. The visitors on the website I will implement this are mainly Macintosh users, so I though they should see something familiar.

The best thing about this menu is that it will float on the top of the web page, even if the users scroll. This way, at any time, they will be able to jump wherever they need to inside your website, and more.

Styling the menu

The end menu will have horizontal root, and 2 vertical expanding menus.

	
#menubar {
	width:100%;
	height:25px;
	position:fixed;
	top:0;
	left:0;
	margin:0 auto;
	padding:0;
	background-image:url('images/menubar_default.jpg');
	background-repeat:repeat-x;
	line-height:25px;
	font-size:1.2em;
	z-index:4000;
	}

The menu will span across the entire width of the page, and it will have a fixed position as described above. The background image is optional. Next, we set the default style of the menubar. We do not need any styles applied to the list, such as bullets. The items of the menu will float to left, just like they do under OS X.

	
ul#navmenu {
	margin:0 auto;
	padding:0;
	float:left;
	list-style: none;
	border: 0 none;
	margin-left:25px;
	}

ul#navmenu li {
		margin: 0;
		border: 0 none;
		padding: 0;
		float: left; /*For Gecko*/
		display: inline;
		list-style: none;
		position: relative;
	}
	

Next, we add some basic style to the first expanding level. The webkit box shadow will apply a shadow effect, which unfortunately will be displayed only on Safari. However, used now, it will probably show up on later versions of the other browsers. The border radius will apply rounded corners to the shadow itself. The last line of the below code will render the menubar top background invisible.

	
ul#navmenu ul {
	margin: 0;
	border: 0 none;
	padding: 0;
	width: 250px;
	list-style: none;
	display: none;
	position: absolute;
	top: 25px;
	left: 0;
	-webkit-box-shadow: 10px 10px 10px #CCCCCC;
	-webkit-border-radius: 5px;
}

ul#navmenu ul li {
	float: none; /*For Gecko*/
	display: block !important;
	display: inline; /*For IE*/
	background-image:none;
}
	

Now we add the style for the root menubar.

	
ul#navmenu a {
	padding: 0 10px;
	float: none !important; /*For Opera*/
	float: left; /*For IE*/
	display: block;
	color:#000000;
	line-height:25px;
	text-decoration: none;
	height: auto !important;
	height: 1%; /*For IE*/
	text-align:center;
}

ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	color: #FFFFFF;
	background-image:url('images/menubar_hover.jpg');
}
	

The first expanding menu will have the classic expanding arrow positioned to the right if it expands itself into more links. We also have a basic style for it, and the start and ending classes. The later will also have rounded corners on bottom, which we add with -moz-border-radius-bottomleft and -webkit-border-bottom-left-radius.

	
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
	float: none;
	line-height:25px;
	width:230px;
	text-align:left;
	color: #000000;
	background-image:none;
	background-color:#FFF;
        border-bottom:none;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
	color: #FFF;
	background-image:url('images/menu_ex_hover_bg.jpg');
	background-repeat:repeat-x;
        border-bottom:none;
}

ul#navmenu ul li
	{
	width:250px;
	padding:0px;
	background-color:#FFF;
	border: 1px solid #999999;
	border-top:none;
	border-bottom:none;
	}
ul#navmenu ul li.start
	{
	background-color:#FFF;
	border: 1px solid #999999;
	border-top:none;
	border-bottom:none;
	padding-top:5px;
	}
ul#navmenu ul li.end
	{
	-moz-border-radius-bottomleft:7px;
	-webkit-border-bottom-left-radius:7px;
	-moz-border-radius-bottomright:7px;
	-webkit-border-bottom-right-radius:7px;
	padding-bottom:5px;
	background-color:#FFF;
	border: 1px solid #999999;
	border-top:none;
	}
	

Let’s add the style for the second level expanding menu. The hover persistence will have a new background image, so that we obtain the reversing of the white and blue colors used in the menu in it’s background and as well in the arrow. We have the start class of the list, which will have the optional rounded top right corner, and the end class which will have both bottom corners rounded.

	
ul#navmenu li:hover li.expand:hover li a,
ul#navmenu li.iehover li.iehover li a {
	background: #FFFFFF;
	color: #000000;
	background-image:none;
        border-bottom:none;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li.expand:hover li a:hover,
ul#navmenu li:hover li.expand:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
	background: #FFFFFF;
	color: #FFF;
	background-image:url('images/menu_ex_hover_bg.jpg');
	background-repeat:repeat-x;
        border-bottom:none;
}

ul#navmenu ul li ul li
	{
	width:250px;
	padding:0px;
	background-color:#FFF;
	border: 1px solid #999999;
	border-bottom:none;
	border-top:none;
	}
ul#navmenu ul li ul li.start
	{
	background-color:#FFF;
	border: 1px solid #999999;
	border-bottom:none;
	padding-top:5px;
	-moz-border-radius-topright:7px;
	-webkit-border-top-right-radius:7px;
	}
ul#navmenu ul li ul li.end
	{
	-moz-border-radius-bottomleft:7px;
	-webkit-border-bottom-left-radius:7px;
	-moz-border-radius-bottomright:7px;
	-webkit-border-bottom-right-radius:7px;
	padding-bottom:5px;
	background-color:#FFF;
	border: 1px solid #999999;
	border-top:none;
	}
	

And we are done with the styling of the menu.

The javascript

In order to make the menu work on IE, the next simple javascript has to be loaded.

	
navHover = function() {
	var lis = document.getElementById("navmenu").getElementsByTagName("LI");
	for (var i=0; i < lis.length; i++) {
		lis[i].onmouseover=function() {
			this.className+=" iehover";
		}
		lis[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" iehover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", navHover);
	

IE 6 fixes

Unfortunately, we need a quick fix for IE 6. If we do not use this fix than the navigation bar will remain on top of the page in IE 6 and will not float down as you scroll. Therefor you would need to keep going back to the top of the page instead of just using it whenever you want. You must add to the js file the following code:

function move_box()
{
var offset = 0;
var element = document.getElementById('menubar');

element.style.top = (document.documentElement.scrollTop + offset) + 'px';
}

You must the edit the html and add the following code into the body of the page. The css code will alter the style for IE 6 and change menubar from fixed position to absolute position, while the js part of the fix will make the browser set the new height for the menubar if you scroll down the page.

<!--[if lt IE 7]>
<style type="text/css">
#menubar {
position: absolute;
top: 0px;
left: 0px;
}
</style>
<script type="text/javascript">
window.setInterval(move_box, 1);
</script>
<![endif]-->

The graphic elements

In the css above we added some tags that referred to a few JPG files. They are used to make the menu look like OS X. It is not the exact color scheme, but it is something similar. You can use your own styling, even without images. If you fancy, the ones I used are available in the full source codes over here (images, css, html, js).

And you’re done

This was pretty much all on building the ultimate navigation for your websites. Have fun and give the users the chance to love you once again. Below is a screenshot of how this looks on mac OS X Safari.

If you’d like to support our work and advice, just use the social bookmark options in the bar below and bookmark us!  And, if you enjoyed this post, please subscribe to our RSS feed.

Author Bogdan Pop is a young Romanian entrepreneur who runs WebRaptor. He loves web programming and design and has a passion for standards and SEO. He relaxes by taking photos every once in a while and by mixing french electronic music.

Ultimate navigation with css level 3

Now, there are an abundance of ways for freelancers to market their portfolio in order to get more exposure and ultimately get better clients. I’ve noticed that freelancers in particular don’t take time out of their usual schedule to come up with new, creative ideas on how to promote their portfolio. A lot of freelancers don’t dedicate nearly as enough time as they should marketing and they don’t do it right. Well, here’s a list on ways in which you can effectively market your portfolio (also included are ways you could directly land more clients as well).

Ways To Creatively Market Your Portfolio And Score More Clients

1) Start a blog with tutorials/resources/articles

As a freelancer, you should always be trying to expand the audience of your portfolio. A lot of the time though there isn’t much more to attract visitors than your work (because obviously, it’s a portfolio, it’s meant for that) but by adding additional content to your portfolio you can attract visitors that would not have necessarily visited otherwise.

For example, if you write a bunch of articles on finding the right freelancer on a blog you’ve put up on your portfolio, then soon enough when someone searches with regard to that topic, your portfolio will come up with that article, and you’ll be receiving targeted, relevant traffic to your portfolio that could potential convert into a client.

To look at this in another perspective, say for example you’re a freelance designer and you really enjoy designing user-interfaces for web applications. Why don’t you write up and distribute programming tutorials on your portfolio? That way you’ll be attracting a programmer-based audience, some of whom may be looking for a good user-interface designer for their web applications. Even if you don’t manage to score those programmers as clients, you’re still spreading your name around which is always a good thing when it comes to recommendations.

2) Purchase Advertising

I don’t really recommend this method much because it isn’t that effective (well, from what I’ve tried) but if you’re experienced enough in private ad purchasing you could make this work. Try and find cheap advertising on targeted, relevant websites with good amounts of traffic for your portfolio. Make a small, creative ad for your portfolio and purchase any ad spots you find that fit the bill.

3) Join networks such as LinkedIn, Twitter etc.

By joining websites like LinkedIn, Twitter, and the rest of them you can get your name out there much more effectively. Remember, the Internet is a crowded place, and competition is fierce for positions such as freelance designers and coders. Make sure your profiles have a link back to your portfolio.

4) Join your local Chamber of Commerce

This one isn’t so much about increasing exposure to your portfolio but about scoring direct clients from ‘word-of-mouth’. I doubt you’d score any clients straight off the bat from this method, but over time you will. The best way to take advantage of ‘word-of-mouth’ advertising is to network face-to-face with other people – that way you’re fresh in their mind when they need to recommend someone.

5) Establish yourself as a market leader

This one’s a lot tricker than the rest. How do I establish myself as a market leader I hear you say? Well, first off you can put yourself forward to talk at local design/coding/writing events (or events related to whatever you’re freelancing in). This will naturally get you established as a big name in the market. You could also try publishing articles in the bigger media outlets related to your freelancing field. For example, if you’re a freelance designer you could try and get articles published on major design-related sites like Smashing Magazine.

6) Participate in related forums

By participating in discussion in related web forums to your freelancing field, you help garner a name for yourself. Don’t forget to include your portfolio in your signature! I stress to you NOT to post spammy type posts on forums, they don’t get you anywhere. Instead, try to discuss important issues with regards to your field.

7) Spread those cards!

Do you have business cards? No? Well, get some printed. They don’t have to be expensive or anything, just decent; although you could be very creative with your business card and therefore garner a lot more attention to yourself (which could in the end land you more clients). Some people have been so creative with their business cards it’s unbelieveable.

Ask for recommendations from family and friends

There’s no harm in telling your family and friends what you do and telling them to refer anyone interest in such a service to you. You can hit the odd client or two like this and it requires little effort.

9) Best and only the best

Make sure you only place the BEST of your work on your portfolio. Personally, I would place a maximum of 6-8 seperate pieces of work. Potential clients just need to get a feel for the quality of your work, not examine all the work you’ve ever done!

There you have it, a couple ways for you to increase exposure to your portfolio, and a few general ways in which you could potentially land more clients. Following these tips will hopefully bring you good results, and land you some really valuable clients.

Remember, if you enjoy our posts, please subscribe to our RSS feed; we have now put full feed text instead of summaries into our feeds.

Please note that this article is targeted at those of us who are more code-centric and well versed in xHTML/CSS.

How to build “table based” layouts with CSS Level 2

No quirks or tricks and it’s all standard compliant. Developers need free time, and now they can have it.

How many of you have lost countless hours while developing the perfect layout for your websites? How many have lost in fact money because of the extra time needed to complete a job! How many of you “have gone crazy” because of Internet Explorer and it’s incompatibility with standards based markup. Well, all of you need to have a quick break and celebrate. All those days will soon be over.

Developers, meet tables. Now please don’t get mad on me, because you’re not being taken back to table based layouts that standards advocates have told you not to use for your layout. I am not talking about HTML tables that are a semantic structure, I am here about pure css tables. Yes, you heard me well. If years ago you used <table> , <tr>,  <td> and similar tags to structure your sites, you will now continue to use divs. But instead of using the faux columns technique or the one described in the holy grail, you will be using something that is much more simple and that thanks to IE 8 now works exactly the same on all modern browsers.

The power of CSS Level 2

You will be using the CSS Level 2 display property. Instead of <table> tag, you will be using “display: table; ” in your css file. The attributes you will be using with display are:

• table makes the element behave like a table element
• table-row makes the element behave like a table row (tr) element
• table-cell makes the element behave like a table cell (td) element
• table-row-group makes the element behave like a table body row group (tbody) element
• table-header-group makes the element behave like a table header row group (thead) element
• table-footer-group makes the element behave like a table footer row group (tfoot) element
• table-caption makes the element behave like a table caption element
• table-column makes the element behave like a table column (col) element
• table-column-group makes the element behave like a table column group (colgroup) element

So, lets get down to coding. First, XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>CSS Level 2 with table based settings</title>
	<link href="tables.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="wrapper">
	<div id="header">
		Header information
	</div> 

	<div id="main">
		<div id="nav">
			Navigation list here
		</div>

		<div id="columns">
			<div id="sidebar">
				Nifty sidebar
			</div>

			<div id="content">
				What would your site be without content
			</div>
		</div>

	</div>
</div>

</body>
</html>

If you look into the above source code, there’s nothing unusual, as most of you would have something similar in your own masterpieces. Lets add some styling.

body
	{
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	}

#header
	{
	display:block;
	margin:0px auto;
	width:870px;
	padding:15px;
	background-color:#666;
	color:#FFF;
	}
/* nothing unusual so far */

#main
	{
	display: table;
	margin:0px auto;
	width:900px;
	}
/* display: table to make the main div be treated by browsers as a table */

#nav
	{
	display: table-row;
	width: 900px;
	height:50px;
	line-height:50px;
	text-indent:15px;
	background-color:#D6D6D6;
	color:#333;
	} 

/* is treated as a table row */

#sidebar
	{
	display: table-cell;
	width: 185px;
        height: 500px
	padding-left:15px;
	background-color:#FF6633;
	color:#333;
	} 

#content
	{
	display: table-cell;
	width: 685px;
	padding-left:15px;
	background-color:#77BBDD;
	color:#333;
	}

/* are placed inside the same father element: columns (check out the XHTML), and are treated as table cells */

Now, just in case you weren’t paying attention to all the code in there, I entered 500px height for the sidebar div. However, content div lacks such information, but it automatically spans just like the sidebar, same height! Check out the picture to see how things look right now.

Table based CSS layout

Lets update sidebar’s style and remove the height.

#sidebar
	{
	display: table-cell;
	width: 185px;
	padding-left:15px;
	background-color:#FF6633;
	color:#333;
	}

Then we add some content to the site. Here’s how the site looks like naturally, with just a few lines of CSS.

Table based CSS layout, final

All you have to do now is start using the technique and let others know it. In case you desperately need 3 extra minutes, you can download the above table based CSS layout source code. Cheers!

If you liked this post, please feel free to subscribe to our RSS feed and enjoy more great content daily.

Results

Here is a screenshot of what the results looked like at the time of this post:

As you can see, Drupal came #3 with 11% of the votes, Joomla came #2 with 18% of the votes, and the giant Wordpress came #1 with an absolute massive 71% majority win. The results of the poll clearly show that Wordpress is the best loved CMS out there, or maybe there are ones I haven’t included?

You could argue that the poll was a little unfair, seeing as each CMS has a slightly different core use. For example, Wordpress is predominantly a blogging CMS, but it’s now used for practically anything and everything. So yes, maybe I should choose a more fair poll next time.

What’s dissapointing though is that I thought Mambo would at least get a vote or two, but I guess it doesn’t rank too highly, at least in the view of freelancers.

What Next?

Well, I’m going to be putting up the next poll for Freelancer Magazine shortly. Again, I want to make it as engaging as possible, so if you have any good ideas for a poll don’t hesitate to leave a comment on this post, and I’ll take a look at your suggestion. We hope you enjoy the next poll as much as the one currently!

Any questions, comments, or if you just want shout something out, please leave a comment. Also subscribe to our RSS feed if you like our posts.

Note: This article comes in two parts, the second part will be posted in the future.

Usability

In this part of the article, we’re going to be talking about usability. Usability is a term coined when you assess how easy something is to use. If you can go to a website, know exactly where you are, and know exactly where what you’re looking for is, then that is an extremely easy-to-use website, and therefore an extremely accessable and ‘usable’ website. Let’s get on to the tips.

Titles, Tags, Sections, Links

Wording

When thinking about the usability of your portfolio (and I’m referring to your online portfolio throughout this article) it’s crucial that you make sure all your titles are easy-to-read and very briefly describ that particular area of your website. For example, the title of your ‘About Me’ page should not just be ‘About Me’, an improvement would be something along the lines of ‘About [Enter Name Here] – Design and Code Extraordinaire’. If you analyse the latter title, you realize that it perfectly sums up what you do and how good you are. It also immediately attaches those attributes to your name. All your tags, section titles and links should also follow the same general rule as explained above.

Colors & Fonts

What I’m about to explain here is pretty much common sense, but I’ve seen this mistake been made over and over (and over and over) again. Heck, even I make this mistake sometimes! But anyway, make sure you color your links in a distinctive manner that will easily make them identifiable as links. Using the standard blue or various shades of it is brilliant, but even if you’re using any other strong color for a link, make sure it’s uniform and looks like something you would click.

Oh and one other thing about link colors, don’t make text that isn’t a link blue if it differs to the rest of the text on the page. People will think that piece of text is a link!

In terms of fonts, just make sure they’re legible and suit the portfolio’s style. People usually go with one of the following:

• Tahoma
• Verdana
• Arial
• Georgia
• A few others…

I recommend you stay within those bounds for standard digital text. Although if you’re using text in imagery, it’s fine to differ.

Size

Using various sizes of font to form a structure around the content of your portfolio is a great way of making it easier to use. For example, if you have an overall page title of ‘About Us’ for example, make sure it’s bigger than any other headers you have further down within the content of that page. It makes sense to do this, and psychologically gives your content an element of structure.

Example:

Heading 1

Heading 2

Heading 3

Layout

Positioning & Structure

The layout of your portfolio is extremely important. Personally, I’m an advocate of minimalism. I don’t like too much on a page as it distracts me for what the main core purpose of the site is (well, unless that purpose is to distract you with too many things). The reason I say this is because not everyone is tech/web savvy, and therefore navigate through your websites as quick as you. I’ve witnessed this first-hand, particularly in those of the previous generation, where they take minutes looking for a single link. Your whole aim when designing your portfolio is to make it as easy-to-use as possible so that you reduce the risk of visitor dissatisfaction which can lead to lost business.

Take my portfolio as an example, it has a single preview box with arrows either side to navigate between thumbnails. The idea behind it is extremely simple, but works well. I wouldn’t say it’s the most usable function in the world because I find that a lot of people don’t know what that image in the center is, and don’t know if they should click it or not, therefore I had to write up a small instruction on the side to guide them.

What you should be doing though, is try to mimick the simplisity of design that a lot of portfolios out there show. That way, you’ll be able to create a portfolio that is a lot better, and in the long run potentially increase the amount of business you gain from that portfolio.

Always remember that the best portfolio isn’t necessarily the most ‘flashiest’.

Part 2 of ‘How To Make Your Portfolio Better And Get More Clients’ will be posted in the future. If you enjoyed this post, please don’t hesitate to subscribe to our RSS feed.

As a web design freelancer myself, sometimes I feel lost in the documents, e-mails, and notes a client sends across. They seem so messy and all over the place and I find it hard to keep them structured. Sure, I could compile them all in one long document but that doesn’t seem organized enough. So for projects like these I fire up my web-based mindmap application and then compile all the information the client has sent across into something visually structured. I then send it across the mindmap to my client to make sure we are both 100% on the same page. Nothing else accomplishes this task as comprehensive as a mindmap! So today we will look at how we can create a mind map for an example Web Design project.

Keep in mind this information can travel into other freelance areas such as writing, coding, graphic designing and so on!

Choose Your Application

Instead of going through the list of desktop applications and web-based applications together, I’m going to give you two of my favorite options which are both web-based:

MindMeister

MindMeister is the more popular web based choice. It is visually pleasing with great collaborative features for you and your client to edit and share your mindmap. It’s options might be overwealming for those unfamiliar with mindmaps but rest assured, the process is still simple once you getting over this hump. It offers a free membership but you are limited in number of mindmaps you can create and store.

WisdomMap

(Update: Looks like this site is MIA)

WisdomMap is a newcomer in this arena. It is a very simplified way of creating a MindMap. If MindMeister seems too much for you, try WisdomMap!

For this how-to we are going to use MindMeister.

Central Idea

Each MindMap starts out with a central idea. This is the center point in which all other elements will revolve around. For a web design project, you can simply name this central idea the title of the project or client.

Here is the outcome:

Top Nodes / Ideas

After you’ve created your central idea/project name you can begin adding ideas or “nodes” to your mindmap. You can also create sub-ideas and sub-nodes. For the main nodes I usually start out with:

• Header
• Main Index
• Sidebar
• Footer
• Sub Pages

Here is the outcome:

Sub Nodes / Ideas

Sub nodes or Sub ideas can be attached to the main nodes listed above. From here you can add each element to that part of the design. You can also split them once again into sub-lists to enter in the functionality of each element. This is the power of the mindmap. It allows you to make sure you and your client are 100% clear on the design. The time it takes to re-do your design because of confusion is far more time consuming than the time it takes to create a mindmap!

Here is an example of nodes and sub nodes for a design project:

Collaborate!

The best part about mindmaps is that you can collaborate with your clients to edit the information stored on there. This helps you and your client come together and create exactly what your client had in mind. Invite the client or each member of the clients company into your mind map and let them edit, adjust, and reform some of the ideas. You will never be left in the dark again when it comes to your clients projects.

Other Ideas…

Attachments / Graphics

Did you know you can also add graphics and other files to mindmaps? You can upload snipplets of your design related to the idea node as reference or review for your clients.

Illustrate much?

If you’re good with pen and paper (which I’m not!) you can also create some of the most beautiful looking diagrams with mindmaps on a basic piece of paper. Carry a grid moleskine or other notebook with you and keep your mindmaps in your pocket!

Personal Organization

Instead of using mindmaps for your clients only… use them to keep yourself organized. I’ve used mindmaps to map out not only my own projects (this website being one of them!) but also full business plans and roadmaps!