I recently gave a talk at IgniteChicago – with less detail than what follows – about just why it is that Comic Sans is so hated:

Comic Sans vs. Helvetica

To illustrate the poor fundamentals of Comic Sans, I will compare it to Helvetica, which is such a beloved font, that there’s a movie – about typography – named Helvetica.

First of all, I should acknowledge that comparing these fonts is a bit apples to oranges (which are both fruits, mind you), in that they both convey completely different moods: Helvetica looks strong and serious, and Comic Sans is usually used in situations where one wants to look playful and casual.

Both Have Unmodulated Strokes

Comic Sans and Helvetica both have unmodulated strokes, unlike Garamond.

But they have their similarities as well. They both have a relatively unmodulated stroke, meaning that the thickness of the strokes on the fonts don’t change throughout the stroke. This sample shows how Helvetica’s form differs from that of Garamond, which has a modulated stroke. Comic Sans also has an unmodulated stroke.

Scribed lettering had modulated strokes - a result of drawing tools - which later influenced the first printed fonts.

This modulation is a result of Garamond’s form being derived from that of scribed letters. Before printing was available in the West, scribes lettered Bibles beautifully and patiently by hand, using a flat-tipped pen, held at a fixed angle, which influenced the form of those letters – resulting in a modulated stroke. As printing was developed, the letters created mimiced scribed letters, and – while they eventually developed their own forms – printed letterforms almost exclusively had modulated strokes until sans-serif type was popularized in the early 1800′s. The forms of most sans-serif fonts are not influenced by drawing tools.

Helvetica Manages Weight Better

Helvetica manages the visual weight of its letterforms more delicately than does Comic Sans.

Though the strokes of Helvetica’s letterforms are unmodulated, some adjustments are made to improve its legibility. For example, notice how the stroke on Helvetica gets thinner where the shoulder meets the stem on this letter n. This helps to give the letter a more even visual weight. Notice how Comic Sans is not this way. If you squint your eyes, you’ll notice that there is a disproportionately heavy area where these strokes meet on Comic Sans, while Helvetica’s weight is more evenly distributed. The ironic thing about this distinction is that Comic Sans is actually influenced from a drawing tool: a round, felt-tipped pen or marker; but, the stroke of this tool is unmodulated. Meanwhile, the letterforms of Helvetica are rationalized from predecessors, without apparent influence of a drawing tool.

This mismanagement of visual weight is the main issue that makes reading Comic Sans an unpleasant experience. Evenness of weight, or “texture” is important to the legibility and readability of typography. Letters or blocks of text that are free from disproportionately light or heavy spots allow the letterforms themselves to shine through and be read easily.

Helvetica yields a more even texture in body copy than does Comic Sans.

This example shows how a block of text set in Helvetica differs in texture from a block of text set in Comic Sans. I’ve blurred both blocks of text and bumped up the contrast so we can all collectively experience an objective form of squinting – to identify areas that are excessively light or dark.

First, notice the general variation of lightness and darkness in the lines of type. The Helvetica is a more uniform grey, while the Comic Sans varies widely, with some very dark spots scattered throughout the body of text. The most obvious anomolies are the letters “e” and “t,” the former of which appears like a blood stain a number of times in the example, and the latter which sticks out like a dead tree.

The stroke modulation of Garamond allows for it to have a small eye & large aperture.

The Comic Sans “e” appears more dark than the other letters because it’s overall visual weight is mismanaged. When compared to Garamond and Helvetica, we can get some idea of why. Garamond’s “e” features a very large aperture, and small eye, but its stroke modulation keeps it balanced. The extreme heaviness of the stroke towards the bottom left of the “e” is balanced out by the large aperture, and the tiny eye is balanced out by the very thin bar that closes out the eye. Helvetica maintains balance by compensating for its absence of stroke modulation by having a larger eye and a smaller aperture. Comic Sans, however, by virtue of its handwriting-based style, has a tilted – incidentally “Venetian” – eye to its “e” giving it both a small eye, and a large aperture. Since there is no stroke modulation to Comic Sans, it can’t compensate for this lack of balance and thus utterly fails.

Comic Sans Has Poor Letterfit

But poor management of visual weight within the letterforms themselves isn’t the only characteristic that makes Comic Sans uneven in body text. The “letterfit” – or consideration given to the letterforms to allow them to be set together in an even manner – of Comic Sans is very poor. The letterfit of Helvetica allows for it to inherently have decent kerning tables. Kerning is the distance between two letters, and good fonts have parameters set for just about every letter combination (or “kerning tables”) in which the font may eventually be set; but if the letters themselves aren’t designed with consideration given to how the letters will relate to one another, then producing good kerning tables is impossible.

The poor letterfit of Comic Sans makes it nearly impossible for it to be kerned properly.

You can see that Comic Sans has an awkward gap between the “f” and the “o,” but this pairing can’t simply be more tightly kerned, as it would create an area of tension – from too close proximity – between the crossbar of the “f” and the “o.” You can see similar problems throughout the font, but this is one of the better examples. This problem could have been avoided if the leading portion of the crossbar of the “f” weren’t so long (notice that it is shorter on Helvetica). One way to compensate for these poor pairings would be to space the letters out a bit on the whole, to allow for relatively tighter pairings for problem areas such as I’ve described; but, this isn’t feasible in most computer applications, and it would do little to make up for the other blunders of Comic Sans.

So, the typographic fundamentals of Comic Sans are very poor as used in high-resolution situations, but Comic Sans was never intended to be used in this manner, and that is part of why its considered such a bad font.

Comic Sans isn’t Used as Intended

Comic Sans was designed to be used in these talk bubbles in Microsoft Bob.

Comic Sans was originally designed to be used in the talk bubbles of a program called Microsoft Bob. The font wasn’t completed in time to actually make it into the program, but it lived on to eventually ship with Windows 95; and that’s when the font really got ugly.

Once the font was in the hands of Windows 95 users, there was no telling how people would use it. Now, it was going to be printed out on bake sale flyers, birthday party invitations, and even business cards. But remember, this font was designed to be used on-screen, and in 1994, when the font was designed, most computers for personal use – and Windows 95 – didn’t have anti-aliasing.

Comic Sans was originally designed to be displayed aliased.

Anti-aliasing is the technology that makes fonts looks smooth on-screen. Without ant-aliasing, fonts look jagged – as if they were made of LEGOS®. This isn’t the end of the world, as long as the font is designed accordingly. Notice how much better the “e” of Comic Sans distributes its visual weight when aliased.

When aliased at 12px, Comic Sans is more readable than Garamond.

In fact, when compared to Garamond, which wasn’t originally designed for the screen, Comic Sans fares quite well in terms of readability.

Where the Hate Comes From: The Wrong Place at the Wrong Time

So, the story of Comic Sans is not that of a really terrible font, but rather of a mediocre font, used incorrectly on a massive scale. Windows 95 was the first operating system to really hit it big. Just as computers were starting to pop up in nearly every home in America, Windows 95 was finding itself installed on all of those computers, and with it, the font Comic Sans. So now, nearly every man, woman, child, and bake sale organizer find themselves armed with publishing power unlike civilization had ever seen; and few of them really had any design sense.

Comic Sans Rode a Wave: Desktop Publishing

It used to be that if you lost your kitten, and wanted to make a poster, probably the most efficient way to make a flyer would be to draw one up with magic marker, cut out a picture of the cat, and go down to the nearest supermarket to make copies of it at 15 cents apiece. Then, you would post them up in your neighborhood; and – like a caveman – you would pick up a phone, call the newspaper, and place an ad to help find your kitten.

But now that you had Windows 95, a personal computer, and a printer, you could use Word to make your lost kitten poster, and print it out at home. And, wow! You could use any font you wanted. What’s that? You don’t know anything about fonts? Of course not, because you’ve never had this power before. So, guess what font makes you think about your lost kitten?

This is a monumental moment in history – right up there with the invention of printing – for common people to suddenly have the power to typeset and print documents. No big deal for awhile: some people got to enjoy making their own Christmas cards, birthday party invitations, etc. for awhile, and the small audiences of their families and coworkers suddenly had to put up with some ugly, clip art riddled Christmas cards.

But then, gradually, over the next 10 years or so, the internet got more and more popular. Now, that publishing power got even stronger: instead of flyers posted in break rooms, Comic Sans was showing up on websites, and even as the default font for many people’s emails. Now, any one person could write a message that could potentially be read by millions, in Comic Sans. This actually happened when Cleveland Caveliers owner, Dan Gilbert wrote a letter regarding the dramatic departure of LeBron James, in Comic Sans – resulting in a media storm over the poor font choice.

Dan Gilbert's usage of Comic Sans was the height of the font's infamy.

The Rise of the Graphic Design Degree, & The Formation of an Army of Haters

But where did all of this hatred come from? Well, while grandmas around the world were printing birthday invitations in Comic Sans, the field of Commercial Art (now known as “Graphic Design”) was enjoying the revolutionary typesetting power that the Macintosh provided. No longer did they have to blindly “spec” out type, not knowing what the final result would look like until their work got back from the typesetter. This made the production of high quality print design much cheaper, and much more viable for businesses to spend money on. So, with the increased demand for Graphic Design services, Design schools started churning out graduates at an unprecedented pace. Who doesn’t want to just sit and draw stuff for a living, right?

