Last week, I talked about four methods to avoid when setting your prices. So what should you base your pricing on? The answer, of course, is the ever-elusive value.

The Case for Value-Based Pricing

Value-based pricing is determining how much the project is worth to your client in revenue, or how much the problem is costing, then charging a portion thereof. For example, if a client had an IT problem that had been costing him $10,000 month for the past six months, then charging him 25 percent of that would not seem unreasonable. Some people believe value-based pricing is an unrealistic ideal that never really worked in the “real” world—especially in today’s economy. Yet, there are many industries where value-based pricing is commonplace. Alan Weiss pioneered the concept in the early 90s and continues to use it today, so it’s difficult to write it off as “fantasy.” (Besides, it’s hard to argue with someone who holds a PhD.)

Can value-based pricing be implemented in the web industry? Weiss has taught accountants and architects how to bill based on value, so why not web designers? I never tried it, even after reading his book. I told myself it was too difficult to implement in the web industry because what we do is not unique. You’re free to learn how it’s done, or convince yourself it doesn’t work without even trying, as I did.

Value-Based Buying

Whether or not you embrace value-based pricing, you’ll be hard-pressed to successfully sell your services without value-based buying. That’s when clients choose to hire you based on no other criteria other than the value you provide.

Pricing your product is actually simple, as long as you consider it from the buyer’s point of view. How much it costs you to make something is irrelevant. They don’t care …

- Seth Godin

When we consider it from our point of view, we look at our skillset and ask, “How can I sell this?” But the proper question is: “How does this serve the market?”

You see, up until now, the focus has been on pricing and selling: How do I price my services? How much should I charge? Let’s change the focus to why people buy.

“Who do people buy?” is a thousand times more important than “How do I sell?” No, let me correct that … it’s one million times more important than “How do I sell?” No, let me correct that … it’s one billion times more important than “How do I sell?” Get the picture?

It never ceases to amaze me that companies will spend thousands of hours and millions of dollars teaching people “how to sell,” and not one minute or ten dollars on “why they buy.” And “why they buy” is all that matters.

Value First; Price Second

That’s from Jeffrey Gitomer’s Little Red Book of Selling, in which he lists 12.5 reasons “why they buy,” such as:

1. “I perceive a value in the product I am purchasing.”
2. “I perceive this product or service will increase my profit or productivity.”

Any work for which someone’s willing to pay you must create value; and value isn’t always about money … but it is always about increases or decreases. If you can increase or decrease something your prospect wants increased or decreased, you have the potential to create value.

Formula are great for determining a base price or “cost” you won’t go below, but there are some crucial steps you must follow before “coming up with a price” for the client:

1. Ask yourself, What value can I create?
2. Have a fact-finding conversation to discover what he wants increased and/or decreased.
3. Make sure you ask the right questions.
4. Do a return on investment analysis to show him the economic benefits he will get from your solution.
5. Once you know what he wants, show him how you are the one who can help him get it.

Then, and only then, should you talk about price.

Image credit

Playing with Fire: Organic CSS3 Animation

Create a flickering fire animation without the use of plugins or videos using this impressive tutorial. CSS3 animations can add a lot of aesthetic appeal for just a few small kilobytes of imagery and code

How to Customize Your Google+ Profile to Match Your Brand

Google+ won’t give you complete control of your page design, but with a few creative tricks and some brand images, you can craft a professional Google+ presence for your clients and colleagues.

Creating Seamless Background Patterns for the Web

Seamless textures and patterns are an easy way to enhance your design without bogging down your site with heavy, slow-loading background imagery. Learn how to make your own seamless background in this tutorial.

Implementing Cross-browser Video Playback in HTML5

There are times when YouTube just won’t cut it for your specialized video needs. For greater control over your videos, host them yourself using HTML5 and fallback techniques for older browsers.

5 Tips for Feminine Designs

A savvy designer will keep their audience in mind from the first sketch to the final pixel. Here you’ll find five tips for creating websites with feminine appeal

Have you tried Pixelmator?

Photoshop is as powerful as it is expensive. Using it for basic image work like cropping and adding text is probably overkill. But have you tried this affordable Photoshop alternative?

The CSS3 :target selector is incredibly powerful and allows us to create attractive widgets which would have required ninja-like JavaScript skills a few years ago. We’ve already built a tab control and a vertical accordion. In this post, we’ll create a horizontal accordion using the same HTML5 markup.

View the demonstration page…

The solution works in IE9, Chrome, Firefox, Safari and Opera and doesn’t require JavaScript or images. Again, it fails miserably in IE6, 7 and 8 so you either need a JavaScript shim such as selectivizr or some other fallback.

The HTML

Here’s a reminder of the HTML5 code. It’s identical to our vertical accordion: there are a number of section elements with clickable headings contained in the initial h2 tag:

<article class="accordion">
	<section id="acc1">
		<h2><a href="#acc1">Title One</a></h2>
		<p>This content appears on page 1.</p>
	</section>
	<section id="acc2">
		<h2><a href="#acc2">Title Two</a></h2>
		<p>This content appears on page 2.</p>
	</section>
	<section id="acc3">
		<h2><a href="#acc3">Title Three</a></h2>
		<p>This content appears on page 3.</p>
	</section>
	<section id="acc4">
		<h2><a href="#acc4">Title Four</a></h2>
		<p>This content appears on page 4.</p>
	</section>
	<section id="acc5">
		<h2><a href="#acc5">Title Five</a></h2>
		<p>This content appears on page 5.</p>
	</section>
</article>

The CSS

The CSS is a little more complex but it’s worth it. First we style our outer article container:

article.accordion
{
	display: block;
	width: 43em;
	margin: 0 auto;
	background-color: #666;
	overflow: auto;
	border-radius: 5px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.3);
}

Each section starts in its closed state; they’re floated to the left and have a width of 2em. Overflow is set to hidden and we’re also making the text color the same as the background so they effectively look like solid blocks without content:

article.accordion section
{
	position: relative;
	display: block;
	float: left;
	width: 2em;
	height: 12em;
	margin: 0.5em 0 0.5em 0.5em;
	color: #333;
	background-color: #333;
	overflow: hidden;
	border-radius: 3px;
}

Now for some nasty prefixed CSS3! Each h2 title is rotated 90° counter-clockwise using a transform and absolutely positioned over the closed section:

