I love web applications because all I need is a connection and a browser to run them. When I have to install something on my computer, it better be worth it. Spotify, the newest music service to hit the US, has debuted with much fanfare and I think it mostly deserves the hype.

Spotify a great application for sharing music with friends and has a vast collection of songs. But will Spotify take-off in the US? Here’s some hurtles I think they may need to overcome first:

No Web Application

When Spotify first became available in the US I was unaware that it was an installable application, much like iTunes. Instantly, I was disappointed. I have multiple computers and am constantly using different machines. It’s a major drag to have to install an application on my buddies computer or on a business computers with watchdog applications on it.

Confusing Interface

I started using Spotify as a beginner and instantly became a bit overwhelmed and confused. Being a stickler for UI, I began fumbling through the menu items with frustration until I manage to hear music coming into my ears.

The UI should be simplified even further and not try to mimic the iTunes platform so much. What do you think? Were you confused or quickly adapted to Spotify’s user interface?

Higher Price Point

Before Netflix jacked up their pricing (must to the customer’s dismay) you could have gotten video subscription for the same price as Spotify’s premium membership rate. I’m pretty cheap when it comes to music, so $10/month seems rather pricey.

To be fair, there is a lower priced plan at $5/month with less bells-and-whistles. I’m assuming most people will sign up for the premium though since what the main grab is mobile capability.

Find out more about Spotify’s pricing »

Despite it’s shortcomings… Spotify is doing well

Everyone at my work is raving about Spotify. The main factors seem to be that they feel so cool that they got an invite and you didn’t (they did a great job with the invite-only system) and the social integration.

Spotify gains $70,000 user the first week »

Ok so you just finished downloading the latest Call of Duty: Black Ops and you’re all amped to get it booted up right? Now you get into your first multiplayer game after that tedious step of setting up your controls and by this time you’re gripping the mouse with much anticipation ready to get on that first kill streak. Oh wow, a new server browser. And what’s this? It actually loads the servers fast… nothing like that POS Bad Company 2 server browser that takes forever and looks like it came from 1999.

You’ve Joined and Now You’re Playing

Perhaps you’ve gotten down the first corridor and you’re just changin weapons when you see the first glitch. Just a little bit of lag, it’s nothing you say. But wait, there it is again. Another skipped frame, another chopped sound. Oh no, this is not good.

It Can’t Be My Computer

You’re rig runs everything tip top right? You’ve got BC2 installed and it’s running smoother than a greased monkey on a slip-n-slide and you’ve got your OS tuned to the sound of a songbird in the spring. You’re wondering what you can do to make it better. Quick, take a look at the game’s settings.

My Black Ops Setting Must Be Wrong

Fiddling with the settings over and over again may help. Perhaps on the lowest resolution you won’t experience such a major lag during multiplayer gameplay. Unfortunately this hasn’t been the case thus far. There’s been numerous threads on the forums about performance issues.

Forums Threads Mentioning Black Ops PC Performance Issues

Here’s a few threads I think may be helpful for you guys to check out if you want to see the latest developments on a resolution for the COD PC Black Ops performance issue.

1. Weird system resource usage = heavy lag
2. Is it just me?! Black Ops Memory Leak
3. Weird system resource usage = heavy lag

Is there a Fix or Solution for the Black Ops Performance Issue?

As of right now it seems everything is speculation. I’ve seen in the threads a variety of resoltutions that I will attempt to document through this posting. If you know of a resolutions that helped you fix your COD Black Ops PC Install then please post in the comment sections below.

Fixes for Steam PC Multiplayer

If you bought COD Black Ops on Steam for PC and are experiencing lag issues you’re not alone. The problem has been acknowledged by Steam and there’s already a few workarounds floating around the interwebs that might work for you:

Running Steam in Offline Mode and Closing the Process

1. Run Steam in Offline mode
2. Run Black Ops
3. When in the game CTRL+ALT+DEL and go to the Process Manager and turn off Steam.exe there.

Set Processes Priority via Windows Task Manager

1. Boot up the game via Steam like you normally would
2. Minimize the COD application using the windows button and open task manager
3. Set the COD application’s process priority to high in the task manager processes tab
4. Set the Steam application’s process priority level to low
5. Resume gameplay

Complete and Updated List of Current COD Black Ops PC Fixes

Have a ton of problems that you’re not sure exactly what the issue is? Check out this great link: Call of Duty: Black Ops Crashes, Freezes, Errors, and Fixes to find out how to fix your PC COD Black Ops problem…. hopefully. :]

Video on Black OPs PC Lag Issue

