Some general guidelines

• For UI elements, use 24-bit PNGs with a transparent background.
• Use alpha transparency, not index transparency. Be careful to not use fancy blending modes on top of transparency in the source file – anything beyond basic alpha transparency won’t be respected in a flattened PNG.
• Include any drop shadows or highlight effects in the exported image. Keep in mind the lighting source should always be the top center of the screen.
• Keep a source file around (i.e. PSD) for each asset you export, so you can make changes to it in the future without messing up the dimensions or alignment of the image.
• Use Photoshop or Fireworks to create graphics for production. AI is resolution independent, so it is much harder to control pixel-level details and you will often end up with blurry lines when you rasterize the image.
• If you find that antialiased lines look fuzzy in your flatted PNG, you may need to whip out the pencil tool and clean it up by hand.
• When providing colors, use RGB values. Your developer may want the values in percentage format; to get this, use the color picker to get the numerical value and divide it by 255. If it needs to be partially transparent, specify an alpha value. (20% alpha means the same thing as 80% opacity.)

Text

Any text labels in the UI are implemented directly in Cocoa, so you should provide detailed specifications for how the text should appear. Most labels in the UI should be Helvetica, the system font, but you can specify any font that is included on the device.

You should also specify whether overflow text should be truncated (as with button/titles in the default UI) or wrapped (as with an expanding content area).

What you should provide: Font name, size, and color, as well as parameters for any shadow effect that should be rendered (shadow color and x,y offset in pixels).

Buttons

A "button" is pretty much anything that is tappable, and it can have different visual states depending on the context. You need to take all of these states into consideration when building custom buttons.

Your average button has three states you should provide to your developer:

• Normal: The button is active and can be tapped.
• Disabled: The button is inactive and cannot be tapped.
• Highlighted: The button is currently being touched.

And there is a fourth state that may be required for buttons that can be toggled, or buttons which are part of segmented controls:

• Selected: The button has been toggled on can be tapped to return it to the normal (off) state.

It is important to ensure that the assets you provide for these states are identical except for the differences in visual styles. You should also specify the appearance of the text label (if present) for each state.

When delivering assets for production, you have a few implementation options, depending on the properties of the button.

Fixed-size buttons

Some buttons are always going to be a predictable size. Generally speaking, this applies to buttons that rely on iconographic imagery and therefore don’t contain any text. Buttons that contain text, even when presented at a fixed width in the UI, should always be stretchable in at least the x-dimension to accomodate changes to the label or localization.

For a fixed-size button, you can export the asset as-is. When you have a number of fixed-size buttons that share a single context, it is often easier for the developer to achieve the proper alignment if you choose a universal height or width for all buttons in that context.

What you need to provide: Just the image at the proper dimensions to be fitted into the UI, along with any applicable visual states.

Stretchable buttons

In Cocoa, it’s possible to take a button image and do automatic slicing to make it stretchable in either the x-dimension, y-dimension, or both. This is really nice for us because we don’t have to slice them up ourselves. Yay! It does have some limitations, though, and these are important to remember.

The way it works is that it takes the button image, then uses a pixel value for cap size to slice the image in code. The caps are then set aside, and the inner pixels are repeated in whichever direction is specified.

If you want your button to stretch in both directions, it must be a flat color or tiling pattern (basically, it needs to repeat elegantly in either direction). A gradient will not stretch properly. In the example above, the button can only stretch in the x-dimension and must have a fixed height. For most UI buttons this is perfectly acceptable.

Generally speaking, it’s best to provide UI assets in the smallest form possible, so try to reduce your image to include only the caps and whatever needs to repeat in-between.

What you need to provide: The button image for all applicable visual states and the cap size in pixels for each direction you need the button to expand in. In the example above, the cap size is 8px and it expands horizontally.

Drawing the button in code

So what do you do when you want a button that expands in all directions and has a gradient or some visual style that defies stretching? Well, chances are good the button could be replicated in code, although this can be significantly more work for the developer, is harder to modify, and sometimes incurs a penalty to performance. Always check with the developer before embarking into this territory.

This button is a good candidate for drawing in code thanks to that fancy highlight effect and its need to support arbitrary amounts of content. In this case, what you need to provide to the developer is not images but a set of parameters. Generally speaking, Cocoa can draw most of the things you can draw in Photoshop: shapes, gradients, shadows, even blending modes.

Here’s how you would describe the normal state of this button to a developer. You can access all of these parameters in Photoshop.

Shape: Rounded rectangle with a corner radius of 9px

Gradient (stop, rgb):
0%, white
49%, white
51%, (0.93, 0.91, 0.95)
100%, (0.90, 0.91, 0.93)
The gradient is linear with an angle of -90°.

