We have a lot of designers email us and ask for advice. One common thread lately seems to be "How do I get my freelancing career going?" Well, thanks to the Internet there's lots of ways! First let's talk about your website. Are you getting traffic? What happens when users get there? Do you even know? If you're having trouble making your website work for you then read ahead:

A Solid HTML Foundation

Obviously, if you want people to actually find and use your portfolio site it's got to be built properly. Since most of you reading this build websites for a living I'm assuming you've already done this. If not - basically use divs, headers, paragraphs and lists appropriately. Let the search engines know what kind of content each piece is.

Get Some Buzz

Just because you build a great site doesn't mean anyone will find it. Here's a few ways to get some buzz:

• Make your site design so amazing that people can't ignore it
• Create a free asset or tutorial that you can give away
• Do some work for a good cause
• Interview people you look up to

Once you've done one of these you've got to get the word out. Submit your designs to online galleries. Give your assets away on popular sharing sites or write tutorials on your blog. Let the local news media know you're working with a non-profit.

Then What?

Once people start noticing you, engage them. Talk back and forth on Twitter, leave insightful comments on their blogs and in general just be involved in the online community. Not in a spammy way; just be genuine.

Analytics

Make sure you're tracking what users do on your site. If your bounce rate is really high and users leave in 10 seconds you've got a major problem. Google Analytics is a great free way to start with this, but there are plenty of others.

You also need to know how many users are visiting. If you only get 10 a week chances are you're not going to get many job leads at all. Sales work like a funnel - 50 may visit, but only 5 will contact you. And probably only one of those will actually sign a contract. The real stats are much worse than that, but you get the idea.

Like we said, this is just the beginning. In the next article, we'll explore the nuts and bolts of how to get your site design and usability working for you. Learn how to make your site awesome now →.

During the process of coding a web app we've been working on for a client, I decided that was time to go CSS3 with their buttons. After using the accessible CSS button technique for a while, it still felt really complicated and maintaining all those images was a pain if you had different sized buttons throughout your site.

So I started coding them up and realized that all the examples I had run across didn't have icons! "That's weird," I thought. So I tried adding a background image and quickly understood why. In CSS3, the gradient background uses the background-image tag. So throwing an icon kills your gradient background.

Psst…If you're really impatient you can see the demo here. Otherwise read on...

Now, I know that some browsers support multiple background images, but I needed something a bit more cross-browser. So how do we make this:

<a class="button" href="#">Regular Button</a>

have an icon?

The Basics

Well, let's start with a simple CSS3 button first, shall we? Here's some styles to get us a nice looking button that falls back to a squared version in Internet Explorer. Thanks to CSS3 Please! we can even get the background gradient in IE.