Want to see the issue for yourself? Here’s a good screencast that demonstrates a typical example of the issue PC users are experiencing when they boot up their new copies of Call of Duty Black Ops multiplayer games.

What’s this Comic About?

Basically all the ‘modern’ browsers are playing in the treehouse and poor IE6 is disgruntled that he cannot. He is sporting a 5 o’clock shadow and looks a little mean. Meanwhile, Firefox is pointing out that IE7 is indeed related to the banned browser. My question is this: why is IE7 still allowed in the treehouse? Or any IE for that matter. Internet Explorer 8 doesn’t even allow us to do anything cool with CSS3 or HTML5. Bottom line, die IE die!

Disabled Dreamweaver

When you are experiencing this problem you will see that Dreamweaver launches but your menu is limited to only a few options:

Here’s how I fixed the problem:

1. First quit Dreamweaver CS5 if you have in launched (or kinda launched)
2. Open Finder and navigation to: Macintosh hd/users//library/application support/adobe/dreamweaver cs5/en-US/
3. Here you will find the folder “configuration” … Rename this folder to ‘configurationOld’ and restart Dreamweaver

What this will do is force Dreamweaver to create that configuration folder again. Please note: this may not fix it for you and this solution has not even been mentioned by Adobe. Hope this helps you out!

Here’s the link to the ‘official’ adobe KB article on their solution to fix Dreamweaver CS5′s launching problem: Nothing happens when launching Adobe Dreamweaver CS5 on a Mac

Here’s a useful thread at the Adobe Support Forums about this dreamweaver problem and possible solutions.

Although we have put 100′s of hours into the design, development and readying of 150+ fonts (x4 formats = 600!), with only weeks before font-face.com was ready to go live, we have decided to bow out now. A bitter blow to the team.

Here’s the whole @font-face announcement:

Our Google Announcement

Google have recently announced that they are also entering the web-font market – with the same free, hosted model as ours.

Although we have put 100′s of hours into the design, development and readying of 150+ fonts (x4 formats = 600!), with only weeks before font-face.com was ready to go live, we have decided to bow out now. A bitter blow to the team.

Our decision has not been easy. Although we feel we would offer a better service, we would after all be competing with Google. A massive might to compete with.

The last thing we would want is to host fonts for everyone to link to, only to at some point (after google have beaten us) be forced to turn them off – destroying your website designs.

So as not do disappoint you in the future, we have decided to stop now. Have no fear though – we will be back! We are hatching a new plan for font-face.com – stay tuned!

font-face.com will still be the home of everything font-face, just not in the original way it was intended.

Thanks

The font-face.com Team x x

It looks more and more that Google’s Font Directory will be the way more and more web designers will go for web-fonts. Right now the library only consists of 30 or so fonts but I imagine this will grow quickly. Sorry @font-face, I really wanted to start using you! Cool site though, simple and to the point. Check out font-face.com to get updates from their team. They say they currently are hatching up something new for the web. They managed to make quiet an impression this first go around until Google had to come in an flex their muscle.

As always, if you like this post please be sure to check out my entire site and comment below

The following article is no longer supported:

Why jFlow is a Good Slider

jFlow is a very light-weight slider. If you've been using sliders in your web design for some time perhaps you've had experiences with a few jQuery sliders that hasn't been so good. jFlow out-of-the-box is good, but let's make it great. One of the most requested features for this slider is to have the popular pause and autoslide functions.

The jFlow Plug-In

/* Copyright (c) 2008 Kean Loong Tan http://www.gimiti.com/kltan
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* jFlow
* Version: 1.0 (May 13, 2008)
* Requires: jQuery 1.2+
*/

