It took me years to realize how much time I would save by setting up a default type styles sheet for my web design work. It wasn’t until I read an introduction to Ruby on Rails in 2005 that I got the whack on the side of my head that woke me up. The concept that broke through my time wasting behavior was DRY. Yes, technical writing is usually dry, but in this case it is an acronym for don’t repeat yourself.

Obvious, you say; and you’re absolutely right. Perhaps it was simple laziness that stopped me from seeing the light. It doesn’t matter. I finally realized that it was time to write out some the common CSS selectors and some standard values. Now at least I am being smart lazy buy using a standard type styles sheet instead of stupid lazy by needing to recreate the same content over and over.

What follows is my default CSS style for HTML with many and probably excessive comments. Most of the less than obvious additions are intended to handle Internet Explorer’s (IE) less that stellar handling of CSS. I won’t include any outright hacks but you will definately see some kludges, starting with html.

Technorati Tags: puppy

html {
font-size: 100%
} /* this may not be necessary anymore but it handles an old IE problem with displaying combinations of percent and em sized fonts correctly. */

* {
margin: 0; padding: 0;
} /* This sets the default margin and padding of all page elements to 0 giving nice control over every page element. I can eliminate a lot of head scratching when trying to figure out why things don’t line up. Zero it all and start from scratch. */

body {
color: #333;
/* Dark gray text against a white background. It’s readable without the starkness of pure black on white. Chances are this will be different on every site but this starts us out. These are the shorthand color notations. */
background: #fff;
font-size: 62.5%;
} /*This is a clever idea that sets the basic font size in modern browsers to something approximating 10 pixels. From now on all font measurements will be specified in em’s, a relative measurement that equals the size of a capital M. All page elements (almost) should now be 1em and will need to be individually specified. This allows us to over-ride the default browser style sheet and replace it with our own. */

th, td {
font-size: 1.2em;
} /* Another IE kludge. It doesn’t inheret font sizes from the body as it should. Ideally you would include all text within table cells in a p tag. Practically, I forget sometimes, especially when I’m populating a table dynamically. */

th {
font-weight: bold;
text-align: center;
} /* This is probably redundant but explicitly setting all values is what this style sheet is about */