At this point – the late 90′s – all of these young people are suddenly seeing the world through new eyes. Having been through it myself, words cannot describe the jarring experience of Pandora’s box being opened up to reveal that 95% of every designed thing you see is ugly. Terrible font choices, poor kerning, haphazard color choices, and stupid concepts suddenly assault your eyes once you learn about design principles, color theory, typography, and concept development. A large portion of conversations between myself and other self-righteous design students were – and still are – about how terribly designed everything is: campus wayfinding signage, the t-shirt for the latest toga party, and yes, lost kitten posters.

But most of these design students were – and still are – blind to what a monumental, mammoth, incredible, revolutionary, huge thing was occurring. Their grandmother could typeset and print out as many lost kitten posters as she wanted. She can even make a website about her kitten, and someone in Tanzania can read about it (this is probably only remarkable to you if you don’t live in Tanzania). This makes Gutenberg’s 42-line Bible look like the non-self-inflating Whoopie cushion!

The Clash of Knowledge & Ignorance

Eventually, regular people got more familiar with this publishing power, desktop publishing applications – like Microsoft Publisher – became more widely available, and more people started to get the hang of publishing on their own. This really started to encroach on the territory of these fresh design graduates, many of whom were finding being a Graphic Designer to really suck: a client may have her nephew design a brochure, and hire you to clean it up, or worse yet – take a stab at it herself.

Meanwhile – this is the last decade or so – the same invention that made Graphic Design easier was making it way harder: print was dying, and the web was growing. Now, clients are trying to direct designers themselves, and the designers need to learn how to code web pages just to stay relevant. This doesn’t sit well with most designers.

So, you see, Comic Sans is an archetypal enemy of the Graphic Designer. Its not only an unattractive font, but it also represents the invisible, evil force that is making the “print” designer less and less relevant. A natural reaction to being threatened is violence, and the hatred for Comic Sans is arguably violent.

A Well-Designed Future

Comic Sans is at the disposal of nearly everyone with a computer; but that doesn’t mean that we will always have to be subject to its awkward forms. The spread of Comic Sans – a pretty bad font – is the result of the spread of an inarguably good technology. Just as the advent of movable type eventually lead to a spread of literacy, the advent of personal publishing should lead to the spread of design literacy; and with it, a populace too informed to stoop to using Comic Sans.

——-

I’m hoping to help with the spread of this design literacy – starting with software developers – with my book, Design for Hackers. If you’re interested in learning more and getting a few email updates for me, sign up for the email list.

Also, I’ll be doing a reading from my book at SXSW Interactive, if you’ll be around.

Until then, you can follow me on Twitter here, if you’re into that.

No related posts.

Sure, many sites grow much bigger, and much faster, but I think the value of slow, steady, growth like this is often overlooked, and is at the core of Being Yourself for a Living. Here’s how its done:

Stay true to yourself

This sounds incredibly trite and cheesy, but its really true. Its easy to get distracted by the latest trends, and spiral into writing useless “top 10″ posts about how to create the coolest Twitter background, but you have to follow your passions, interest, and experiences. The things that are really hot at any given point do have plenty of importance, but nothing is more important to focus upon than the unique perspective that you can provide. Fortunately, there’s only one you, complete with things that have happened to you, things you think about, and things you can’t help but do. While you are unique, you’re probably just unique enough that there are plenty of people who are interested in the same things that you are, and are interested in what you have to say.

Be patient, be committed

I was talking to an elderly man in my neighborhood the other day. He has been living in Lincoln Park, Chicago since he bought his house more than 50 years ago. A lot has changed in the neighborhood since then, and – as you can imagine – his house is worth much more than when he purchased it (even when adjusted for inflation).

It’s stories like these that have caused many people to seek real estate as an investment – often to their own financial peril. “God only made so much dirt, and there will always be more people,” they say. The problem is, the time to lay claim to your piece of dirt has mostly passed, and the way we interact with information has altered the way we interact with “dirt.” But information – and experiences – are not like dirt. There are always more.

What is 10 years, really, in the grand scheme of your life? If it takes you 10 years to build something great, there’s plenty more life to live; and if you’ve stayed true to yourself, you’ve had a lot of fun building it. Many entrepreneurs dream of starting a company, giving up most of it in exchange for funding, building said company, and cashing out 3 years later for millions. There is so much fervor around the success stories that have worked this way, sometimes its hard to recognize whether that is, in fact, what you really want from your career and life.

I once wanted this, too; but I can say with certainty today that I no longer do. I don’t love money enough, I’m not interested enough in such bragging rights, to muster enough motivation to put up with what a personal drain I imagine that to be. I don’t know if those are the things that motivate such founders, but I’ve definitely met some for whom money and acheivement are their driving forces. Why would you work so hard on something if you didn’t love it? If you loved it so much, why would you sell it? After 6 years of tinkering around, I’m finally making a very modest living off of the Kadavy, Inc. family. Most of this happened in the last year (I hope to share more about that in future posts). I can’t wait to see what happens in the next 4.

When you’re true to your curiousities, and accept that something will take a long time, you can more easily enjoy the whole process. By using only the resources you have at hand, whatever it is you build is yours the whole way.

Write with SEO in mind

Most posts on kadavy.net have come from answering this question: what do I know that I could teach someone else, and how would they search for it? When I had a lump in my mouth, and agonized over just what it might be, once I finally knew what the issue was, I set out to help inform other people who might be searching for the same thing. Instead of writing about mucoceles (whatever those are), I wrote about mucoceles using the language someone would use to search for them. This experience has paid for its own medical bills and then some. By using SEO best practices, you can make sure the people who are looking for what you have to share – actually find it.

Find an audience

Whatever websites there are that you like to read, those are probably the ones where you can find your audience. The first breakout post for kadavy.net was Eight Life Hacks for Health, Wealth, & Happiness. It was during the budding days of “Lifehacks,” and Lifehacker, naturally was a good place for such content. I thought of the post while in the shower, wrote it and published once I got out of the shower, and sent it in a quick e-mail to Lifehacker, who then published it on their site. I’ve had good luck being covered by Lifehacker a number of times over the years, and lately I’ve had good luck with the (amazing) community on Hacker News. You have to find out where your audience reads, and get in front of their eyeballs – usually, this will take some effort on your part (like sending an e-mail). Guest posts are another great way to reach an audience, though I’ve never actually done one.

Build upon your successes

Not every blog post is of use to a lot of people. Unsurprisingly, not that many people are looking for the meaning behind the movie “swimming pool,” or trying to figure out how to set proper book margins. But, a surprising amount of people have lumps in their mouths, or want to transfer their itunes library. Aside from poking around on Google Keyword Tool, its hard to know if many people will really care about a given blog post; but when you do have a successful post, build upon it. Write related posts, research related keywords and incorporate them into the post, or build a whole separate site. If you have a post that goes viral, try to think about what elements made it interesting to your particular audience. I’ve found that explaining design principles by using popular examples is apparently as much fun for others to read about as it is for me to write about.

So, take it or leave it. I’m not rich. I’m not famous. But, I got 100,000 page views last month and I’m happy about it. It may have taken a long time, but I’m not stopping any time soon. Hopefully some of my advice can help you reach 1,000,000 page views.

No related posts.

Monet and Other Impressionists Explored Their Medium

Even when creating dramatic shadows, Monet avoided black, and instead manipulated the powerful relationships between colors

Monet, and other impressionists, experimented obsessively with their medium: paint, some brushes, and a canvas. So just as pixels prohibit the use of Garamond on the web, the characteristics of the impressionists tools shaped their work. The inherent qualities of oil paint (thick and viscous), paint brushes (just a bunch of hair on a stick), and sometimes the texture of the canvas itself, lent themselves well to paintings being much more – put simply: blurry – than the more realistic paintings that were popular at the time. Photorealistic painters strived to make these qualities invisible, but the impressionists (like pixel fonts did for pixels) embraced them.

In the course of this experimentation, impressionists had to experiment with color to create the desired effects. Much like a rich-colored image is dithered when restricted to a 256 color palette, the impressionists experimented with creating the illusion of a color by placing colors next to each other which would create the illusion of the color they desired for the viewer.

The Impressionists Became Masters of Color

This effect was experimented with further until it became the major focus of some impressionist painters as a technique called pointillism – which involves painting dots of color next to each other to create the effect of a different overall color. Georges Seurat is credited with developing the technique, and one of his paintings close-up doesn’t look all that different from a dithered GIF image, as you can see in this example of a close-up of one of Seurat’s paintings next to a blown-up GIF image with a palette of only 8 colors and a pattern dither.

Because he experimented with the juxtaposing colors, the pointillism of Georges Seurat is similar to a dithered GIF image

By experimenting this way, the impressionists were doing much more than simply trying to replicate reality: they were analyzing the area between the subject of a piece of art, and the eye of the viewer. They were exploring just what makes ripples on water, with light bouncing off of them, glimmer the way they do. They analyzed what collection of colors make up the shadow of an object to give it dimension, and black wasn’t one of those colors.

Color Theory Explains What the Impressionists Discovered

Why this is can be explained by color theory. You’ve probably seen a color wheel before. Here’s an extremely basic refresher:

The color wheel is made up of warm and cool colors

One half of the color wheel: from yellow through red, is made of what is called “warm” colors. The other half of the color wheel: from green through purple, is made up of what is called “cool” colors. Because these colors are completely saturated, I’ll go ahead and call them hues from now on. I’ll explain a little later what I mean by that.