(function($) {

$.fn.jFlow = function(options) {
var opts = $.extend({}, $.fn.jFlow.defaults, options);
var cur = 0;
var maxi = $(".jFlowControl").length;
$(this).find(".jFlowControl").each(function(i){
$(this).click(function(){
$(".jFlowControl").removeClass("jFlowSelected");
$(this).addClass("jFlowSelected");
var dur = Math.abs(cur-i+1);
$(opts.slides).animate({
marginLeft: "-" + (i * $(opts.slides).find(":first-child").width() + "px")
}, opts.duration*(dur));
cur = i;
});
});

$(opts.slides).before('<div id="jFlowSlide"></div>').appendTo("#jFlowSlide");

$(opts.slides).find("div").each(function(){
$(this).before('<div></div>').appendTo($(this).prev());
});

//initialize the controller
$(".jFlowControl").eq(cur).addClass("jFlowSelected");

var resize = function (x){
$("#jFlowSlide").css({
position:"relative",
width: opts.width,
height: opts.height,
overflow: "hidden"
});

$(opts.slides).css({
position:"relative",
width: $("#jFlowSlide").width()*$(".jFlowControl").length+"px",
height: $("#jFlowSlide").height()+"px",
overflow: "hidden"
});

$(opts.slides).children().css({
position:"relative",
width: $("#jFlowSlide").width()+"px",
height: $("#jFlowSlide").height()+"px",
"float":"left"
});

$(opts.slides).css({
marginLeft: "-" + (cur * $(opts.slides).find(":first-child").width() + "px")
});
}

resize();

$(window).resize(function(){
resize();
});

$(".jFlowPrev").click(function(){
if (cur > 0)
cur--;
else
cur = maxi -1;

$(".jFlowControl").removeClass("jFlowSelected");
$(opts.slides).animate({
marginLeft: "-" + (cur * $(opts.slides).find(":first-child").width() + "px")
}, opts.duration);
$(".jFlowControl").eq(cur).addClass("jFlowSelected");
});

$(".jFlowNext").click(function(){
if (cur < maxi - 1)
cur++;
else
cur = 0;

$(".jFlowControl").removeClass("jFlowSelected");
$(opts.slides).animate({
marginLeft: "-" + (cur * $(opts.slides).find(":first-child").width() + "px")
}, opts.duration);
$(".jFlowControl").eq(cur).addClass("jFlowSelected");
});
};

$.fn.jFlow.defaults = {
easing: "swing",
duration: 400,
width: "100%"
};

})(jQuery);

jFlow Original Download

jFlow Demo

Recently I put up a demo on my other website wordimpressed.com, you can view it here: jFlow Slider Demo on WordImpressed. Also, be sure to read the newer article I wrote about the jFlow Plus Release.

jFlow Auto Slide

Have you been searching on Google for an easy Auto Slide solution for the jQuery jFlow plug-in? Well, look no more... you have found it. Here's the solution below. Expand to see the code or download it using the link below.

/* Copyright (c) 2008 Kean Loong Tan http://www.gimiti.com/kltan
 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * jFlow
 * Version: 1.2 (July 7, 2008)
 * Requires: jQuery 1.2+
 */

(function($) {

 $.fn.jFlow = function(options) {
 var opts = $.extend({}, $.fn.jFlow.defaults, options);
 var randNum = Math.floor(Math.random()*11);
 var jFC = opts.controller;
 var jFS =  opts.slideWrapper;
 var jSel = opts.selectedWrapper;

 var cur = 0;
 var timer;
 var maxi = $(jFC).length;
 // sliding function
 var slide = function (dur, i) {
 $(opts.slides).children().css({
 overflow:"hidden"
 });
 $(opts.slides + " iframe").hide().addClass("temp_hide");
 $(opts.slides).animate({
 marginLeft: "-" + (i * $(opts.slides).find(":first-child").width() + "px")
 },
 opts.duration*(dur),
 opts.easing,
 function(){
 $(opts.slides).children().css({
 overflow:"hidden"
 });
 $(".temp_hide").show();
 }
 );

 }
 $(this).find(jFC).each(function(i){
 $(this).click(function(){
 dotimer();
 if ($(opts.slides).is(":not(:animated)")) {
 $(jFC).removeClass(jSel);
 $(this).addClass(jSel);
 var dur = Math.abs(cur-i);
 slide(dur,i);
 cur = i;
 }
 });
 });

 $(opts.slides).before('<div id="'+jFS.substring(1, jFS.length)+'"></div>').appendTo(jFS);

 $(opts.slides).find("div").each(function(){
 $(this).before('<div></div>').appendTo($(this).prev());
 });

 //initialize the controller
 $(jFC).eq(cur).addClass(jSel);

 var resize = function (x){
 $(jFS).css({
 position:"relative",
 width: opts.width,
 height: opts.height,
 overflow: "hidden"
 });
 //opts.slides or #mySlides container
 $(opts.slides).css({
 position:"relative",
 width: $(jFS).width()*$(jFC).length+"px",
 height: $(jFS).height()+"px",
 overflow: "hidden"
 });
 // jFlowSlideContainer
 $(opts.slides).children().css({
 position:"relative",
 width: $(jFS).width()+"px",
 height: $(jFS).height()+"px",
 "float":"left",
 overflow:"hidden"
 });

 $(opts.slides).css({
 marginLeft: "-" + (cur * $(opts.slides).find(":eq(0)").width() + "px")
 });
 }

 // sets initial size
 resize();

 // resets size
 $(window).resize(function(){
 resize();
 });

 $(opts.prev).click(function(){
 dotimer();
 doprev();

 });

 $(opts.next).click(function(){
 dotimer();
 donext();

 });

 var doprev = function (x){
 if ($(opts.slides).is(":not(:animated)")) {
 var dur = 1;
 if (cur > 0)
 cur--;
 else {
 cur = maxi -1;
 dur = cur;
 }
 $(jFC).removeClass(jSel);
 slide(dur,cur);
 $(jFC).eq(cur).addClass(jSel);
 }
 }

 var donext = function (x){
 if ($(opts.slides).is(":not(:animated)")) {
 var dur = 1;
 if (cur < maxi - 1)
 cur++;
 else {
 cur = 0;
 dur = maxi -1;
 }
 $(jFC).removeClass(jSel);
 //$(jFS).fadeOut("fast");
 slide(dur, cur);
 //$(jFS).fadeIn("fast");
 $(jFC).eq(cur).addClass(jSel);
 }
 }

 var dotimer = function (x){
 if((opts.auto) == true) {
 if(timer != null)
 clearInterval(timer);

 timer = setInterval(function() {
 $(opts.next).click();
 }, 3000);
 }
 }

 dotimer();
 };

 $.fn.jFlow.defaults = {
 controller: ".jFlowControl", // must be class, use . sign
 slideWrapper : "#jFlowSlide", // must be id, use # sign
 selectedWrapper: "jFlowSelected",  // just pure text, no sign
 auto: false,
 easing: "swing",
 duration: 400,
 width: "100%",
 prev: ".jFlowPrev", // must be class, use . sign
 next: ".jFlowNext" // must be class, use . sign
 };

})(jQuery);

