“Nothing is more dangerous than tremendous power coupled with vague language.”
—Jeffrey Zeldman. “Say No to SOPA.” A List Apart November 29, 2011

To repurpose a line from our president: I’m not opposed to laws, I’m opposed to dumb laws. And the Stop Online Piracy Act is a dangerously dumb law. If you’re new to the issue, go to A List Apart and read Jeffrey Zeldman’s synopsis of the negative implications of this legislation, currently before the House Judiciary Committee.

Throughout its brief history, the Internet has been regularly assailed by the flailing efforts of entrenched interests to uninvent it, whether through bad law or onerous contracts. Those who cannot compete litigate, those who cannot adapt lobby. And SOPA is clearly their handiwork. It’s time we put a stop to it.

If you agree SOPA is a bad idea—and if you’re a user of the Web, I sincerely hope you do—head to the bottom of Jeffrey’s article (under the “Act now!” section) for a list of actions you can take to help stop this very bad idea from becoming law.

Update

SOPA will be coming up for a vote in the House tomorrow, December 14, so if you oppose this legislation the time act is now. The team at Tumblr has put together a great site to connect you with your Representative and let your voice be heard.

The request came through I’ll-never-know-precisely-what company channels at BusinessWeek, where I was just digging into my first job in The Big City, a fresh staffer looking to make a mark. Apple was working on these “widget” things for their next OS. They were going to show them off at their annual developer conference. Could we please build one in a hurry? Oh, and Steve Jobs would probably be approving this personally, since it might be going into his keynote. So, you know, get busy. And make it great.

Skip ahead a bit…

Have you ever been backslapped? I mean like really pop-your-eyeballs-open, jolt-your-neck backslapped? That’s what happened to me as I stood next to my boss’s boss as she watched the video from Steve’s keynote. Jobs briefly demoed our widget and quickly moved onto one from a competitor. But as he started describing it he quickly added, “It doesn’t look as nice as BusinessWeek’s…” BACKSLAP!

And just like that, I started getting more meeting invites.

I know it might sound trivial, tangential contact at best. But in Steve’s uniquely irascible way, he helped give my career a little nudge by noticing the details in my work. And for that I’ll always be grateful.

I Saw What You Did There, Facebook: The Facebook chat promotion as it appears on the right-hand side of a user’s homepage. Personal tidbits obscured to protect the innocent.

Removing cues to close or abandon interaction flows is something that needs to be undertaken with great care and respect for the user’s initial intent. When used in complex, multi-part forms such as retail check-outs, removing site chrome and “links out” can help focus attention and aid in the completion of a task the user has explicitly voiced a desire to do.

But when used to sculpt the flow of traffic without the user’s say-so, you risk engendering confusion and suspicion. Hence, I typically advise clients against this sort of thing. Sure, you’ll get higher sign-up numbers, but at what cost? Many of the folks who wind up making it through the process will be doing so out of ignorance, and quite a few won’t be terribly happy about it once they arrive on the other side.

Every so often something rolls around that makes the field feel new, and for me, this is most definitely it. Moreover, I hope it marks the beginning of a renewed awareness—and embrace of—the inherent fluidity of the Web.

There’s been some great discussion on the topic of Responsive Web Design since Ethan first introduced us to it on A List Apart, and it’s been reminding me about our history. We arrived at the current, relatively rigid state of Web design out of a desire to impose order on a medium that began life as chaotic and wildly inarticulate (from a designer’s perspective). The Web was fluid by nature, but the tools were desperately primitive. The only way to keep the limitations and randomness from impeding your content was to lock down one side of the equation. We couldn’t control the browsers, so we bolted down the designs.

But the game has changed. Browsers have gotten, dare I say, pretty damn good. And a whole host of robust tools and devices have arrived that allow users to passively view, actively consume, or deliberately repurpose as they see fit. The fantasy we once coveted, of a perfectly reproducible canvas painted in pixels, has given way to a breathing reality mitigated by circumstance and conditions we will not be able to anticipate.

And this book points the way.

Many note the term “mobile” no longer fits the bill. While current trends started there with the first truly robust smartphones, it insinuates a usage (on the go) and a bandwidth (paltry at best) that often isn’t the case. A good look at the data my phone slurps down every month is all I need to know it’s a broadband life that little electronic sidekick of mine is living.