a.button {
background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
background-image: -webkit-gradient(linear,left top,left bottom,
    color-stop(0, #ffffff),color-stop(1, #dbdbdb));
filter: progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#ffffff', EndColorStr='#dbdbdb');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#ffffff', EndColorStr='#dbdbdb')";
border: 1px solid #fff;
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
border-radius: 18px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
padding: 5px 15px;
text-decoration: none;
text-shadow: #fff 0 1px 0;
float: left;
margin-right: 15px;
margin-bottom: 15px;
display: block;
color: #597390;
line-height: 24px;
font-size: 20px;
font-weight: bold;
}

Then we lighten the gradient and change the color on hover:

a.button:hover {
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
background-image: -webkit-gradient(linear,left top,left bottom,
    color-stop(0, #ffffff),color-stop(1, #eeeeee));
filter: progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#ffffff', EndColorStr='#eeeeee');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#ffffff', EndColorStr='#eeeeee')";
color: #000;
display: block;
}

And finally inverse the gradient and text shadow and move it down one pixel on click.

a.button:active {
background-image: -moz-linear-gradient(top, #dbdbdb, #ffffff);
background-image: -webkit-gradient(linear,left top,left bottom,
    color-stop(0, #dbdbdb),color-stop(1, #ffffff));
filter: progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#dbdbdb', EndColorStr='#ffffff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
    (startColorStr='#dbdbdb', EndColorStr='#ffffff')";
text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5);
margin-top: 1px;
}

Oh! And don't forget to add a stroke for Internet Explorer since it won't render that drop shadow. I've put it in an IE-specific stylesheet.

a.button {
border: 1px solid #979797;
}

Adding the Icon

Back to the icon question. How do we add an icon to this that will work cross-browser? Easy! Just add a span around the text. Sounds familiar, right? Add a class of icon and the name of the icon you want as well.

<a class="button icon chat" href="#"><span>Chat Now!</span></a>

In your CSS use this code for the icon class

a.button.icon {
padding-left: 11px;
}

a.button.icon span{
padding-left: 36px;
background: url(images/icons.png) no-repeat 0 -4px;
}

Then grab some icons. I'm using the nice set from Greepit. I've been trying to sprite related images like this so I put one together for this example. Sprites can drastically cut down on your http requests, especially in a large web app with lots of icons. Then just position the icon image file depending on the icon you choose:

a.button.icon.chat span {
background-position: 0px -36px;
}

And that's pretty much it! You can see other than rounded corners and drop shadows the buttons work great even back to IE6 – though you'll have to figure out transparent .png issues yourself

I've put together a simple page with a few examples here (and the code will be formatted without line breaks). Go forth and make kick-awesome buttons!

Our doorbell rang at 10:00 last night. Ashley and I looked at each other. “That’s weird, who in the world would be at our door this late?” I said. We’re not the type to have people over at all hours of the night. Since most of our friends have kids now, everyone packs up at 8 or so to get home before the tantrums begin. But either way, no one shows up on our doorstep this time of night. 

I went to the front door and flipped on the outside lights to see our neighbor standing there. We just moved and she’s been very friendly, telling us all that goes on in the neighborhood.

It turned out that we had left our massive, two-child stroller out in our driveway. And by massive, I mean it won’t fit through any normal doorway opening, takes up the entire sidewalk, weighs 30+ pounds massive. Thankfully she noticed and came over to let us know it was in danger of being stolen.

Stolen? In a brand new nice neighborhood? Turns out there are some houses right next to us that aren’t finished yet, and some people have taken it upon themselves to steal refrigerators, jacuzzis and other large ticket items out of these unsecured structures.

Now, if I hear there’s funny business going on right next to my house, sure I should be concerned. The problem is we started to dwell on it. We talked about all sorts of random “bad” things that had happened. Some lady’s dog got bitten by a rattlesnake months ago (before they cut down the tall grass), someone saw a suspicious truck at 5 in the morning. By the end of the conversation I feel like I need to go buy a gun or something.

And it didn’t stop there. I laid in bed for a couple of hours afterwards gleefully imagining the various ways I could punish an intruder with all sorts of different makeshift weapons. Don’t laugh, I know you’ve done it, too!

What’s my point? Well, it’s easy to be afraid. To talk about the random bad things that happened to someone else and know for sure that they’ll happen to you. And worse to spend all your time worrying about it.

What about that new idea you just had? The one that could change everything? Are you not doing anything with it because the people around you are afraid? Do they talk about how you’ll never succeed or there are too many obstacles?

Just a quick reminder that if you surround yourself with fear it will inevitably keep you from doing amazing things. Get the fear out. You’ll be glad you did.

As for me, I’m going to make sure I lock the doors tonight and actually get some sleep. And put a baseball bat under the bed.

Several weeks ago we put our house on the market. Too many kids, not enough rooms; you know the drill. We’ve outgrown this place, unfortunately. And in preparation to sell it, we needed to finish replacing all the doors and trim we had started a couple of years ago. Since my gifts are in handcrafting pixels, my wife’s dad came to the rescue, taking a week off from work and plowing through our huge list of repairs, updates and so on.

It just so happened that one particular door opening was not quite wide enough for the door that was supposed to go in it. There were a lot of tools down in the garage, but a planer was not one of them. Fortunately we noticed the guy across the street seemed to have all sorts of tools and was always outside working on their house.

Didn’t people use to borrow their neighbor’s tools all the time?  Yeah I’ve seen that on old TV shows. Hopefully he’s not an axe murderer or something. So we decide we should go see if we can borrow the planer. And by that I mean I sent my wife over to talk to them because I was “busy” painting a door. I need to get out more.

So our neighbor not only lends us the planer, but comes over himself to do it! Now that’s being neighborly. While shaving down our door we find out that he does renovations for a living, and he’s a really cool guy.

Guess who we hired to finish up a few last minute jobs around the house 2 weeks later? Not the guys we know at church, not the cousin’s uncle of our friends. The guy across the street.  The good neighbor.

Maybe instead of ranting and moaning about how no one appreciates designers we could try being a good neighbor today. Go the extra mile and help someone figure out that CSS problem, or take a few minutes and answer a business question from a young company. Not only is it the right thing to do, but it might just get you a job down the road. I guarantee it will get you a fan.

Oh, and by the way if you need some work done on your house and you’re in the Knoxville area I highly recommend Blake Lay at Blayd Renovations. He does great work on time and in budget.