PhotoDude.com

Sat. Jun 03, 2006

I Call It 'Sketchy'

You’re looking at yet another attempt to answer an eternal set of questions that have no one solution. After a decade of having a web site, six years of doing this “blogging” thang, plus uncountable redesigns, what new jumble of content can we attempt to make legible? In what way can we combine or re-order the articles, links, and quotes that we haven’t already? What mixture of columns and page width should be chosen? Please oh please can we just try something different? But, should a web page really have a deckled edge? Or a coffee stain?

Most people won’t care about these questions. Your eyes have already told you everything you need to know, including whether or not you like the new look. You’re done here.

Web geeks will want to hear further justifications and rationalizations. I got ‘em.

The last major redesign of the layout was in November of 2004 (“Slightly Warm, Slightly Worn” ... screenshot here). Then in November of 2005, I kept the same basic layout but changed the manner various postings appeared (“Changing The Do”). So this was definitely overdue, and the events of the past couple of months made a fresh new start even more compelling to me.

This design began percolating in my head sometime in January. Looking back at the work files, it appears I started the first draft mockup in Fireworks on February 2, a couple of weeks before all hell broke loose. Thus the months of delay.

But subject to some broken bits that still need fixing and the usual incessant tweaking, here it is. Due to an obscure quote from a cartoon TV show, I keep hearing the following sentence in a Homer voice: “I call it ‘Sketchy.’”

How Wide The Window?

Before I bore you with any other stuff, I’ll pass on what I think is the best observation I got out of this, even if it seems somewhat obvious; watch your width, and how you choose it.

This site has had a variable width design for quite some time, and it worked fairly well when you mainly had to accommodate visitors at 800×600 and 1024×768, as was the case when I started using it. But years later, we have more usage of higher resolutions plus a wide variety of wide screen devices, both laptops and monitors.

Therefore the “variable” in variable width design has gotten much greater. In certain cases, this was making line lengths untenable. In others, I had to limit the width of inserted graphics to what would fit in a 770 pixel wide view, and have it therefore look tiny at 1280 pixels wide. So I wanted to go with a fixed width design, one wider than the traditionally restrictive 770 pixels, but still fully usable for those lower resolution visitors.

The question was … how wide? You might think, well, if you’re leaving the 800×600 crowd behind, you can go ahead and fill up the screen at the next resolution up, by far the most popular, 1024×768. And if you look at the resolution stats on the left below (from the last 38,999 visitors to this site, courtesy of Mint), you’d think you would only be leaving behind a mere 8% of your visitors.

But in the chart on the right, which tracks the actual window width of the user’s browser rather than their overall monitor resolution, we see a vastly different message from the same 38,999 visitors. While you might have thought a jump from a width of 770 pixels to around 1000 pixels would only leave 8% of your visitors behind, it appears it would be closer to 30%.

Jumping straight to the full width of a 1024×768 monitor assumes that people use their browsers maximized. And the window width numbers show today that isn’t the case at all, especially in wide screen settings.

That’s why I chose a fixed width design with the content contained within a 920 pixel width, with some “design slop” for filler (those deckled edges). I figure that amply takes care of about 4/5 of my visitors today. And more tomorrow. For those who only see the first 770 pixels of that width, the right column is meant to contain “non-vital” content (like the coffee stain). All the main content and navigation is right in front of them.

Whither The Blogroll?

When I first did a mockup in Fireworks for what eventually became this layout, I opened up my screen ruler and measured the height of the various “chunks” of content on my home page, as it existed then. I wanted this new layout to also compress the site vertically, and not have such a huge scrolling home page (I’ve only been semi-successful at that). And I found that one “content chunk” measured something ridiculous like 2500 pixels tall. This Mondo Column of content dominated the decisions in any composition one might try to make.

It was the blogroll. And it simply had to go.

I’m sorry for those who got some small Technorati Bump or a drop of Google Juice from that home page link, but the alternative was a culling of 50% of the links (or more) to keep it on the home page. And since the list truly does fit its new linking words, “Sites I Like,” that kind of culling wasn’t really an option.

However, once upon a time, the blogroll began as a device people used … to find other blogs! Of course, I made one not long after I started blogging in the summer of 2000. At that time, it was not just the best, but about the only way to find new blogs … just bounce from one blogroll to another.

Well, nearly six years later, there’s a host of other ways. Better ways, more topic focused. And the reality on this site is that less than 5% of the outclicks on the home page come from the blogroll. Even I don’t use it (I have a passworded “start page” that pulls the blogroll in via an include, so technically, I don’t use the homepage blogroll at all). So it now has it’s own page, linked near the top of every page. Where I’m more likely to use it myself (um, it’s a big chunk on my start page, as well).

Proudly Web 0.2

I did not switch fonts to Arial (which everyone used to hate). Titles are not 36 pixels high and light grey. You’ll find no Rails, No Ruby gems, and no Ajax, except under my kitchen sink. No seas of white space, color gradients, and semi-reflective surfaces. No major concessions to the thing known as Web 2.0.