Drop shadow:
Color: 100% black, 70% alpha
Distance: 2px
Size/blur: 4px
Angle: 90°

Inner padding: 15px on all sides. The text should be 16px bold and centered vertically.

Here’s a nice tutorial on creating a glossy button in code. It should give you a sense of how the process works and what’s possible.

What you need to provide: Detailed specifications with all the color, style, and shape information needed to recreate the button. Don’t forget to also provide specs for all relevant visual states.

Layout

When laying out a UI, you are usually dealing with content areas that are either of a fixed size and position, or variable size and position relative to contents. It can be very helpful to developers to describe these parameters as explicitly as you can, while also providing guidance on how to handle elements that reflow, expand, or change size & position.

What you need to provide: Pixel-level specifications about where UI elements (or blocks of elements) should go, as well as guidance for how to handle elements that move or change dimensions.

Masks & compositing

You can use any solid black shape on a transparent background to create a mask that can be applied in code. The mask can also use partial transparency, so you can actually achieve sophisticated effects this way if you want to get creative.

Generally speaking, it’s most useful for fitting dynamic content into a more general UI asset. For example, you could take an image of a CD’s album art and make it appear to be part of a prerendered CD case by using an image mask of the proper shape and size.

You should talk to your developer about how to implement artwork like this before you create your assets. Sometimes masking and compositing is the right approach, but sometimes it can come with a performance hit. Some cases would be better handled by generating the artwork in code and caching it for reuse.

What you need to provide: For masks, provide a black shape on a transparent background. For compositing, provide all the graphics that you need to layer together to create the object. Make sure they all have the same dimensions and are already aligned properly, as with the fixed-size buttons described at the beginning of this document.

Get creative and work together!

This really just scratches the surface, and if you take the time to learn about how graphics are implemented on the platform you’ll discover lots of creative ways to build a UI. I highly recommend sitting down with your dev (or someone familiar with the features of the platform) and talking through your ideas. You may discover options you hadn’t considered, and together you may come up with a plan of attack that is more beautiful, responsive and fast than it would be if you never put your heads together.

While the HIG has a lot of good information, it doesn’t go into the details of implementation, so I’m going to go through the process of how I would design a toolbar icon. I’ve chosen the iWork style because I really like how crisp and clear they are, and I think they are a good model to work towards.

So let’s take a look at the Pages toolbar.

Let’s take a note from Gmail and add a “Labs” button. This imaginary feature would take the user to experimental or even user-made plugins and macros.

Step 1: Pick your metaphor

First we have to think about what kind of metaphor would best represent this feature. The HIG offers the following guideline:

“As a general rule, a toolbar icon that depicts an identifiable, real-world object or recognizable user-interface element gives first-time users a clue to its function and helps experienced users remember it.”

So what makes me think of experiments? A beaker seems like the obvious choice. Anyone with high-school chemistry would know that symbol. But before I draw anything I should do some research. I fire up Google Image Search and Flickr with a search for “beaker.” It looks like I have a couple of choices for the shape of the object.

This is actually the kind I was thinking of, but I think these kind of beakers are generally only used in stock photography. I’ve never seen or used one like it in an actual lab. I got a lot more results for this type:

This is also what I remember from science class. The other beaker style is perhaps a bit more recognizable, but in the interest of realism (and not looking too Weird Science) I decided to go with this one.

Step 2: Figure out your sizes

So you’ll notice that Pages’ icons are very crisp, with 1 pixel outlines at both the large and small sizes. This indicates that the designers created two sets of icons, one for the large size and one for the “use small icons” size. If they had only used one and resized it, the line would not be 1 pixel exactly on both. Whichever one that was resized would have fuzzy lines. If you have the time to do this, it’s a nice way to ensure that your icons will look good no matter what your user chooses (you can also selectively reduce detail/complexity at the smaller size to ease recognition).

I’m going to design my icon for the larger size (32×32) and then size it down as needed for the smaller size. Figure out what the “large” and “small” sizes for your app are and keep these in mind. For a pixel-crisp style like this you’ll want to design at the size the icon will appear.

Step 3: Vector outlines

Open up your drawing program of choice. I prefer Fireworks for this kind of icon because it allows me to work with vectors while zoomed in to look at where the pixels actually fall. Go ahead and trace or draw the basic shape. Keep perspective and lighting (which should be top-down) in mind. The HIG says: “The perspective of a toolbar icon is straight-on, as if it is sitting on a shelf in front of you.”

At this point it’s a good idea to look at the fingerprint of your icon. That’s what I call the silhouette of the shape. Icons with different functions should generally have distinct fingerprints. Check to make sure the shape is recognizable and not too similar to anything it’s going to be adjacent to.