Up until the advent of workable tablets the term “small screen” almost cut it, but that too is out. It’s hard to argue that devices weighing in with screen resolutions starting in the neighborhood of 1024×768 pixels, mapped to physical sizes ideally suited to two-hand use, could ever really be thought of as “small.”

So what’s that leave us with? We need terminology clients can grasp intuitively, driven home by a sensible supporting statement or two, without leading the conversation down a pedantic rabbit hole. We need a suitable shorthand that broadly encapsulates the idiom. Lately, for me, that term has been “lightweight computing.”

I make no claims to lightweight computing being the perfect moniker. But as audience-friendly marketing shorthand goes, I think it fits the bill nicely. In addition to being something folks outside our industry can grasp without reams of explanation, it implicitly accounts for a style of interaction without making claims to context, data rate, or whether the device in question is the user’s primary computing experience (something that will become increasingly important down the road). The ever-changing device landscape may make this term obsolete in a matter of moments, but for now I know what I’m writing in my briefs.

There’s a part of me that can’t get past the feeling we’ve stepped into a time warp. That this is a conversation more suited to five, maybe ten years ago, when those of us who worked in the nascent online wings of “traditional” publishing houses were viewed by colleagues as mad Che Guevaras; anarchists possessed of rebellious inclinations to set the building ablaze or gleefully slather all the telephone receivers with peanut butter.

As industries, news and publishing should have long since moved beyond the fact that the digital transition is happening and that adapting to the flow of history is the productive way forward, rather than sitting on the sidelines wagging fingers while revenue sails by. The audience chooses the time, place, and manner of the transaction now. Making money means dealing with them on their own terms.

Despite the gripes from folks like me, much of publishing’s leadership has actually acknowledged this sea change, at least in word. And therein lies the rub. For when it comes time to actually follow through with deeds their collective stomachs seem to turn, and out pops a piece like Keller’s. Somewhere there’s a block between thought and action.

Sociologist Zeynep Tufekco has put forth some supremely thoughtful comments regarding this cycle of acknowledgement and backsliding that continues to plague large institutional publishers. “[T]his angst is about conventions and conventions evolve which always horrifies those who have acquired privilege and power by mastering certain conventions while dismissing others.” She continues:

“What we are seeing with social media is the public sphere, hitherto dominated by written culture, has been more opened up to oral psychodynamics. And this is particularly difficult to deal with for intellectuals who rely on their competence with, and dominance of, the written form as hallmark of their place in society.”

A distaste with the cuisine keeps them from sitting down for the meal. Comfort with the style of these new interactions will only come with time and continued, full-on exposure. It feels inevitable, but it requires a true willingness on the part of these same publishers to rub elbows with the rabble. Just showing up to the shindig isn’t enough. We like handing our cash over to folks who actually want to talk with us.

“I thought these were extinct.” he says to his buddy, who replies, “That’s what they said about the coelacanth.”

The implication being that Volkswagens had thoughtful features that other manufacturers had long since done away with. Something that distinguished them, and something that you, dear car buyer, wanted in on. It was a great bit of ad writing, not just for the geek humor, but because the audience grasped the bigger picture immediately. This thing is unusual, and it tells you everything you need to know about the kind of products Volkswagen makes.

Take that concept, reverse the implication, and it’s what you get when sites do things like this:

This thing is unusual, and it tells me a lot by implication about the company that put it together. Only this is one coelacanth that best remains extinct.

As noted in the previous post, I’m headed for the annual pilgrimage of All Things Intergeek later today. Last year was my first go ‘round after many turns viewed forlornly from the sidelines, and it was a blast (despite the larger-than-life scale that warns some people off). The secret, as always, is the people. Start with your tribe, then work your way out. If we cross paths in Austin over the next few days, I hope we get a chance to say hello.

Spring is (very nearly) in the air, and it’s the perfect moment for a little tidying up. This marks the fifth major revision to Stuntbox since these digs were first lovingly cobbled together, and I feel like it’s one of the most significant. Apart from the obvious aesthetic shifts, the biggest change comes in the form of putting the blog front and center once again. The previous design greeted users with what amounted to a rather subdued splash page, something that felt right at the time. But if one is going to take the time to say something worth saying (and by implication, worth reading) then those words deserve all the prominence and care that can be granted to them via the design. Back to the front you go, you words.

