Ten Years Ago on the Web

2006 DOESN’T seem forever ago until I remember that we were tracking IE7 bugsworrying about the RSS feed validator, and viewing Drupal as an accessibility-and-web-standards-positive platform, at the time. Pundits were claiming bad design was good for the web (just as some still do). Joe Clark was critiquing WCAG 2. “An Inconvenient Truth” was playing in theaters, and many folks were surprised to learn that climate change was a thing.

I was writing the second edition of Designing With Web Standards. My daughter, who is about to turn twelve, was about to turn two. My dad suffered a heart attack. (Relax! Ten years later, he is still around and healthy.) A List Apart had just added a job board. “The revolution will be salaried,” we trumpeted.

Preparing for An Event Apart Atlanta, An Event Apart NYC, and An Event Apart Chicago (sponsored by Jewelboxing! RIP) consumed much of my time and energy. Attendees told us these were good shows, and they were, but you would not recognize them as AEA events today—they were much more homespun. “Hey, kids, let’s put on a show!” we used to joke. “My mom will sew the costumes and my dad will build the sets.” (It’s a quotation from a 1940s Andy Hardy movie, not a reflection of our personal views about gender roles.)

Jim Coudal, Jason Fried and I had just launched The Deck, an experiment in unobtrusive, discreet web advertising. Over the next ten years, the ad industry pointedly ignored our experiment, in favor of user tracking, popups, and other anti-patterns. Not entirely coincidentally, my studio had just redesigned the website of Advertising Age, the leading journal of the advertising profession.

Other sites we designed that year included Dictionary.com and Gnu Foods. We also worked on Ma.gnolia, a social bookmarking tool with well-thought-out features like Saved Copies (so you never lost a web page, even if it moved or went offline), Bookmark Ratings, Bookmark Privacy, and Groups. We designed the product for our client and developed many of its features. Rest in peace.

I was reading Adam Greenfield’s Everyware: The Dawning Age of Ubiquitous Computing, a delightfully written text that anticipated and suggested design rules and thinking for our present Internet of Things. It’s a fine book, and one I helped Adam bring to a good publisher. (Clearly, I was itching to break into publishing myself, which I would do with two partners a year or two afterwards.)

In short, it was a year like any other on this wonderful web of ours—full of sound and fury, true, but also rife with innovation and delight.

As part of An Event Apart’s A Decade Apart celebration—commemorating our first ten years as a design and development conference—we asked people we know and love what they were doing professionally ten years ago, in 2006. If you missed parts onetwothree, or four, have a look back.



Ad Blocking Phase II

screenshot of Choice app from Been, Inc.

THE WORLD has finally caught up with Been, Inc. Three years ago, this tiny start-up company shared my studio space in New York. Their product idea was remarkably original: instead of passively accepting the data collection and loss of privacy that comes with most ad networks on the web, what if people had a choice—to either block ads and third-party trackers entirely, or earn rewards for letting ads through?

The initial web-based product, playfully designed by Monkey Do, took the scariness and complexity out of tracking issues, and returned the decision making power to the consumer. Unfortunately, the mainstream web wasn’t ready for ad blocking, and consumers en masse either weren’t ready to think about privacy, or simply didn’t know the company’s value proposition because of its nonexistent marketing budget. (The only thing that kills products faster than no marketing is poor execution—although a handful of products have survived both.)

To stay afloat in the face of mass indifference, the company temporarily pivoted, using a portion of their technology to facilitate sharing of web content between consumers, much like the late lamented Ma.gnolia or Pocket’s new Recommended section. But where Ma.gnolia and Pocket were/are text-powered, the pivoted Been app was primarily visual, which helped it gain traction in the eduation market. Grade-school teachers and kids loved using the app for research projects—and their support helped the company stay in business long enough for the internet to catch up with their ideas.

Version 2.0 of their Choice app for iOS is the product of years of work on user privacy, data ownership, and control. iOS fans can download it at www.been.mobi/getv2edu.