Step 4: Color, detail and shading

Now it’s time to fill in the colors and details. I like to zoom in pretty close for this step, but I keep an eye on the actual-size icon as I work. (In Fireworks you can do this easily by selecting Window > Duplicate Window.)

Be brutal about cutting unnecessary shading and details. Show only what you need to in order for the user to get what the icon represents. In the case of the beaker, I added two embellishments; the bubbles, which indicate that the green goop is “active” (and hopefully expresses something experimental and/or volatile) and the volume markers, which help make the beaker more recognizable.

Don’t be afraid to use bright colors here. As the HIG says, “Making each toolbar icon distinct helps the user associate it with its purpose and locate it quickly. Variations in shape, color, and image all help to differentiate one toolbar icon from another.” Also make sure the colors that should be consistent between the icons are – highlights, shadows and outlines fall into this category.

One more thing that’s actually quite important. Watch your alpha! Make sure that things that should be transparent actually are (like shadows, or in the case of the beaker the glass). I like to work with a couple of different-color backgrounds to switch between as I draw, including one that’s the standard Leopard window color to see what it will look like in production. You have no idea what this icon might end up on top of in the future! (Er, avoiding the obvious dirty joke there.)

Step 5: Flatten and pixel-tweak

Save your file so you have the originals handy if you need to resize the icon, then go ahead and flatten your vector layers.

Time to break out the pencil tool! Start looking for places you can simplify your lines. Be especially ruthless around anti-aliased corners, which will have a mess of pixels you probably don’t need and will make your lines look fuzzy.

This is also where I add in line shading and other small details. You may not see much difference in the big, zoomed in picture, but at actual size the tweaked bitmap (right) looks much cleaner. Especially note the simplification of the spout shape.

So after fiddling with the pixels to my satisfaction, I’ll go ahead and plug it into the toolbar to see how it matches the other icons.

Step 6: Generate other sizes as needed

So I have the large-size icon but I’ll also need a smaller one. The first thing I do is size the icon down and clean up the lines. Then I’ll go over the details and make sure that nothing is lost at the smaller size. I noticed that if the spout was made any smaller, it became difficult to distinguish the shape, so I actually made the top of the beaker identical in both sizes. I also redrew the volume markers to fit better on the smaller icon.

So there you go! It seems like a tedious process, and in some ways it is (depending on your style, you may be able to skip pixel-tweaking), but once you get into the right mindset it’s not so bad. You just want to make sure you’re thinking small and keeping an eye on consistency.

And yet, there is still one large (and vocal) market segment waiting for rescue from their corporate overlords. I’m talking about professional designers, photographers and artists, who continue to be slaves to Adobe and its golden goose, Photoshop.

Now, there are several independent apps out there that offer some of the functionality of Photoshop. Many of these are quite good: Acorn, Vector Designer, Pixelmator. But no graphics professional is going to use any of these apps instead of Photoshop, despite the much lower price tag. The problem is not that the apps don’t have useful features. It’s that they haven’t managed to target a segment of the population that uses Adobe software to do their job and present them an alternative with the feature set they need.

Well, I’m here to help. I’m presenting four professional user archetypes of Photoshop along with what features they would need to switch to another application. Note that they rarely overlap. Hopefully this illustrates the futility of appealing to all of these people at once. Pick one segment of users and fine-tune towards their needs.

Pierre the Painter

Pierre and others like him use Photoshop for something we call digital painting. Their typical workflow involves scanning a sketch or sketching onscreen with a tablet, then inking and painting the sketch with different kinds of brushes. They rarely if ever use vectors because they don’t have the same organic qualities as natural media, so they usually work at a very high resolution to allow for printing and exporting at a variety of sizes.

Essential features:

Brush editor: Size, shape, opacity, blending, pen pressure. The more options the better. Brushes are the crux of everything they do.

Peripheral support: Must work seamlessly with their pen tablets and scanners.

Color tools: A fully featured and prominent color palette as well as an eyedropper tool that they can easily swap to from the brush. Color proofing tools are important for artists who want to print their work.

Smudge: Aids blending, should ideally have similar options to the brush tool.

Layers: Pierre uses layers and layer blending to build up a painting from bottom to top. Changes to layers should be in the form of layer properties – in other words, you can go back later at any time and add/remove effects. (We call this non-destructive editing.)

Wish list:

Canvas texture: Natural media textures that affect brush dynamics on the “canvas.”

Line correction: Automatic line smoothing, perhaps as a brush option, would help correct a shaky hand when inking bold lines.

Where others have done it right:

Take a look at the oekaki phenomenon. Oekaki typically uses a simple web-based illustration tool and enjoys massive popularity in Japan and all over the world. Even though the feature set is relatively small, a creative artist can achieve a wide range of visual effects.