h1, h2, h3, h4, h5 {
font-weight: bold;
font-family: Georgia, Times, serif;
/* Obviously this is arbitrary but if I put it in to start with I won’t forget to set the font family. Change to suit. A shorthand version would be font : bold georgia, times, serif;*/
margin: .1em 0 .5em 0;
/* a tiny top margin and a smaller bottom margin than default. 0 margins for left and right *}

h1 { font-size: 2.4 em; } /* Twice the size we’ll use for paragraphs. Remember that all font sizes have been reset to about 10 px. This makes the h1 element about 24 pixels large. */

h2 { font-size: 2em; }

h3 { font-size: 1.7em; }

h4 { font-size: 1.4em; }

h5 {font-size: 1.2em; }

p {
font-size:1.2em
/* This makes the default font size about 12 pixels, which is a good compromise between compactness and readability
font-family: verdana, helvetica, sans-serif;
/* Again, this is arbitrary, but sans-serif fonts tend to be easier to read on screen than serif ones. It also stands out nicely against the serif Georgia */
line-height: 1.5em;
/ * to create some breathing space between lines in print design this is called leading. 1.4em is also nice. */
margin: .1em 0 .7em 0;
/* top margin very small , left and right margins 0, bottom margin a little less than browser default */
}

li, li li, li li li, {
font-size: 1.2em;
line-height: 1em;
margin-bottom: .5em } /* All the li selectors are included to keep list elements from becoming progressively smaller as they are nested. That’s a gotcha when using relative sizes for font display. Three levels are all that you would practically encounter and I didn’t use the li * selector because I sometimes include other HTML inside of lists */

ul {
margin-left: 1.8em;
} /* Remember that we zeroed out all margins and have to specify them for each element. This is a good average value */

ol {
margin-left: 2.1em;
} /*Ordered lists need just a bit more margin */

blockquote {
margin-left: 2.2em;
padding: .2em;
background: #efefef;
border-left: 1px dotted #ccc;
} /* First, the left margin. That’s all that’s really needed here. The other selectors are one common way to set blockquotes off from the rest of the text. This gives them a very slight background color and left dotted border. Obviously this is a great place to set your own styles. Again, I include a default to so I don’t forget. */

dl {
font-size: 1.2em;
} /* New element. Need to set font size */

dt {
font-weight: bold;
margin-bottom: .4em;
} /* I like definition terms to stand out, hence the bold font-weight. The bottom margin is to separate the term from its definition.(The dt margin is not additive with the top dd margin. It will be .4em not .6em) */

dd {
margin: .2em .5em .4em 2em;
line-height: 1.3em;
} /* just setting the breathing space around the definitions */

input, select {
font-size: 1em;
} /* This is my personal preference. Your milage may vary */

label {
font-size: 1.2em;
}
/* You are using labels for your form elements, aren’t you? */

hr {
margin: .2em .1em .6em;
}
/* Just a little breathing room for the horizontal rule */

cite {
font-style: italic;
}
/* Probably redundant. Here for completeness */

abbr, acronym, .help {
border-bottom: 1px dotted #333; cursor: help;
}
/* A little touch that sets acronyms and abbreviations a little dotted underline and possibly a tool tip. I’ve added the class help for times when I want to define something. is used in conjunction with the TITLE attribute on an ABBR or ACRONYM tag, or a SPAN with class=”help”, to create an underline effect that is different from the hyperlink underline. Changing the cursor to “help” implies that the word is not clickable, and the TITLE attribute expands the abbreviation or acronym.*/

img {
border: 0;
}
/* Older browsers will place a border, in your link color, around a linked image. Just say no. */

a:link {
color: #036;
text-decoration: underline;
}

a:visited {
color: #603;
text-decoration: underline;
}

a:hover {
color: #900;
text-decoration: underline;
}

a:active {
color: #c66;
text-decoration: underline;
}
/* These link attributes will almost always end up being changed. If they are here I’ll always know where to find them. BTW use them in this order. Having everything in the same place every time makes things simple. I guess the complete instruction would be KISS; DRY. (keep things simple stupid; don’t repeat yourself) */

/* This concludes the default HTML section. Not that many elements, are there? Below are selectors and classes that I usually throw in for completeness. */

.imageleft {
float: left;
margin: 2px 4px;
}

.imageright {
float: right;
margin: 2px 4px;
}
/* With strict XHTML we aren’t supposed to use the img align attribute. Creating a couple if classes that float the images left or right lets us achieve the same effect and validate. The margin setting replaces v-space and h-space. These classes are only used for image placed in the document flow, not design elements, so I will assume they need the space. */

.floatleft {
float: left;
width: 200px;
padding: 5px;
border: 1px solid #ccc;
text-align: center;
}

.floatright {
float: rigcht;
width: 200px;
padding: 5px;
text-align: center;
}
/* What’s the difference between these and the .imageleft/right classes? These floats are intended for callouts or images with captions. Notice the explicit width, border, text centering and padding. The widths and borders are arbitrary and will be adjusted for each layout, or not. They are there. */

.clearing {
clear: both;
height: .1%
}
/* Once we start using floats or even right and left aligned images it becomes useful to be able to clear text below the floats or images. Depending on your layout you may also or need to use clear-left or clear-right. */

td { padding: 3px; }
/* Again, this is using CSS to replace a depreciated attribute, in this case cellpadding. If you want cellspacing use margin instead of padding, or both if you want both. I’m assuming here that you are only using tables for data. If you’re still laying out your site with tables, obviously you would want to set margin: 0; padding 0; for table, th and td. This should inherit from the body * selector, but isn’t reliable in all versions of IE. It’s also usually best to give each table a unique id or at least a class for setting width in CSS instead of HTML. */

.red {
color: red;
}

.green {
color: green;
}

.smaller {
font-size: smaller;
}

.larger {
font-size: larger;
}
/* It is often useful to have a couple, or more, font sizes and colors pre-defined. Some people use .warning or .caution for the .red class and .success for .green. It is supposed to be express the meaning in the code. Whatever. Colors for warnings should be supplemental information, not something you rely on.
With a good friend who is an avid web user and who is quite color blind, I’ve learned to not rely on color for warnings. Color is good information for most of us but shouldn’t be the only indicator of problems. But still colors can be helpful supplements, or just fun. We all know that red shoes make us run faster, don’t we? My boss’ 10 year old daughter told me that recently. It’s helpful to define a couple of color classes that compliment your design and include them in the style sheet.

I have set up content management systems for a number of client, and have clients who use Adobe’s Contribute. With a little extra work I can disable all their font size and color changing ability and only leave them with my choices of color and size. Never trust a client’s good taste or sense. Give them a couple of customization choices and they will normally be happy and won’t cry for more control.

/* ************************* */

That’s pretty much it for text display. CSS layout is another subject, as is CSS for forms. Fortunately the parts are additive. Start with text display. Customize your own text stylesheet and save hours on upcoming projects. And having a pre-defined stylesheet will help insure that you don’t forget something that will need fixing later.

I’m using Yahoo’s Grids for my basic CSS layout. Their system is a little verbose but seems pretty bulletproof. The Grid templates will give you a solid page layout but you will still need to style them. That could take some hours the first time out. Still, it seems the best generic CSS implementation around. You might want to check that out.

If offer one comp only, the client seldom accepts it without a major overhaul. I learned this the hard way. But if I do two, often the first comp I do is the one that’s chosen, and any requested changes are usually fairly minor. The client is never explicitly told that these are they only get the two choices. I typically put jpegs up on a server and send an email with links, saying, “Here are two ideas. Which do you like.”

Almost always. they give approval for one or the other and don’t ask to see any more.

However, if offered more than two choices, the client is less likely to like any of them and ask for more ideas.

It takes about a third to half again longer to create the second comp than the first. I’ve already created or gathered reusable element like product photos, logos, text and so on. And when I go in “design mode” I get into a kind of flow that takes an hour or two to really sink in, but once I’m in it designing is easier.

But making multiple comps is still time consuming and there has to be a limit to how many I’m willing to do without it charging a lot more. So, it’s two comps and we’re both happy.

I seriously doubt that the quality or appropriateness of my designs changes depending on how many ideas I spin out. Like most experienced web designers I’ve developed biases that show up in my work. Some of those biases are in coding practices. Some have to do with usability. And some work their way into my designs. You might call it a style or a rut depending on whether or not you like the work.

I try to make the design reflect both the personality of the client or company the site is for. I try to be flexible and fresh and have sites look different but another experienced designer would be able to pick my work out.

So why would a client be happy with two choices but less so with one or three plus? I’ve been wondering about this since I first noticed it a couple of years ago.

It probably has to do with people needing to feel that they have a choice but not really wanting to be bothered with too many. No, that’s not fair. I don’t believe that people are avoiding choice. It’s more that binary decisions are much easier to make. The more choices there are the more we shift thinking modes.

Ask your partner or date, “Would you rather go to a movie or go dancing tonight?” and you’ll probably get a quick answer. Say something like, “Say, there are a lot of things to do tonight. Would your rather go to a movie, or maybe dinner? Or there’s an interesting reading by this author you like. Hey, there’s a ‘moonlight madness’ sale at the mall. Or, maybe we could go see Bill and Mary. You know it’s been weeks since we’ve gotten together.”

After a barrage of options like that, don’t expect a quick answer, or that any of the choices will be the one finally decided upon. Once we get in the mode of considering all possible options the mental gears shift and it becomes much more difficult for most people to either settle on just one or be as satisfied with the choice. A large portion of “what if” gets thrown into the mix. And “what iffing” can take a lot of time and effort. Essentially, the more choices there are the harder it will be to settle on any one.

Sales people call this binary option, forced choice. When making an appointment don’t say, “When would be best for you?” Say, “Would Wednesday at 3:00 or Friday at 10:00 work best for you?” If either of those times is open most people will go for one of the offered choices. If it isn’t, they’ll often quickly volunteer a another time. If you leave the question open ended, you’re much more likely to get a vague answer or hear, “I don’t know. I’m pretty booked right now.”

You’re still giving people a choice. You’re not closing the door to other options. You’re just not mentioning them. If it’s important enough the client will let you know.

But, the truth is, as a marketing tool, a website doesn’t need to be perfect. It needs to be attractive, appropriate for the intended market or audience and meet certain usability standards. Any of hundreds of variations would probably work just fine for any given site. Getting a client involved in too many options is doing neither of you a favor.

I’ve spent years building websites. It’s my job. I’ve studied design theory, web standards, and the esoteric of menu placement, typography and dozens of other details that the average client couldn’t possibly know about. Chances that my designs, as would the designs of another experienced designer, will be more effective as a website and as a marketing tool than anything my client would design.

I don’t want my clients too involved in choosing a design. This is not arrogance or elitism. My auto mechanic has a sign over the cash register in the shop. $65 an hour. $100 an hour if you watch. $150 an hour if you help. That’s a pretty accurate description of the value they place on clients taking too much interest in their work. I imagine that any person offering services feels pretty much the same way. Try walking into a kitchen someday and telling the chef how to prepare a sauce. Stand far away if he has a knife in his hand.

When I ask the mechanics what the options are I usually get two choices, the minimum safe repair and a full fix. When I offer my clients site comps, I give them two choices. The cost is the same but the look is different. They get to choose. I get to create an effective site without having to discuss and clear every little detail and we both save time.

Unobtrusive Sidenotes is a simple mix of Javascript and CSS that makes it ridiculously easy to incorporate sidenotes into your web pages or blogs. It even includes a handy set of colors (all set in CSS and tweak-able) to create that oh-so-subtle correlation between the sidenote and the relevant text.

It’s time we designers stop thinking of ourselves as merely pixel people, and start thinking of ourselves as the creators of experiences. And when it comes to experience on the web, there’s no better way to create it than to write, and write well.

Since Apple developed its “digital hub”, with iLife and now iWork, I have wanted to have a system-wide panel that would let me choose pictures from my iPhoto library without having to open the application.

For example, if I want to add a picture to a TextEdit RTFD document, I had to launch iPhoto, chose the picture, and drag it to the document. Waiting for iPhoto to launch can be long if you have a lot of photos.

But there is a way to get around this, using an Automator action.

1. Open Automator, and click iPhoto.
2. From the list of actions, select Ask for Photos, and drag it to the right-hand pane.
3. Save this as a plug-in, and select Script Menu (the script menu that displays in the menu bar) so it is accessible anywhere. (If this menu is not visible, launch the AppleScript Utility in /Applications/Applescript, and check ‘Show Script Menu in menu bar.’)

Next time you need a picture from your iPhoto library, select this action from the AppleScript menu, and you’ll have a media browser that lets you do so without opening iPhoto.

You can do something similar if you need to select songs from iTunes. Select iTunes in Automator, then Ask for Songs. This lets you select songs from your library, from a specific playlist, or by searching in a Spotlight-type search field. You can also play songs from this window; you might not find this ideal to replace iTunes, but in a pinch, if you need to hear a single song, it will do the trick.

Anyway, I used a couple of cameras, one a pretty new 6 megapixel SLR and the other an old 2 megapixel Olympus. It was the photos from the latter that I ended up using on the site. One reason I use the Olympus is because I’ve had it for years an know exactly how to get the white balance spot on with my lights. The other is that it has a damn good lens.

Did I miss the extra pixels that my Nikon offers? No. I shoot for the web at 1600 X 1200 pixel resolution no matter what the camera. I’ve found that a 2 MP image works beautifully and that larger resolution images, after they’ve been resized, actually look worse on web sites. All that extra image capacity is wonderful for printing big prints or for cropping down to a very tiny section of a photo. But for studio work I don’t have to crop 90% of a photo out. I simply place the camera at an appropriate distance from the subject and pretty much fill the frame.

The problem is that it is only reasonable to put a fairly small image on a web page. 640 pixels wide will just fit K’s page and all the photos are smaller than that. So for a 1600 pixel wide image I typically size it to 50% and crop to just a bit. That works well.

Photoshop resizes images crisply at exactly 50% size. But each size reduction loses some information from the image. So if I started with a 6MP, 3000 pixel image and had to reduce it to just over 1/5th the original size, I’d lose more detail and crispness in the photo. To put it simply, unless I change the camera resolution settings to 1600 X 1200 pixels before I take the shots, all that extra capacity actually gets in the way.

When I used to teach digital photography classes, I was always asked what camera I would recommend. Often the people wanted to take photos for eBay. For online product photography I recommended shopping eBay for an old 2 or 3 megapixel camera.

New 2 MP cameras are about the same price but they now represent the cheap end. My Olympus Camedia 2040 was actually a top of the line camera when it came out. The difference is very noticible in the lens. It’s as good as any non-SLR lens available today. Also the camera has a larger number of manual controls than a new point and shoot camera offer.

So, unless they’ve been abused, 4-5 year old cameras are higher quality than equivalent megapixel cameras manufactured today. Generally Nikon, Canon, Sony and Olympus had better cameras then than most other manufacturers. Now days the general quality has averaged out a lot.

This is not to say that you can’t take good web photos with a new high resolution camera. You can. I am saying that the best web photos should be taken at a much lower resolution than the cameras are capable of. So if you only want to take eBay pictures and aren’t interested in printing bigger photos than the typical printer will handle, there’s no need to pay for the extra megapixels. They actually cause the end photos to look a bit worse.