Also, of note later on: colors that are opposite of each other are called complementary. Complementary colors contrast each other strongly, and any two complements, when mixed together as paint, result in a brownish-grey color.

Warm Colors Pop, Cool Colors Recede

As a general rule, warm hues pop out at the viewer, giving the appearance of being closer; while cool hues recede, or give the appearance of being farther away.

The red (warm) square pops, the blue (cool) square recedes

As you can see on the left side of this example, the blue block recedes, looking as if it is a hole in the center of the red block. On the right side of the example, you see the opposite effect, with the red block looking almost as if it is a tower extruding towards you from the blue block. The warm hue – red – pops out at you, and the cool hue – blue – recedes from you.

The hue is the pure base color – as taken from the color wheel. To create a more sophisticated color, a hue is tinted or shaded. A tint of a hue is basically a lighter version of that hue. If you were mixing paint, you would just be adding white. A shade is a darker version of the base hue. If you were mixing paint, you would essentially be adding black to create a darker version of the hue.

Tints Pop, Shades Recede

Its probably no surprise to you that – much like warm hues pop, and cool hues recede – tints pop, and shades recede, as you can see in the example below. With the same color of blue as the backdrop, a tinted square of that blue pops, while a shaded square recedes.

The tinted blue square pops, the shaded blue square recedes

Context is Important

But will that tinted blue square always pop? Of course not: context is important, too. In this example, that exact same square is barely noticeable on a backdrop of slightly less tint, while it really pops on a heavily shaded backdrop.

The tinted blue square pops more off of a shaded blue field than a tinted one

Temperature is Stronger than Tint

This same phenomenon of context applies to the relative position of two hues on a color wheel as well. While neither of the middle squares of both sides of this example have any tint nor shade, their appearance relative to the blue backdrop differs drastically. The square that is purple – a color which is adjacent to blue on the color wheel – almost blends in completely, while the square that is orange, which is blue’s complement, leaps violently off of the blue field. The contrast between these two hues is so great that there is a sense of vibration where they meet. Also note that while purple is a cool hue, it is still slightly warmer than blue, which causes the purple square to pop very slightly.

Even though none of these colors are tinted or shaded, the orange square pops more off of the blue field than the purple square does

The effect caused by the relative color wheel position of two hues is so strong that it nearly overpowers the effect caused by tint or shade. Even when laid over a shaded purple backdrop, the tinted blue middle square on the left side of this example recedes. Contrast that with the tinted purple square on the right side of this example, which rockets towards you off of the shaded blue backdrop.

Even when tinted, a blue square (left) recedes into a shaded purple field, while a tinted purple square pops off of a shaded blue field. This is because blue is a cooler color than purple.

The impressionists avoided black not only because it nearly doesn’t exist in nature, but because the effects caused by changes in hue are so much richer than those caused by changes in shade. When you use pure black to create contrast, you miss out completely on the powerful effects of changes in hue.

Even though a tinted purple square pops off of a black field, it appears more natural on a heavily shaded blue field

The left side of this example is the exact same color combination as the right side of the previous example. Notice how the dark blue backdrop recedes away from the light purple square, lifting it toward the viewer. The black backdrop certainly contrasts with the purple square, but since it has no hue relationship with the purple square, the purple square seems to just float around, while the edges between it and the black backdrop give an unpleasant effect of vibration.

Now You Know, Now What?

So, how can you use this knowledge to make your web designs better? By understanding how colors interact with one another, you can more strongly establish a heirarchy of information in your typography. Web conventions have made it widely acceptable to use black on white for text on web pages, but this is neither the most readable, nor most aesthetically pleasing option.

Enrich Your Typography

In the example below, the main text is 16px and pure black, or #000000, while the secondary text is 12px and #888888, or a neutral (neither warm nor cool) grey. You can see that there is a pretty clear heirarchy here.

This second example uses the same fonts and text sizes, but this time, a warm, dark gray is used as the base color. The main text is #503e2b, a very dark orange (a warm hue). The secondary text is a lighter version of this base color – #9e948a – found with w3school’s handy color picker. There is still enough contrast as to be readable, but the contrast isn’t as harsh as black vs. white. Overall, it’s visually pleasing, and, well – warm.

The main text in this final example uses the same dark orange from the previous example, but this time – instead of simply using a tint of this color, a complementary (cool) grey is used for the secondary text – #808094. This adds extra dimension to the hierarchy we’re establishing. The secondary text is not only smaller and tinted, but now it’s a cooler color, thus causing it to recede even more. Now there is a color relationship between the two pieces of information, which intensifies our intended hierarchy while still creating a sense of harmony and realism.

Add Life to Your Graphics