Corel Painter is also quite good, but much more complex and just as crufty as Photoshop in some ways.

Dana the Designer

Dana uses Photoshop primarily to create mock-ups and layouts, usually involving a fair amount of text. She uses vector tools to draw shapes and embellishments, typographic tools for text layout and headings, and bitmap tools to add images to her design. Assembling all the various pieces of a design into a cohesive whole means she needs to be able to work easily with many different kinds of graphic elements.

Essential features:

Robust typography tools: Design is 90% typography, so the more options here, the better. Kerning, anti-aliasing, conversion to paths – all the usual suspects.

Layers: The ability to move, group, lock, name and otherwise manipulate layers of all kinds is critical.

Layer effects: You should be able to add basic effects like stroke, drop shadow, transparency, etc. to any kind of layer. Same for blending effects. But keep it non-destructive! Anything you add should be removable later.

Basic vector tools: A pen tool, simple shapes and lines with the option for stroke/fill on any of them. Basic pathfinding tools (join, union, add/subtract) are a bonus.

Image masking: Designers often don’t require extensive bitmap manipulation (level correction, etc) but do need to fit these images into shapes in their design.

Wish list:

Grid tool: Rules and guides are a given, but additional tools to help you set on a grid with pleasing proportions would be great.

System anti-aliasing: For web designers. A text tool that emulates the system anti-aliasing you’d see on various kinds of computers.

Where others have done it right:

Fireworks (originally Macromedia, now Adobe) is a good example of an app with a boiled-down feature set for designers. It includes “lite” versions of many tools you can find in Photoshop or Illustrator. Despite not being as powerful, many designers prefer it for its relative simplicity.

Patrick the Photographer

Patrick uses Photoshop primarily for post-production work on his photographs. He imports an image from his camera, opens it at a high resolution and does level/color tweaks on the image. He may also use some limited drawing tools for clean-up.

Essential features:

Level/color correction: All the usual suspects for photograph enhancement. Non-destructive please! If you add a correction, you should be able to edit or remove it later.

Heal and clone: Used for cleaning up artifacts and photo manipulation.

Basic drawing tools: Airbrush-like drawing tools with blending options are helpful for enhancing a subject. Used often on pictures of models.

Quick mask: Easily isolate a subject or portion of the photograph for editing. The ability to have alpha properties on a selection further enhances this tool’s usefulness.

Wish list:

Automatic depth-of-field blur: Detect elements in the foreground and blur elements in the background. Useful for when you are working with low-quality photographs.

Photo browser: Interface seamlessly with the user’s library of photographs.

Where others have done it right:

Of the four archetypes, this one enjoys the best coverage on the Mac. Both Aperture and Pixelmator do a nice elegant job of working with photographs. Both of these are reasonable alternatives to Photoshop for professionals.

Ian the Illustrator

Illustrators and icon designers fall into the same group and generally need the same tools. They rely almost exclusively on vector tools to do their work, and the more powerful the better. They may work from initial sketches but otherwise rarely do hand-drawn work with a tablet.

Essential features:

Powerful vector tools: A well-designed pen tool, point/handle editors and pathfinding tools are all absolutely essential. Any path, once placed, should always be fully editable.

Gradients: Standard gradient fills are a must have, but many will also want mesh gradients or gradients that follow a path.

Export to standard file formats: One of the reasons illustrators work in vectors is so the final output can be resolution-independent. You should be able to export to a variety of standards like EPS, SVG and PDF. Bonus if you can export to AI as well.

Bitmap layer for tracing: Your canvas should be able to support bitmap layers so you can easily trace over photographs with the pen tool.

Wish list:

Icon preview: Automatically generate a view that lets you preview your icon at a number of different sizes on various backgrounds.

Hand-drawing tools: Tools that convert input from a pen tablet to paths are great, but even better when you can use different kinds of brushes that respond to pen pressure.

Where others have done it right:

Sadly, I can think of no professional-grade vector illustration tool. Some swear by the open-source app Inkscape, but I’ve never seen it used in professional circles and don’t have much personal experience with it myself.

Say what you will about Photoshop, it’s pretty amazing that one single app services all four of these archetypes. However, the flip side of that is that for any one of them, 75% of the app’s features are totally useless. Specialization and customer service is where independent software is strongest. If you can align yourself with your users, and if you listen to their needs, you will find yourself with a very willing audience. We all hate paying $1k+ to Adobe for a bunch of features we never use. We’d much rather pay $50 to an indie developer for exactly what we need.