The company’s site explains the push-button mechanics through which you can choose to block ads and third-party trackers in your apps and Safari, or earn rewards by letting ads through and sharing (strictly non-personal) information with Been. (Earn Mode is limited to US users for now.)

When I foolhardily put down my deposit on a New York studio that was larger and more costly than what I needed, my hope was that it would attract a like-minded community of designers and tech companies from whom I would learn and be inspired. That was certainly the case with my friends at Been! I wish them great success at helping to bring the changes our web needs.

Save “Save For Web”

TWENTY years or so ago, Adobe Photoshop was, as its name suggests, primarily a tool for professional commercial photographers. Strange though it may seem for a company that now sells its software via a “Cloud” subscription service, the web was not at all on Adobe’s radar in those days. “Save For Web” was not even a widely held concept, let alone a Photoshop menu option.

This vacuum created an opportunity for independent developers and designers. Which is how the very talented Craig Hockenberry of Iconfactory and I came to release Furbo Filters, an indie shareware product that let designers prepare images for the web. It did a few other things as well, such as offering garish, psychedelic treatments you could apply to any image—not unlike the far more expensive (and also far, far more developed) Kai’s Power Tools. (And you know what they say: if you’re old enough to remember Kai’s Power Tools, there’s a Drop Shadow in your closet. But I digress.) Some of you may have used DeBabelizer to manage your web color palettes in those days when Adobe and Photoshop ignored the web. Some may even have used Furbo Filters.

Then Adobe created a “Save For Web” option (in Photoshop 5.5), and Furbo Filters’s beautiful market was gone in a moment. All that remains as a memento of that time and that product is the domain name furbo.org, which is where Craig keeps his blog.

I was reminded of this during a workplace discussion about the seeming disappearance of “Save For Web” from modern Photoshop.

To be clear, “Save For Web” still exists in Photoshop CC 2015. But it has been rather awkwardly deprecated, as revealed through both UX (“Save For Web” no longer appears in the part of the interface where we’ve been trained to look for it for the past twenty years) and language: when we stumble onto “Save For Web” hiding under Export, after not finding it where we expect it, we’re presented with the words “Save For Web (Legacy),” clearly indicating that the feature is no longer a recommended part of today’s workflow.

Adobe explains: “Because Save for Web is built on the former ImageReady product (now discontinued), the code is too antiquated to maintain and develop new features.” (If Furbo Filters and DeBabelizer didn’t resurrect dead brain cells for some of you, I bet “ImageReady” did. Remember that one? Also, how scary is it for me that half the tools I’ve used in my career only exist today as Wikipedia entries?)

Instead of Save For Web, we’re to use Export: Export As…, which Adobe has built on its Generator platform. Stephen Nielson, writing on Jeff Tranberry’s blog for Adobe, explains:

Adobe Generator is a new, modern, and more efficient platform for exporting image assets from Photoshop. We have been building new capabilities on top of this platform for the past two years, including the new Export As and Device Preview features. The Generator platform allows us to build new, streamlined workflows and incorporate more efficient compression algorithms like PNGQuant into Photoshop.

The new Export As workflows are a complete redesign of how you export assets out of Photoshop. Export As has new capabilities like adding padding to an image and exporting shapes and paths to SVG. We also introduced the Quick Export option, which allows you to export an entire document or selected layers very quickly with no dialog.

Going forward, we will no longer develop new features in Save for Web, which is why it now is labeled as “Legacy”. Don’t worry; no features have been removed from it and we know there are critical workflows that still require Save for Web. However, Save for Web does not support, for example, new Artboard documents.

—Jeff Tranberry’s Digital Imaging Crawlspace, “Save for Web in Photoshop CC 2015

While I believe the Export As function is built on newer code, and I get that Adobe is committed to it, after months of use, I still spend a tremendous amount of time searching for Save For Web whenever I use Photoshop. And when I make myself use Export As, I still don’t feel that I’m getting the speed, power, and options I loved and came to depend on in Save For Web. This is a subjective reaction, of course, and “users hate change” is not a truth to which designers are immune—but I’ve yet to meet a designer who prefers the new tool and doesn’t feel confused, frustrated, and bummed out about the switch.