Skillful manipulation of color relationships is at the crux of creating engaging and lifelike interface graphics, such as buttons. The example below, created in Photoshop, features two buttons that are created by vector masks sharing the exact same base color (#cc6666), but the highlights and shadows are treated differently. The highlights and shadows for the button on the left are created using a “Gradient Overlay” layer effect featuring a simple black-to-white-to-black gradient, a “Linear Burn” blend mode, and a 26% opacity. The drop shadow on this button is composed of black, at a 75% opacity. This is a generally attractive button, but it doesn’t have quite the richness of the button on the right, which is created using a green-to-yellow-to-green gradient (green being cool, and the complement to red, and yellow being warmer than red), and a dark blue drop shadow – for more harmonious contrast, the text on this button is also a very light yellow. The color swatches adjacent to each button illustrate clearly how the resulting color palettes of these buttons differ.

Skillful manipulation of color relationships result in a more engaging button, with a more sophisticated color palette

Don’t be so quick to use black: if you really master manipulating color relationships to create dimension, you can really add freshness and life to your designs.

Check out my previous Design for Hackers post: Why You Don’t Use Garamond on the Web.

No related posts.

One of the most important principles behind every good piece of design is that the designer has to master his or her medium. With any medium – whether it’s pencil and paper, steel and glass, or pixels – the designer has to work with strengths and limitations. Work with these characteristics, and the design stands a chance to be good – work against them, and there is no chance.

Apple’s lead designer, Jonathan Ive knows this. He recently said

The best design explicitly acknowledges that you cannot disconnect the form from the material – the material informs the form…

Medium and Form in Type History

Typography is the perfect vehicle with which to illustrate this concept throughout history. From the beginning, the forms of our letters have been influenced by the tools we used to create them.

This cuneiform inscribed tablet is an early example of how medium influenced form in written communication. You can see, looking at these pictograms, that they are made up of a series of indentions that are pretty much identical. This is because they were formed using a wedge-shaped stylus.

The characters on this cuneiform tablet are similar to one another because they were created with the same tool

As this language was replaced in the west by our current roman characters, and the tools which we used changed, so did the form of our letters. Some of the best examples of early typography using roman characters are from – you guessed it – the Roman empire.

This is graffiti from the ancient city of Pompeii. It was created using a brush, and this is apparent in the letterforms. You can see there’s a great deal of variation in the strokes that make up the letters, and they all terminate with a soft point, just like you would expect from a brush.

This graffiti was clearly created with a brush

Here’s a picture I took from Pompeii that I blogged about several years ago – dating back to the same time (remember, this city was frozen in time when it was buried under volcanic ash in 79AD). Only this time, the sign was chiseled in stone – and you can see how this has influenced the letters: all of the strokes of the letters are uniform in width, and to make the ends of those strokes looks nice – serifs were added. You can see little spur serifs from where the chisel was applied perpendicular to the stroke of each of these letters.

The forms of these letters were influenced by the chisel that they were created with

Now, moving more quickly through history, we have letters from the column of Trajan (which inspired today’s Trajan font), which were formed first by brush, then by chisel (it would have been awkward to chisel letters like the brush-drawn ones in the earlier Pompeii example). Then we moved on to lead and wood-cut printing, which first imitated work done by scribes with pens.

The lettering on the column of Trajan were brushed on, then chiseled

The letterforms of Bodoni are geometrically rationalized

Once actual drawing tools were a smaller part of the design equation, typographers started to get more theoretical with their designs – creating constraints of their own – fonts like Bodoni are geometrically rationalized, as they were created in a medium (cast metal) with relatively few restrictions.

A Little Too Much Freedom?

In modern web typography, we still have the restriction that the letters of our alphabet take certain forms, but many restrictions have been removed. Rather than only having a couple of fonts available in our typecases, there are thousands. So, this makes it easy for bad habits to develop, such as trapping our information in images, or using fonts that just aren’t good for the web.

So, what makes a font bad for the web? There’s the widely-known issue of availability of fonts on the computers of our audience members – this, of course, is why we’re usually using widely-available fonts like Arial, Verdana, Georgia, Times New Roman etc.. Now there are some pretty feasible ways of using whatever fonts we want – methods like SIFR, Typekit, and Google’s new Font API, but that still doesn’t mean you should use just any font. Even great classics like Garamond can be a disaster on the web, so its better to use a modern font that has been drawn with the screen in mind.

What a 12px Garamond character looks like, blown up

And the reason behind this is that our display technology isn’t up to par with paper. You can see here a comparison of the great classic font, Garamond, blown up (as it might look on paper), next to a detail of what it would be anti-aliased at 12px height on a modern computer screen. You can see that it doesn’t look so good on-screen, because it’s just made up of a bunch of blocks of color.

Working With the Screen

So, the popular web fonts (Arial, Verdana, Georgia, and Times New Roman) are such not only because of their wide availability, but because they are drawn with the screen’s limitations in mind.

This Flash animation that I created illustrates how pixels distort curvilinear form – such as that of typography. It’s the same series of concentric rings, but as it changes sizes, you can see that a moiré effect results from trying to draw these rings out of mere pixels. So, the most web-appropriate fonts are drawn with these limitations in mind.

Georgia is more readable than Garamond on-screen because of its larger x-height

This illustration shows just what I mean by that. Georgia reads better on screen than Garamond primarily because it has a higher x-height (the height of an “x”), and – as a result – a larger eye. This prevents letters such as “e” from becoming muddled and unreadable, and overall makes the letters actually look larger. The notes on this illustration are in 9px Verdana with no anti-aliasing; and you can see those letters read very crisply, as this font was made for such an application.

The sharp edges of the serifs on Georgia make them display more crisply on-screen

Georgia has a huge advantage over Garamond on-screen because it was designed to be displayed as such from the very beginning, when it was designed by Matthew Carter for Microsoft in the mid-90′s. This has manifest itself in sharp serifs on Georgia, rather than more subtly modeled ones on Garamond. Look at little curve on the bottom of Garamond. This gets blurred at smaller sizes, and hurts the legibility of Garamond.

This limitation of screen technology has been embraced, and taken to extremes, though.

Some type designs, like these from miniml.com, embrace the limitations of the pixel

Starting in the late 90′s and early 00′s, we saw lots of pixel fonts being used in Flash, such as these from Craig Kroeger’s miniml.com, which are designed to be used at specific sizes, with no anti-aliasing.

The limitations of the pixel spawned design methods, such as the dithering used in this design

When it was more common for computers to have only 256 colors, which caused dithering, designers embraced that constraint to inform their designs. Though ostensibly created to minimize bandwidth (another constraint of medium), designs that were created for the5k embraced dithering and lucidly used every pixel.

The “Web 2.0″ design trends of the last five years or so, are thanks to display quality and bandwidth improving, removing some of this constraint. In 2000, 12% of web users had only 256 colors on their monitors – in 2010, 97% have over 16 million colors (the number of colors available has a big impact on how crisply type, images, or *gradients* are displayed). This has put into the hands of designers a color palette beyond that of CMYK printing, with increased bandwidth to push it through.

Additionally, displays are cramming in more pixels per inch (ppi). The cheap Dell monitor I’m typing this on is displaying at 100ppi, and my MacBook Pro is displaying at about 115ppi. Compare that to the iPhone 4, which displays at an impressive 326ppi. Now, we’re starting to get some display technologies that are approaching the quality of paper when it comes to displaying letterforms readably.

So, maybe some day Garamond can make its comeback.

Pompeii graffiti photo from virtusincertus
Trajan’s Column photo from Silver Tusk

No related posts.

I’ll be talking Google-centrically because Google will likely account for the vast majority of your inbound search traffic. Additionally, if you rank highly on Google, you will probably do pretty well on other search engines anyway.

I’ve been writing with SEO in mind – and using best practices as best as I can – on kadavy.net for over 6 years now, and my search traffic has steadily increased.

Consistent use of SEO best practices will lead to lots of free traffic

Why SEO is Important

SEO is the “location, location, location” of doing business on the web. If you have a bicycle shop on a busy street, you’re going to sell some bikes. It doesn’t matter how high your prices are, or how rude your employees are – you are going to sell some bikes. Likewise, if you rank highly on Google for “bicycles,” you are going to sell a lot of bikes, because a lot of people search for “bicycles.” That is your foot traffic.

I don’t want to make the mistake of assuming that everyone knows just what it means to rank highly on a keyphrase. If you are selling a product or service, ranking highly on keyphrases related to that product or service is essentially free money. If you rank first on Google for “bicycles,” (which is darn near impossible, by the way) you will get a huge number of visitors on your site looking for bicycles, and it will cost you nothing. This is called “organic” traffic, and it’s what SEO builds for you.

But, some businesses pay big bucks for such traffic by buying Google’s AdWords. In doing so, their site shows up next to Google’s organic search results, and they pay whenever someone clicks through to their site. For “bicycles,” those businesses pay an average of 71 cents per click. For “cambria bicycle” they pay an average of $12.55.

Paying for traffic like this can be profitable if the campaigns – and conversion within your site – are managed carefully; but obviously free traffic is ideal, and translates to big sales. This is why SEO is important.

Choosing the right keywords

Before you make sure you’re using SEO best practices, it’s helpful to have some idea what keywords, or keyphrases, you would like to rank highly on. But, just because you pick a descriptive keyphrase, doesn’t mean people will find you. It has to be a keyphrase they are actually searching for. I kick ass on “lump in mouth” because that’s what people search for when they have a mucocele. Most people don’t search for “mucocele” because they don’t even know what one is – until they get a lump in their mouth – and search for it.

Ideally, each page on your site should compete well on a couple of keyphrases that are descriptive of the content on your site, have reasonable search volume, and on which you stand some chance of competing.

You can find out the volume of keyphrases by using the Google Keyword Tool. If you’re just starting a site where you sell bicycles, it would be nice to compete well on the keyword “bicycles,” which has a monthly search volume of over 7 million searches per month – but you don’t stand a chance as a new site. If your site is for a bicycle shop in Chicago, then you’d probably have better luck competing on “bike shop in chicago,” which has a measly 390 searches. Once you dominate that keyphrase, then you can start trying to compete on “chicago bicycle shop,” which has 1,300 searches.

A good place to start to find keyword opportunities from your site is your existing data. If you don’t already have a stats package set up on your site, you should. Google Analytics is great and it’s free. If you happen to already have Google Analytics installed, you can find the keywords that visitors are using to get to your site under Traffic Sources > Keywords. Here you can see what keywords are bringing in the most traffic, and if you’ve set up e-commerce or marketing (such as lead-generation) goals, you can see what keywords are actually converting into business. You are likely to find a few keywords you didn’t expect, that you happen to rank pretty highly upon. It’s a good idea to aim to build upon this success by targeting these keywords further, or targeting related keyphrases. Look for synonyms that you may not already be using (bump ~ lump, mouth ~ lip), and update your content accordingly.

Ranking highly for your target keywords/keyphrases

There are endless complex theories on just how a site ranks highly on search engines. Some of those theories have no basis at all. The truth is, nobody except little robots at Google knows just how a site ranks higher than another. What we do know is that 1) the content of a page, and how it is coded, and 2) the authority of other pages that link to a page – especially for the topic in question – are the most powerful dictators of how well a page ranks on search engines.

Content and coding

The content of a page – meaning the words within that page – have a huge impact on how well a page ranks for given keywords. If your target keywords don’t appear on your page, you will have a hard time ranking highly for that keyword. It’s not impossible, but I’ll get to that later. Relevant content has to be within your page – as code (meaning not as an image) – for search engines’ crawlers (the robots that read your pages) to read that content, and rank you for the appropriate keywords. This is a strong reason why Flash websites do poorly on search engines, and former print designers that just slice up a design on a WYSIWYG program make poorly-performing websites: the real content gets locked away, where crawlers can’t access it.

It’s also essential to use good coding practices in building your pages. There are standards for writing HTML content, and they help rank chunks of content within a page in order of importance. This helps search engines know the difference between the important – and less important – information on a page, and thus rank that page for various keywords.

Following is a run-down of important content-based factors that dictate how your pages rank on search engines.

URL

Before a search engines’ robot can read the HTML on your page, it will read the URL at which that page resides – and the content of this URL has pretty heavy influence on how that page ranks on search engines. So, if my bike shop is at http://bikeshopinchicago.com, it will rank very highly on “bike shop in chicago.” If I have a page for Cambria Bicycles, I may want to put it at http://bikeshopinchicago.com/cambria-bicycles. Note that you shouldn’t automatically pick your top keyphrase to be the domain that you purchase, as branding – and planning for the future expansion of your business – are both important; but you should have search engine (and human) friendly URLs that are in plain english instead of http://example.com/?p=34.

Title Tag

The Title Tag of a web page is the strongest piece of information indicating what a page is about. Many businesses make the mistake of naming this page “Home Page,” or ignoring it altogether (this is why there are so many pages on the web called “Welcome to Adobe GoLive…”). For any given page on your site, your Title Tag should contain the exact keyphrases that you want to rank highly on. If it is the home page – or if your business name contains your target keyphrases, you could then follow that with your site’s name. So, if you’re business is David’s Bike Shop, your title should be “Bike Shop in Chicago – David’s Bike Shop.”

This clever title tag is part of the reason this site ranks #1 for Chicago Graphic Design Firm

Meta tags

The meta tags also contain some information that search engines give strong authority to when evaluating a page. There are several different meta tags, but the one that you should concern yourself with is the “description” meta tag. This is a very short (like around 200 characters) description of what the page contains, and search engines not only use its content to evaluate what a page is about, but also to display to users when your page is listed in search results.

The words under this search result do not appear on the page - they are from the description meta

Headers

Then we have the headers within your HTML document. These are ranked in order of importance: H1, H2, H3, H4, H5, and H6. There should only be one H1, and this should probably be used for the actual title of your page (which may or may not be the same as your title tag). Some people like to use the H1 for their logo and link to their home page – it depends upon how narrow of a focus your site is. So, if you have a long document, full of text, it’s a good idea to break it up a bit by inserting some useful headers that also happen to contain some of your target keywords.