I think the problem many people experience when trying to learn CSS is that they jump straight into the hard stuff (layouts, box model, browser compatibility) without learning the basic structure and behavior of the language. Here I’m just going to present you with a simple document and show you how to style the text on the page using CSS. You’ll learn about the different kinds of selectors and how inheritance behavior works, and it will hopefully provide you with a framework for learning the more advanced stuff.

It’s easier than you think. So leave your mental blocks at the door and come on in.

Style: It isn’t just for the design kids

So you have a document. Let’s call it boring.html. Go ahead and copy this into a text editor of your choice:

<html>
<head>
<title>Boring-ass document.</title>
</head>
<body>
  <h1>Don't mock my pain!</h1>
  <h2>by a webpage</h2>
  <p>I know I'm a boring ol' document.</p>
  <p>But surely you have room in your life for <a href="#">someone like me?</a></p>
  <p>I'm just <em>so</em> lonely...</p>
  <p>Will you go out with me?</p>
</body>
</html>

Pretty straightforward, huh? If you don’t know what you’re looking at, start here. Come back when you’ve mastered the art of marking up a bunch of emo rambling with HTML. (LiveJournal is a good place to practice this.)

Now then. Open the page up in a browser and you’ll see why it’s so down in the dumps. Looks pretty crappy, doesn’t it? A little bit Class of ‘96. I’m not hating on Times New Roman, but a new font would go a long way towards getting this guy a date to the prom.

If I said you had a great <body>, would you hold it against me?

Go ahead and stick a style tag in the head of your document. That’s where we’ll house our CSS. (You can also link to an external CSS file, which is great for keeping the same styles across many documents. But we’re going to keep it simple for now.)

So we want to change the font across our document. We want this change to be global, right? Don’t want to see Times New Roman creeping in where it’s not wanted. It’s a good thing we’re using CSS for this, because this grand, sweeping vision can be accomplished with one line in your style tag.

<style>
body {
  font-family: Arial, sans-serif;
}
</style>

Save. Refresh. Ta-da! You should see that all of the body text has changed to Arial. Now then, what exactly did we do?

As you probably already know, an HTML document is essentially a tree of nested nodes. p tags are nested in the body tag which is nested in html. The default stylesheet applied by browsers is pretty intelligent about when to inherit CSS styles from parent nodes. An attribute like font-family or font-size will be inherited down through the tree, so if you apply font styles to the body tag you will see those styles applied to the entire document. Neat, huh? You will usually set your base font styles on the body tag for this reason.

This is called a type selector.  You can do this with any HTML tag: body, p, em, span, td, div. The sky’s the limit!

…You’re just not my type

So let’s go back to our body styling. The font size is a bit big for my tastes, so let’s bring that down a little. (Now, I should note that there are a great multitude of ways to size text, including a few that are more elegant than what I’m showing you here. For the sake of your understanding and your sanity, I’m going to sidestep the issue for now and simply use pixel values. If you really want to know the gritty details, thar be dragons beyond ye hyperlinke.)

<style>
body {
  font-family: Arial, sans-serif;
  font-size: 13px;
}
</style>

Hey, look at that. Much better. “But Anne,” you whimper. “Why didn’t the h1 and h2 inherit the font-size property and become 13px as well?” Worry not, youngling. I said the default stylesheet employed by the browser was pretty smart (just like you). It inherits the base font size, then sizes the headers with relative values. h1 is 180% of the base size, h2 is 160%, and so forth. This way the visual hierarchy of the headers is preserved, even when you change the base font size. And all without you having to individually define each one. Nifty, eh?

Play around with this a bit. Try different tags and attributes and see what happens. Be amazed at how pretty you can make this page without ever having to touch a class selector. (We’ll get to those if you haven’t heard of them. But chances are you have, and they annoy you.)

Here’s what I came up with:

<style>
body {
  font-family:Arial, sans-serif;
  font-size:13px;
  padding:30px;
}
h1 {
  border-bottom:1px dashed #ccc;
}
h2 {
  font-style:italic;
  font-size:14px;
}
a {
  color:#CC6699;
}
</style>

Hey, this isn’t so hard!

The one time in your life class will actually be useful

“But Anne,” you whine. “This is all well and good, but what if I don’t want to change every p tag on the page to style one block of text?” You astute observer you. It’s very true that sometimes you need to apply a style to a specific object or element. Why don’t we give that a try and see how it’s done? For this we’ll bring out the power of the class selector.

Our emo web page is looking pretty good, but it needs more drama. Let’s take that last paragraph and dress it up a little. If we want to isolate a section of text or a specific tag (instead of all tags of that type), we have to assign a class to it in the HTML. Let’s go back to our markup and fix it up:

<html>
<body>
  ...
  <p class="proposition">Will you go out with me?</p>
</body>
</html>

