I love pixels.

I love interfaces, hovering, clicking, and tapping. And semantics and elasticity and assuming nothing about the end-user's device. I love the browser and its history and its cultural function.

I love websites that look like other things, and the way other things have now become dynamic. I like things that pop, change color, get filled up with text, and respond when X happens.

Most of all, I love well-designed experiences. They solve problems, help communicate, and sometimes make us laugh. When those things happen in a browser, I like to code them.

• Background image is from the Library of Congress: "Summit of Pinnacle Peak, near Mt. Tacoma or Rainier, Wash." Blosser Scenic Art Co., c.1906. Source.
• If you have an enormous Cinema-Display monitor, then you can see the edges of said photograph. I diffused/beat 'em up with Misprinted Type's endlessly-useful brushes.
• Body fonts are Istok Web (from Google Web Fonts) and Quaver from Lost Type.
• Display fonts are three weights of The Font Bureau's Titling Gothic.
• The desktop version of this site is the mobile version of this site is the iPad version of this site. All inspiration from this invaluable little book by Ethan Marcotte.

This — emm-dot — is the big one. For most of summer and autumn 2011, I was wireframing, designing, coding, and relentlessly testing these three pages, in as many combinations (processor, browser, iOS-version, device, connection) as I could steal.

This has also been the most fun I've ever had since I got in to the making-websites business.

"Most of the time, creating a separate mobile website is simply a cop-out."

— The Man

Of course, he's right. (He literally wrote the book from which I learned JavaScript. And, along with Marcotte, he's evangelized the best and most progressive sermons about responsiveness, and the beautiful universalness of markup on the whole.)

The trick of it is that PBS KIDS is predominantly in the service of two types of content: video clips and games. In large part, those are — in the desktop experience — delivered to your particular three-to-eight-year-old over Flash. But what about when she picks up the family iPad, iPhone, or iPod touch? Right: No Flash. Still, I know a few things.

1. She is currently holding a world-class WebKit browser.
2. Her WebKit browser will happily handle any bleeding-edge CSS3 enhancement I choose to throw at it. Meaning, I can lean on all those bleeding-edge tricks to cut back on what-would-otherwise-be bandwidth-sucking PNGs.
3. PBS KIDS has a (rapidly growing) collection of non-Flash games.
4. Her WebKit browser knows HTML5. And that means it can play videos.

And on went the miner's cap.