Content – EM, STRONG, IMG

Finally, you have the actual content of your page, which is hopefully helpful, interesting, and – incidentally – contains your target keyphrases. In addition to your target keywords, your content will probably bring in visitors on a number of “long tail” keyphrases that just happen to show up naturally within your great content.

Within your content, you will hopefully have some images, since they are useful for users. Much like the URL of your page is important to search engines, the file name of your images is also important, and should be descriptive. So, if you have a JPEG of a mountain bike, your image should be called mountain-bike.jpg, or – even better – include the color and brand: mountain-bike-schwinn-blue.jpg. The “alt” attribute of your IMG tag should also be descriptive, so “blue schwinn mountain bike” would do. Don’t forget, you can end up with a large amount of traffic from Google Image Search, if you use descriptive alt attributes.

The italic and bold HTML tags (EM, and STRONG, respectively) also hold higher authority in an HTML document than your plain content (which sits inside of P tags). When you italicise or bold words within your content, it lets search engine crawlers know that those words are important and relevant to the point of the page in question, so it’s a good idea to do a little of this – provided it supports the experience for your human users.

Authority of linking pages

Ranking highly on Google is ultimately all about the authority of your page or site on the keywords in question. This concept of authority also applies generally to your site just being an authoritative site. Google uses a ranking called “PageRank” to measure how much authority a given page has, on a scale of 1-10. There is a complex algorithm behind PageRank that you shouldn’t concern yourself with, but Google does provide a Firefox plugin called Google Toolbar, which shows what the PageRank of a page supposedly is. 7 is considered a very high PageRank. NYT.com is a PR 9. Kadavy.net’s home page is a 4, which is considered to be decent for a personal blog.

Google Toolbar says kadavy.net is a measly PageRank 4

There are a number of factors that go into determining a given page’s PageRank. While the actual algorithm is an ever-changing secret, here are a few factors that are widely accepted to be a part of the algorithm:

• Age of domain: how long has the domain been registered?
• Authority (or PageRank) of pages that link to the page from other domains.
• Date of expiration of domain: is the domain expiring soon, or has the owner registered it a couple years into the future? This is in one of Google’s patent filings.

Content of linking pages, and of anchor text of link

To put it very simply, when other pages on a given topic link to your page of a related topic, search engines generally will rank you higher on that topic. If the PageRank of the page linking to your page is particularly high, Google will rank you higher for that.

Also important is the actual “anchor text” – or the content between A tags – of the link that links to your page. So, a link that says “Bike Shop in Chicago” will do more to rank “David’s Bike Shop” higher for searches for “bike shop in chicago” than if the anchor text says “David’s Bike Shop.” I’d be remiss to not mention that people once did this on a mass scale before (known as a Google bomb) such that the top hit on Google for “miserable failure” was once the Wikipedia page for George W. Bush. Such a Google bomb was implemented by tons of people doing this: miserable failure.

The A tag also has a couple of attributes, such as the “title” attribute, which can have descriptive text applied to it. I haven’t seen anything to make me think that using this title attribute helps with SEO, but it certainly wouldn’t hurt. The rel attribute can have a value of “nofollow” which tells Google’s crawlers not to follow the link, and therefore to not give the page any extra authority based upon the link. Most blogs give all links in comments a rel=”nofollow” attribute to discourage SEO-minded spammers from exploiting the comment functionality.

Everything in moderation

So, if you took all of this knowledge literally, you might stuff all of your pages full of keywords to the point that they didn’t make any sense, and contact site owners all over the web, purchasing links, and stuff all of your pages full of links – full of your keywords – to other pages. You may even obscure these links by making them the same color as your background, or hiding them with CSS.

Using some of these tactics in extreme moderation may even help you a little bit, but anything more than that will be heavily frowned upon by Google. They supposedly take very sophisiticated measures to detect use of these tactics, and will downgrade a site for doing so – which is something you do not want to experience (think immediate loss of tons of business). There are tons of shady tactics for getting links. As a general rule of thumb: if it feels like its deceiving someone, Google probably has some way to detect it, and won’t like it.

Getting the content / getting the links

Having a site full of relevant keywords, and being linked to by sites with relevant keywords, is a means to an end, not an end itself. You achieve this by using good coding practices, generating content, and generating useful and compelling content that others want to link to.

Here are a few legit ways – that Google doesn’t frown upon – to get content and links to your site:

• Have a blog. To rank highly on keywords, it’s pretty much a must to have useful content, rich with your target keywords, that is updated on a regular basis. A blog is the best way to have these attributes. Unfortunately, Google still ranks some pretty shitty content really high, so I’d say that having some not-so-well-written content is better than having none at all; but hopefully this will change when they improve or someone gets around to building a better search engine.
• Directories. DMOZ is the highest authority directory, and is free – but it’s nearly impossible to get into. There are plenty of paid directories out there, but the only ones I know of that are definitely high-authority are Yahoo! Directory and Business.com. Be wary of other directories or consult a professional. Then, still be wary.
• Write guest posts on other sites. Find a high-authority site that your target audience reads, and pitch a guest post to the author. They’ll get great content, and you’ll get links, and exposure to their audience. Ramit wrote a fantastic article on writing and pitching guest posts.
• Write link bait. The best way to get lots of links is to write content that other people will link to, share, and talk about. A really thorough, information-rich how-to (like this post) is a good example, but writing posts that are very controversial works well, too (unfortunately). Such posts then get shared on social news sites such as Digg.com, and on Facebook and Twitter. Do lots of research and make some pretty graphs, and your chances of getting lots of links increases again.
• Find your audience. When you’ve written really great, useful, and interesting content, get as many people in your target audience to see it as you can. Submit to a social news site in a category where those people hang out, or buy traffic in your target category on Stumbleupon (5 cents per visit, with a chance of unlimited free traffic). Another good tactic is to find an already popular post on your target topic, find other sites that have linked to it, and pitch to the authors of those sites.

See?

You already knew all of this stuff about SEO, but applying this knowledge is all that you need to be well on your way to ranking highly and having money streaming into your business. There are probably some very reputable SEO firms out there who are great at applying this knowledge, and more; but be wary – because there is so much mystery behind SEO, the field is rife with consultants that overcharge and use tactics that will either only work in the short-term, or will get your site downgraded.

I’m sure there are tons of other great tips I didn’t cover – or maybe I’m just plain wrong about a thing or two. Talk about it in the comments!

Related around the web:

• Search Engine Ranking Factors – A survey of SEO professionals on what is important to search rankings.
• WordPress Optimization: How I Reduced Page Load Time by 75% – Google also recently started ranking based upon page load speed

No related posts.

A few weeks before Google’s announcement, I decided it was time to start looking at site performance. I moved a couple of my sites, including this one, from my Dreamhost Shared server, to a Virtual Private Server (VPS) on The Rackspace Cloud. Additionally, I implemented a few other performance enhancements that I’ll cover below. From all of these changes, I cut load time of pages on kadavy.net by 75%, and my Webmaster Tools performance graph now looks like this.

Also, Googlebot now crawls my site 90% faster. A summary of what’s to follow:

• I reduced average page-load time from 12 seconds to 3 seconds, saving my visitors almost one week of time per month.
• I did this by first switching from a Dreamhost Shared server to The Rackspace Cloud.
• I then used the W3 Total Cache WordPress Plugin, and served my media files from Amazon’s Cloudfront CDN, from multiple subdomains.

Great web publishing platforms like WordPress have made it easy for just about anyone to publish information and have it seen by the world, but as Google starts favoring sites that have the resources and knowledge to optimize page load time, some publishers’ messages may not have the reach they once did. Exacerbating this problem is that information on website optimization is somewhat complicated and assumes a considerable amount of technical knowledge. I hope to share my experience with improving the page load time of my WordPress site in as plain of language as possible. I’m a designer by training, and get by how I can as a developer. So, maybe some folks out there who know more than I do about this stuff will have some knowledge to offer. Maybe I did something completely wrong, in which case, let me know in the comments!

Servers: What’s the difference between Shared and VPS?

With shared hosting – such as Dreamhost‘s – your sites are all on one machine with a whole bunch of other sites, sharing all of the resources (CPU usage and RAM usage). You also don’t have much control over the configuration of your server, such as what PHP modules are activated (of which, there are probably way too many), and the configuration of your PHP.ini file.

With a VPS – The Rackspace Cloud, specifically – your “server” is a piece of a machine, with CPU and memory resources dedicated just for your piece of it. You can choose what flavor of Linux you have installed, how your Apache server is configured (if you want to run Apache at all), how your PHP is configured – you can control pretty much everything. The drawback is that you have to administer it all yourself. This was challenging for me to figure out, but as you can see the speed payoff is pretty amazing.

Why not use Dreamhost’s PS?

As I evaluated my options, I considered simply upgrading to Dreamhost PS. All I would have had to do was press a button to do this, but I had heard not-so-good-things about Dreamhost PS – and most importantly, my MySQL database would have still been on a shared server. I would have to pay extra if I wanted my database on a nicer server. This seemed pointless to me, and didn’t sound like a VPS at all. I wasn’t keen on administering my own server, but after help from some nice people at Jelly (especially Chris Chandler from Flatterline) things are going okay so far.

How much does the Rackspace Cloud cost?