In addition, this redesign afforded a much-desired opportunity to revise my standard site-building playbook. The new Stuntbox takes advantage of HTML5 and CSS3 (some now, more later) while dipping its toes in the responsive design waters. Regarding the latter, most of the major layout elements have been defined with percentage values in the CSS, while the uppermost parent container has been capped with a pixel value. Essentially, this allows me to toggle between fluid and fixed layouts when I want to by editing a single CSS rule. I like this technique so much I now find myself using it regularly on projects, even when the end result is a fixed-width layout. (“Oh, you’ve decided you want fluid? No problem…”)

Also, rather than leave images in the markup, I’ve adapted earlier image replacement techniques by using sprites to display key graphics, like the logo and nav, at various sizes. This keeps the markup clean (no image tags) while allowing me to do things down the road like support high resolution devices (cough, cough—Retina display—cough, cough). All this makes for a workable solution while we await the dawn of universal background-size support with bated breath.

Oh, and the design, wherein I return to my love affair with all things Red Rooster. Back in the day the original Stuntbox wordmark was set in Consort, which I’ve returned to for the main navigation (nice whiff of personal nostalgia, that) while setting the new logo in Grand Canyon, a face that makes no bones about it’s presence. (Seriously, I remember the first time I saw Grand Canyon I actually blurted out something along the lines of, “Whoa, when the heck would I have the spine to use something like that?” Well, guess what…) The body copy comes by way of Typekit and the supremely competent FF Meta Serif Web Pro, a typeface that’s so damn orderly and legible on screen it very nearly makes me want to give it a fist bump, or whatever congratulatory hand gesture the kids are calling cool these days. As for the layout, well, it’s straightforward enough that I’ll let that speak for itself. (Yes, I used you-know-what.)

Finally, it’s worth noting that this is all something of a work in progress. This new design is the result of a fair amount of thought about the direction I’d like to see this site go in as my work with clients and business partners continues to grow and evolve. On the process end, it’s been built to accommodate and further some of the more helpful habits I’ve built up over the past year. I’ll be shaving off the rough edges in the days and weeks to come. In the meantime, I’m looking forward to seeing a great big bunch of you at SXSW in a day or two. If you can properly identify me, say hello!

So then, the bug. In HTML5 it’s now officially peachy keen to wrap block level elements in an anchor tag, something we’ve seen the rabble do for years but that proper gentlefolk such as we would never deign do, no sir thank you very much. This proves incredibly handy when it comes to things like headlines, subheadings and photo pairings, allowing us to wrap an img and an h1 tag in a single anchor, creating one link. Very tidy, methinks.

Trouble is, under the right set of not-that-uncommon circumstances, Firefox goes all pear-shaped on us. Take the following code:


<article>
<a href="#">
<p><img src="thumbnail.jpg" alt="" /></p>
<header>
<h1>A Snappy Title</h1>
</header>
<p>A pithy introdution.</p>
</a>
</article>


Give this markup some very simple styles to apply a border to the anchor and set it to display: block so we can see what’s going on, feed it to our unsuspecting browsers, and let’s see what we get:

Oh my. Note that I’m putting the anchor inside the article element because I want this to be a self-contained widget, just as the HTML5 Gods intended. The WebKit-powered browser does just fine, but Firefox… well, speaking in strictly technical terms, things break with verve. Firefox appears to be attempting to close the anchor prematurely, multiple times (I’m no rendering agent maven, so I can’t say for sure—Firefox code contributors, help me out here).

Some have had minor success explicitly declaring the anchor a block level element in their CSS. Others have suggested a JavaScript fix, a route I flatly refuse to go since we’re talking about basic access and an acceptable minimum of layout parity across browsers (Read: It should never ever appear this obviously, crazy-making broken to an end user.)

The solution? After some tinkering, I’ve found that if you don’t include any of the new HTML5 elements inside the anchor, the wrapping works as intended. So if we remove the HTML5 header tag…


<article>
<a href="#">
<p><img src="thumbnail.jpg" alt="" /></p>
<h1>A Snappy Title</h1>
<p>A pithy introdution.</p>
</a>
</article>


…we get this:

And peace is restored to the realm, albeit via the compromise of dropping any new HTML5 goodies inside your link. Word is all this should be resolved with the imminent release of Firefox 4 and it’s new HTML5 parser. But in the meantime, if you’re looking to make block-level links in HTML5 and want to pass muster in Firefox, make sure you’re wrapping old school html elements and none of the new HTML5 elements, and you should be fine for now.

Update

Officially submitted as bug #637044.