One site that I am continually impressed with is CSS-tricks.com. In particular, author Chris Coyier records screencasts with really great tips that inspire. He also does full ‘site walkthroughs’, where he summarizes the process of building a site from the ground up. The walkthrough of the site he did for musician Chris McGarry is very impressive.^[1] He shows you the JavaScript and details what he did and why, and how it works.

It’s truly inspiring, and a very cool thing for Coyier share. Of course it drives traffic to his site, and I’m sure it often leads to more business for him. And that’s great. That’s what he ought to do. But also it’s just a really great resource for other developers. We’re able to go and see exactly what he’s doing, not just by viewing the code ourselves, but by seeing and hearing him explain why he did things as he did.

When I watch screencasts like Coyier’s I am so excited to work on my own projects, because invariably I learn something new, or it just inspires me to be more creative and efficient with my own code.

Where do you find inspiration?

Endnotes

1. Site Walkthrough of chrismcgarry.com

We see these prefaced comments on articles about religion, politics, law, technology, etc. And there are several different flavors of the prefaced comment, such as the one where the commenter claims to have no interest in the subject of the article generally, but makes an exception in this particular case. For instance, on a recent article about an animatronic suit of a character from the popular Halo game, one commenter writes:

I dont even like halo but I’m impressed as shit with that workmanship, GREAT JOB ^[1]

Another flavor of the prefaced comment is the self-identification with the article’s object of ridicule, followed by agreement with the criticism, as in this comment on an article about how Jesus acted verses how Christians act:

As a Christian I completely agree with this, but that last one was a cheap shot lol ^[2]

And the last example includes the oft-used, I-agree-with-the-premise-of-the-article-so-don’t-antagonize-me-for-taking-issue-with-a-couple-of-points prefaced comment, this time on an article with a point by point argument that the Android software is superior to the iPhone OS:

Two of those [points] are flat wrong (I own a Droid, and I agree with 8 of them so get off your fanboy rocker.) ^[4]

Before anyone even BEGAN to hound him about disagreeing with the article in any way, shape, or form, he got defensive. That’s awesome. Aware of the pro-Andoid / open software sentiment within the Digg audience, he preemptively shut them down with his disclaimer.

So there you have a few examples of prefaced comments, and they were all among the most thumbed up comments on their respective articles. So why are these kinds of comments so well-received?

One obvious answer is that we instinctively devalue the opinion of a critic when he speaks on a subject about which he’s biased. So it makes sense that we instinctively pay more attention to someone when they admit their bias, and agree with a criticism of their group. Then we’re ready to listen to what they have to say. I think this is a big part of the motivation behind prefaced comments.

It’s as if we just expect to be dismissed for having an opinion. And surely there is tendency to dismiss, out-of-hand, the opinion of the extremely biased. However, being biased isn’t the only factor that gets you ignored. It’s only when we also disagree with someone’s conclusion that we dismiss him. If we agree with him on the conclusion, it doesn’t matter to us that he’s biased; in fact, we may use a word like “expert” rather than “bias” to describe him.

Curiously, if we disagree with someone on the conclusion, but find him credibly unbiased we are much more likely to “agree to disagree” without a bitter fight. This leads me to believe that prefaced comments are often well-received because of the built-in face-saving. The commenter agrees in some respect with his potential debate partners, creates some sort of credibility, and they in turn feel less inclined to ridicule him for his contrary opinion or beliefs.

Of course, it’s possible that there are some people out there using the prefaced comment tactic only to steer the behavior of those with whom they disagree towards their own convictions. In other words, comments that begin like, “I am among the most liberal of democrats that I know, but even I think we need to realize that a government program isn’t always the answer to (insert social issue here),” may actually be non-liberals who simply want to see fence-sitters go their way. In that case, it’s a cheap tactic that might actually be working, if the widely thumbed up comments are any indication.

The desire to have credibility is obviously worthy. Unfortunately, the way we seem to go about attempting to establish credibility these days is curious at best. In this context, people are trying to establish credibility by simply identifying with a group about which we have preconceived notions.