You can name your class whatever you want, but remember what you called it when you return to your CSS declarations. Go ahead and add the class selector the same way you’d add a type selector, only this time preface the name with a period to indicate its classiness.

.proposition { }

The styles you define for .proposition will apply to all elements you add the class=”proposition” attribute to. In this case, it’s just one paragraph, but it could be any number of objects on the page. Classes are pretty laid back that way.

So now that we have this in place, we can style that paragraph independently from the other p tags on the page. Give it a shot.

.proposition {
  color:#3399FF;
  font-size:18px;
  font-weight:bold;
}

Pretty radical. There’s no way this guy’s going home alone now.

I don’t care how big your mustache is, I’m gonna have to see some ID

There is one other kind of selector you can use to style a specific element (or group of elements, if you remember inheritance), the ID selector. In this case the CSS looks for the attribute id on the HTML tag. On the surface level it looks and behaves a lot like a class. The difference is that an ID must be unique to the document — There Can Only Be One. Therefore, IDs are usually reserved for high-level elements that only appear once on any given page. Most commonly these are layout elements like header, footer, navigation, etc. Since our emo page doesn’t have much of a layout, we don’t really have a need to use IDs here, but for demonstration’s sake let’s change the “proposition” paragraph from a class to an ID selector.

<html>
<body>
  ...
  <p id="proposition">Will you go out with me?</p>
</body>
</html>

In the CSS you’ll have to change the style declaration from .proposition (which denotes a class) to #proposition (which denotes an ID).

#proposition {
  color:#3399FF;
  font-size:18px;
  font-weight:bold;
}

Everything should look exactly the same. When to use IDs and when to use classes is a tricky question that is best learned with experience. The more complex your documents get, the more you’ll have to think ahead and plan the structure of your data. The goal is to make your life as easy as possible (CSS is a lazy designer’s best friend). In general, you will use classes for most of your actual styling. IDs really shine when you assign them to div tags that hold your content in neat little buckets. Then you can make good use of descendant selectors – a bonus, super-secret ninja technique that allows you style types and classes differently within the different buckets. For example, these two rules will make the a tags in the header black, while the a tags in the footer are white.

#header a {
  color:#000000;
}
#footer a {
  color:#FFFFFF;
}

And these could both be different from the global a color, which could be anything. It could even be puce.

A note about good design

One of the trickiest things to learn about CSS is how to manipulate selectors, the cascade, inheritance, and specificity to isolate portions of your HTML document while keeping the document itself as bare-bones as possible. It’s true that this kind of thing works:

<p class=”main”>Marco de Polo was a most amazing fellow. He wrote many books, including
<em><span class=”gray”>Summer Fun, or How To Ensure Every Child Ever Knows Your Name For The Rest Of Time</span></em>.</p>
<p class=”footerline”>Copyright 2008, Not True Magazine<p>

You can simply define all those specific classes in your styles and be done with it. But both your HTML and your CSS will bloat, it will be difficult to maintain, and you will too often find yourself wondering what the .littleblue class was for.

If you’re smart about things, you can reduce your HTML to this:

And you can achieve exactly the same amount of control over the different elements in the document with CSS. p tags within the #content block have a certain style. em tags are colored gray. The #footer block has smaller text and a border on top. Easy to do, easy to read, easy to change.

Go ye forth unto the world of the web!

I’ve really just scratched the surface here, but you should now have at least a fundamental idea of what you’re working with when you use CSS. If you want to learn more complex techniques, like using CSS for layout or positioning, there is a wealth of excellent tutorials out there. Here are just a few:

Starting with HTML + CSS (W3C tutorial)
CSS-Discuss (Wiki with many tips and tricks)
Quirksmode (Compatibility charts and reference for advanced CSS)

And the next time some hotshot web 2.0 designer is bragging about the CSS on his blog, you can nod sagely and say “CSS? Yes, I know a little.” And then you can splash your drink on his trendy glasses. Do it for me?

Chapter One: Rates and Finances

Rule #1: You have to budget.

The first thing you should do (nay, must do) is to sit down with your favorite spreadsheet application and write up a budget. Figure out what your monthly expenses are, how much spending money you’d like to have, how much you want to save, and the cost of your health care (either estimated expenses or private insurance if you’re buying it). Add them all up and divide by 0.6 to account for taxes. Voila! That number is about how much you should aim to earn per month.

Remember this number. Cherish it. It’s your new best friend. Look at it when you get anxious about money – it will comfort you.

And I hope you caught that bit about taxes. You don’t have a company withholding money for you anymore, so you’ll have to be responsible in order to be ready when April comes around. Don’t worry though, I’ll explain how to prepare for that in a little bit.