What I’m saying is, Craig, let’s talk.

Zen & The Art of iTunes Failure 

REBUILDING iTunes library from scratch over two days got app working again. Fine use of lazy weekend.

Had to sacrifice all custom playlists dating back to 2002, including An Event Apart playlists and delivery room mix from Ava’s birth.

Playlists still exist on old iPod but can’t be copied from it back to iTunes. (All software I’ve tried freezes & fails.)

Playlists still exist as code snippets inside .itl file in old iTunes folder, but numerous trials prove iTunes can’t launch from that folder any more. Thus I can’t temporarily launch from old folder, export playlists, switch back to safe new folder, and import them, thereby saving them.

And iTunes can’t import old .itl files. I Googled. I tried anyway.

13 years of custom playlists. From before, during, and after my marriage. Including one my daughter called “princess music” and danced to when she was three. Gone.

But, really, so what? Over time we lose everything. This loss is nothing. Attachment is futile. Always move forward, until you stop moving.

A Helvetica For Readers

A Helvetica for readers–introducing Acumin.

ACUMIN by Robert Slimbach is a new type family from Adobe that does for book (and ebook) designers what Helvetica has always done for graphic designers. Namely, it provides a robust yet water-neutral sans-serif, in a full suite of weights and widths. And unlike the classic pressing of Helvetica that comes on everyone’s computers—but like Helvetica Neue—Acumin contains real italics for every weight and width.

Reading about the design challenges Slimbach set himself (and met) helps you appreciate this new type system, whose virtues are initially all too easy to overlook, because Acumin so successfully avoids bringing a personality to the table. Enjoying Acumin is like developing a taste for exceptionally good water.

Nick Sherman designed the website for Adobe, and its subtly brilliant features are as easy to miss at first look as Acumin’s. For starters, the style grid on the intro page dynamically chooses words to fit the column based on the viewport size. Resize your browser and you’ll see how the words change to fill the space.

Heaps of behind-the-scenes calculation allow the page to load all 90 (!) fonts without breaking your pipes or the internet. Developer Bram Stein is the wizard behind the page’s performance.

Nick uses progressively enhanced CSS3 Columns to create his responsive multi-column layout, incorporating subtle tricks like switching to a condensed font when the multi-column layout shrinks below a certain size. (This is something A List Apart used to do as well; we stopped because of performance concerns.) In browsers like IE9 and earlier, which do not support CSS3 Multiple Column specification, the layout defaults to a quite readable single column. Nick adds:

It’s the first time I’ve used responsive CSS columns for a real-world project. This was both frustrating and fun because the CSS properties for controlling widows and orphans are very far behind what’s possible in InDesign, etc. It also required more thinking about vertical media queries to prevent a situation where the user would have to scroll up and down to get from the bottom of one column to the top of the next. If the viewport is too short to allow for easy reading across columns, it stays as a single column.

He describes the challenges of creating the site’s preview tool thusly:

We had to do some behind the scenes trickery in order to get the sliders to work for changing widths and weights. It’s a good way to allow people to type their own text and get a feeling for how the family can be used as a system for body text and headlines (unlike Helvetica, which is more limited to the middle range of sizes). Chris Lewis helped out a lot with getting this to work. It even works on a phone!

Book designers have long had access to great serif fonts dripping with character that were ideal for setting long passages of text. Now they have a well-made sans serif that’s as sturdy yet self-effacing as a waiter at a great restaurant. Congratulations to Robert Slimbach, Adobe, and the designers and developers mentioned or interviewed here. I look forward to seeing if Acumin makes it into new website designs (perhaps sharing some of Proxima Nova‘s lunch), especially among mature designers focused on creating readable experiences. And I pray Acumin makes its way into the next generation of ebook readers.