jFlow with Auto Slide Functionality Download

jFlow with Auto Slide and Pause Functionality

Now that you have the slider with auto slide functionality there's a timer that is in effect. Let's take this timer out whenever the user's mouse is outside the slider area. Here's the modified jFlow code below. Download it using the link below.

/* Copyright (c) 2008 Kean Loong Tan http://www.gimiti.com/kltan

 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)

 * jFlow

 * Version: 1.2 (July 7, 2008)

 * Requires: jQuery 1.2+

 */

 

(function($) {



	$.fn.jFlow = function(options) {

		var opts = $.extend({}, $.fn.jFlow.defaults, options);

		var randNum = Math.floor(Math.random()*11);

		var jFC = opts.controller;

		var jFS =  opts.slideWrapper;

		var jSel = opts.selectedWrapper;
		
		



		var cur = 0;

		var timer;

		var maxi = $(jFC).length;

		// sliding function

		var slide = function (dur, i) {

			$(opts.slides).children().css({

				overflow:"hidden"

			});

			$(opts.slides + " iframe").hide().addClass("temp_hide");

			$(opts.slides).animate({

				marginLeft: "-" + (i * $(opts.slides).find(":first-child").width() + "px")

				},

				opts.duration*(dur),

				opts.easing,

				function(){

					$(opts.slides).children().css({

						overflow:"hidden"

					});

					$(".temp_hide").show();

				}

			);

			

		}

		$(this).find(jFC).each(function(i){

			$(this).click(function(){

				dotimer();

				if ($(opts.slides).is(":not(:animated)")) {

					$(jFC).removeClass(jSel);

					$(this).addClass(jSel);

					var dur = Math.abs(cur-i);

					slide(dur,i);

					cur = i;

				}

			});

		});	

		

		$(opts.slides).before('<div id="'+jFS.substring(1, jFS.length)+'"></div>').appendTo(jFS);

		

		$(opts.slides).find("div").each(function(){

			$(this).before('<div class="jFlowSlideContainer"></div>').appendTo($(this).prev());

		});

		

		//initialize the controller

		$(jFC).eq(cur).addClass(jSel);

		

		var resize = function (x){

			$(jFS).css({

				position:"relative",

				width: opts.width,

				height: opts.height,

				overflow: "hidden"

			});

			//opts.slides or #mySlides container

			$(opts.slides).css({

				position:"relative",

				width: $(jFS).width()*$(jFC).length+"px",

				height: $(jFS).height()+"px",

				overflow: "hidden"

			});

			// jFlowSlideContainer

			$(opts.slides).children().css({

				position:"relative",

				width: $(jFS).width()+"px",

				height: $(jFS).height()+"px",

				"float":"left",

				overflow:"hidden"

			});

			

			$(opts.slides).css({

				marginLeft: "-" + (cur * $(opts.slides).find(":eq(0)").width() + "px")

			});

		}

		

		// sets initial size

		resize();



		// resets size

		$(window).resize(function(){

			resize();						  

		});

		

		$(opts.prev).click(function(){

			dotimer();

			doprev();

			

		});

		

		$(opts.next).click(function(){

			dotimer();

			donext();

			

		});

		

		var doprev = function (x){

			if ($(opts.slides).is(":not(:animated)")) {

				var dur = 1;

				if (cur > 0)

					cur--;

				else {

					cur = maxi -1;

					dur = cur;

				}

				$(jFC).removeClass(jSel);

				slide(dur,cur);

				$(jFC).eq(cur).addClass(jSel);

			}

		}

		

		var donext = function (x){

			if ($(opts.slides).is(":not(:animated)")) {

				var dur = 1;

				if (cur < maxi - 1)

					cur++;

				else {

					cur = 0;

					dur = maxi -1;

				}

				$(jFC).removeClass(jSel);

				//$(jFS).fadeOut("fast");

				slide(dur, cur);

				//$(jFS).fadeIn("fast");

				$(jFC).eq(cur).addClass(jSel);

			}

		}

		

		var dotimer = function (x){

			if((opts.auto) == true) {

				if(timer != null) 

					clearInterval(timer);

			    

        		timer = setInterval(function() {

	                	$(opts.next).click();

						}, 10000);
				

			}

		}



		dotimer();
//Pause/Resume at hover
		$(opts.slides).hover(
		function() {
		clearInterval(timer);
		},
		
		function() {
		dotimer();
		}
		);
	};

	

	$.fn.jFlow.defaults = {

		controller: ".jFlowControl", // must be class, use . sign

		slideWrapper : "#jFlowSlide", // must be id, use # sign

		selectedWrapper: "jFlowSelected",  // just pure text, no sign

		auto: false,

		easing: "swing",

		duration: 400,

		width: "100%",

		prev: ".jFlowPrev", // must be class, use . sign

		next: ".jFlowNext" // must be class, use . sign

	};

	

})(jQuery);