Rule #2: Don’t work forty hours a week.

Now, what I mean is that you shouldn’t work forty billable hours a week, especially if you maintain multiple clients at the same time. There are a few reasons for this. First, people are simply not productive for that much time. It’s required in an office because of the inevitable inefficiency that happens in any company of reasonable size, but you are independent now and you can be a lot tighter about when you work and when you don’t. Work when you’re productive, rest when you’re not. What a novel idea!

Second, you should plan to spend about 5-10 hours a week doing off-the-clock work. This includes finding potential clients, writing estimates and contracts, and networking with your peers. This is absolutely essential to your success and if you don’t give yourself time to do these housekeeping tasks it won’t be long before you’re burned out and signing up to flip burgers at the local In-N-Out.

Rule #3: Be pragmatic about your rates.

Many people struggle with setting rates, especially as it can be difficult to figure out what others in your field are charging. A good starting point is to take your current salary, convert it to an hourly number, and multiply by 2. (Note: a commenter below points out this should be closer to 2.5 or 3. This is more in line with what your company pays for you and is necessary if you have overhead to cover. When in doubt, take the higher multiplier. It is far better to start high and adjust down than to start too low and have to scramble to make up the difference.)

Divide it into your magic number from Rule #1, and then divide by four to find out how many hours a week you’d have to work to make your target. You should be aiming for 20-25 hours a week, so adjust accordingly. If you want to work less, you have to charge more. If you want to (or have to) charge less, you have to work more. Work out an ideal balance that you’re comfortable with.

Now get out there and find some clients. The only way to find the sweet spot with rates is to do some actual work and collect data. Note the kinds of companies that you’re working for — you will probably find that smaller companies have less money in their budgets but more work to offer. Bigger companies often come with good rates but a lot of overhead. Many consultants have a sliding scale depending on the size and visibility of the company. Over time you’ll naturally develop a small range that gives you some wiggle room for negotiation.

Rule #4: Don’t be afraid to negotiate.

When quoting rates, always start high and negotiate down. I’m going to teach you a trick of sorts that can be used when a client is gunshy about your rates. Read the interaction below for an example of this trick in action.

Let’s go over what has just happened. First, Joe now has a data point about his rates. XYZZY was a little nervous about $75/hour. That doesn’t mean he should lower his rates for all clients, of course. But it does help inform his decisions about XYZZY or companies similar to it in the future.

Second, let’s discuss why Joe got a good deal even though he lowered his rates. Notice that he negotiated from an hourly rate to a flat rate – $1,600 for the whole job (up to 25 hours). In some ways this is a false discount for the company. It’s only $65/hour if he takes the full 25 hours to do the work, and if Joe is smart about how he uses his time there is a good chance it won’t actually take that long. He was also careful to quote the upper bound to the client. If you think a project will take 20-25 hours, always quote them 25. It’s good “potentially saving your ass” practice.

So let’s say he really boogies and it takes him 20 hours to finish the job. Doing the math, we find out Joe got $80/hour for that work, even higher than his original estimate. And the client is happy because they got it done on their budget. Everyone wins.

Now let’s say it really does take him 25 hours or more and ends up being $65/hour. It’s not such a good deal anymore, right? You might be surprised. Keep in mind that every client you have brings some amount of unbillable overhead in the form of communication, estimates, and contract writing. This means there is an advantage to taking fewer, longer projects. The fact that Joe now knows he will get at least $1,600 for his time is worth something.

Let’s take a detour and quantify what a longer-term contract is worth. I usually estimate about 5 hours of overhead for a new client. That includes the work I do to get that project rolling as well as the work I have to do to find them. At Joe’s rates this is about $375 worth of his time. He’s essentially saving himself this money in taking a steady project, so it is still worth it to him even if he has to lower his rates a little.

Of course, this isn’t quite as cut-and-dry as I’m making it out to be here. There are many factors that go into what you charge for a job. Here are just a few possible scenarios:

1. Web design for John’s startup. John is a friend of Joe’s and his company doesn’t have a lot of cash. Joe decides to discount to $60/hour.

2. Building a CMS template in PHP for a local school. Joe really hates PHP and quotes $120/hour, because that’s what it would take for him to actually do it.

3. Design contracting for BigCorp, Inc. Joe raises his rates a little to $85/hour, because he knows the large company can afford it and he has to deal with their annoying marketing team.

