UNDERDOG of PERFECTION

It’s that time of year… time to start thinking about my Top 5 albums of 2010 post, coming soon. For now, let’s have a look at this year’s contenders, in a visual format. These are all of the full-length albums released in 2010 that I have purchased, from which the top 5 will be selected…

And here are a few others that are non-contenders for various reasons, but still worth a listen. The Shiny Lights is an EP, but it’s fantastic nonetheless. Anesthetize was a limited edition live album, officially available only in Europe, but it’s great stuff. (I ordered it from the UK distributor at ridiculous expense.) And Three is my own. I’m a narcissist, but not that much of a narcissist.

Today is the fourth annual “Blue Beanie Day,” a tradition established by the father of web standards, Jeffrey Zeldman.

What are web standards? Simply put, they’re awesome. But seriously… the goal of web standards is to establish a set of best practices for web designers and developers, and a set of open, shared languages and tools for building websites and displaying them in a consistent manner.

At the heart of the modern web standards movement are a set of three core languages: HTML5, for organizing and structuring content; CSS3, for designing the presentation of that content; and JavaScript, for providing rich interaction with that content.

HTML5, CSS3, and JavaScript are all open standards. The specifications are published for anyone to see; they’re open and evolving, for anyone to contribute to; and they’re freely available for anyone to build an application for rendering content delivered via these languages (in common parlance, a web browser, but we’re starting to see “web” content appearing in all sorts of applications for computers and mobile devices these days).

But why are these three web standards so great? Because they create a win-win-win situation:

A win for web designers/developers. By establishing a common set of tools that are open and free to anyone, web designers and developers can get started with no barriers to entry. Plus, by standardizing these tools, the same skills can be applied anywhere a website is being built. And as web browser makers adopt these standards, the last 15 years’ worth of browser-to-browser inconsistency will fade. Our job is made easier, we can get more done in less time, and, with powerful frameworks like jQuery built on top of these standards, this power to do more with less will grow exponentially.

A win for site owners. If you’re paying to build a website, you want to know you’re spending your money wisely. You want your investment to last, and you want to make sure everyone who wants to access your site, can. Web standards are the key to an accessible, reliable, “future-proof” website. Some Internet technologies may come and go; jumping on the latest trend may make your site seem “with it” today, but tomorrow it will be painfully dated… if it even works at all. But these three core web technologies will always be at the heart of the web. Plus, a site built with web standards will automatically be structured well for search engine listings, without the need for expensive and questionable SEO tactics.

A win for Internet users. Web content that is built and delivered with a diligent adherence to web standards will work reliably with any device, any software, that is used to access the Internet. Plus, no well-formed, standards-compliant HTML page ever crashed a web browser.

Web standards: Win-Win-Win.

This morning, as I do on most mornings, I eased the transition between my peaceful slumber and the mayhem of conscious life by lying in bed, catching up on the goings-on of humanity on planet Earth with the help of my iPhone and the Internet.

This usually consists of checking Twitter, Facebook, and my Google Reader feeds, but when that isn’t enough, I’ll occasionally search the web for whatever random piece of information crosses my stream of consciousness. Today that happened to be the Tim and Eric comedy tour that’s currently underway, since I’ll be seeing it when it arrives in Minneapolis on Wednesday. So I googled Chrimbus Tour review and one of the first links that came up was a review on BuddyTV.

BuddyTV is not a site I think of often. I believe I was vaguely aware of its existence before today, but I didn’t know what it was all about and I never had any inclination to visit it. But I was certainly happy and willing to click the Google link and read its review of the Chrimbus Tour.

Unfortunately, the site did not reciprocate that happy willingness. Instead of taking me to the desired review, it detected I was arriving via iPhone, so it shunted me off to an annoying splash page imploring me to download the BuddyTV iPhone app. No thanks, I really just want to read the article I came here for in the first place. Oh, great! You’ve provided an “Or continue to BuddyTV.com” link at the bottom. Thanks!

But — and this is so often the case in this scenario — that link did not helpfully take me to the article I wanted. (And as a web developer, I can tell you it is not at all difficult to make it do that.) Instead it just went to the BuddyTV home page. Now what? I’ll tell you now what: I closed Mobile Safari and got out of bed. Not only did I not download their app; I didn’t expose my eyeballs to any of the ads that pay for their website; I didn’t get to read the article I was interested in; and I was left with such a negative impression of the site that it drove me to this public rant.

All of this is not really to single out BuddyTV for its bad behavior, though. BuddyTV is just one site among many I’ve encountered over the past couple of years that all adhere to this same pattern of deplorably ill-conceived UX design. Surely this is not the reaction the owners of these sites hope to elicit. But it’s exactly what happens with me, every time, and I’m sure I’m not alone.

There is a solution.

We frequent users of web browsers on mobile devices just want to see your site. We want to see the same pages we’d see on our computer. The same content. But it doesn’t hurt to have that content optimized for the mobile browsing experience. Resized to the smaller screen. A streamlined layout that’s easier to navigate with a touchscreen. But, fundamentally, the same experience.

