This was an unexpectedly productive weekend. On Friday I decided to finally widen my website by 28 pixels so I could insert a 728 x 90 leaderboard ad at the top of the page and have everything line up.

How hard could that be? As hard as I want, and as usual I wrote everything down so I woudn’t forget.

Two Goals

My goals were simple:

• Find some of the standard IAB ad units that would fit in my simple 2-column template, and make sure that they fit. The ones that seemed the closest match were the 729, 468, and 236 wide banners.

• Streamline the site, both inside and out. The old site is based on a very old WordPress 1.1 template that I actually ported from an old version of Movable Type. Over the year I added dubious navigation features, secondary blog titling, and other gunk. I wanted a more flexible layout. I barely remembered how it all worked, and the look has always been rather cluttered.

Here’s the site progression, starting from version 1.0 (blue header) to the Friday Undesign, to the current version 2.0:

How I Learned to Stop Worrying and Love CSS

I had put off the redesign for a while because I wasn’t thrilled about getting into the old HTML and CSS…I made them when I didn’t really know a whole lot about it. But of course, that’s before I had the entire 9rules Network Design Community to steal great technique from! I spent a merry couple of hours looking at each site to figure out their approach to CSS-y layout. Some things that stick:

• Instead of commenting css properties out with those ungainly C-style comments, stick a _ in front of it! It becomes an unknown property that browser will just ignore. Sweet! UPDATE! Apparently this is actually a hack called the “Internet Explorer Underscore Hack”, IE6 executes them, but no one else does. Gah. I hate browser dependency coding.

• Putting those nifty drop shadows on the left/right side of your centered content is much nicer when applied to the BODY tag, as opposed to a centered DIV in a DIV. Duh. For one thing, it avoids some redraw problems with slow scripts preventing the page from redrawing GIF backgrounds right away.

• The CSS box model seemed idiotic to me the first time I saw it, with its additive margin, width, and padding controls. It seemed counter-intuitive to me coming from computer game graphics. However, if you think of the margin (or is it padding?) as a “shim” that can be used to position a block within the context of another block, it works out much more conveniently. This way, you can control the overall column width but have different left and right offsets for the elements appearing inside of it. The alternative would be to use “spacer” elements, but those are evil. Embrace the CSS Box Model! I Believe!

Yeah, this is basic stuff, but it’s new to me. As an old-skool 8-bit microcomputer graphics person, my approach to layout has been based on avoiding overdraw. Ideally, every pixel gets drawn once…no overlapping elements! My graphics layouts tend to be fitted together like a mosaic because of that way of thinking. . To lay things out well in CSS, I think you have to let go of that and consider some overdraw as acceptable. Otherwise, you will go crazy. Go ahead and waste the cycles! This era of computing belongs to hyperthreaded CPUs, giant memory buffers and hardware graphics acceleration…give that stuff something to do!

Ads Work For You, When You Work for Them

Most of these ads look awful. The challenge is to make them look acceptable without compromising your design. However, you need to do it in a way that works for the ads. One of my first pleasant-looking design solutions was to put them above and below the white page area, in the background color. Looked great! Too bad no one saw them. Here’s the rules of thumb I came up with for next time I design an ad-centric layout:

• Google Ads place the words “Ads by Google” and “Advertise on this Site” with only 1 pixel of relief from the edge of the banners. Ugly. So next time I lay out a column for 468 wide, I need to allow for a couple extra pixels on either side. Damn it. You can see this problem on any of the archive pages: check out the full-width banner at the top of the page, and see how the “ads by gooogle” is sooo close to the left edge.

• Ideally, you want to place ads where people are most receptive to seeing them at the moment they feel like acting. To me, that means in-line with article content, or in natural stopping places when the viewer’s eye is scanning around for the next thing to click on. In other words, you really need to know the psychology of how people are responding to your articles as they read. Advertising is all about psychology.