jFlow Auto Slide with Pause Feature Download

Some Extra jFlow Stuff For Ya!

//Pause/Resume at hover
 $(opts.slides).hover(
 function() {
 clearInterval(timer);
 },

function() {
 dotimer();
 }
 );

Now when someone hovers over the slider area the time will not be going because the pause is on.  Once the mouse leaves the slider the timer resumes and your slider is not paused.

Extra jFlow Auto Hint: To increase the amount of time it takes to for the image to slide increase the following number:

[/code]

var dotimer = function (x){

if((opts.auto) == true) {

if(timer != null)

clearInterval(timer);

timer = setInterval(function() {

$(opts.next).click();

}, 10000);

}

}

jQuery, Lavalamp, Easing and WordPress

Ok so if you haven't yet you're going to need to download all the appropriate scripts to make this work and have a WordPress site ready to work with. I've provided download links at the bottom of this post for you or also you can get them here: jQuery 1.4.1 min, jQuery Lavalamp Plug-in, and jQuery Easing Plug-in.

Why Use Lavalamp jQuery Navigation?

Because it's cool and increases user experience while still being very SEO friendly and lightweight. I personally use the lavalamp navigation on my portfolio website: Lavalamp Example 1. Also, I recently implemented it on another website I built and recently launched: Lavalamp Example 2. As you can see the effect works well and is very user friendly. Now, let's look in to how to make it work.

Here's the official website for the jQuery plug-in here: jQuery Lavalamp Plugin Page

To get started you must have WordPress installed on a web server and some knowledge of web development, HTML, and jQuery. Ok, still ready? Now download the jQuery Easing Plug-in here: jQuery Easing Plug-in and also download the jQuery Lavalamp Plug-in Here (min version): jQuery Lavalamp Plug-in

Insert the following between the header tags

Please note that my syntax highlighter has added some extra characters in the links. You will want to change these links to either Google or your own hosted scripts anyways...

<!-- this is the code you're looking for here below for the lavalamp-->

<link rel="stylesheet" href="http://www.devinwalker.net/wp-content/themes/devinwalker/jquerynav/lavalamp.css" type="text/css" media="screen" />


<!-- this script initiates the function change the #nav to your unordered list's ID -->

First, you will need to change in header the src='path/to' to a link to the appropriate path . The WordPress file to put this code in is title header.php and can typically be found in this location: mydomain/wp-content/themes/mytheme/header.php.

Further explanation: the second script after calling on jQuery is the Easing plug-in that makes this effect real smooth. The last script initiates the lavalamp function. You will need to change the '#nav' to your unordered list's ID if you are not using the same naming convention as I am.

Connecting to the WordPress Navigation