While there are some tools out there to help turn a regular website into a mobile website (most notably Mobify), there’s a far easier solution: CSS3 media queries.

CS-what media what now? CSS3 media queries are, simply, a set of stylesheet definitions that are applied to a web page selectively depending on certain characteristics of the media the page is being viewed on, most notably, screen size.

With CSS3 media queries, you can define an entirely separate set of stylesheet attributes to be applied only when the user is visiting the site from a small screen. Or an extra large screen. Or you can describe a bunch of intermediate sizes, so with the exact same HTML content the user will see a perfectly laid-out page, optimized to their screen, whether that’s an iPhone, a netbook, a “standard” computer monitor or a 30-inch Apple Cinema Display.

I’ve begun working more extensively with CSS3 media queries on some of my own projects lately, and I am very excited about the potential. If you’re a web developer or designer, you should learn about CSS3 media queries now. And if you’re a website owner, you should know that “mobile” sites are sooo 2008. Now you can have your cake and eat it too. You can have the best of both worlds. Insert cliché here. Just don’t subject your site visitors to any more obnoxious plugs for your iPhone app, or dump them thoughtlessly on your mobile home page with no way of tracking down the article they were coming for. It’s not fair to your users, it’s not fair to your public image, and if you’re supporting your site with ads — or, for that matter, if you’ve been convinced to drop a ton of extra cash on developing a separate mobile site, or an iPhone app that just displays your site’s content anyway — it’s costing you money.

“Something doesn’t smell right when you take control of the state house; you take control of the state senate; you win in the 8th Congressional District, and yet, somehow we don’t win the governor’s race.”

—Minnesota Republican Party chairman Tony Sutton*

I was planning to avoid much commentary on this year’s election, but I’m even more of a math/logic nerd than I am a liberal/progressive, and while I can (almost) shut my mouth about the Tea Party movement, I can’t let this glaringly erroneous logic go uncorrected.

First, Sutton makes two unfounded assumptions:

1. Supporters of Republican state house and senate candidates couldn’t possibly — possibly! — also vote for Mark Dayton.

2. Those same supporters of Republican state house and senate candidates couldn’t possibly — possibly!!!! — vote for Independence Party candidate Tom Horner for governor rather than Tom Emmer.

Let’s just talk math. Let’s go with that unfounded assumption that anyone who voted for a Republican for the state house would also necessarily vote for Tom Emmer, and anyone who voted for a Democrat for the state house would likewise necessarily vote for Mark Dayton. We’ll ignore the state senate and third-party candidates for now.

Let’s assume three house districts, each with 10,000 voters. And let’s assume the vote breakdown went something like this:

In this scenario, the GOP house candidates narrowly won districts 1 and 2, while the DFL house candidate overwhelmingly won district 3. Still, the GOP outnumbers the DFL in this fictional 3-seat house by 2 to 1. And yet, the citizens in these three districts, all voting straight party tickets, handed Mark Dayton a decisive 59.7% majority victory in the statewide governor’s race.

This is fictional, simplified, and exaggerated, but it proves my point. And yes, I do believe that there’s some accuracy to this kind of breakdown. There are a few “deep red” districts in the state and a few very “deep blue” ones (mostly in the metro area), but most are fairly close to the middle.

In the actual vote, for instance, let’s compare two counties with roughly equal populations: St. Louis (home of Duluth) and Olmsted (home of Rochester). In St. Louis County, Mark Dayton received 61.8% of the vote; Tom Emmer, 28.6%. In Olmsted County, Tom Emmer received 45.9% of the vote; Mark Dayton 37.9%. So Mark Dayton “won” St. Louis County and Tom Emmer “won” Olmsted County. But saying either candidate “won” a particular county is irrelevant; this is a statewide office, and statewide totals are all that matters.

All it takes is a few districts with a very high proportion of Democrats to Republicans, and a lack of correspondingly skewed districts to compensate, and it’s quite easy, even imagining all voters voting a straight party ticket, to arrive at a scenario where the Republicans score a decisive takeover of the state legislature while still electing a Democratic governor (a statewide office).

In the spirit of “If you can’t say anything nice, don’t say anything at all,” I will refrain from writing about last night’s midterm election results, except to say, “Don’t blame Minneapolis.” Also, to quote Apu Nahasapeemapetilon, “If you survive, please come again.” The next two years will either prove or disprove the merits of the Tea Party movement, and if we’re lucky we’ll still be around in two years to start cleaning up the mess.

OK, I knew I couldn’t avoid saying something snarky about it, but that’s it. No more. Let’s move on to something fun… ME! I’m taking a look back at the top 10 posts on Underdog of Perfection, based on the number of hits they’ve received according to WordPress stats. Without further ado… I present the all-time top 10 Underdog of Perfection posts to date.

OK, just a little further ado: here’s a chart of my hit count over the past month.

And now the list…

10. Mechanically-separated chicken or soft serve ice cream? You be the judge.