I’m not really sure yet, because I haven’t gotten a bill, but it looks like you can get started for around $12 a month, with a server with 256MB of memory. There are bandwidth and storage fees on top of this, but they seem pretty low. The coolest thing about The Rackspace Cloud so far is that you can scale your server up and down in a matter of minutes, and only pay by the hour, based upon the size of the server. My two WordPress sites, totaling about 60k pageviews a month, are currently on a 1024MB server, which I hope will cost me less than $50 a month, but I’m starting to make money on my properties, so the expense is worth it for me. If you don’t have much revenue, it may not be worth it for you – or you could increase your revenue: something I hope to write more about in the future.

Using the Rackspace Cloud

Once I signed up for Rackspace (they called me within 15 minutes of signing up, to confirm, before I could start using it), I signed in and created a server. When doing this, you can pick the flavor of Linux that you want to use. I didn’t really know what this meant, but I was advised by a friend to choose the latest version of Ubuntu they had. So I chose 9.10 (Karmic Koala). I also could have chosen one of various Windows servers. After selecting the Linux flavor, I was able to name my server, and select the size of server that I wished to use. I started off with 256MB, but I very easily scaled up later on. After a few minutes, the server was all set up, and I got a confirmation e-mail, with my dedicated IP address, and login and password.

You can quickly and easily resize your server on the Rackspace Cloud

Setting up the rest of the LAMP stack

Now that my Linux was set up, it was time to install Apache, MySQL, and PHP. I SSHed into the server using Terminal on the Mac. That command looks like this (but I used my actual IP address):

ssh root@111.111.11.111

Setting up Apache, MySQL, and PHP – and phpmyadmin – was super easy thanks to this great article in the Ubuntu Documentation.

Transferring the Data

Now I was ready to get the data over to my new server. I SSHed into my Dreamhost server (you may have to contact support to get this enabled), and created an archive of kadavy.net:

tar -cvf kadavy.tar kadavy.net

I then transferred that archive over to my Rackspace Cloud server using Secure Copy:

scp kadavy.tar root@111.111.11.111:/home

Then I decompressed the file on my Rackspace Cloud:

cd /home

tar -xvf kadavy.tar


Setting it up

I then used PHPMyAdmin to export my database from Dreamhost, and import it onto my Rackspace Cloud instance. I had to change a few settings in the options table of my database to match the IP address of my server, rather than my domain, so that it would run properly before setting up my DNS. I also made a few changes to my wp-settings.php so the installation was pointed at the right database.

Using the easy instructions from the Ubuntu documentation, I set up the virtual host on Apache, and started up the server.

After I felt everything was right – and after messing around with optimization tricks below – I pointed the DNS to this new server. Rackspace has a DNS management tool, but I found that GoDaddy (my registrar) had more user-friendly DNS management.

Optimizing WordPress / The Front-End

Now that I was on a much faster server, there were a few other things I learned that made my pages load even faster. After learning these tricks, I found that there was one WordPress plugin that used many of these tricks. I used the YSlow Firefox plugin to benchmark the speed of page loads, and also to get tips on ways I could optimize my pages. Here’s some of the more important tactics I learned.

Page Caching

The most popular WordPress optimization advice I found was to cache the pages. Instead of having to hit the database every time a page is called, caching allows your server to serve up static HTML. The server doesn’t have to process all of that PHP and build the pages from the database. There are several plugins for WordPress which automate this, one of them being W3 Total Cache, which I’ll talk about more in a minute.

Using a CDN (Amazon Cloudfront)

This was the most intimidating sounding advice I received, but it turned out to be pretty simple. A Content Delivery Network is basically a bunch of servers around the world through which you serve your larger files, such as images, CSS, and Javascript. When someone visits your site, the assets are served from the closest server to them, thus speeding up load time. I had heard of Amazon Web Services many times before, not really understanding what it was, but their Cloudfront service is a very cheap CDN (looks like it will cost me less than $1 a month). You can sign up for it at aws.amazon.com, and can freely upload assets using S3 Browser, amongst other applications.

Once you’ve signed up for Amazon, you can create a “bucket” on Cloudfront by clicking on the Cloudfront tab, then Create Distribution. Name your bucket, and you can set up CNAMEs (media1.mydomain.com, media2.mydomain.com). You’ll have to set these up in your DNS with your registrar as well. I’ll get to why you would even want to do this in a bit, but this gives you various subdomains you can use to access the same resources in your bucket. In addition to these subdomains, you’ll be able to access your resources at locations indicated under “Domain Name” and “Origin Bucket.”

Using Amazon Cloudfront, you can set up a bucket from which you can serve your media files

You can get the Access Key ID and Secret Access Key required to upload resources via S3 Browser by creating an Access Key under Account > Security Credentials.

Using S3 Browser, you can upload your media files to your Cloudfront bucket

The most daunting thought about using Cloudfront was uploading all of my resources, and pointing my code to them, but there are a number of WordPress plugins that automate parts this process, including W3 Total Cache, which I’ll cover in a bit.

Using Multiple Domain Names

Why did I set up multiple subdomains on my Cloudfront media bucket? It turns out, the HTTP spec states that “A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy,” and, even though this spec was written in 1999, many browsers still adhere to this specification. So, if you are accessing more than two assets from one domain – be they images, CSS files, or Javascript files – many users’ browsers will only download them two at a time.

The workaround for this is to set up multiple subdomains that all point to your Cloudfront bucket (media1.mydomain.com, media2.mydomain.com, media3.mydomain.com, media4.mydomain.com), and rotate through them as you code URLs to various media assets. I’ve been advised that 4 subdomains is plenty, as this will allow any browser to download as many as 8 files at once.

Multiple subdomains, one Cloudfront

Doing it all (almost) with W3 Total Cache

The caching component of the advice I found has been around long enough that not only is there a WordPress Plugin called WP-Cache, there is also another plugin called WP-Super Cache. Now, there is the amazing W3 Total Cache, which not only caches your pages, it also minifies (removes line breaks to save space), and uploads files in your media library to a CDN, such as Amazon Cloudfront.

While W3 Total Cache does upload to a CDN your wp-includes, theme files, CSS, Javascript files, and any other files you specify, it does not soon will change the paths to any images within your CSS files , and in your theme files, so you have to do this manually. But, since W3 Total Cache doesn’t soon will support the multiple subdomains I was talking about, this is probably for the best. I manually inserted different subdomains into my CSS and theme files.

W3 Total Cache will cache pages and upload all of your media files to Cloudfront

Be careful with minifying your Javascript files, as I found that doing so broke Google Website Optimizer tracking code.

Other Optimization Tricks

• CSS Sprites: This is the technique of putting all of your design graphics in one giant file, and selectively displaying parts of it through CSS. This reduces the number of HTTP requests, and the total size of graphics to be downloaded, this reducing load time by quite a bit. It’s also a bit of a pain in the ass, so I’m saving it for a future redesign.
• Putting CSS and Javascript inline instead of in separate files (for pages that are usually the only one visited): Since I have a couple of pages that visitors hit from a search engine, and then tend to leave, I did this on a dedicated template for a few posts. This really only helps if the page in question is the only page a user is likely to visit on your site. This is not a good technique for visitors that visit multiple pages, as they will have to re-download all of your styles.
• Gzip files: but Amazon Cloudfront does this automatically.
• Yahoo outlines some other best practices you may want to try, depending on how much effort you’d like to put in.

It still remains to be seen whether this performance enhancement will improve my Google rankings, but I hope this document helps some less technical publishers understand just how much impact they can expect from the choices they make in hosting platform and front-end development.

P.S. If you do decide to use The Rackspace Cloud, I sure would appreciate it if you signed up through this link. Clearly they’ve worked well for me, but I wouldn’t mind the referral bonus.

Elsewhere on the web: How to speed up your blog (the non technical guide)

No related posts.

• If you are a Windows user and don’t want to go through all of this hacking, you can buy iTunes Transfer software at my partner site. It will help you back up your library – with playlists – and transfer it to your other computer.
• If you’re trying to transfer music from your iPod to your computer, unfortunately, Apple won’t let you do this freely, but you can buy iPod to Computer software for PC (free trial download), or iPod to Computer software for Mac at my partner site that will allow you to do this.
• if you just have the hard drive of your old PC, Ben has shared with us how to make the transfer
• if you aren’t keen on messing with XML files – and play count isn’t important to you - Oden has a simple process, involving smart playlists, for retaining song ratings when you transfer your iTunes library.
• Collin has a simple way to find out those duplicate songs that you may end up with when transferring your catalog.
• Aaron devised a clever way to transfer while retaining playlists in your collection.
• If you are transferring between Macs, pbaron has a method involving FireWire mode.

[Original post]

Since I’m moving, I wanted to transfer all of my music from the iTunes library on my work computer to the iTunes library on my home computer. This is pretty simple – just transfer my music from my work computer’s iTunes library onto my Firewire Hard Drive, take it home, and transfer the music onto my home computer – but I rely on all of my song ratings, accumulated over thousands of hours of listening to iTunes while I work, to populate my iPod Shuffle with songs from the “My Top Rated Songs” Smart Playlist. I couldn’t find any information on how to transfer my iTunes music, while still retaining my song ratings, but I finally figured it out.

Move Your Music Library

Before you do this, you’ll have to first transfer the actual files to your new computer. You may choose to burn CDs, DVDs, or use a thumb drive; but using a FireWire cable is easiest for large libraries, unless you have a portable hard drive.

Move Your Metadata

Here’s a video tutorial I put together. Written instructions are below.