<ul class="lavaLampBottomStyle" id="nav">
	 <li><a href="http://www.devinwalker.net">Home</a></li>                
         <li class="page_item page-item-2"><a href="http://www.devinwalker.net/about/" title="About">About</a></li>
         <li class="page_item page-item-3"><a href="http://www.devinwalker.net/hire-me/" title="Hire Me">Hire Me</a></li>
</ul>

Connecting this effect to a WordPress dynamic navigation is easy. Simply go into the header.php file and provide your navigational unordered list the appropriate class="LavaLampBottomStyle" naming and you're all set after you call on the appropriate scripts as mentioned above. Just an FYI, if you have a lot of other jQuery effects on page it could cause some problems with them... just experiment around with it. I've experienced minor issues, but nothing that's too hard to figure out (no roadblocks).

Example Menu

Below is an example of how this effect can be used anywhere on a site. Here you can see I've implemented it directly into a WordPress page using inline code. The links don't go anywhere for a reason, but they can easily be made to go anywhere you'd like.

• Check
• This
• Out
• Man

As you can see this effect works well for site navigation, but can be used to create some other cool effects. Please let me know if you have trouble with this tutorial, I've tried to explain everything to the best of my ability. Leave a comment and subscribe to the RSS!

Resources for jQuery Scripts

Download: jQuery 1.4.1 min

Download: jQuery Lavalamp Plug-in

Download: jQuery Easing Plug-in

Download: jQuery Lavalamp Plug-in

Check out my new article Modern Web Forn Options for Web Designers for my latest rundown of web font solutions

Attractive CSS typography and styled fonts can add a lot to a user's experience on your website. Think of your website's typography as the foundation upon which your design is built. Typically, users will look at your headings first and actually read and interpret the text. Please enjoy these examples of how CSS typography can be used effectively on your website, blog or project.

Note: Best viewed in FireFox 3.5+

Mozilla makes some great software, and they can design a mean website too. Check out this site where I got this typography from: http://www.mozilla.org. It's pretty cool looking I'd say. Here's the link to the full background image: HERE.

<div id="container">
<h1><strong>We believe</strong>that the internet should be public, open and accessible.</h1>
</div>

#container {
     background:url(http://www.dlocc.com/articles/wp-content/uploads/2010/01/Mozilla-Background.png) no-repeat top left;    
}

h1 {
     font-family:Georgia,serif;
     color:#666666;
     font-size:30px;
     line-height:1em; 
     margin:0 0 0 60px;
}

h1 strong{
     color:#A80C1E;
     display:block;
     font-size:85px;
     font-weight:normal;
     letter-spacing:-3.5px;
     line-height:1em;
}

The example above shows how to effectively use CSS to create a large heading with an elegant italic subheading. The fonts used are Baskerville, Helvetica, and Georgia as you can see once the syntax is expanded below.

<span class="introduction">Introducting</span>
<h1><em>Modern Web Design</em></h1>
<h2><span>W</span>e know CSS <strong>&amp;</strong> Practice Modern <em>Web Design Since <span>2001</span></em></h2>

h1 {  
	font-family:Baskerville,Times,'Times New Roman',serif;
	font-size:75px; 
	color:#589017;
	font-variant:small-caps;
	text-align:center;
	font-weight:bold;
	padding:15px 0px 15px 0px; /* Tweak this to your liking */
}

h2 {
	font-family:georgia,serif;font-size:18px;
	font-style:italic;
	color:#3E2F2F;
	letter-spacing:0;
	line-height:1.429em;
	padding:0;
	text-align:center;
}

h2 span {
	font-family:baskerville,'palatino linotype',georgia,serif;
        font-size:25px;
	font-weight:100;


}

.introduction {
	font-family:'Helvetica Neue',Arial,sans-serif;font-size:15px;
	font-weight:bold;
	margin:10px 0px 10px 20px; /* Tweak this to your liking (also add padding) */
	letter-spacing:3px;
}

Is your wordpress blog in need of some sprucing up? Here we have an example of how we can make blog postings look that much better all thanks to cascading style sheets. Remember, these are links so they will require different syntax for styling links and hovers. Check out what I mean by viewing the code below.

HTML

<h3><em>The</em> Man, <em>The</em> Myth, <em>The</em> Legend</h3>
<p class="authorDate">By: Devin Walker | Posted: April 20th, 2010</p>
<p class="content">Ever want to create an amazing blog that makes your visitors drop their jaw in awe?  Well with a little bit of CSS magic this can become a reality.  Getting visitors is another thing, you'll figure that part out... just keep posting good content!</p>