January 17, 2009 — When the gross picture of mechanically-separated chicken exploded as a full-fledged meme last month, as part of a factually challenged story hyping the dangers of the stuff (come on… you don’t need to make up stuff like “bathed in ammonia”; the truth is bad enough), I immediately recognized the picture as one I had seen about a year before. As I recalled, I had seen it on TotallyLooksLike.com next to a strawberry soft serve. I had forgotten that I had created that “totally looks like” image, which apparently is no longer available on that site, but is still on mine. Hence, traffic!

9. Best Google Doodle yet

June 6, 2009 — Ah, that would be the Tetris Google Doodle. But I suspect that every time there’s a new Google Doodle, someone googles “Best Google Doodle yet” and finds this post. Traffic!

8. Honda Fit iPod controls: when something is worse than nothing

August 23, 2009 — Rants are always good for some hits, especially when it’s something other people are annoyed by too. The fact is, the Honda Fit iPod controls suck, and Honda doesn’t seem to be doing anything about it, so I suspect as each model year is introduced, this post will generate more… traffic!

7. Migrating from CakePHP 1.2 to 1.3: My Story (Part One of… Possibly More than One)

May 16, 2010 — Writing about technical issues surrounding web development is one of the ostensible purposes of this blog, especially since I went freelance, so it’s gratifying to see my fellow developers relying on me for information, on those rare occasions when I actually have some to share. Thanks for the traffic! (I really didn’t set out to end each of these with the word “traffic” but it seems now that I am destined to do so. Um… traffic.)

6. This is what I wanted all along

October 27, 2010 — Being just a week old, this may be the fastest ascension of any post I’ve written to date. I suspect a lot of that has to do with the timeliness of the topic, but given the vague and keyword-free title (take that, SEO strategists!), the most logical explanation for its popularity is surely the conscious effort I made to promote it. Near the end of the post I make reference to the review of the MacBook Air by Jason Snell for Macworld. I also tweeted an announcement of the post, and stuck in an @jsnell, both in honest appreciation of his review, but also in the somewhat crass hope that he would retweet it. Which he (and several others, most notably Michael Gartenberg) did. Boom! Traffic!

5. Brooks Brothers: what’s up with the sheep?

July 25, 2007 — I’m glad some of these “random observation” posts are generating traffic. I believe I’ve spent a grand total of less than 5 minutes of my life inside Brooks Brothers stores, but I’ve pondered their bizarre logo for much longer, and the fact that others have too has brought my blog significant traffic.

4. Why does Safari 4 Beta take SOOOOO LOOOONG to start up? Am I the only one having this problem?

March 1, 2009 — I kind of wish some of these posts would stay buried. Three of the top four all-time posts on my blog are related to issues with Apple products, specifically, issues with early releases and/or beta software. People continue to visit these posts long after they’ve become irrelevant. Seriously, Safari 4 Beta? It’s currently up to version 5.0.2! Please, this post needs no more traffic!

3. Dog inequality in Walt Disney’s world

November 18, 2008 — And then there are posts like this one. Awesome. I love the fact that this has resonated with so many people. Goofy + Pluto = Traffic.

2. Solution for the iPhone Facebook problem

June 8, 2009 — Here’s another post pertaining to early software, and one that’s way past its sell-by date. Here, from an SEO perspective, we have an interesting case study: a keyword-laden but still generic title. What iPhone Facebook problem? The post was referring to the dilemma of iPhone users who were stuck with the then-crappy iPhone Facebook app or the then-crappy iPhone-optimized Facebook mobile site. The best option at the time, in my opinion, was the non-iPhone mobile site, but Facebook had a redirect built into that site that would automatically take iPhone users to the inferior iPhone mobile site. I found a way around that, and shared it in the post.

This is not really relevant anymore, but now any time there is any kind of problem with iPhones and Facebook, this post sees a surge in traffic.

1. Disabling the pinch-zoom feature on the new MacBook

March 9, 2009 — I’m always a bit annoyed when I look at my stats and see this post near (or at) the top. To me it’s a long-dead issue, but apparently not. I just showed this solution to SLP yesterday, so the problem still persists, and whenever I get a new Mac or reinstall my software, I have to remember to go in and deal with this again.

I don’t know whether or not I’m in the minority of Mac users here, though I suspect not, but I do not like the multitouch features of the MacBook trackpad. The only one I use is two-finger scrolling. That’s nice, but the rest are just an unwanted nuisance. I forget they even exist until I trigger them accidentally when I’m trying to do something else. Then I have to dig into System Preferences again and turn them off. Apple may love multitouch, and it’s great on iOS devices, but clearly there’s some distaste for it on the Mac, which for me means traffic.

P.S. You may notice a logical inconsistency here: the rankings in this list — specifically, the placement within the rankings of #10 and #6 — don’t jibe with the chart I showed at the top. That’s because most of the traffic driven to my site in the wake of the mechanically-separated chicken meme went to the home page, for whatever reason, not directly to the post. In which case those visitors would have completely missed the mark. In short, it’s a failure both for Google and WordPress Stats. Great job!