In the first quote, for example, the commenter puts himself in the group of people who (a) aren’t interested in Halo but who (b) nevertheless, are able to appreciate the time, creativity, and craftsmanship that went into building the suit. He uses the identification with that group to emphasize his appreciation for the article subject. It’s a clever tactic, and it’s probably used without a conscious effort. But what’s most interesting to me is that it’s effective; i.e. people thumb up comments with this kind of sentiment.

Endnotes

1. Huge Animatronic Halo Elite Costume That Seeds Fear PICS – digg.com
2. What Would Jesus Do vs What Jesus Freaks Actually Do Pics – digg.com
3. Americans think soccer is boring – digg.com
4. 10 Things Android Does Better Than iPhone OS – digg.com

PS – Regarding prefaced comments, I’m aware that this is not a new phenomenon, and I’m sure it isn’t only happening on Digg. Digg is just one place with which I’m familiar. Also, I realize that prefaced comments are only one of the many kinds of comments that are among the most thumbed up.

After I left my final job of “working for someone else” I had an expectation fully ingrained in me. The expectation is that a man works from about 8 in the morning until 5 in the afternoon. Or if it isn’t those exact hours, certainly it’s at least 8-hours a day. You put in your 40 to 60 hours a week, because it’s your duty. That’s what  a man does. And you do that for 50-years or so, and then you can sit in a recliner and watch TV for the next 10 or 20 years until you die.

Well, how bout NO, Scott, mkay?^[1] That’s the kind of depressing pointlessness that I remember recognizing at a very early age. Still, it took me about a year as a full-time freelancer to realize that I’m not punching a clock. Obviously, meeting deadlines and getting things done are among the more important things for earning a good reputation.

However, you don’t have to sit at a desk every day from 8 to 5 and partake in monotonous busy-work in order to be “productive”. That might make you feel productive in the short term, but it will quickly stifle creativity, happiness and satisfaction. I’ve learned that I need to be okay with having days where I do “nothing” in the way of “work”, and that the key is figuring out how to put myself in the way of inspiration.

While reading Daniel Pink’s Drive: The Surprising Truth About What Motivates Us^[2], I learned that psychologists have studied and named the state of mind that I’m talking about in this article. It’s called simply, “flow”^[3]. Drive helped me understand myself a little more. It’s full of examples and experiments of people “in flow”, and as you read more about this, and experience it yourself, you’ll begin to figure out how to sort of set yourself up to find those moments of flow. I highly recommend this book to freelancers – and actually to anyone interested in learning more about how we are motivated, and what kind of motivation works in certain situations.

And freelancers, just by way of encouragement to those of you who may be experiencing that, “Ok, what do I do when I don’t feel like doing anything” funk, just know that you’re not always going to wake up feeling like you’re going to concur the world, and you have to be ok with that.^[4]

Endnotes

1. Youtube – Dr. Evil Shuts Scotty Down
2. Drive: The Surprising Truth About What Motivates Us
3. Wikipedia entry on “flow”
4. How to Get Excited About The Work You Do Again by Amber Weinberg

I’m going to try to my best not to overstate this.. whenever you’re asking a professional to do some work for ya, whether a graphic designer, photographer, front-end developer, WordPress specialist, car detailer, landscaper, whomever.. and you end the request with something like, “This should be easy for you,” A LITTLE PIECE OUR SOUL DIES.

When you say, “this should be easy”, what we hear are things like this:

• Your time means nothing to me.
• I’m an incredible cheapskate.
• I don’t think what you do is very valuable.
• I have no respect for you or what you do.
• I am a tool. A giant, giant tool.

In fact, I’d RATHER you say those things to me outright than the passive aggressive, “This should be easy for you.”