article.accordion section h2
{
	position: absolute;
	font-size: 1em;
	font-weight: bold;
	width: 12em;
	height: 2em;
	top: 12em;
	left: 0;
	text-indent: 1em;
	padding: 0;
	margin: 0;
	color: #ddd;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
article.accordion section h2 a
{
	display: block;
	width: 100%;
	line-height: 2em;
	text-decoration: none;
	color: inherit;
	outline: 0 none;
}

We can now ‘open’ the active section using the :target selector. The section width and colors are changed and the title is moved back to the top:

article.accordion section:target
{
	width: 30em;
	padding: 0 1em;
	color: #333;
	background-color: #fff;
}
article.accordion section:target h2
{
	position: static;
	font-size: 1.3em;
	text-indent: 0;
	color: #333;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}

That’s fine, but a CSS3 transition makes it look fantastic:

article.accordion section,
article.accordion section h2
{
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

View the demonstration page…

It’s a shame IE6, 7 and 8 users can’t use the widget. IE9 users won’t see animation either. But you’d need a lot of time and patience to achieve the same effect using JavaScript! Have fun with it.

http-console is a Node module that gives you a command-line interface for executing HTTP commands. It’s great for debugging and seeing exactly what is going on with your HTTP requests, regardless of whether they’re made against a web server, web service, or even a database server.

Installation

To use http-console you’ll need to have Node installed. If you haven’t got it installed either head over to http://nodejs.org and download the installer for your operating system, or head over to the Node wiki if you’d prefer to install via a package manager.

Next, install http-console using npm:

$> npm install http-console2 -g

A couple of things to note:

• We’re actually installing http-console2, and not http-console. http-console2 is a fork of http-console, but includes a fix for a bug caused by require.paths being deprecated in newer versions of Node. It’s published to npm as http-console2, but once installed you still run it as http-console.

• We’re installing http-console2 with the -g global switch. This means you can call http-console from anywhere, as it’s installed in a location in your $PATH:

  
  $> type http-console
  http-console is /usr/local/bin/http-console
  

To start using http-console we just pass it the URL and port of whatever it is we want to connect to, and start issuing HTTP commands.

Speaking HTTP

Let’s connect to a server and issue some commands. We’ll keep things simple to start with and issue some GET requests to a web server. I’ll assume that, as you’re reading this, you’re a web developer. And, as you’re a web developer, you’ve probably got a web server running on http://localhost. Tell http-console to connect to it by typing in the following:

$> http-console http://localhost
> http-console 0.6.1
> Welcome, enter .help if you're lost.
> Connecting to localhost on port 80.

Now you’re connected you can start issuing commands. Type in GET / at the prompt:

http://localhost:80/> GET /
HTTP/1.1 200 OK
Server: nginx/1.0.11
Date: Wed, 04 Jan 2012 08:40:04 GMT
Content-Type: text/html
Content-Length: 151
Last-Modified: Mon, 04 Oct 2004 15:04:06 GMT
Connection: keep-alive
Accept-Ranges: bytes
<html>
<head>
<title>Welcome to nginx!</title>
</head>
<body bgcolor="white" text="black">
<center><h1>Welcome to nginx!</h1></center>
</body>
</html>

We get back the full HTTP response, including the HTTP headers, and the HTML itself. You can exit http-console by typing .q

Let’s try another command. Recently I wrote about the express web framework for Node, we created a page to display the ten most recent tweets mentioning Sitepoint. I wonder what would happen if we use http-console to query Twitter’s Search API for similar tweets?

$> http-console http://search.twitter.com
> http-console 0.6.1
> Welcome, enter .help if you're lost.
> Connecting to search.twitter.com on port 80.

Now issue a GET request for /search.json?q=sitepoint&rpp=10:

http://search.twitter.com:80/> GET /search.json?q=sitepoint&rpp=10
HTTP/1.1 200 OK
Cache-Control: max-age=15, must-revalidate, max-age=300
Expires: Fri, 17 Feb 2012 22:04:02 GMT
Content-Type: application/json;charset=utf-8
Content-Length: 7749
Vary: Accept-Encoding
Date: Fri, 17 Feb 2012 21:59:02 GMT
X-Varnish: 2065334673
Age: 0
Via: 1.1 varnish
Server: tfe
{
    page: 1,
    since_id: 0,
    max_id_str: '170628259464216576',
    refresh_url: '?since_id=170628259464216576&q=sitepoint',
    completed_in: 0.107,
    results: [
        {
            to_user_id_str: null,
            to_user_name: null,
            id: 170628259464216580,
            iso_language_code: 'en',
            ...

Again, we get back the HTTP headers, but this time we get the body of the HTTP response as JSON (the full JSON is omitted to save space).

But we’re not restricted to connecting to web servers and web services with http-console. We can also use it to connect to database servers that offer RESTful API’s, such as CouchDB. (If you don’t have CouchDB installed, the easiest way to get up and running is to clone https://github.com/iriscouch/build-couchdb and following the instructions in README.md).

Assuming CouchDB is running (if you installed via build-couchdb starting CouchDB should be as simple as running . ~/path/to/build-couchdb/build/env.sh, then couchdb), connect http-console to it like so:

$> http-console http://127.0.0.1:5984
> http-console 0.6.1
> Welcome, enter .help if you're lost.
> Connecting to 127.0.0.1 on port 5984.

We can then issue commands against the database. Let’s get a list of all the databases:

http://127.0.0.1:5984/> GET /_all_dbs
HTTP/1.1 200 OK
Server: CouchDB/1.1.1 (Erlang OTP/R15B)
Date: Wed, 04 Jan 2012 08:26:18 GMT
Content-Type: text/plain;charset=utf-8
Content-Length: 25
Cache-Control: must-revalidate
[ '_replicator', '_users' ]

How about creating a new database?

http://127.0.0.1:5984/> PUT /foodb
...
HTTP/1.1 201 Created
Server: CouchDB/1.1.1 (Erlang OTP/R15B)
Location: http://127.0.0.1/foodb
Date: Wed, 04 Jan 2012 09:19:05 GMT
Content-Type: text/plain;charset=utf-8
Content-Length: 12
Cache-Control: must-revalidate
{ ok: true }

Re-issue the GET /_all_dbs command, and we’ll see our new database listed:

http://127.0.0.1:5984/> GET /_all_dbs
HTTP/1.1 200 OK
Server: CouchDB/1.1.1 (Erlang OTP/R15B)
Date: Wed, 04 Jan 2012 09:19:18 GMT
Content-Type: text/plain;charset=utf-8
Content-Length: 33
Cache-Control: must-revalidate
[ '_replicator', '_users', 'foodb' ]

Now let’s add a document to the foodb database. We’ll need to set the Content-Type header to application/json, which is easily done by issuing the .j command (to see all available commands type .help at the http-console prompt):

http://127.0.0.1:5984/> .j
http://127.0.0.1:5984/> POST /foodb
... { "name":"foo", "body":"bar" }
HTTP/1.1 201 Created
Server: CouchDB/1.1.1 (Erlang OTP/R15B)
Location: http://127.0.0.1/foodb/d4a833a173e9d22594b426fd300010a9
Date: Wed, 04 Jan 2012 09:36:30 GMT
Content-Type: text/plain;charset=utf-8
Content-Length: 95
Cache-Control: must-revalidate
{
    ok: true,
    id: 'd4a833a173e9d22594b426fd300010a9',
    rev: '1-de4f3804f6f3d2d3a393bec924951e5a'
}

We can issue HEAD requests to get info about documents, DELETE requests to delete documents, and DELETE requests to delete databases:

http://127.0.0.1:5984/> HEAD /foodb/d4a833a173e9d22594b426fd300010a9
HTTP/1.1 200 OK
Server: CouchDB/1.1.1 (Erlang OTP/R15B)
Etag: "1-de4f3804f6f3d2d3a393bec924951e5a"
Date: Wed, 04 Jan 2012 09:36:51 GMT
Content-Type: text/plain;charset=utf-8
Content-Length: 113
Cache-Control: must-revalidate
http://127.0.0.1:5984/> DELETE /foodb/d4a833a173e9d22594b426fd300010a9?rev=1-de4f3804f6f3d2d3a393bec924951e5a
HTTP/1.1 200 OK
Server: CouchDB/1.1.1 (Erlang OTP/R15B)
Etag: "2-3ac7397737175948b7a3a6b7e95d2949"
Date: Wed, 04 Jan 2012 09:40:14 GMT
Content-Type: text/plain;charset=utf-8
Content-Length: 95
Cache-Control: must-revalidate
{
    ok: true,
    id: 'd4a833a173e9d22594b426fd300010a9',
    rev: '2-3ac7397737175948b7a3a6b7e95d2949'
}
http://127.0.0.1:5984/> DELETE /foodb
HTTP/1.1 200 OK
Server: CouchDB/1.1.1 (Erlang OTP/R15B)
Date: Wed, 04 Jan 2012 09:41:49 GMT
Content-Type: text/plain;charset=utf-8
Content-Length: 12
Cache-Control: must-revalidate
{ ok: true }

So that was a quick look at using http-console to make and inspect HTTP requests. We made a simple GET requests to a web server, made an API call to Twitter’s Search API, and issued commands to a CouchDB server. Granted YMMV, but hopefully you’ll find it a useful addition to your web development tool belt.

Your customers and readers are inundated with text and images daily, and the challenge of every writer and marketer is to cut through the clutter to present something unique and useful. One way to quickly share information, examples, or a series of images is to create an animated GIF file that will load quickly.

At the same time, screencasts offer a way to show changes on a computer screen over time, a kind of movie that is especially useful for instructional online videos and the like. They can be quite large, taking time to load that might deter some users. Turning screencasts into animated GIF files is one way to address this and a few other issues.

Here are some of the most highly recommended GIF animation tools around that are easy to use clean and intuitive interfaces, inexpensive, and capable of creating high quality animations.

Why Use GIF Animation Files?

GIF animation is useful when you need to easily post short clips and animations that are highly compressed. Reviewer Amit Agarwal recommends animated GIF files because “when the recording is short … an animated GIF would make more sense than a video based screencast. They load quickly, work across devices and you don’t have to hit play to watch the screencast.” This helps your website load faster and makes your screencast easier to share with users who work with a variety of connection speeds.

Businesses also regularly use animated GIF files for e-mail marketing campaigns, inserting an animated GIF screencast into the text of their messages. Rebecca Swayze of Aweber shares, “It’s a double-duty move: it grabs readers’ attention and gets a variety of products face-time that wouldn’t be possible in a static email.”

Keep in mind that animated GIFs don’t support vector graphics, can be rather large as files, and don’t offer a wide range of colors. While animated GIFs are quite useful, they have their limitations. If you need higher quality images, more colors, or a higher recording quality, look into using a video, especially if you have an HD video camera handy.

Free Online GIF Animation Tools

Online tools such as Gickr, Gifninja, and Make a GIF enable users to simply upload their images and then create animated GIF files. These are simple and free tools that provide an especially accessible point of entry if you’re new to imaging and video software.

You can also download a YouTube Video and use free online tools such as Zamar and Gifninja to convert a segment of the video into a GIF screencast. MakeUseof.com provides a thorough list of options for working with animated GIF files that are suitable for a variety of users.

Free and Premium GIF Animation Tools

If you’re creating a GIF screencast from scratch and need more features, there are several excellent tools available such as Screenr and Screencast-O-Matic. They both offer free and premium versions. Screenr limits the video length to five minutes but doesn’t add a watermark to the final product. Screencast-O-Matic provides 15 minutes of recording time but also adds a watermark to the animation.

In a review, one editor remarked, “Screenr has to be one of the smartest ways we’ve seen anyone approach a screencasting product. It’s easy to use, nicely integrated with Twitter, and all around a solid web application.” Many users enjoy the way Screenr easily integrates with Twitter, allowing users to tweet their screencasts with a click.

If you’re starting with a video on a site such as YouTube, Screencast-O-Matic can also convert all or part of a video into a GIF file where the video file will be compressed into a series of animated GIF images. Watch this tutorial about how to use Screencast-O-Matic’s simple drag and drop feature.

Premium Tools

If you need more features for creating GIF files, CNET highly recommends Ulead GIF Animator because its “clean interface keeps you oriented among the multitude of tools, frames, and objects.” Though it carries a $50 price tag, it optimizes files for downloading and viewing.

Sometimes you can say more in a short animation than in a paragraph. If you need to say a lot in a small space, consider creating an animated GIF in order to effectively share your story, brand, or products with customers.

Keep in mind that there are plenty of animated GIF tools available, so this is not meant to be a comprehensive review, just a taste of some of the most popular options.

If you know of other options and tools, please add them in the comments below!

There are differing opinions in our field when it comes to the fine line between using a website or idea as inspiration and blatant copyright infringement.

Some feel that getting inspired by other designs and utilizing elements of them in your own is completely natural, even necessary. Others argue that copying anything, even a fairly generic layout structure, is copyright infringement.

No matter which side you’re on, you can’t help but notice copycats in almost every successful new web service or social network that launches. In many cases, the copycats out-innovate and eventually become market leaders. Facebook wasn’t the first social networking website … there was Friendster (which actually patented social networking), MySpace, and then Facebook.

More recently, Pinterest has come under the spotlight as an innovative way to bookmark, categorize and share ideas, photos, and links. As Pinterest grew in popularity, copycats like Pinspire and Clipix have popped up, with almost exactly the same layout and functionality. Pinspire and OpenPin.org are almost pixel-for-pixel clones of Pinterest — at least Clipix tried to come up with original graphics.

Where is the Line?

Where is the line, and have Pinspire, OpenPin or Clipix crossed it? More importantly, if they have, why are they still up and running? I raise this question because I’m interested in where copying stops and innovation begins.

You may not think of Apple as a copycat, but they were never the first to market with any of the devices that they now dominate in market share. Smartphones and tables have been around for over a decade, and even the mouse was invented by Xerox PARC. Apple saw the “mouse” on a visit to Xerox and incorporated the idea into the Macintosh, believing it would revolutionize computing (which it did). They even borrowed heavily from the GUI (graphical user interface) concepts developed at Xerox, which Microsoft then famously copied to create Windows.

Copy or Improve?

Twitter has its share of competition as well, but most Twitter competitors that pop up aren’t carbon copies. They take the concept of a microblogging service and improve on, or alter, the idea somewhat. My favorite Twitter competitior was Pownce, which was very similar but allowed you to select different types of content to publish, such as a photo, link, video, or text update. Although Pounce has shut down, you can see its idea in the status update functionality of most social networking sites today, including Facebook and LinkedIn.

Improve on Others’ Ideas

It’s too early to tell whether Pinterest (or its clones) will be successful. But competiton drives innovation, and I expect we’ll see both Pinterest and competitors in the space improving on the original “pin board” concept with new features and interface improvements.

Instead of just copying a website, service offering, or marketing message, think about how you can improve on the original idea. How can you make it your own? What’s missing … or what can be taken away?

How do we love Google Doodles? Let us count the ways.

They’re brilliant. In fact, I even enjoy getting up every day knowing that somewhere in Mountain View there are probably people shouting ‘Woohoo! It’s Robert Heinlein’s Dad’s birthday next week! I wanna make an animated rocket on Google today!‘

We all have our favorites. I loved the Pacman tribute.  The playable Les Paul guitar. The amazing deep-sea Jules Verne tribute. It’s true, the bar has been set very high.

Google's tribute to Heinrich Hertz - February 22nd 2012

But when Dan Laidler pointed out today’s celebration of the great German physicist Heinrich Hertz, we all did a little doubletake.

Hertz’s work was centered around waves — from light to radio — so Google paid tribute to his 155th birthday by evolving their famous logo into a gently moving wave that echos the Google letter shapes.

That was a nice enough idea, but it was how they made it wiggle that had us scratching our collective heads.

For here we had (arguably) the most technically-adept web company on the planet choosing to animate the wave as a big-ass animated GIF.

More precisely, a 197kb, 49 frame, kinda jerky animated GIF. Brows were furrowed.

The obvious question is “Why?” Sure, we all know support for animated GIFs is ubiquitous, and often the simple solution is the best solution. However, for a company that so vigorously champions the power of HTML5 in particular, and the web in general, it seems like a strange decision.

So rather than just bleat about it — though we enjoy that too — we had a quick play around with alternatives. Here are the results so far.

The CSS3 Only Method

Easily the quickest method to get something working is CSS3. We start out with the simplest imaginable HTML.

Note: For the sake of clarity, I’m only going to show the W3C standard below, but the example contains all the prefixed CSS required.

<div id="wavelength"></div>

The basic CSS setup isn’t much more complicated. We give the DIV width and height, and embed our wave graphic into the background.

#wavelength{
width:380px;
height:223px;
margin: 100px auto;
border:1px #ddd dashed;
background: url(http://sitepointstatic.com/examples/css3/animation/hertz.png);
position:relative;
}

The keyframe animation code simply slides the background image position from the default (0px 0px) to 380px to the left.

@keyframes hertz {
    0% {background-position:0px 0px;}
    100% {background-position:-380px 0px;}
}​

Then we just attach the animation to the #wavelength DIV.

animation: hertz 4s infinite linear; /* w3c standard */

As a final touch I’m using the :before and :after pseudo elements of the #wavelength DIV to provide the fluffy white edges that you see on the left and right sides of the original GIF.

Here are working demos on both Dabblet and JSFiddle.

Run side-by-side with the GIF, the CSS3 version is certainly much visually smoother and file sizes are slashed drastically. Our wave graphic is now under 3kb, meaning — and even accounting for multiple prefixes — we only need a little over 1400 characters of CSS. That’s a combined weight of just over 4kb or less than 3% of the original.

Of course, we can’t pretend that CSS3 doesn’t have its drawbacks.

Google’s audience is as broad as they come, so a method that doesn’t work on older Internet Explorers (pre IE10) probably isn’t an option. Nevertheless, if you ran the GIF as a fallback using something like Modernizr to taget older browsers, I think you’d have a very viable solution.

The JQuery Method

JQuery is the no-brainer way to target both old and new browsers with a single approach. There’s more than one way to do it, but here’s the simplest method we could think of (cheers Harley).

We’re starting with pretty much the same basic HTML and CSS as the previous example — minus the CSS animation code.

Next we create a simple function (waveloop();) that resets the our background X position to 0px.

function waveloop(){
 $('#wavelength').css({'background-position-x': 0});
    });
}

Then we need to animate the background position 380px to the left of screen (hence the minus) like this:

function waveloop(){
 $('#wavelength').css({'background-position': 5});
    $('#wavelength').animate({'background-position': '-380px'},3700,'linear'; 
    });
}

We found 3700 milliseconds is a fairly close match to the GIF timing, though it varies slightly from computer to computer.

At this point our wave animates nicely to the left, but stops after the first pass. We want it to loop without us having to retrigger it each time. The easiest method is to get the function to trigger itself again when it finishes. This is a callback and we can call like this:

function waveloop(){
 $('#wavelength').css({'background-position': 5});
    $('#wavelength').animate({'background-position': '-380px'},3700,'linear', function(){ waveloop();
    });
}

Finally we just need to call our function with jQuery’s document ready function.

$(document).ready(function() {
   waveloop();
});

And that’s it.

Here’s a working demo showing the Google GIF at the top as a comparison.

About half a dozen lines of code to a smoother, cross-browser, lower-bandwidth result. Granted, we need to include the minified jQuery library in the download, but even throwing in that 30kb file doesn’t get us anywhere near 40k, or a fifth of the GIF file size.

And jQuery is really overkill here — I just had other work to finish.

So, what do you think?

• Did Facebook poach the Google Doodlers?
• Perhaps you’ve got an even better way to do it?
• Am I under-estimating the power and beauty of the animated GIF?

Or am I just being a little tough on the poor guys?

As we reported last week Mozilla, Microsoft and Opera have become frustrated with sites which only target -webkit CSS3 properties. It makes their browser look bad even when it implements identical or better technology. To solve the issue, they propose adding -webkit prefix support to the non-webkit browsers.

While this is largely a marketing decision, it’s a real problem. The solution appalls many web developers but we deserve our share of the blame. In this article we’ll discuss the options, pros and cons.

1. Nothing Changes

Assume nothing is done to solve the browser prefix problem.

PROS

• Browsers continue to implement their own prefixes which you are free to use or ignore.
• There’s nothing new to learn or test.
• It feels right and the decision will please the majority of web developers.

CONS

• We retain the four prefixed and one standard property. Stylesheets are larger than necessary and difficult to test.
• Lazier or less experienced developers will continue to target webkit browsers only.
• Chrome and Safari’s market share could rise to a point which makes other browsers redundant. We return to the days of single browser engine and innovation stagnates. The dark days of IE6-like dominance return.
• Microsoft, Mozilla and Opera consider this to be a real problem: doing nothing is not an option.

2. Non-Webkit Browsers Support the Webkit Prefix

Assume IE, Firefox and Opera support webkit-prefixed properties.

Microsoft had already implemented -webkit-text-size-adjust in the mobile version of IE. While it’s a non-standard property for Safari (there’s no text-size-adjust), they listened to community feedback and pulled support. That’s unlikely to happen again if Mozilla or Opera start adding webkit properties to their engines.

PROS

• It’s a quick and dirty solution which allows non-webkit browsers to render as well as Chrome or Safari.
• There’s no need for developers to update their websites.
• -webkit will become the dominant prefix; using -moz, -ms or -o will become unnecessary and CSS file sizes will reduce
• It prevents webkit, Google and Apple becoming too powerful. If another vendor disagrees with an implementation, they can simply break it or provide an alternative. Developers may not be able to use the property in any browser.

CONS

• It feels wrong: one browser should not need to masquerade as another.
• It rewards sloppy development practices.
• Differing browser implementations will make some properties unusable.
• If developers retain webkit properties which fail in other browsers, more users will switch to Chrome and Safari. Other vendors will become increasingly irrelevant.

3. All Browsers Use a -beta Prefix

Rather than separate prefixes, assume every browser implemented the same -beta prefix.

PROS

• Just one prefix to learn and use.
• Stylesheet file sizes are reduced.
• The property is obviously experimental; developers will be more cautious about using it.

CONS

• As a solution, it’s little different to every vendor adopting the -webkit prefix.
• Differing browser implementations may make some properties unusable.
• Vendors are unlikely to remove their own prefixes; the situation won’t change.

4. Experimental CSS Properties Only Appear in Beta Browsers

Assume prefixed properties are abolished in all browsers. Newer experimental properties would only be present in nightly and beta releases — and they would not require a prefix.

PROS

• It becomes impossible for developers to use prefixed code or target specific browsers in production websites.
• Webkit-only sites are punished accordingly.
• We all work to final standards — not future ones.

CONS

• Far fewer developers will use and test experimental properties. It could lead to buggier implementations.
• New properties may take several years to become standardized. Are we prepared to wait?
• It’ll never happen. If a single vendor chooses to keep prefixes in their main release, they all will.

5. Vendor Prefixes are Dropped Following Final Implementation

Once a property is stable and implemented without a prefix, all previous prefixed versions are removed from the browser.

PROS

• It’s a logical solution.
• It removes unnecessary code. Library bloat is reduced and browsers become leaner and faster.
• It rewards good development practices and punishes the bad.

CONS

• It offers no immediate resolution for sites which only target webkit browsers.
• It will break sites overnight — vendors will be reluctant to implement the policy.
• Properties can take years to reach standardization and browser implementation schedules differ. Prefixes will break at different times so ongoing site testing and maintenance is required.

6. The W3C Agreement Process Becomes Faster

Assume the W3C adopt quicker methods of standardization and publish schedules detailing when a property is expected to reach maturity.

PROS

• The existing process is too slow.
• Developers will know when the final property can be used.
• There’s less chance for vendor prefixes to gain widespread adoption.

CONS

• The process is not intentionally slow. There will always be practical and logistical problems to overcome.
• Vendors work at different speeds and it’s impossible to accurately estimate delivery times.
• A faster approval process could lead to poorer implementations which negates the point of having a standardization process.

7. Better Evangelism and More Education in the Developer Community

We would not be in this mess if developers wrote cross-browser code and understood best-practice techniques.

PROS

• It’s a good solution which we can implement today.
• Anyone demonstrating example code with prefixed properties can provide browser support information with strong disclaimers.
• Everyone can help. Fix your own code and contact sites which are not cross-browser compatible.

CONS

• There’s no guarantee evangelists and developers will change their attitude.
• Is it too late? Best-practice techniques are published but ignored.
• There’s no definitive central information repository.
• There will always be new, ignorant and sloppy developers. No one can become an expert overnight.

There’s no single solution to the vendor prefix problem. Personally, I favor a quicker W3C process, dropping prefixes after implementation and better evangelism. But those require a major shift in mindset rather than technical changes.

Ultimately, developers caused this problem: it’s up to us to fix it. There won’t be an issue if we shun prefixed properties or use correct cross-browser fallbacks. If we don’t, there’s a risk the CSS3 properties we rely on today won’t work tomorrow.

Functional Programming Techniques with Ruby

Ruby is an interesting language in that it supports the use of multiple paradigms. One of these is the functional paradigm. In this series, we’ll visit each of these features one by one, and look at how you can use them to produce cleaner, more efficient, and better-structured code.

Introduction to Messaging Systems for Rubyists

A couple of weeks ago, I wrote about Ruby Heroes. I thought I’d write a post about my Ruby Hero: Konstantin Haase. He is one of the busiest people I know in the Ruby community. His output is amazing – just check out his github profile!

Interview With Konstantin Haase

As the Ruby community matures and our applications grow, we seek new ways to manage complexity, reduce coupling, and improve scalability. Though REST services are a good solution for a broad spectrum of problems, the temporal coupling is becoming harder to manage. In this article we look into messaging options.

SOA for the Little Guys

SOA, or Service-Oriented Architecture, is often tossed around as an enterprise-only term, used by companies no smaller than Amazon. Fear not, SOA can be used by the Little Guys too! Let’s break the mold.

Loccasions: Retrospective

The Loccasions application now allows most of the basic functionality that I wanted to produce. Now it’s time to examine what went right, what went wrong, and what the next iteration is.

Express is a web framework for Node, inspired by the Sinatra framework for Ruby. It boasts loads of features, high performance, and comes with a handy executable for creating applications quickly. In this article we’re going to look at how you can get up and running with express, what you get when you create a new express website, and finish with adding a route and view to display search results from Twitter.

Installing Express

Express can easily be installed via npm (Node Package Manager):

$> npm install express -g

The -g switch on the end makes express available globally. This means we can run the express executable from anywhere to quickly create a new application. The express executable is called, unsuprisingly, express:

$> type express
express is hashed (/usr/local/bin/express)

If you type in the command by itself, express will create a new application in the current directory. If the current directory isn’t empty, you’ll be prompted and asked if you want to continue:

$> express
destination is not empty, continue?

Enter ‘y’ if you want to carry on, or ‘n’ to abort. You’re not restricted to creating new apps in the current directory, you just need to pass express the path to where you want your new application created. You can pass it other options as well:

• -s to enable sessions
• -t or --template <engine> to specify your template engine (express uses jade by default)
• -c or --css to add stylus CSS support (the default is plain CSS)
• -v or --version to output the current version of express you’ve got installed
• -h or --help to output this help and exit

A list of supported template engines is on the express guide, and also on the express wiki. In this article we’ll use EJS. Let’s create a new site called myapp:

$> express -t ejs myapp
create : myapp
create : myapp/package.json
create : myapp/app.js
create : myapp/public
create : myapp/routes
create : myapp/routes/index.js
create : myapp/views
create : myapp/views/layout.ejs
create : myapp/views/index.ejs
create : myapp/public/javascripts
create : myapp/public/images
create : myapp/public/stylesheets
create : myapp/public/stylesheets/style.css
dont forget to install dependencies:
$> cd myapp && npm install

express creates a new site in the myapp folder for us. We get: a package.json file, an app.js file for application code, a routes directory for routes, a views directory for our view templates, and a public directory for our CSS, images and client-side JavaScript. Express also reminds us to install dependencies and gives us the command to do so. We might as well type that in now before we forget:

$> cd myapp && npm install
npm http GET https://registry.npmjs.org/express/2.5.5
npm http GET https://registry.npmjs.org/ejs
npm http 304 https://registry.npmjs.org/ejs
npm http 304 https://registry.npmjs.org/express/2.5.5
npm http GET https://registry.npmjs.org/mime
npm http GET https://registry.npmjs.org/qs
npm http GET https://registry.npmjs.org/mkdirp/0.0.7
npm http GET https://registry.npmjs.org/connect
npm http 304 https://registry.npmjs.org/mime
npm http 304 https://registry.npmjs.org/qs
npm http 304 https://registry.npmjs.org/mkdirp/0.0.7
npm http 304 https://registry.npmjs.org/connect
npm http GET https://registry.npmjs.org/formidable
npm http 304 https://registry.npmjs.org/formidable
ejs@0.6.1 ./node_modules/ejs
express@2.5.5 ./node_modules/express
├── mkdirp@0.0.7
├── qs@0.4.2
├── mime@1.2.5
└── connect@1.8.5

You should see something similar, although the exact output may differ depending on which versions of the dependencies are available via npm, and which you already have installed. If you now type in node app.js and browse to http://localhost:3000 you should see the Welcome to Express page. Let’s have a look at the code express has generated and how it’s used to by the welcome page.

app.js

app.js is where you configure your site, and define your routes. The app variable is our express server, and we call it’s configure function to tell express which view engine to use, where to find static resources, and how to handle errors. Look at the default app.js code you’ll see that app.configure is called three times:

• the first time it’s called without a name argument – this will apply the settings to every environment
• the second time it’s called with development as the first argument – these errorHandler settings will only be applied in the development environment
• the third time it’s called with production as the first argument – the errorHandler in the production environment will have exceptions dumps and stack traces turned off

Now look at the last two lines in app.js:

app.listen(3000);
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);

This tells express which port to listen for connections on, then logs a message to the console confirming the port it’s listening on, as well as the current environment.

$ node app.js
Express server listening on port 3000 in development mode

By default app.settings.env is set to development. To change this to another environment, e.g. production, insert the following line above the call to console.log:

app.settings.env = 'production';

Restart the app ctrl+c, then type in node app.js again), and mode should have changed to production:

$ node app.js
Express server listening on port 3000 in production mode

Routing

Express exposes the 6 HTTP verbs as it’s API for defining routes, and lets you capture parameters via named parameters, wildcards, regular expressions, and combinations of all three. Captured values will be accessible via req.params:

// using a named parameter
app.get('/foo/:id', function(req, res) {
	var fooId = req.params.id;
	...
});
// using regular expressions
app.get(/^\/foo\/(\d+)/, function(req, res) {
	var fooId = req.params[1];
	...
});
// using a combination of the two
app.get('/foo/:id([0-9]+)', function(req, res) {
	var fooId = req.params.id;
	...
})

All three routes above show different ways of getting the fooId from the URL.

In app.js you’ll see the route defined for the welcome page. This handles GET requests to ‘/’: when a request is received for this path the callback function routes.index is fired.

.

The routes.index function is defined in routes/index.js. routes/index.js is a module that exports functions to be used as route handlers. If you open it up you’ll see the code that makes up the routes.index function:

exports.index = function(req, res){
  res.render('index', { title: 'Express' })
};

This tells express to render the index view. The object passed as the second argument to render is data that will be made available to the view.

Views

When we created myapp we told express to use the EJS template engine. If you look in the views folder, you’ll see that express created a couple of files for us: a layout.ejs file, and an index.ejs file. layout.ejs is where the bulk of the page layout HTML lives, with index.ejs containing page-specific HTML. If you open up layout.ejs you’ll see something like this:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel="stylesheet" href="/stylesheets/style.css" />
  </head>
  <body>
    <%- body %>
  </body>
</html>

Aside from the regular HTML, the title from the object we passed to the view gets output in the <title> tag, and content from page-specific templates (such as index.ejs) gets included via the <%- body %> line. Let’s open index.ejs to see what’s in there:

<h1><%= title %></h1>
<p>Welcome to <%= title %></p>

Again we’re outputting the title from the object we passed to the view, first in the <h1&t; tag, and then in the <p> tag. If you change the value assigned to title in routes/index.js and restart the app, you should see the value change when you refresh your browser.

Adding a New Route

Let’s add a new route and view that’ll display the ten most recent tweets mentioning Sitepoint. We’ll need to add a route to app.js, a callback function for the route, and a view to display the tweets:

1. Open app.js and add a route for the tweets page:

   
   app.get('/twitter', routes.twitter);
   

2. Next, open up routes/index.js and add this line at the top to import the http module:

   
   var http = require('http');
   

3. Stay in routes/index.js and add the following function:

   
   /*
    * GET twitter search results
    */
   exports.twitter = function(req, res) {
     var options = {
       host: 'search.twitter.com',
       port: 80,
       path: '/search.json?q=sitepoint&rpp=10'
     };
     http.get(options, function(response) {
       var tweets = '';
       response.on('data', function(data) {
         tweets += data;
       }).on('end', function() {
         var tmp = JSON.parse(tweets),
           topTen = tmp.results;
         res.render('twitter', { title: 'Latest from Twitter', tweets: topTen });
       });
     }).on('error', function(e) {
       res.writeHead(500);
       res.write('Error: ' + e);
     });
   }
   

   Here we’re using http.get to make a HTTP GET request to the Twitter Search API. We pass http.get the options object, which tells it where to get the data from. We then define a couple of callback functions: on('data', ...) appends data to tweets each time some data is received; on('end', ...) is called when all data has been received, and sends the tweets to the twitter view.

4. Finally, create a twitter.ejs file in your views folder. Open the file and add the following:

   
   <h1><%= title %></h1>
   <% if (tweets.length) { %>
     <ul>
       <% tweets.forEach(function(t) { %>
         <li>
           <h2>
             <a href="http://twitter.com/<%= t.from_user %>" rel="external">
               <%= t.from_user_name %>
               <span><%= t.from_user %></span>
             </a>
           </h2>
           <blockquote>
             <p><%= t.text %></p>
           </blockquote>
           <a href="http://twitter.com/#!/<%= t.from_user %>/status/<%= t.id %>" rel="external">Open</a>
         </li>
       <% }); %>
     </ul>
   <% } // endif %>
   

   After displaying the title, the view checks that we have some tweets to display. If we do, forEach iterates through each tweet, using the callback function to display the tweet’s text, and who the tweet was from.

Restart the app, then browse to http://localhost:3000/twitter and, if all went well, you’ll see a list of the ten most recent tweets mentioning Sitepoint.

So that was a quick introduction to creating a website in Node using the express web framework. We looked at what express gives you when you create a new express site, had a quick look at how it uses routing and views, and added a new route and view to display search results from Twitter. There’s a lot more that express is capable of, and a lot that we haven’t covered. If you’re interested in finding out more then head over to http://expressjs.com/guide.html, and have a look at the express wiki.

In my last article, I took you through Phase 1 of setting up the MySQL Master-Slave relationship.

Now, we have the Master SQL Server running and serving our clients, which connect using remote IPs. Also, the Master has a replication server id (e.g. “100”) and waits for the Slave connections with a user that is allowed replication (e.g. ‘repl’).

We also have Slave SQL Node almost ready to start.

What we are going to do now is the following:

1. On Master,
   1. get the Replication Master Binary Log Coordinates
   2. create a data snapshot using mysqldump
   3. transfer the data on Slave

    

2. On Slave,
   1. Restore the data snapshot
   2. Set the Slave to start replication.

Detailed Actions

On Master

During steps 1 and 2 below, your Master database will be set to read-only mode.

1. Get Master Coordinates
   1. Open a MySQL shell and give:
       
      mysql> FLUSH TABLES WITH READ LOCK;
       
   2. IMPORTANT. Leave this shell open and create another mysql client shell, i.e. another session:
       
   3. Hence, on another session, type in the following mysql command:
       
      mysql> SHOW MASTER STATUS;
       

   Write down the values for the column FILE and POSITION. You will need them later when setting up the Slave to start replication

2. On a command prompt, get a data snapshot:
    
   os-shell> mysqldump --all-databases --master-data > dbdump.db
    

If you have a big database, this might take quite some time. In our case, for a 25Gb database, it took something like 15 minutes.

3. Release lock and allow your Master to play

When your data dump finishes, just close the connection you opened on step 1 and your Master database server will resume serving transactions.

Now, you have a database file you can use on Slave to restore the database. You have to transfer this file to your Slave node.It might be a good idea to tar and gzip this file before transferring it and then untar and unzip it at the Slave node.

On Slave

Assuming that you have transferred your database dump file to Slave, you move on to work on this node as follows:

1. Start MySQL server with --skip-slave-start option so that replication does not start. Here is the suggested way:

   On your operating system command prompt:
    
   os-shell> mysqld_safe –-skip-slave-start
    

2. Import the dump file:
    
   On another operating system command prompt:
    
   os-shell> mysql –u root –p < dbdump.db
    
   This will start the import. It will take quite some time if your dump file is big.
    
   Important gotcha:: Before you start the import, make sure that you have enough space both on the datadir of MySQL and on the binary log directory too.
    
3. Stop MySQL Server
    
   Assuming that import has finished successfully, and assuming that on step 1 above you started the MySQL Server skipping slave start, you need to stop this and make sure that MySQL server is not running.

   Some Problems that you might have now on Slave

   The problem that you have now is that you restored the system databases as well. These are coming from your Master server, which has a different IP. This will mean that ‘root’ user might not have any access to MySQL server now from the local Slave machine.

   Also, ‘root’ might have different password. In Debian machine this is encrypted in the file debian.cnf” in your MySQL installation directory.

   You can bring the debian.cnf file from your Master to your Slave machine. Or you can change/reset the ‘root’ password on your Slave machine.

   Hint: You can change/reset the ‘root’ password on MySQL server as follows:

   • Start MySQL so that it will not ask for password. Also, make sure it does not start replication:
      
     os-shell> mysqld_safe –-skip-slave-start –skip-grant-tables
   • Then connect with mysql –u root and issue a command to update ‘root’ password as follows:
      
     mysql> use mysql;
 
mysql> update user set password=PASSWORD(‘new-password’) WHERE User = ‘root’;
 
mysql> flush privileges;
      
   • Stop MySQL Server that you started with skipping slave start and grant tables.

 

4. Start MySQL Server with skipping Slave Start
    
   os-shell> mysqld_safe –-skip-slave-start
    
5. Set Master configuration on the Slave
    
   Execute the following command on a MySQL prompt:
    
   mysql > CHANGE MASTER TO MASTER_HOST=’10.100.10.80’, MASTER_USER=’repl’, MASTER_PASSWORD=’slavepassword’, MASTER_LOG_FILE=’mysql-bin.000003’, MASTER_LOG_POS=106;
    
   This is how you tell Slave how to connect to Master in order to replicate. Note the log coordinates. These are the coordinates you got from step 1 above.
    
6. Stop MySQL that you have started on step 4 above.
    
7. Start MySQL normally, e.g. on an OS shell:
    
   os-shell> /etc/ini.d/mysql start

Checking out that everything is OK

Having started the slave MySQL node, you can log in and issue some commands to make sure that Slave is running OK.

1. On mysql prompt, give the following command:
    
   mysql> show processlist;
    
   The output should be something similar to the following:

   +----+-------------+-----------+-------+---------+------+-----------------------------------------------------------------------+------------------+
   | Id | User        | Host      | db    | Command | Time | State                                                                 | Info             |
   +----+-------------+-----------+-------+---------+------+-----------------------------------------------------------------------+------------------+
   |  1 | system user |           | NULL  | Connect |  232 | Has read all relay log; waiting for the slave I/O thread to update it | NULL             |
   |  2 | system user |           | NULL  | Connect |  232 | Waiting for master to send event                                      | NULL             |
   | 39 | root        | localhost | mysql | Query   |    0 | NULL                                                                  | show processlist |
   +----+-------------+-----------+-------+---------+------+-----------------------------------------------------------------------+------------------+
   3 rows in set (0.00 sec)
   

    
   You can see the SQL thread that gets data from Master (in the above output is the thread with Id 2) and the SQL thread that executes the statements on Slave (in the output is the thread with Id 1).

2. On mysql prompt, give the following command
    
   mysql> show slave status;
    
   This will display the current status on slave. Pay attention to the *_Errno and *_Error columns. Normally, you shouldn’t see anything that indicates existence of errors there.
    
3. On mysql prompt, give the following command
    
   mysql> show status like ‘Slave%’;
    
   You should see an output like the following:

   +----------------------------+-------+
   | Variable_name              | Value |
   +----------------------------+-------+
   | Slave_open_temp_tables     | 0     |
   | Slave_retried_transactions | 0     |
   | Slave_running              | ON    |
   +----------------------------+-------+
   3 rows in set (0.00 sec)

   Pay attention to Slave_running being with value ON.

Important note on binary log time to live

As we have said before, you can have Slave down and resynchronize as soon as you bring it up again. But do not put it out of service for quite long because, then it will be impossible to synchronize its content with Master. This is because the binary logs on Master do not leave forever.

There is the variable with name expire_logs_days that determines the number of days for automatic binary log file removal. Check this out. This should be 10, meaning that if you ever have your Slave down for 10 days or more, it will not be able to do replication as soon as you bring it up, and you will have to  everything from the beginning.

Conclusion

That was our story on how, more or less, we have implemented MySQL replication for our Fraudpointer application. The steps may not apply exactly to your particular case, but they can still give you a kick start and show you the way to implement replication the way it should work on your configuration.

Your comments are more than welcome. We want them. We need to improve this process and your feedback is absolutely valuable to us.

Selling a product is so much easier. You have a fixed cost at which you buy (called wholesale), so you figure out how much profit you’d like, and mark it up according. There’s even the MSRP (Manufacturer’s Suggested Retail Price) to make your life easier. But everyone who decides to sell their services will agonize over this question: “How much should I charge?”

There are many ways to answer that question. Let’s look at four to avoid.

Formula-Based Pricing

Many of us used a formula to answer that question:

1. How much do I want to make a year?
2. How many hours a week do I want to work?

So if it’s your dream to make $60,000 a year, working only 20 hours a week (including a two-week vacation), you do this:

$60,000 / 50 weeks / 20 hours = $60/hour

Next, determine the time it takes you to create a “basic” website (for me, that was a 5-10 page custom-designed static site, no programming). If that takes 35 hours, your pricing would start at $2,100. Or you could simply charge by the hour and the client pays what he pays.

Sounds great, except for one problem. Clients don’t care about your formulas.

Pricing your product is actually simple, as long as you consider it from the buyer’s point of view. How much it costs you to make something is irrelevant. They don’t care …

- Seth Godin

Your formula has no bearing on what a client is or isn’t willing to pay. How would you justify $60 an hour if the client thinks that’s too expensive? Telling him you’re worth that because you want to make $60k a year working 20 hours a week isn’t going to convince him to hire you. Neither is telling the client “how long” it will take.

Esteem-Based Pricing

The second method to avoid is basing your price structure on what you “deserve” to make. I’ve read books that claim we’re not charging what we’re worth because of low self-esteem. If we improve our self-esteem, we’ll charge what we’re worth, what we deserve—and our clients will gladly pay it. Pardon me if I’m not quite convinced.

Your clients don’t care if you think you “deserve” $60 an hour because you have a computer science degree, 15 years of programming experience, hundreds of hours of formal web training, $10,000 worth of hardware and software, and a $50,000 student loan to repay, or because some self-help guru told you that you do. Clients buy for their own reasons, not yours.

Comparison-Based Pricing

Comparison-based pricing is when you set your prices based on what you think is too expensive. It usually happens after you arrive at some semblance of a price, but then you start thinking, “I don’t know, $1,000 is a lot of money; maybe I should charge $900 …” You might think $1,000 is a lot of money, but what are you comparing that to? Your car payment? Your rent? Your monthly income? I once suffered from this malady, but the first time a client paid three times above what I considered “a lot of money,” I was cured.

Competitive-Based Pricing

Researching the competition is generally considered valuable when starting a business. But I found that to be a tall order in the web industry. First of all, who’s your competition? ABC Interactive Agency, or the teenager with a cracked copy of Dreamweaver? Sure, you can scour the web or post a newbie “How much should I charge?” question on SitePoint’s forum, but most of us keep that pretty close to the vest. And the prices I have found are all over the map. Even fellow web designers can’t agree. Although I did look at others’ prices when I first started out, it wasn’t a determining factor when setting my own.

So what should you base your pricing on? The answer lies in why people buy. Even established companies don’t always know why their customers are their customers. Remember, people buy for their reasons, not yours. If you don’t know what those reasons are, you’ll have a difficult time determining what to charge.

Image credit

Microsoft has revealed the new Windows 8 logo. I wouldn’t normally write an article about it but this is the first major redesign in 22 years. And since most of us use Windows every day, that’s a fairly big deal.

Are you ready? Here goes…

While it’s no London 2012 logo, I can’t help feeling a little underwhelmed.

Changing your brand is not something companies (should) do on a whim. Microsoft state the new logo reflects the re-imagination of the Windows operating system with clean lines, simple colors and the new Metro interface. They also admit the old logo was a flag rather than a window. Did it ever confuse you?

I’m not totally convinced. The font is a little simplistic and why is the window icon shown in perspective when Windows 8 looks flat?

It’s a bold move that’s likely to divide user opinion. Much like Windows 8. So let’s take a brief trip through history to see how Microsoft reached this point…

Windows Vista/7

The semi-transparent full-color Aero theme had a big influence on the Vista/7 logo and start button:

It’s still recognizable as the Windows logo, but the highlights, shadows and gradients made it feel more modern.

Windows XP

XP remains the world’s most-used OS eleven years after its release. Again, the logo matched XP’s default theme and, while it looks a little basic today, it was a fairly radical step forward at the time…

Windows 3+

In the decade leading to XP, all versions of Windows including 3.x, NT, 95, 98, Millennium and 2000 used a variation of the flag with familiar motion trails:

It looked fairly dated in the 1990s, but that’s the period Microsoft became the most dominant OS maker on the planet. The logo is business-like and businesses flocked to Windows.

Windows 1.0

Do you remember the original Windows logo from the 1980s? Me neither. Does it remind you of anything?…

We’ve come full circle. Almost three decades of tweaks and redesigns has resulted in a logo which looks almost identical to the one first used in 1985. I think I prefer the original — although a sans-serif font would improve it.

Whatever your opinion, you better get used to it. The Windows 8 logo will appear everywhere in the lead up to the new OS release!