• I used the AdSense Deluxe plugin to insert ads inline to the post. The only modification I had to make to it was to change its priority to 1 in its add_filter() call in the PHP source; that’s because my text processing plugin (Markdown) was running before it did and seemed to mess up the formatting. By making AdSense Deluxe run with priority 1, it converts the special AdSense Deluxe HTML comments into tags, which Markdown is smart enough to ignore when it finally runs. AdSense Deluxe is a great plugin…very convenient. I noticed that some code in it seems to redirect 5% of presented ads toward the author’s AdSense code, but that seems like a small price to pay for such a useful plugin.

• I reserve the intense “hyperlink blue” (#0000FF) for ad links. The rest of the color on my site, with the exception of the photo area, is fairly muted. As a result, the ads pop out pretty strongly by comparison, softened somewhat by the all-white background that meshes with the overall site.

Where to put ads was a difficult issue. On the one hand, I knew that I had to place ads where people were likely to notice them and then want to click on them. But I didn’t want to really commercialize my site to the point that it made me ill. I already feel a little ill about it, so I’m limiting the placement to the following for now:

• The home page is Advertisement Free. However, if you go to any archive page, you’ll be served with that 729 x 90 banner between the photo and the content. It looks a little ugly right now, but once I introduce the secondary navigation areas I think it will be OK. I may change it to the 729 x 15 Link Ad unit instead…a little classier. We’ll see how popular this format is first. I may randomize between the two formats, using a second channel. Channels are an AdSense method of tracking different groups of ads so you can evaluate the effectiveness of different campaigns.

• Posts related to buying stuff get inline ads. Examples are the Light Saber, Beset by Fleas, and Egg Muffin Toaster. These inline ads appear only on single-post pages, not category or date pages. That is to stay within the constraints of the Google AdSense terms of service, which state you can have a maximum of 3 Ad Units and 2 Link Units. I use one Ad Unit for the top 729 x 90 leaderboard ad, so I can apply another 2 Ad Units iand 2 Link Units on a given post. The other reason I’m limiting inline ads to single-post pages is because I figure most clicks will come from search engine traffic. People who are LOOKING for something. The Beset By Fleas post, for example, tends to get more hits in the flea season, when people are desperate for solutions. There’s a lot of information on that page about fleas, so it performs relatively well.

As I was placing ads on posts that I thought would perform well (the crafting posts, for example), I was surprised at how poorly they performed. Almost all the ads that turned up had nothing to do with the content. There must be tricks to writing good ad copy for Google Ads, which I guess would go like this:

• You need to write really focused copy that hits on the right keywords. The right keywords are the ones that people would use to find the information and product you’re using.

• Applying search strategies in reverse would be a good starting place. For example, let’s say I wanted to write about some new gadget I got. Imagine how you’d find information on that gadget using a search engine. Ask your friends. Adopt different personas: engineering guy, artist, professor, kid, “I saw it in a movie” guy, etc. Then write that article using the top 3 words that each of these people would use to find that info. Keep it focused and short, and provide the appropriate links (using those keywords as the anchors) to more information. I’m thinking that should result in good search ranking AND good AdSense. I’ll have to try it in the coming days…writing to sell is something I haven’t tried before.

Undesign, Revisited

The look of the site is, well, pretty plain. I am thinking of it as a generic site, bland like rice and tofu, absorbing the flavors of whatever I’m serving for the day. A more flattering way to think of it is that it’s a kind of minimalist “no-brand” understatement, like stuff from Muji.

• It’s white. Mostly. The second pass design apply some very light pure grays to the top of the site to give it a slightly more dimensional feel. You may not even notice it, especially on an LCD monitor, but it’s there. White is never really white in real life.

• Geeky Graphics Tech Note: The darkest “shading gray” I chose has a value of F8. That’s really close to white. This is on the extreme edge of what a 15-bit (“thousands”) color framebuffer can render (it probably will render all as pure white, depending on the gamma correction of your graphics card and LCD). The bottom 3 bits of the 8-bit value are what I’m playing with for shading; these bottom 3 bits are what are dropped by 15-bit color system (they use 5-bit RBG components, not getting into 16-bit color which is more prevalent on PCs). Even 24-bit color systems running on LCDs will have some trouble, as most LCDs have trouble reproducing subtle gradients…they just run out of dynamic range. I can’t really see the effect, for example, on my PowerBook 12″. It’s much more noticeable on my Dell 20″ LCD, and more noticeable still on a CRT.

• Because I run the 729 x 90 AdSense unit beneath the photo, there is a subtle gradient that goes from the light gray to white. The result is a smooth transition into the AdSense area. The bright blue hyperlinks seem out of place with the rest of the palette, but for them to be effective attention grabbers I wanted them to be bright yet contained with that ad area. It’s a compromise. I could have made it look subtly integrated into the rest of the site, but then no one would see them to click on them. Best make it obvious, and treat the bright blue as an accent color to the rest of the site.

• I added a glassy effect to the photo area. It’s pretty subtle. Compare it to the old version.

• I did a lot of text cleanup in wording and CSS. First I changed the typeface to something like that used in Kubrick, which is a cleaner sans-serif look that is more appropriate for this design. I also chucked a lot of superfluous wording…everyone knows that it’s DAVE that posts here, so I dumped that. Navigational hyperlink elements are now all capitalized, and I’ve changed their wording to be less tech and more reader-oriented. I’ve also adjusted spacing a lot…the result I think is a lot cleaner looking than before, and I like it. A little plain, but I think it’s pretty readable.

• The sidebar is still way too long; in fact, it’s even longer because I’ve added the recent comments and trackbacks sections, so people can see what kind of discussions are going on. I also ditched the long categories listing, only to bring it back when I realized it helped Google index the site more efficiently. I did dump the calendar and archive by month listing…does anyone use them?

• There are a couple things I want to promote: the New Media Group and The Printable CEO™. Since I don’t have special graphic banners prepared yet I’ve just made the headers for those areas green instead of the standard “header maroon” used elsewhere on the site…this makes them stand out just a bit (for people who aren’t red-green colorblind, anyway). Yet another example of using contrast (in color, this time) to draw attention. I’m thinking the flow of attention starts with the photo, then to AdSense, then maybe to my name at the top, then maybe to the side bar (where the eye notes the green standout), and finally to the content. How do I know this? I know where the eye starts (picture), and I know that it tends to move left-to-right and down, baring any stand-out elements that disrupt the flow. Stand out elements are anything that contrasts with the overall tone of the page, breaks uniformity of layout, or creates an expectation of movement/unity through [application of gestalt principles][gestalt].

• There is one bug in my CSS that causes the size of navigational text to grow. Check out the POSTED ON to CONTINUE READING to THERE ARE 3 COMMENTS text; maybe I’m imagining it, but I don’t think they’re the same size. I think this is happening because I’m using ems to specify font heights, and they’re being applied every time that text is rendered. Effectively they grow by 10% each time…I’m using a declaration like font-size: 1.1em; in several places, and there probably is a dependency I haven’t caught. Likewise, for some reason list items that are are run together are shrinking, whereas list items that have a space between them are not. This is related to how Markdown is generating the HTML, so I have to look at that too. Then I’ll have a pretty good foundation for basic CSS typography.

<

p>This site should serve me well for the next few months. It’s a very plain shell, which I designed to be pretty easy to modify so long as I stick to stackable horizontal sections. I may need to do a third engineering redesign pass on the use of DIVs, now that I have come to a theoretical understanding of what the CSS box model is actually good for.

I’m looking forward to adding more features with a “snippets” category, improved archive pages, and better segmentation between the PRODUCTIVITY, DESIGN, DEVELOPMENT, and PERSONAL sides of the site. There are so many more people coming to the site for different reasons, and I want to make sure that it’s easy for them to get around the place. I also need to really put up a PROFESSIONAL shingle somewhere about my service offerings, because it’s not easy to find that info for people who just need the “whaddya do? how much?” low down. I really like how my buddy Brad has organized his site toward making it extremely easy for people to contact him…he’s da bomb, and a good part of the inspiration for me getting back into freelance to do something I love.

After I get those features in place, I’ll consider a style-only redesign. That direction will be made clearer by function… I’m a sucker for designing for function rather than style when it comes to making websites.