Well, I made the font for the article titles about 20% larger. And if you leave a comment, your name is pretty big. And I do seem to have a slight case of big foot.

But otherwise, it seems unseemly for a 47 year old guy to have a decade old web site that looks like Yet Another Web 2.0 Startup. So I don’t. I’ve come to think this site should show its age. Sort of like I do.

Still A Font Infidel

I realize that I do not use or mix fonts on this site in a very traditional manner. I realize this because people far more educated in typography have told me so. Quite a few times. And I have actually simplified the font mix here slightly this time, but combinations that some consider heresies still remain.

Here’s the deal. It’s almost always been this way … here. First of all, I chose Trebuchet as the primary font, and that’s the one in which my words are rendered in articles. I know, there are those who hate Trebuchet, but frankly, find me a commonly used web font where that isn’t the case. Every font’s got its haters.

Secondly, words that are not mine, either inline quotes or blockquoted text, appear in Georgia. And are slightly green. This mixture of my words in one color and font, and their words in another color and font, especially within the same sentence, apparently drives some people batty. But since my goal is to achieve quick visual clarity about who said what, I suppose that “batty” is some form of success.

Throw in the fact I use an accent font (Book Antiqua on PC, Palatino on Mac) for article titles and primary navigation, and, well, screams of “Burn the Font Infidel” are never far off.

No matter. On this site, I will continue to let my Font Freak Flag fly thusly.

However, I will admit that justified text in paragraphs is a new kink, and it is one that may or may not stand the test of time (i.e., I may decide I hate it).

Really Well Designed Sites Don’t Have Ads

I’ve read a bit of discussion about ads on personal web sites lately, which included the suggestion that if you look at the sites that commonly show up on “Best Of” design lists … they almost always do not have ads. This seems to have changed a little bit with the addition of “The Deck” now seen on an exclusive circle of design related sites, but overall it struck me as a fairly true observation. And since I was working on this redesign, it made me think.

For a minute. Then I woke up. And remembered, hey, bozo, you’ve made your income from one form or another of the advertising industry since 1977. Let’s not pretend you’re an Amish virgin or something.

OK, but let’s also be realistic. You may not be an Amish virgin, but you’re not gonna be an A-List porn star, either. Let’s not be one of those who dreams of greater glory in the form of hundreds to thousands of dollars per week in ad money from tens of thousands of hits per day (and if we ever do get that way, please pull the plug on our server).

Realistically, how much money am I ever going to make from Blogads and/or Google ads on this site? As is almost always true when it comes to money, and investments, you should take the long view. Ten years I’ve had a web site. In 1996, I willingly spent over $2700 to put my Olympics experiences online. In 1998, I spent nearly that much putting Red Rock Road Trip online. Granted, almost all of that was the cost of film, processing, scanning, and the other logistics of getting it all into a digital form. The web hosting wasn’t a significant portion of that cost in either case.

But the point is that, from Day One, I knew that being on the web was going to cost me money. Lots, if I wanted to do sizable projects. But at least $300 or so a year, at a minimum, just to own the domain and have decent hosting. I was perfectly fine with all this. Thought it was a bargain!

Today I am profitting from my excellent judgement in buying a VC account at TextDrive, so I don’t have a monthly web hosting fee. But if I did, I make enough from the ads each month to pay for their midline shared hosting account. With a couple of bucks left over. At least, that has been the case over the past 12 months or so.

So in ten years, I’ve gone from expecting to spend hundreds of dollars per year for the rest of my life just to have a web site, to having a web site that would pay for itself. Except also I’ve leveraged my online social network (developed via this very web site) into a lifetime web hosting account. So ... now my web site earns (on average) enough money to put a six pack of beer in my refrigerator every week, 52 times a year. And we’re talkin’ good beer, not Schlitz or PBR.

That progress was made in ten years. Five years from now, it may be a good bottle of champagne in the fridge each week. In ten years, it might be enough to fill my car each week with 12 gallons of gas at the $9 dollars per gallon it may cost in 2016. Who knows? But the long term trend is far rosier than I ever dreamed ten years ago, so I’m sticking with it. The ads stay.

Things That Tickle Me And No One Else

One of my redesign priorities was the retention of the arrow. I added it on a whim 5 days after I started blogging, and though it has evolved in many ways over the years, it has been a constant. It still points to the article title, but is now tied to the date display.

And by the time you get to the end, sometimes you’re a little code giddy, so I’ll mention it here in case no one notices my new CSS naming conventions:
<div id="foot">
<div class="toe" id="little">...
<div class="toe">...
<div class="toe">...
<div class="toe" id="big">...
<div class="toejam">
<div class="football">


And yes, I know that class=”football” is not exactly a semanticly descriptive class name, given that the content is a copyright, but hey, code jokes overrule strict semantics (if “toejam football” means nothing to you, check your Beatles references, youngster)

And, that’s the end of this particular “code joke” that I call my new design, “Sketchy.” We’ll see how long it lasts. Before it visually decays some more.