h3 {  
	font-family: georgia,serif; 
	color: #755c44; 
	font-size: 20px; 
	letter-spacing: 0.1em; 
	line-height: 1.5em; 
	text-transform: uppercase; 
	margin: 10px;
}

h3 em{
	color:#8F7C47;
	letter-spacing:0.05em;
	text-transform:none;
	font-size:20px;
}

.authorDate {
	border-color:#695C44;
	border-bottom:1px dashed;
	margin:0px 10px 0px 10px;
	padding-left:5px;
	color:#666666;
	font-family:Tahoma;
	font-size:10px;
	font-variant:normal;
	font-weight:lighter;
	letter-spacing:3px;
	text-transform:uppercase;
}

.content {
	font-family: georgia,serif;
	font-size: 12px; 
	line-height: 20px; 
	letter-spacing:1px;
}

CNN is the go to website for millions of people. They must be doing something right as far as typography is concerned. The designers have used Arial at various pixel sizes.

HTML

<h1>Upcoming IE9 Incompatible with CSS3</h1>
<div class="dateTime">January 4, 2010 2:29 p.m. EST</div>
<div class="content"><strong>Houston, Texas</strong> -- Love or hate Microsoft, it seems the newly release beta version of IE9 will not be compatible with the latest version of CSS. Web designers are scrambling to gather enough eggs to cover the entire Microsoft headquarters.</div>

h1 {
     font-family:arial;
     color:#000;
     font-size:14px;
     font-size-adjust:none;
     font-stretch:normal;
     font-style:normal;
     font-variant:normal;
     font-weight:normal;  
     line-height:19px;
     margin-bottom:7px;
}  

.dateTime {
     font-family:arial;
     font-size:11px;
     font-size-adjust:none;
     font-stretch:normal;
     font-style:normal;
     font-variant:normal;
     font-weight:normal;
     line-height:14px;
     padding:1px 0px 1px 15px;
}

.content {
     font-family:arial;
     color:#000;
     font-size:14px;
     font-size-adjust:none;
     font-stretch:normal;
     font-style:normal;
     font-variant:normal;
     font-weight:normal;
     line-height:19px;
     margin-bottom:7px;
     padding:0px 15px 0px 15px;
}

Top-10 lists are very popular and are very enjoyable to write IMO. Site visitors want to see lists with images that stand out and are unique. Bland lists are boring. Style your top lists using something similar to the above example using the code below. Check out my post on using a box shadow hover effect for Mozilla firefox using CSS! Coming soon.

HTML

<h1>Top-10 Web Tools of 2009</h1>
<div class="top10">
<h2>Adobe Dreamweaver CS4</h2>
<p>I think Dreamweaver is cool because blah blah blah...</p>
<span>1</span>
</div>

CSS

.top10 {
      background-color:#FFF7EF;
      border:7px solid #FEE8D1;
      color:#666666;
      margin:10px 0 20px; /*may change */
      padding:5px 10px 30px;  /*may change */
      position:relative;
}

.top10 h2{
     color:#333333;
     font-family:Georgia,serif;
     font-size:25.5px;
     font-style:italic;
     margin:10px 0px 5px 0px;
}

.top10 p {
     color:#666666;
     font-family:Georgia,serif;
     font-size:14.5px;
     padding:10px 0;
}

.top10 span {
     bottom:25px;
     color:#DEDEDE;
     font-size:55px;
     position:absolute;
     right:0;
}

.top10 img{
     float:right;
     margin:10px;
}

h1 {
     font-family: Georgia, serif;
     font-size: 30px;
     font-style: normal;
     font-weight: normal;
     text-transform: uppercase;
     letter-spacing: 2.5px;
}

Mozilla is awesome. Check out their beautiful and elegant typography HERE. Georgia is one of my favorite fonts to use because it renders nicely when used in large sizes and looks pretty slick. It's a serif font, meaning it naturally has more detail than sans-serif fonts. I believe this gives more character to the typography. What do you think?

HTML - (Download the background HERE)

<div class="container">
<h1>CSS Typography is Fun!</h1>
<p>Why is it fun? Because it is!</p>
</div>

CSS

#container  {
     font-family:georgia,serif;
     color:#FFFFFF; 
     margin:10px; /*Customize */
     padding:10px; /*Customize */
}

#container h1 {
     font-size:75px;
     margin:10px 0px 10px 0px; /*Customize */
     padding:0px; /*Customize */

}

#container p{
     color:#4B4742;
     font-size:24px;
     line-height:30px;
     margin:10px; /*Customize */
}

Please let me know what you think. If you enjoyed this post be sure to subscribe to our RSS feed. Are you looking to publish your articles online? Contact DLOCC! Also, peep us out on Twitter! Ok, that's it for now. Pz!