1. Export the source iTunes library as an XML file (File>Library>Export Library…). This will create a file that holds information about the location, song filenames, and *song rating*!
2. Replace the file paths in your XML file with the path that the songs from the source library will be in when you import them. This path may point to your FireWire Drive, a DVD you have burned, or a temporary folder on your hard drive that you have copied your music to. Just to be sure of the new path, copy one of the files from this location to your library, export your destination library, and look at the file path to that song in the resulting XML file. To actually replace the file paths, I did a Find/Change in TextWrangler but you can just use TextEdit (Edit>Find>Find…).
3. Set the preferences in iTunes in your destination library to “Copy files to iTunes Music folder when adding to library.” This is under “Advanced.”
4. Import your library (File>Library>Import Playlist…).
5. Delete redundant files. If you’re like me, you have some duplicate songs in your multiple libraries. This is a tedious task, but I plan to do it over time.

Of course, you can prevent all of this by being organized in the first place. I probably should have just had an iPod that I synched with my home computer and brought to work.

If you need help getting the actual files over to your new computer, this video will show you how to copy your music to your new computer using iTunes Home Sharing:

UPDATE: If you’re looking to transfer music from your iPod to your computer, I’ve put together a short guide here. I hope to improve upon it soon, but please share your findings in the comments.

No related posts.

What it is – I DO here

That is definitely not my coffee.

First, just what it is that I do probably needs some explanation. I’m President and Owner of Kadavy, Inc., which is an S-Corporation that houses my web design consulting services, as well as media properties, such as kadavy.net, Flatmate Meetup, and my share of nom.ms. The ultimate path of this company is not to be a web design consultancy, but I do enjoy that part of the business. Over this past year, Kadavy, Inc.’s revenues have been almost entirely from the web design consultancy, but I project that to change drastically over the next few years.

I choose my web design clients very carefully. My specialty is working with startups because that’s what I get connected with most through my network – and they tend to have progressive work styles. Thus, oDesk Corporation is one of my best clients. I prefer clients who are well-versed at communicating remotely, and are good at collaborating on written thought processes through collaborative documents such as Google Documents, or text-based communication such as Instant Messenger.

I find most meetings to be unproductive. I am many times more effective when I’m able to think independently in an environment that is within my control, than when trying to labor through a thought process with other people on the fly. I find that meetings and discussions have their place when it comes to exploration, but that really making decisions happens more effectively when all of the stakeholders get a chance to process all of the influencing factors and make an informed decision – or better yet, just respect one another’s roles and powers of judgement. This is of course the exception rather than the rule, but I manage to find clients who work this way once in awhile. Those clients, I cherish.

Kadavy, Inc. HQ

I work at home, by myself. I have a small one-bedroom apartment (plus sunroom) in the Lincoln Park neighborhood of Chicago. I use the tiny sunroom as my bedroom. The bed barely fits in this room, and that’s fine with me. It gets a little chilly, but I have a heated mattress pad. I use what is supposed to be the bedroom as my office so I have more space for working. I used to rent an office space with some friends who have their own consulting businesses. It was valuable early on when I needed the mentoring, but the utility eventually wore off, and it got expensive.

I have an IKEA Jerker desk and Aeron chair because together, they can be adjusted to an ergonomic setup for me. My MacBook Pro sits on a laptop stand – again for ergonomics. I mouse with my left hand (more on that later), and use my Wacom Tablet with my right hand. When I’m at my home office, I hook up my laptop to a 20″ Dell Monitor. I bought the desk, chair, and monitor used on Craigslist, mostly using notifications.

I thought that working at home alone would get to me mentally, but it hasn’t yet. It makes it all the better and more motivating to get me out of the house once in awhile, and since socializing is part of my business model (more on that later), that is a good thing.

Starting the day

On a typical morning, my alarm is set on my iPhone timer for 8:18am (setting my alarm for an unusual time is more than a decade old tradition for me). I hit the snooze bar numerous times, and try to really make it out of bed before 10am. In a perfect world, I would meditate first thing in the morning and do some yoga; but I’m unfortunately not quite that disciplined. So, most days, I immediately go into my office and do some work for an hour or so.

The work I’ll do depends upon what I have going on. If I’m in the middle of a billable project, I’ll try to hit that for a bit before I check any e-mail at all. More often, I’ll process e-mail first thing. I immediately archive as many e-mails as I can, and mark as unread the ones that are actionable that it isn’t appropriate to get to at that moment. I loosely subscribe to the Inbox Zero system, and at any given moment, I’m unlikely to have more than 7 e-mails in my inbox. I use Mail.app much more than the web version of Gmail. As great as it is, I don’t get how people can live in the web version of Gmail. Mail is so much more nimble for searching and managing e-mails with keyboard shortcuts for me.

If it hasn’t been determined for me already, I’ll try to get a clear picture of what the day holds for me and write it down on an index card, or write it up in VooDooPad. I practically live in VooDooPad. I’ve heard good things about Evernote, but haven’t gotten around to checking it out because VooDooPad works so well for me. I have a separate document for every project, and every property within Kadavy, Inc. I use it for brainstorming, record keeping, and project management. I find loose text to be the most agreeable format with which to plan, and I can fortunately get away with it since I usually work pretty independently. Even when I work on collaborative documents, I write in VooDooPad first. I often do the same for e-mails. This blog post was drafted in VooDooPad.

Once I have a good idea of what the day has in store for me, I’ll start eating some breakfast. By this time, my AntiRSI has probably already kicked in. It’s a program that monitors my computer usage to remind me to take breaks. I’ve been in some employment situations where I didn’t have the opportunity to take breaks, and I paid the price with RSI bad enough that I now mouse with my left hand. That’s cleared up since I started being more disciplined with taking breaks, but I don’t want to be in that situation again. As an added benefit, the program usually reminds me to take breaks just as my temples start to tense up, and I’m not thinking as clearly anyway.

Kadavy, Inc. is what it eats

Eating right is very important to my business since I’m the only employee. It has a huge effect on my mood, my ability to focus mentally, and since the Kadavy, Inc. health insurance plan sucks, that’s extra incentive. I’ll usually have some granola, some plain yogurt (or rice drink), and some fresh fruit for breakfast. Additionally, I’ll have some whey protein shake (by far the most processed thing that I eat), some Omega-3 pills, and Dr. Weil multivitamins.

Overall, I have pretty unusual eating habits. I discovered a few years ago that I’m better off without wheat, and that really opened up my eyes to the connection between what I eat and how I think and feel. So, I don’t eat bread, I only eat gluten-free pasta. I go easy on the meat and dairy, but have determined that it’s pretty tough to have a balanced diet without at least a little of both of those. I eat almost no processed or sugary foods. I quit drinking soda over a dozen years ago. I don’t drink coffee (I’m too sensitive to caffeine, and “just don’t want to get involved”). I don’t drink juice (too much sugar). I pretty much just drink tons of water, and quite a bit of tea. I have been on a big Chamomile tea kick because I tend to have quite a bit of energy, and it makes me more calm and focused. I’m interested to try this gyokuro tea that Jason Fried has written about because it has an amino acid that synergizes with caffeine to increase focus.

So what do I eat? I try to buy as much as I can from the Farmer’s Market that I live nearby. The food tastes amazing, you can really feel the better nutrition, and I like knowing where my food is coming from, and where my money is going. I also occassionally order nuts such as raw unsalted almonds or cashews, in bulk, from nutsonline.com. When I cook at home, I eat lots of vegetables and brown rice or quinoa. When I eat out, it’s lots of Thai, or Mexican (tacos, since they are corn, rather than flour, tortillas).

Back to work

After (or while) I’m eating breakfast, I’ll do a little more work. I’ll act on what e-mails I can, or if I’m not super busy, I’ll check out what’s up on Twitter. I really love Twitter, and when I get a chance, I actively seek out people whom I can help on there, because I certainly get lots of help from the Twitter ecosystem.

My favorite work is pouring over Analytics, analyzing CrazyEgg clicks, or running and analyzing Google Website Optimizer tests. I also love messing around in Google’s Keyword tool, where I often find keywords that I can use to improve the traffic numbers on my web properties, or to get ideas for new content that I can compete on. I have to be careful with myself on this, because it’s very easily to burn hours on this that don’t wind up being effective. I try to keep myself in check, making sure that I progress towards decisions that will make a real difference for my business.

Thanks to Jelly - I don't have much of a bald spot.

Play and exploration are a huge part of my business model. There are such huge changes afoot in the way we do everything, that you’ll surely get left behind if you are too goal-oriented and don’t exercise your creativity and invite serendipity into your business. A critical component of this exploration is socializing. On most Mondays and Wednesdays, I head to a nearby cafe called Noble Tree to casually cowork (or “mowork” as I stubbornly call it) with a group called Jelly. We have several regulars, and a pretty steady stream of newcomers. Every time I go, I have some sort of “ah-ha” moment from a conversation I have with someone there. There are a bunch of entrepreneurs that come and we really help each other out. It’s almost as if we have equity in each other’s companies simply by virtue of being in the same community. I’ve made more authentic and rewarding business relationships through Jelly and other informal social interactions than I could ever have in an office, where relationships are tainted by false incentives.