(Just me? In both iBooks and Kindle, I’m continually changing typefaces after reading any book for any period of time. All the current faces just call too much attention to themselves, making me aware that I am scanning text—which is rather like making filmgoers aware that they are watching projected images just when they should be losing themselves in the story.)

Big Web Show № 117: The Real Macaw – Stop Writing Code, Start Drawing It

Macaw, the superhot web design tool of the future

IN BIG WEB SHOW Episode № 117, Tom Giannattasio, Founder/CEO of Macaw, “the superhot web design tool of the future,” joins me to discuss a paradigm shift: can we really draw semantic HTML and succinct CSS? How it works. Pixels, percentages, ems, or rems? Designing a design tool. How to quit your job. From Kickstarter to startup. Team building. Responsive design, responsive community.

Achieving Empathy for Institutions with Anil Dash

Anil Dash

IN BIG WEB SHOW № 115 on Mule Radio, I talk with Anil Dash, a hugely influential entrepreneur, blogger, and web geek living in NYC.

Things we discuss include:

How government, media, and tech shape the world, and how we can influence them in turn. Our first meeting at SXSW in 2002. How selling CMS systems teaches you the dysfunction at media companies and organizations. Working for the music industry at the dawn of Napster. RFP-EZ. The early days of blogging.

Designing websites for the government—the procurement problem. If we’re pouring all this time into social media, what do we want to get out of it? How big institutions work and how to have an impact on them. Living in “Joe’s Apartment.”

Why, until recently, federal agencies that wanted a blog couldn’t use WordPress or Tumblr and how the State Dept got on Tumblr. Achieving empathy for institutions. Being more thoughtful about what I share and who I amplify on social media. The launch of Thinkup, and a special offer exclusively for Big Web Show listeners.

Enjoy Big Web Show № 115.

Sponsored by An Event Apart, the design conference for people who make websites. Save $100 off any 2- or 3-day AEA event with discount code AEABWS.

Cloudy With A Chance of Blueballs

I RECENTLY SHARED a positive view of what’s happening at Adobe. I’m still a huge fan of the company’s image editing software, and I remain optimistic about their new direction. But I’m unhappy about the two-device limitation Adobe Cloud places on software.

While the company is more liberal than it used to be (e.g. a license to use Adobe software on the Mac is also a license to use it in Windows, and vice-versa), the Cloud’s refusal to let me use software I’ve purchased from Adobe on more than two devices feels like a relic of the past. It’s a restriction that might have made sense for print designers working in corporations in the 1990s, but it is out of touch with the reality of remote and freelance workers designing digital sites and applications for a multi-device world.

I have an office iMac, a home iMac, a home laptop, and an office laptop. I use all of them for my work. My set-up is not unique. Everyone I know who works in this industry has something similar going on.

Apple gets this reality but Adobe does not. For instance, my copy of Lightroom 4, which I bought via the App Store, works everywhere. Not so Lightroom 5, which I purchased (rented? licensed?) as part of my annual Cloud subscription. As a paying Adobe Cloud customer and a photography and Lightroom fanatic, I should be chomping at the bit to upgrade to Lightroom 5. But I see no point in doing so if I’m only going to be able to use Lightroom on two machines.

You might ask why this is is a problem. Here are three times I use Lightroom: to edit business, family, and vacation photos on my laptop while traveling; to edit business photos on the computer in my design studio; and to edit family and travel photos on the computer in my home. Adobe Cloud will let me use Lightroom 5 in two of these situations, but not all three. That makes it useless to me. Lightroom 4, which I bought in the App Store, has no such restrictions. I can use it on as many machines as I own. (To be fair, Apple can easily afford to be liberal with software licensing, because it makes its money on the hardware I buy. Adobe does not. I get that, but understanding doesn’t solve my problem.)

Likewise, I need to use Photoshop when I’m traveling on business (laptop), when I’m working in my design studio, and when I’m burning the midnight oil at home. Adobe will only let me use the product in two of these contexts. Stymied, I use an older, non-cloud version of Photoshop on one or more machines—and when I do that, I run into compatibility problems.