Anyone who is self-employed probably hears some variation of “this’ll be easy for ya” on WAY too frequent occasion. Those are the emails we don’t even respond to. And that’s my advice, by the way, for those just starting out. Just don’t even waste your time responding to people who don’t value your time. Or just link them to this article. If they weren’t being toolish consciously, maybe they’ll realize what they said to you comes with implications. And maybe they’ll email you again asking for your services without the underhanded insult.

Do people really think that if they frame a question to you in these terms that your tiny monkey brain will somehow be tricked into believing that, in fact, your time is not valuable? That, they’re right, this will only take me 5 minutes and therefore I shouldn’t charge them at all? Well, not this nitwit. George Banks is saying NO.

People have been burned in the past.

I have a client right now that has been burned in the past. He paid some “SEO gurus” to “seo his site”. Guess what? His rankings in organic searches did not improve, and his sales did not increase. In fact, it’s pretty questionable whether or not these douchebaggettes actually “did” anything of value to his site. Basically they simply added some meta tags to his pages and suggested that he blog more often. And this is all too common, in part because:

SEO is a relatively new concept, so it is ripe for abuse by scumbags.

For every person out there trying to make a difference in the world for good, you can easily stumble upon some jerk who cares only about making money as quickly as possible. Hopefully the ratio is better than 50/50, but you get my point. SEO is a relatively new concept, and professionals in the industry haven’t proven to the public that it’s a legit industry — there’s a lack of great education about what, exactly, it is. The scumbags have worked harder than the real professionals. So the scumbags are able to say, “Oh, SEO, yeah it’s this cool new thing that you can have done rather easily and then your website will make tons of greenback$.” The result is that:

A flawed understanding of SEO attracts opportunism

It’s not just some of those offering “SEO services” that are in it opportunistically; it’s also the patrons of those scumbags. Look, if you’re simply looking to drop-ship something because you found a supplier who doesn’t care what your markup is, and you don’t give a crap about the product or the people buying the product, and you figure with some tricky SEO then maybe you can rank well, get some traffic, and make a few bucks while the gettin’s good.. if that’s you, then buzz off. I’m not interested in the least. Which leads me to the next part of this article:

Increasing The Credibility of SEO

Frame SEO in the proper context

So we know that SEO has a bad rap, and that’s due in part to the opportunism on both sides of the aisle and a general misunderstanding of the concept of SEO. So one thing I always stress to my clients is that SEO is not a shortcut to success, and that it’s not something you simply “do” to a website — it’s not an add-on for a website, like leather interior for a car. It’s simply one small part of a fully fledged marketing campaign.

If you have a great product, service or idea that you want to get into the hands of a group of people, great! Guess what? It’s going to take a prolonged effort. Don’t buy into the idea that if you just “SEO your furniture site” then you’re suddenly going to appear in the top 10 Google search results for “furniture” and then sales will explode by 1000%.

Instead, you have to realize that optimizing the content on your website is just a part of refining your company’s story. It’s about organizing your content in a way that makes it easy for someone to understand your story and then react to it. But you have to have a story in the first place.

WHAT’S MORE:

• SEO will not make your product good.
• SEO will not make your story resonate.

Earlier I said that SEO is a relatively new concept, and in the grand scheme it is. But really it’s just an extension of old ideas. Just because you’re doing business on the web, and just because we have these new concepts like SEO, doesn’t mean that creating a product, telling a story, and reaching an audience is fundamentally different than how you did it 50-years ago. There is no magic shortcut.

That’s why I wholeheartedly believe that “SEO services” should never be sold separately from a fully fledged marketing campaign. You have to know what you’re optimizing FOR -before- you optimize. And simply asking, “So, what do you sell?” obviously isn’t enough.

In order to properly conduct a successful marketing campaign, you have to have more than just a product to sell. You have to have a great story to tell an audience that is looking for that specific story – even if they don’t yet know they’re looking for it. Well, how do I.. get.. that? Great question. I’ll tell you this much, SEO isn’t going to help you there. And anyone looking to bypass the hard work of ongoing marketing efforts in favor of “having their site SEO’d” probably isn’t running a business so much as trying to build an opportunistic website. Which is why you must:

Choose your clients carefully

Ask yourself – what kind of prospective client is interested in faking Google pagerank? What kind of person wants to be in the top 10 results of a Google search for a term that’s not really related to how they’re making money? If we help these kinds of people, if even if we allow them to be associated in any way with legitimate marketing and SEO efforts, then SEO will continue to have a negative connotation for many people.

We need to help people who are intrinsically motivated, rather than those motivated purely by money. I want clients who are motivated by the desire to provide a great product to people who will benefit from that product. These are the kinds of examples that will resonate with people, and we can show how we used our skills in marketing and SEO for good. How can we show them?

Document really great success stories.

If we want to increase credibility in the industry as a whole, then we need to have really great success stories and we need to tell them to people.

Having worked as a front-end developer for many years, I felt the effects of the recent world-wide economic struggles. I started studying marketing intensely about a year ago so I could learn how to better market myself.

Turns out it’s one of the most fascinating topics I’ve ever considered, and so this February I began offering my own Internet Marketing service. So I am brand-spanking-new to marketing and SEO as a service, and I’m working on my first great success story right now. In the coming weeks, I’m going to publish the journey of one of my first Internet Marketing clients. By providing an inside look at a specific, fully fledged marketing campaign, we can increase credibility in a very unique way.

Conclusion

Wrapping it all up, SEO sucks in the minds of many people. Some think this way because they’ve been burned by scumbags. Many misunderstand what SEO actually is. Those of us in the industry have let the scumbags work harder than us. But we can begin to restore the credibility of SEO as a concept and as a service if we frame it in the proper context. We need to help people understand what it is. And the most important part of that effort is to understand why it’s simply a part of a larger effort in running a business. And we show that by offering it only as part of a fully-fledged marketing campaign. Lastly, we need to choose our clients carefully, and document and publish our really great success stories so that people can see the good work we do for the good clients we have.

Relevant Links

• Thoughts On Web Developers, SEO & Reputation Problems (Danny Sullivan, searchengineland.com)

Generally you want to keep content, presentation, and behavior separate. CSS handles presentation, and JavaScript handles behavior. But sometimes you can rightly call on jQuery to help with styling.

For instance, let’s say you have a navigation list with a 1 pixel border in between each list item. You may accomplish this by adding the border on the right of the list item. But you don’t need the border on the last item, so you can simply specify a class called ‘last’ which doesn’t have the border.

If your navigation list is something you manage manually, then adding a class on the last list item is no problem. But if you’re using a content management system that generates your navigation list, you might not be able to easily add this class.

Or, you might have a client who wants to be able to re-order list items on the fly – and that’s when a list that is dynamically generated by your CMS comes in handy.

With this little jQuery snippet, you can have a dynamically generated navigation list like the one below and not have to worry about adding the class to the last item.

The Script:

Just before the </body> of your page, first reference jQuery as hosted by Google to save from having to load it from your own server:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Then you can write your jQuery line to single out the last list item and add a class to it. I usually put this line in a custom.js file. You could put it in line there on the page, but I’ve started custom.js files for all my projects recently just to keep things tidy. So I reference this:

<script src="JavaScript/custom.js"></script>

And then inside my custom.js I have the line:

$("ul#nav").find("li:last-child").addClass("last");

The CSS:

ul#nav li {
	float: left;
	padding: 0 10px;
	border-right: 1px #000 solid;
}

ul#nav li.last {
	padding-right: 0;
	border: 0;
}

What will the market bare?

It’s tempting to start with this question, so why don’t we do that? What you have to keep in mind is that you are a part of the market. “The Market” is not simply some abstract thing that’s “out there”. It’s here. You’re in it, and you’re a part of it. You have a responsibility. And the last thing you should want to do is take unfair advantage of it.

There are two ways people typically take advantage. The first is by charging significantly lower than the average price for PSD to HTML services.