The more work you do, the more you’ll know how far you can push different kinds of clients, and how much you believe your time is worth. Use your monthly magic number (see Rule #1) as a guide, and remember that you’re free now to make your own choices about what you earn. No more begging for raises – you just have to earn them yourself.

Rule #5: If you’re not turning away clients, you’re not charging enough.

This is related to Rule #4. Negotiation is good and can improve your relationship with the client. However, if you find that you’re negotiating a lot and not often getting jobs at or above your target rate, you probably need to toughen up a bit and push harder for the higher rates. Some clients won’t be able to afford you and will go elsewhere. However, assuming your rates are fair and appropriate for your experience and work, some will stay and pay it. You never want to be in the situation that you are known for your low rates. Competing on price is the kiss of death.

Think of it as a form of supply and demand. The more you work and the more experience you have, the more your time will be worth. Your rates will go up over time to match the increased demand for your services. Think of it as a promotion, indie-style.

Rule #6: Give yourself a salary out of the “company” bankroll.

One final rule that will help keep you prepared for tax season. You probably want to set aside about 40% of everything you earn for taxes. One way to make sure that you do this diligently is to deposit your checks into a “company” bank account. (You did set up a fictitious business name, right? Of course you did!) Give yourself a “paycheck” out of this bank account once or twice a month, making sure to leave at least 40% of what you earned. If you find that you need to take out more than that to cover your expenses, you need to go back to Rule #1 and revisit your budget. Maybe you need to work more hours or ask a higher rate in order to make your target.

If you’re feeling saucy, you can use the company bank account for business-related expenses as well. Come up with a fair wage for yourself and leave everything else to reinvest into the company — purchasing advertising or office supplies, for example. Working for yourself takes discipline, especially financial discipline. Keeping your accounts separate is a good way to establish a mental boundary between what you earn and what you actually get to spend.

And as a corollary, doing your taxes as an independent is extremely complicated. You will probably want help in the form of a small business accountant. They can help you plan, deal with expenses and invoices and keep your taxes under control.

***

Well, that was a hefty chapter! But finance is a hefty topic when it comes to being your own business. The next chapter will cover writing contracts, details of invoicing and payment, and making sure your butt is covered legally. Feel free to leave any comments or questions you might have and I’ll try to answer them here. Angry tirades also accepted. Everyone is welcome!

That’s all for now. See you next time for Chapter Two: LeChuck’s Revenge.

I myself grew up quite pudgy and have always been so. I was a stubborn mule about it too. Even though I knew it was unhealthy and I was unhappy looking the way I did, I refused to do anything about it, both out of laziness and the ridiculous notion that being concerned with my physical appearance was somehow shallow. For years I trudged on this way until I realized, as many people in my aging generation are starting to, that my lifestyle could go on forever, but my body certainly wouldn’t.

So earlier this year I made it a resolution that I was going to get myself to a healthy size and stay there. I signed up with a clinic specifically designed to treat obesity, and started a four month program over the course of which I lost about forty pounds. By no means am I out of the woods yet; any behavior change takes time, and I’m attending courses on weight maintenance for the next six months just to ensure I don’t return to my old Mountain Dew-swilling ways and gain it all back.

It has been an experience the likes of which I can’t adequately describe here (but I’m always happy to talk about it if you ask). But I have learned a few basic things that I thought I would share, as someone who’s been through it.

Five things you probably already know about weight loss (so no more excuses, right?):

1. Reduce the number of calories you eat. I don’t care how you do it – give up sugar, give up fatty food, portion control. Whatever is easier for you. Your body only needs a certain number of calories a day to keep you going (approximately your weight in pounds times ten) and if you routinely exceed this number, it will start storing the excess energy as fat. Keeping a food diary is immensely helpful – I highly recommend calorieking.com.
2. Exercise frequently with low intensity. Find something easy and enjoyable that you will do every day for 20-30 minutes and do it. This will help keep your body burning fat for energy instead of muscle. Just don’t push yourself too hard or you’ll actually start burning glucose stores instead of fat, which will only make you feel hungry.
3. Drink at least 2 quarts of water a day. Not only does it help you fight fatigue (a common symptom of dehydration), but it also serves to make the fat-burning process more efficient. Flavored water counts, but black tea and coffee don’t – and watch the caffeine.
4. Eat lots of lean protein. White fish and white meats like chicken and turkey breast are low-fat and relatively low-calorie. Even better, they are loaded with protein, which will help you feel full even if you’re cutting calories.
5. Don’t let yourself get really, really hungry. If you’re dieting, you will be hungry from time to time. What you want to avoid is the situation in which you let yourself get absolutely starving, and then start making bad decisions about food. Eat a healthy snack in between meals, or eat smaller meals more frequently.

I won’t lie and say that it’s easy, but it does get easier. 90% of the battle is education. If you’re interested in learning more, I recommend The New Fit or Fat and Thin for Life. Both are fairly technical and don’t have too much of the usual pseudoscientific nonsense.

And if you’re trying out a Wii Fit, let me know how it works for you. :)