Tip #1: Alt, Title and Link Text

One way to help optimize your website for search engines is to include appropriate descriptive text around your links and images. This lets the search engine know what they can expect when following your links, it will help your images get indexed in google images, and can also be extremely helpful for your users. The alt attribute should be applied to all images on your website, and should describe what’s in the image. When users hover over the image, this text will pop up for them.

<img src="rockymountain.jpg" alt="Rocky Mountains in Banff" />

The title attribute should be applied to all links on your website, especially in navigation buttons that are image based. These show up for users when they hover over your links, but are also read by the search spiders.

<a title="Banff Rocky Mountains" href="banff.html"></a>

Finally, the descriptive text that is being linked plays an important part in how the search engine spiders read your links. Avoid using Click Here as the text for your links. Instead use descriptive text such as Our Trip to the Banff Rocky Mountains.

The change was made in order to get page content and actions more tightly integrated with users news feeds. As Facebook mentions  you can now “easily publish content to your Page’s Wall and gain distribution through News Feed”. And while this change is fine and dandy, it doesn’t help my efforts at all.

We use Facebook pages at work (and actually create them for clients) as a form of brand awareness. The previous layout allowed us to use FBML boxes to add custom HTML code, flash, and high quality logo images to the page, while giving less prominence to the wall and discussion features. With the new layout, any custom content we’ve added gets pushed into a “boxes” tab (which I highly doubt people click on).

The Pages were customizable – and now the customization is stripped away with the new layout. Pages now look just like any other profile on Facebook and have very little flexibility.

So here’s my plea towards the Facebook team: Bring back the old layout! We’ll even pay a monthly fee to be able to use it. Just make it easier for companies and brands to uniquely identify themselves on Facebook.

To begin, make a new document in Photoshop that is 3x the height of your navigation bar. This will leave enough room for all three navigation states – normal, hover, and active. My sample navigation is 500 x 30 pixels, so the Photoshop document is 500 x 90 pixels.

Create your normal state at the bottom of the document, making sure that it’s exactly 1/3 of the height of your document (30 pixels in my case).

Group the layers for your normal state and duplicate the group. Move it to the middle section of your document and modify it’s design to create your active state. The active state is what the user sees when they are clicking on the button. Duplicate your group one final time and move it to the top of the document. This will be your rollover state.

Using your slice tool, slice around each of the navigation buttons. I like to create guides first and then snap the slices to the guides. This helps them come out cleaner and without mistakes (which can sometimes be easy to do when slicing!).

Save your navigation bar for web. This will generate all your sliced files and put them in an images folder, which we’ll need to use later with our CSS.

To start coding your navigation bar, we’ll be using an unordered list. Include as many list items as necessary for your navigation bar, and name them accordingly with classes.

<ul class="Navigation">
	<li class="Home"><a title="Home" href="#"></a></li>
	<li class="About"><a title="About Us" href="#"></a></li>
	<li class="Portfolio"><a title="Portfolio" href="#"></a></li>
	<li class="Blog"><a title="Blog" href="http://www.wildcreature.com"></a></li>
	<li class="Contact"><a title="Contact Us" href="#"></a></li>
</ul>

The first step with the CSS is to style the list. Because unordered lists by default have padding, margins and bullets showing, we need to reset these items. The list items must then float left beside each other, rather than displaying in a list format.

.Navigation {
	margin: 0;
	padding: 0;
	list-style: none;
}
 
.Navigation li {
	float: left;
}

After floating elements in CSS, you need to clear their position for the rest of the page to render properly. To do this, we add a div with class=”clear” at the end of the list, and then create a .clear style in our CSS.

.clear {
	clear: both;
}

To create the buttons, use the same technique as in the Easy CSS Rollover Buttons. Their is an additon of an a:active state, which will change the background position when the user clicks on the link.

.Home a {
	display: block;
	width: 73px;
	height: 30px;
	background: url(images/navigation_menu_01.png) no-repeat bottom left;
}
 
.About a {
	display: block;
	width: 102px;
	height: 30px;
	background: url(images/navigation_menu_02.png) no-repeat bottom left;
}
 
.Portfolio a {
	display: block;
	width: 116px;
	height: 30px;
	background: url(images/navigation_menu_03.png) no-repeat bottom left;
}
 
.Blog a {
	display: block;
	width: 80px;
	height: 30px;
	background: url(images/navigation_menu_04.png) no-repeat bottom left;
}
 
.Contact a {
	display: block;
	width: 125px;
	height: 30px;
	background: url(images/navigation_menu_05.png) no-repeat bottom left;
}
 
.Navigation a:hover {
	background-position: top left;
}
 
.Navigation a:active {
	background-position: center left;
}

The final result is a simple and light rollover menu. While the navigation menu doesn’t have an award winning design, I hope it has helped you learn the basics to an amazing CSS trick.