Although I love Photoshop and have used it professionally for nearly two decades, I can’t help noticing that Pixelmator does pretty much everything I need Photoshop to do, costs a fraction of the price (US $29.99), and can be downloaded onto an unlimited number of computers I own.

Why should Adobe care? Because the current restriction is not sustainable for them. The frustrations the restriction creates for me every day actively encourage me to stick with Lightroom 4 and abandon Photoshop for a much more affordable competitor. In short, the one thing that’s uncool about the Cloud is actively unselling all the Cloud’s benefits. And that can hardly be in Adobe’s long-term interest.

What can Adobe do about it? Well, the company could offer a “pro” or “gold” version of Cloud service that removes the two-device restriction. If the difference in price is reasonable, I’d happily sign up. Even better, from a public relations as well as a love-your-neighbor point of view, would be if Adobe simply removed the restriction at no additional cost. Or set the restriction higher, allowing you to register Cloud software on up to five devices you own.

Whatever they do, they should do it soon. We want to keep working with Adobe software, but Adobe needs to work with us, too.

The Lords of Vendorbation


noun : Unusable web-based intranet software foisted on large populations of users who have no say in the matter. For example, the “dynamic” website for your kid’s school, on which you can never find anything remotely useful—like her classroom or the names and email addresses of her teachers. Merely setting up an account can be a Borgesian ordeal minus the aesthetics.

Tried updating a driver’s license, registering a name change after a marriage, or accomplishing pretty much any task on a local, state, or federal website? Congratulations! You’ve been vendorbated. In ad sales? In publishing? Travel agent? Work in retail? Y’all get vendorbated a hundred times a day. Corporate America runs, not very well, on a diet of dysfunctional intranets sold by the lords of vendorbation.

Terrible food kills a restaurant. Terrible music ends a band’s career. But unspeakably terrible software begets imperial monopolies.

Wholesale contractual vendor lock-in between vendors of artless (but artfully initially priced) web software and the technologically unknowing who are their prey (for instance, your local school board) creates a mafia of mediocrity. Good designers and developers cannot penetrate this de-meritocracy. While they sweat to squeeze through needle’s eye after needle’s eye of baffling paperwork and absurd requirements, the vendorbators, who excel at precisely that paperwork and those requirements, breeze on in and lock ‘er down.

Vendorbation takes no heed of a user’s mental model; indeed, the very concept of a user’s mental model (or user’s needs) never enters the minds of those who create vendorbatory software. I say “create” rather than “design,” because design has less than nothing to do with how this genre of software gets slapped together (“developed”) and bloated over time (“updated”).

Vendorbatory product “design” decisions stem purely from contingencies and conveniences in the code framework, which itself is almost always an undocumented archipelago of spaghetti, spit, and duct tape started by one team and continued by others, with no guiding principle other than to “get it done” by an arbitrary deadline, such as the start of a new school year or the business cycle’s next quarter.

Masturbation, or so I have read, can be fun. Not so, vendorbation. It is a nightmare for everyone—from the beleaguered underpaid lumpen developers who toil in high-pressure silos; to the hapless bureaucrats who deserve partners but get predators instead; from the end users (parents, in our example) who can never do what they came to do or find what they want, and who most often feel stupid and blame themselves; to the constituents those users wish to serve—in our example, the children. Will no one think of the children?

Cha-ching! Like a zombie-driven un-merry-go-round spinning faster and faster as the innocents strapped to its hideous horses shriek silently, the vendorbation cycle rolls on and on, season after bloody season, dollar after undeserved dollar, error after error after error after error in saecula saeculorum.

Think it’s bad now? Wait till the lords of vendorbation start making their monstrosities “mobile.”

Doff of the neologist’s toque to Eric A. Meyer, whose cornpensation helped crystalize what to do with the bad feelings.

HTML5 Video Player II

JOHN DYER’S MediaElement.js bills itself as “HTML5 <video> and <audio> made easy”—and that’s truly what it is:

For complete information, visit mediaelementjs.com.

Hat tip: Roland Dubois.