Depending on your standing in the market, this could create a price war. Price wars are bad for businesses and for customers. They’re bad for businesses because when you’re involved in a price war, most likely you can’t even break even, much less turn a profit. You’ll go out of business quickly, or if you find a way to stick around for a while you will treat your employees poorly and just generally fail to have a positive impact on your community or local economy. And that should bother you.

Price wars are equally bad for customers because customer service and product quality suffers deeply. The reason is because employees of these companies are not qualified to do the job. If you give away your product or service, you don’t have the money to pay for good craftsmanship and delivery.

The second way people take advantage of the market is by charging significantly more than the average price for PSD to HTML services.

If you’re among the best at what you do and you deliver the service in a unique way that benefits your clients more than they would benefit otherwise, then there’s absolutely nothing wrong with charging a bit more than the average price. This practice is actually a good thing in many cases. When your client feels like he’s getting what he’s paying for, this is a good thing.

Some people even set their price points a bit higher to weed out clients who care more about price than value, in part because those kinds of clients are typically more demanding and difficult to deal with.

However, there are some companies out there who have set their prices much higher than the average price, and that could be a bad thing for those interested in buying these services even if they don’t buy from those particular companies. Why? The obvious reason is that other companies will be tempted to raise their prices without warrant or reason (other than that they see the ridiculous prices on the high end). If your prices are too high then no one is going to buy from you unless you’re Apple.

I keep track of the pricing for PSD to HTML services of 50 or so companies by recording their respective prices every few months. What I find is that the bottom and top 5% or so tend to shift more towards the middle, and the middle 90% or so tend to stay relatively the same.

From this information, you can come up with an average price and then divide it by your hourly rate as a front-end developer. Then you know the number of hours you should be spending on a project if your prices are set around the average of these companies.

Of course, figuring out your hourly rate obviously means more than just how long it takes you to do the actual technical work of a PSD to HTML project. You have to factor in the very important time you will spend doing customer service, sales, marketing, etc.

How much time goes into one project?

Several years ago when I first started offering PSD to HTML services, I figured out that the average job went for about $150. At that time, it was taking me about 10 hours to do the actual technical work alone. With 5 hours built in for sales, customer service, etc, I figured my rate was $10 per hour. That’s similar to what you could make working at Starbucks, except without health benefits or a guaranteed number of hours per week. Grim.

But I pressed on, because I knew I would get better at the technical work, and because in my mind working “for yourself” is always better than working for “the man”. I started keeping track of how much time I spent on a number of things, such as sales, marketing, time spent researching and honing my skills, customer service, and of course the actual technical work of writing the html and css for a project.

After a few months, I could count the number of jobs I’d completed and then compare that to the amount of time spent on the aforementioned tasks, and then I’d know two very important things. For one thing, I’d know approximately how long it takes to complete one project. And secondly, I’d know how much money it takes to gain a customer. That second point is important to know so that you understand how much money and time you’ll need to spend in order to reach your sales goals for the month.

So keeping strict track of your time spent on various things can be very profitable. What you’ll find is that as your skills grow, the time it takes you to do something decreases. That goes for the technical work as well as things like customer service and sales. Therefore, your hourly rate goes up because your time is more valuable and you’re more skilled.

And while you should never stop improving your skills, you can make time tracking a less important part of your daily tasks as you go forward. That’s not to say you shouldn’t have goals – that’s crucial. It’s just that at a certain point you have to stop thinking about what you do as an hourly service. You’re not selling hours; you’re providing solutions.

Conclusion

To sum things up nice and tidy, when you’re trying to figure out the right price for your PSD to HTML services you should take into consideration what the market will bare, while at the same time realizing that as a part of that market you have a responsibility to be fair to your customers, yourself, your competitors, and your local economy. You should also take into consideration how much time and money it takes you to complete the process of making the sale and delivering the service. In the end, the goal is to find a way for everyone to “win”.

Relevant Links

• Calculating Hours: The Client Factors (Andy Rutledge, andyrutledge.com)
• Freelance Fees: Hourly or Per Project? (Dean Rieck, procopytips.com)