By now, there are entire passages of Marcotte's gospel that I've downright memorized. Same for the official WebKit documentation on <VIDEO> methods exposed to HTML5. Threw SVG in the mix, too, because — well, because the Mobile web is perfect for SVG. (Trust me, downscaling 2x raster logos only gets you so far. Vectorize that sucker and it'll look crisp as crisp. Saves precious kilobytes, too.)

There's a lot to recap about this project, but I'll save that for coffee or beer or something. Not to diminish the design part — I'm thrilled with how it looks — but on a personal note, the technical side was a revelation to me. I unlearned nearly every one of the habits, overly-clever-tricks, secondhand biases, and "layer hacks" that I'd leaned on for over half a decade. Just threw 'em all out. When a pixel is no longer a pixel — or, rather, when pixels just don't matter in how a composition flows — your whole world turns upside-down. And those humble, erstwhile tools of markup, styling, and behavior suddenly look new.

God, this was fun.

Is there such a thing as the perfect web design project? I avoid hyperble on principle, so I'd hedge toward "no." If such a thing were possible, I'd imagine it to (implausibly) go like this:

1. Content would be equally enticing for both kids and adults.
2. Lots of cleanly-organized lists of stuff. (I enjoy lists of stuff.)
3. A design (and information flow) that straddles both "intuitive" and "really, really fun."
4. Obsessively-semantic (yet lean) HTML5 structure, plugin-free JS client-side interaction, and CSS3 to gracefully deliver the visual goods.
5. Fun to use.
6. Zero structural markup errors.
7. No markup-output compromises on the content-management, templating front.
8. Fun to use.
9. Deliberate, responsive screen experience across all devices and resolutions.
10. FUN TO USE.

Anyway, you get the picture.

Launched in May 2011, PBS KIDS Mobile was the site I've wanted to make for years. The right audience, the right amount of (growing, slightly unpredictable) content, and the right technical support to pull out all the whizbang front-end stops.

What was great about thinking, wireframing, thinking, designing, re-thinking, and then coding this site, was how unexpectedly simple it all isn't. I've long been used to the typical setup of "here's some content types," "here's their listing pages and detail pages," and "here's their taxonomic binding," but I haven't handled a project with this much intra-node variability before — because mobile apps are bananas. Portrait, or landscape, and sometimes both. One platform, or maybe two. Or five. Sometimes two storefronts for one platform. Sometimes separate platforms through one storefront. But one URL. (And so on.) In this, I'm proud of the fact that it still resembles the initial picture in my head: It's fun to click things.

It also afforded me the chance to play with stuff that I've wanted to for a long time. There's a good chance that many kids (and parents) will be navigating this on the family iPad, so a universally-playable, semantic, handcrafted HTML5 video would be necessary for all those fun demo clips. Also, all those aforementioned quirks (different devices, different age ranges, etc.) meant that the home listing view would be perfect for exploiting HTML5's arbitrary custom data attributes for inline picking/fitlering. (Thanks, .attr()!)

Also, it got picked up by DesignSnips.

Anyway, stop reading this and go download some games.

It's weird to explain this one, but bear with me.

First, the Games landing template, and the whole bottom half of the subordinate templates, weren't conceived by me: they're the creative brainchild of Chris Bishop. Call me a co-designer, for those sub-pages.

For the "landing" page, I left every pixel unchanged. But I ripped the wallpaper, carpeting, and flooring out. (I guess if you can call the Django admin-backend the "concrete foundation," I left that.) The same layout you see now is what had been there before, but — before I got all antsy — it was written in a patchwork of HTML4, jQuery plugins, and a handful of Flash components.

So, I tore it all down, got overly clever in Photoshop, and turned it back around with zero dependencies and fully-semantic, metadata-rich HTML5. Looks great on an iPad.

This left the sub-pages in an awkward state, since we figurd we'd already gone this far — why not extend this HTML5-proof-of-concept to the nines? And, while we're at it, redesign it?

So, I tackled both. Even took advantage of our fancy, modern age's wide adoption (finally) of position: fixed to get that metadata-hinting "ledge" up top to reveal each single node's "Game Goals." Colorful wallpapers based on Chris's adorable topic icons rotate throughout. And it's as backend-flexible and markup-modular as the day is long.

Guys like me don't hate Flash. I don't even dislike it on principle. Hell, we'd have to radically reimagine the entire past decade-plus history of games, kiosks, interactive art, and pre-HTML5 video otherwise.

But what guys like me do get a kick out of is the addictive, exciting, fun, stretchy accessibility of the semantic Web. Not just accessible as in "assistive devices" (though that's important) — I mean access! As many people using this stuff as possible, and as many people getting into it as we can. Doesn't matter where they're coming from, or their bandwidth, or their device, or whether-or-not there's a glowing apple there or not. If you've got an internet connection, then I've got some sweet interactive content for you.

Naturally, iOS has kicked all this into high gear. And, increasingly, the "family computer" — Mom is using it just as much as Junior — is becoming the iPad. A big, fat, fast, WebKit-drenched, CSS3-whirring, HTML5-happy browser that won't play Flash. It's a challenge with its own built-in rewards.

So, I've been doing a lot of this over at PBS KIDS HQ. Things that read from XML, things that talk back to XML, and sometimes, when the stack's too tall (or the pipe's too narrow), scrubbing JSON instead. But it's all in the DOM, it's all semantic, and (to quote Warren Zevon) he don't care who you are. IE6, iPad, desktop Firefox; you're all invited.

I'm not entirely sure how the guy pulls it off. Funny thing about the Web: Everything we do is borrowed language, and the bulk of it got stolen from carpenters. We build (not code) sites according to information architecture, on top of platforms. To say nothing of all the wireframes and scraping and meetings where we hammer things out. Cripes.

Suffice it to say, Mike's one of those guys who actually does all that stuff, in the original meaning of each term. I've seen him turn a kitchen into a laundry room, then just add another, new, kitchen on the back, since why not. Oh, and he's a published author and speaker and father and husband and twotime Boston Marathon finisher.

Man needed a site. I came to it with a fetish for the workmanship of Futura Bold and a desire to pipe as much semantic, lean, accessible polish out of WordPress 3 as I could. Mike came to it with five years' worth of legacy posts from another platform, plus some pretty sweet paint scrapers for me to photograph.

The IA was sketched out in his kitchen over a couple (few) Dogfish Heads, and we realized this needed to be more than blog posts. All the new Types are hand-rolled in WP3's native support for hand-registered CPTs (part of my staunch anti-plugin tirade), and the result is tab-indentation-obsessed, HTML5, standards-loving, sawdust-littered writing like you've never read. (The markup valdiates, too, unless there's a video involved.) (YouTube, we need to talk.)

I don't get doggedly, insistently zealous about many things. There are just a couple, and this is at the top of the list.

Guys like me got into [insert CMS/framework of choice] because of either-or-both design and front-end development. "We're making some pretty cool-lookin', cool-functioning stuff," we all said. "Now if only we could make them actually work." All us lazy, hipster, non-CS-degree designers pretty much said that in unison around 2005, then broke for whatever we could find: the Drupals, the EEs, and, of course, the WordPresses. Along the way we picked up proprietary things, handmade things, broken things, expensive things, and terrible things. But we got some LAMP cred, by god.

Basically, I got tired of arguing the case that, by 2010 (or, frankly, 2009 or 2008 or 2007 or so on), "handcrafted, perfect front-end code" and "oh hey, we need content management" were, at all, mutually exclusive. It's a two-pronged, 147-slide, energetic, delievered-separately-on-two-coasts presentation that makes two points: (1) Front-end matters, and (2) Accepting that, WordPress does a hell of a good job letting you take the wheel.

At the end of the day, despite appearances, I'm not a WordPress zealot, or a [insert CMS that rhymes with "Poopal"] hater. I'm just a guy who loves front-end code, and I've been insatiably happy with the former tool for leading the charge in markup flexibility.

It's just heartbreaking to see the compromises that designers, developers, and site visionaries accept just because of one cog in the project wheel: The CMS. It's 2010, gang. Instead of narrowing our ideas and (god forbid) CSS-hacking our way into tool compliance, let's change our thinking and sleep better at nights.

Somewhere around the fourth or fifth grade, you took your first U.S. History coursework. Was it fun? Engaging? Full of connection points that made seemingly-distant people and stories suddenly spark with real-life, modern-day relevance?

Ha ha, of course it wasn't any of those things. You were so bored that you started making a careful study of how long it took for a wad of gum to dry on the chair in front of you.

It's a shame, too, becuase this stuff is inherently fun. So, that's what I do on the side. The National Archives has a big stash of online goods, so I reach in, once or twice a week, and come back out with an inapprorpiately irreverent take (words and a comic strip) about what the heck is actually happening here, besides the novelty that "it happened on this date."

And I've had a ball so far. Some tech/education blogs have written some very flattering and kind things about it; it's been used by real teachers in real classrooms; the Archives invited me in for a video bit; and I've taken it outdoors as an excuse to run around and yak about amendments.

A while ago, I did some work for Americans United, a DC nonprofit that educates and advocates for First Amendment protections. This is already right-up-my-alley for about a dozen reasons. The fact that there were legacy campaign-sites that needed redesigning only helped.

Project Fair Play was, despite its compact size and comparatively "thin" IA, one of my favorites.

• Non-obtrusive, fast-loading, license-happy Futura Bold. And this was long before we ever had "TypeKit," kids. Respect.
• I took the helm of reshuffling and cleaning up the legacy IA/content strategy. Upon a clear, bird's-eye-view audit of what was actually there, new, crisper patterns became apparent.
• Ground-up, hand-registered WordPress 3 (new, then) theming for easy, code-free, modular updates. "Pages" are different from "Posts" are different from "News Updates."

Oh, and it got picked up by Web Creme.

I like design, and I like education. So, I did a couple projects for that esteemed educational-publishing concern, Indiana University Press.

They couldn't have had less in common.

Tyrannosaurus rex, the Tyrant King: CD-ROM

Taking baseline typographic cues from the physical book's (award-winning) designer, Jamison Cockerham, I mapped out, designed, and coded the Flash-based CD-ROM accompaniment to The Tyrant King.

So, it's a Mac- and Windows-launchable, self-contained executable where grids of little things become big, big things show captions, a video plays, and smooth animations gracefully transition from scenes to hierarchical information-levels.

In other words, it's exactly the kind of thing that, today, I kick myself over, since I know how to pull it off in a few kilobytes of CSS, semantic HTML, and handcrafted JS. Look, we didn't have ASIDEs and FIGCAPTIONs in 2008. Youth is wasted on the young. The big wheel keeps on turning. C'est la vie.

The Battle of Dobro Pole: Maps

If I hadn't gone to school for design, I would have gone for geography. Maybe history. But, probably, geography. It's the closest I've got to a professional regret.

As fate would have it, design, illustration, history, and geography collided together when I vector-drew six maps for the interior of Richard Hall's exhaustive, canonical study of a turning-point WWI fight near what-we-might-as-well-call "Greece": Balkan Breakthrough: The Battle of Dobro Pole, 1918.

So, I gathered up Mr. Hall's sketches, grabbed a bunch of quarters for atlas-Xeroxing (which I figured I'd then scan, match up with Google's satellite view, and then Illustrator-trace over), and confidently went down to the library.

I didn't count on three things.

1. Virtually all the political boundaries (and cities, too) between 1918, whenever-the-atlases-were-drawn, and today, are gone.
2. Some of the physical boundaries (shorelines, etc.) are gone, too.
3. Every physical feature (mountains, rivers, etc.), with the exception of the Mediterranean Sea, has been renamed in the last century.

So, making these six maps took a long time.

But I like 'em.

(For a fun cocktail-party trick, ask me literally anything about WWI-era Hellenic geography.)

I debated whether or not to include this. After about five minutes, I figured to hell with it. Reasons against:

1. The FORM element isn't label-valid or accessible. It was a cheap way to get data passed back to the AJAX model.
2. An AJAX model that I didn't even code.
3. And I leaned on a jQuery plugin to do what I was too lazy to do (namely, crank the FORM elements into style-able lists). And I'm always the guy pushing to get away from jQuery plugins.

Reasons for:

1. It's fun.
2. I still like the background image.
3. It was a great way to spend a Saturday afternoon.
4. Dammit, I paid $40 for that weight of Skyline Gothic, and I'm going to show it off.

Design and for-what-it's-worth "front end" (I know, I know) by me. Concept and data processing by my partner in marathon-running crime, Jared.

I recently did one of those long-belated hard drive backups. The whole nine yards, too: DVD backup, then HD backup, then Time Machine. Now there's a weekend I'm never getting back.

In so doing, I came across projects I did in the late-'00s that I'd already completely forgotten about. Some for me, some for the University of St. Thomas, and some wayside stragglers. Illustrated stuff, Flash stuff. (I used to do a lot of Flash.)

Here's some zero-context screenshots that I liked.