I’ve melded this socializing component with continuing education in a group called DIYMBA. We initially formed as a group to read (real) business books, and discuss them; but soon realized we shared good resources in the contacts that we had. So, once a month, we gather for brunch and have a different business person join us. It’s very casual. We pick their brains, then we discuss our challenges with our own businesses. The best part of the group is that we’ve limited the number of members, so we’re comfortable discussing stuff that we wouldn’t be as comfortable discussing if the group changed month to month.

I can’t stress enough how important social capital is to me and my business. It sounds silly to talk about it that way, as if I was saying the word “networking” (a word I can’t stand). I really get a rush out of talking to people who have made a sustainable living out of their passions, interests, and experiences – or who at least have the courage to try. I can actually feel the blood in my veins pump harder just when I think about it. I’ve seen lots of people grow and become successful in this way, and it excites me to no end to imagine how many more of my friends will have done so in 5 or 10 years. Social capital takes a long time to appreciate; but when it does, it’s explosive.

Play and exploration also includes obeying my curiousity in endeavors that don’t have any clear immediate purpose. As Steve Jobs says “you can’t connect the dots moving forward,” and I heed this wisdom, because kadavy.net started on what seems like a whim, and has brought me more enjoyment and success than I anticipated. Lately, I’ve felt very compelled to create video content on my YouTube channel. In pursuit of my impulses – which has incidentally improved the quality of this content – I’ve taken improv classes, script writing classes, and acting classes. It seems like most video bloggers are more likely to spend $1000 on a great video camera, rather than on an acting class; and I think this is a mistake. I challenge myself in my video content to produce it with the simplest tools possible (iSight and iMovie). I’ll upgrade if and when someone gives a shit – which, at about 50 channel subscribers, is not currently the case. If I can’t produce content compelling enough for this to happen, then I can’t justify the upgrade.

Into the night

Some nights, I am abducted by UFOs

Whether it’s a day I go to Jelly or not, I continue to work until I go to bed. Now, I don’t mean non-stop: usually, I’ll have dinner with a friend, and we’ll discuss our work, or I’ll have a class. If I am not working or doing one of those things, I may take a break to cook, or to play my guitar (I’ve been writing some music – another exploratory endeavor); but I’ll usually continue working afterward. If I feel like I need some relaxation and am doing work that’s compatible with it, I’ll put 30 Rock or The Office on Hulu while I work. I listen to different music for different moods, but nothing beats soft lighting and Ryan Adams’s “Gold” for a late-night work session. Occasionally, I’ll read some fiction before I go to sleep, which is usually around 2 or 3am. I really prefer biographical fiction because real experiences are more interesting to me. I’ve enjoyed David Sedaris, Dave Eggers…other authors who aren’t also named David.

I do all of the work for my business. If there is something very technical – like writing a web app from scratch – that I can’t handle, I may hire someone out; but other than that I do everything. Client relations, design, coding, bookkeeping, SEO, writing, tweeting. I’ve tried outsourcing for some small tasks before, but I couldn’t justify it. If money is pouring in and I’m swamped, then I’ll definitely be hiring help. Such is not currently the case. I do hire a CPA to help with my taxes, though.

My work style goes through some intense seasonal changes. The social component of my work is stronger in the summer, and in the coldest and darkest winter months, I’ll usually get really intensely involved in learning new things. I lived in and around San Francisco for three years, and while it was a tremendous period of growth for me, I really missed the inclimate weather, which I have to thank for the majority of any technical skill or knowledge I have. Growing up, going to school, and working in the midwest before SF, I was very productive in the winters. It feels strange to admit, but there’s also something I get out of feeling like I have to survive something – like I have something to fight against. Because that’s the reality of it when you’re in the early stages of entrepreneurship. It’s as if California has too much optimism for me at this point. Not enough reality.

Along with eating well, getting exercise is also important to my work. It’s as much for my mind as it is for my body. When the weather is nice, I get a good deal of exercise from riding my bike around town. I know it’s dangerous, but transportation in America is just absurd enough to make it worth it for me; and I gravitate toward an integrated lifestyle (transportation & exercise at the same time = good). I try to get to Yoga class once a week, which does incredible things for my mood and mental clarity – I really should go more often. If I haven’t managed to do either of the aforementioned, I’ll go jogging. I set my iPhone timer for 15 minutes, use the timer to keep my heart rate in the right range, and when the timer goes off, I set it again, and start jogging back home.

Your write

Writing is my most important activity, which is ironic to me, because my whole career started with wanting to get paid to draw for a living – and I had no interest whatsoever in writing. Writing allows me to express my thoughts and ideas, yet at the same time, acts as a compass because of the rapid feedback that the internet provides. I write about a thought or solution, and if my Analytics, blog comments, and Twitter replies tell me so, I’ll consider digging deeper on that topic. It’s as much a medium of discovery and self-definition as it is of expression.

Even if I am designing something, I can hardly bring myself to do so without writing a great deal about the project first. I need to know the business objectives, brainstorm approaches, collect competitive data, before I design anything. I do this for internal Kadavy, Inc. projects as much as I do for client work.

I also write just to organize my own thoughts and feelings. The medium that I use depends greatly on the nature of the writing. Cursive writing in a Moleskine for more personal writing – or for critical thinking away from the computer, VooDooPad for more business-oriented writing, VooDooPad again for spewing random thoughts that aren’t likely to see the light of day. I also have a whiteboard I made out of tileboard in my office for when my thoughts call for sketching to accompany my writing. I find that using larger muscles in my body to write and draw alters the way I think about an approach.

So, that is the way I work, which could probably also be entitled “the way I live,” but as you can see, there isn’t a huge difference. Somehow this reached over 3,000 words, so if you read all the way to here, you get a cookie.

Photo of Kadavy, Inc. at a cafe is from a Chicago Tribune article on Foursquare, as syndicated by Lakeland, FL’s Ledger.

Photo of Kadavy, Inc. being abducted by a UFO is by Ryan Halvorsen.

No related posts.

It’s called Being Yourself for a Living; and while it’s been done before – but reserved to those of massive celebrity and resources – it’s becoming more feasible for more people each and every day. Technology has brought us channels that allow us to express our unique personalities, to share our unique knowledge and experiences, and to explore our curiousities.

You may have just one burning passion. Some may say that BYFL will be easier for you; but not necessarily. In today’s world, boundless curiousity is once again an asset. You’ll have to know a little HTML at the least. The Renaissance Person is back.

It will start with a blurry flurry of snowflakes. “You lack focus.” But eventually those snowflakes stick together. Technology has brought us feedback mechanisms by which to see just which of those snowflakes stick. You now have a snowball, and the ground upon which you stand has been blanketed. Start rolling!

Hi, my name is Kadavy, Inc.. What is your name?

No related posts.

1. Move your body: Whether it’s swinging from a pull-up bar during a conference call, or hitting a few yoga poses to start off my day, I’ve discovered a strong connection between my thoughts and my body movement. Dancing, running, walking, playing sports, or just jumping around for no apparent reason are good ways to get your mind thinking differently. When was the last time you did a hand stand? Creativity Bootcamp: Move Your Body
2. Express your thoughts: In any way you can. The most important thing is, minimize friction between your brain, and the medium of expression. If you feel like talking, just pace around and talk, even if you aren’t recording it. And, don’t be afraid to not make any sense. A tiny fraction of what I write or draw ever sees the light of day. Sometimes I’ll just sit and write a string of random words that are on my mind – the next thing I know, that exercise has me writing complete, coherent, sentences that would have never gotten out of me otherwise. When I write, sometimes it’s in a Moleskine with a compressed-felt pen, and other times it’s in one of my favorite apps, VooDoodPad. Creativity Bootcamp: Express Your Thoughts
3. Use your senses: Whatever your core competency, explore other mediums of expression that use other senses. For your ears, take a dance class, or learn to play an instrument. For your smell and taste, take a cooking class, or just experiment in your kitchen. I like to go to a life drawing class once in awhile, and I’m still playing around with the idea of keeping a big hunk of clay on my desk. There might be room next to my LifeBeans. Creativity Bootcamp: Use Your Senses
4. Socialize: With passionate people from all fields. Your brain will light up hearing about how other people approach challenges of their respective crafts. Also, the more you socialize, the more you understand people, and the more people will understand your work. Creativity Bootcamp: Socialize
5. Isolate: If all you do is socialize with passionate people, you aren’t creating much, are you? To really inject your unique perspective into your work, you have to spend some time with your own thoughts. If your profession has a “scene,” try pulling yourself out of it for a bit. Ever seen “Best in Show?” If your life is starting to look like that, maybe you should stay in this weekend. Creativity Bootcamp: Laugh
6. 

   L.O...I have an idea!
   Laugh: You have to have fun, or your work will lose all of it’s soul. Set aside 15 minutes a day to poke around on YouTube if you have to. I like to watch The Office on hulu while I work.
7. Invite Serendipity: Put yourself in a place where something random, yet magical can occur. The general criteria for such a situation is that it be something unfamiliar and full of random stimuli. My two favorites are strolling around the streets of any major city, or wandering around a thrift store. Twitter user stephendavis02 does something similar.
8. Eat right: For me, this means lots of fruits and vegetables (organic when possible), a lot less meat than the average American, and whole grains (brown rice, quinoa). I also try to do a fast one day a month, and it’s amazing what it does for my mood and energy level. The most dramatic effect occurred when I cut out wheat.

So the overriding themes for me are variety, curiosity, and health. What works for you? Tell us and win a book!

—-

Laughing photo by Jim Epler, lights photo by kevindooley.

No related posts.