The HTML:

<div id="wrap">
	<div id="content">
		<p>Hi.</p>
	</div>
</div>
<div id="footer">
	<p>Footer content goes here.</p>
</div>

The CSS:

html, body, #wrap { height: 100%; }

body > #wrap { height: auto; min-height: 100%; }

#content {
	width: 100%;
	padding-bottom: 150px;
	overflow: hidden;
}

#footer {
	position: relative;
	margin-top: -150px;
	height: 150px;
	clear: both;
}

Why This Works

Once you have specified that the major container is to stretch the full height of the browser window, you’re simply putting the footer container after (or below) it in the markup, and then you apply a negative margin to the top that is equal to the footer’s height. Then you simply give your content container the same amount of padding on the bottom so that the content within it doesn’t run into the footer.

I use the width: 100%; overflow: hidden; to make sure that floats are cleared. In other words, in case you have some containers like sidebar and mainContent that are floating left or right, they won’t spill out below the content container.

Internet Explorer needs the body > #wrap { height: auto; min-height: 100%; } because, well, it’s Internet Explorer.

That’s pretty much it. There are other methods out there that use an empty <div> that work fine too if your OCD will let you get away with having the empty container.

Relevant Links

http://www.cssstickyfooter.com/
http://ryanfait.com/sticky-footer/

Talk To Me Like a Peer, Not an Errand Boy

One thing I appreciate about my really great clients is that they never speak to me like I’m simply there to run errands for them. However, we’ve all received emails that were just downright insulting. In the website design & development business, communication often takes place via email. Let’s take a look at a fictional email from a client asking for some technical support.

Images not working right. PowerPoint attached w/red arrows showing mistakes. Need this fix immediately. Email when done.

Don’t you hate emails that read like telegrams from people with no tact? It just feels like you’re being treated like a slave. Maybe this doesn’t seem like a big deal to some readers, but this kind of email is symptomatic of larger problems. If you get these kinds of emails frequently, you’ve set yourself up as more of a personal assistant unworthy of respect rather than a professional front-end developer.

Now let’s take a look at another fictional email asking for help with a similar problem. This one is modeled after a client I have who always speaks to me with great appreciation and enthusiasm.

Hey Simon, once again I want to thank you so much for all your help so far. I’ve got one more question for you. How can I get the images uploaded via WordPress to fill the width of the content area? Specifically, (and he explains his problem here).

Thank you so much for taking a look at this for me at your earliest convenience. I always appreciate when you make screencasts for me because they show me exactly how to accomplish what I need!

What a great email! Now, I’m not saying that I want to be coddled, or constantly complimented. It’s simply a matter of respect and consideration. Here are some important distinctions of the second email:

• He asked me to help with a problem; he didn’t command me to fix it.
• He wrote the email in a conversational tone, speaking to me just how he would if we were face to face.
• He expressed appreciate in advance for my help; he didn’t demand that I drop what I’m doing to fix his problem immediately.

Understand that email is a cold medium; it can be challenging to convey tone. But it doesn’t take too much effort to sound more like the second example. And these issues obviously apply to phone calls and in-person meetings. If you let people talk to you poorly via email, don’t expect for them to treat you any differently in other settings.

So how do you get your clients to treat you like a peer and not an errand boy?

Probably the most important thing that I’ve learned is that you need to get to know your clients. In our industry, as front-end developers, it can be tempting to keep your clients at a distance — especially if you’re running a PSD to HTML type of company, where many of your projects are “one and done”. But that’s not really a good business to be in. It’s more profitable and fulfilling for both you and your clients if you are looking to establish ongoing relationships. So, building a certain amount of rapport is crucial.

People prefer to do business with friends, not strangers. And a stranger is more inclined to communicate to you like the first example email. But in a good business relationship, the communication is positive and much more effective.

Feel free to leave me some feedback in the comments section — Let me know about your experiences with clients or partners.