Are you still waiting around to get listed on DMOZ? It takes forever. Maybe it's worth taking a look at the closest DMOZ competitors. The following is an analysis of the closest competitors to the Open Direcoty Project. Thanks for checking out my Top-10 DMOZ Competitors list! Please leave a comment or suggestions.

What is a Directory?

Website Directories are search engines created, edited and monitored by human beings. Human editors review submissions and decide ultimately what listings the directories have. Getting your website listed with the web's key directories is important because it attracts new visitors and other search engines will see these listings.

There are a lot of directories on the web that utilize DMOZ, the ones listed below are not associated with the Open Directory Project because that wouldn't be a true competitor.

DMOZ Alexa Rank:

1. Yahoo! Directory

Description: The Yahoo! Directory is the web's most popular as you can see from the traffic comparison below. Although, I believe the 3-rank is for Yahoo! iteself, not the directory. Desite this, undoubtedly, the Yahoo! directory is the largest rival to DMOZ. The directory was Yahoo's primary method of search until 2002 when the change to crawler-based searches was implemented (source).

Cost: Free (takes as long as DMOZ to get listed) or $299/annually (cut-the-line fee)

Submit your Site

Note: Payment is required for any commercial website.

Alexa Rank:

2. ZoomInfo

Description: ZoomInfo has been around since 1999 and is a directory of people and businesses. For individuals: to get listed on the directory it isn't that hard, you can visit this link here and sign-up. For Companies, apparently this feature isn't released yet but you can be notified when it is by visiting the current Add New Company page.

Alexa Rank:

3. Best of the Web Directory

Description: Best of the Web Directory claims to be the Internet's oldest directory. Whether this is true or not I don't know for sure, but getting listed on this directory is not free. Please see the cost below prices below. The Alexa ranking for the site is below DMOZ.

Cost: $149/annually or $299.95/one-time-fee

Submit Your Site

Alexa Rank:

4. The Pegasus Directory

Description: Pegasus is a good directory that boasts a higher traffic rating than other price comparable directories. If you elect to pay for a listing the customer service has a good standing review for fast service according to the directory critics.

Cost: Free (w/ or w/o reciprical) $27/annually or $69/Lifetime

Submit Your Site

Alexa Rank:

5. Fat Info

Description: Fat Directory is really good directory and what really I like is their insistence on good grammar and spelling as well as the hints and tips it offers to ensure you are completing the submittion form correctly. To suggest your site simply navigate to the appropriate directory and click Suggest Link

Cost: Free

Submit Your Site

Alexa Rank:

6. Index King

Description: Index King is affordable, fast and free for those not looking to part with $4 dollars. Even though I submitted a free listing their editors responded to support email and helped in categorizing my website. Overall, Index King is provides goo service and is a reliable directory with decent traffic.

Cost: Free or $4/yr for Featured Links

Submit Your Site

Alexa Rank:

7. The Internet Public Library: IPL2

Description: The IPL2 project "ipl2 is the result of a merger of the Internet Public Library (IPL) and the Librarians' Internet Index (LII)." Getting listed on the site, like most directories it seems, isn't the fastest process.

Alexa Rank:

8. Go Guides

Description: Go Guides is a website similar to DMOZ in that content (websites) is reviewed prior to being published. GoGuides also uses a rating system that assigns rank to each website. Each ranking is determined based on the overall look-and-feel of the website, content, and ease of navigation. Websites with a "three people" ranking appear first in the topic in alphabetical order by title.

Cost: $69.95 one-time fee.

Submit Your Site

Alexa Rank:

9. Your Joker

Description: This is a good directory in that it's human edited and free. The problem is there's a lot of ads all over the place and not very user friendly IMO. It is definitely worth submitting your site to this index. To submit a link you have to register (bummer) then browse to the appropriate category for your website and click Suggest a Link

Cost: Free

Submit Your Site

Alexa Rank:

10. The Internet Web Directory

Description: Go Guides is a website similar to DMOZ in that content (websites) is reviewed prior to being published. GoGuides also uses a rating system that assigns rank to each website. Each ranking is determined based on the overall look-and-feel of the website, content, and ease of navigation. Websites with a "three people" ranking appear first in the topic in alphabetical order by title.

Cost: Free (must post a valid link-back on you website), Basic $2/year, Premium $14.95/year

Submit Your Site

Alexa Rank:

Want to submit to more directories? I suggest you check out the Directory Critic. Here you'll find hundreds of directories that you can submit your website to.

Hope you enjoyed my list, please subscribe to my RSS feed and leave a comment below!