The Essentials

Like Buttons Falling From the Sky

Buttons with the word “like” and a thumbs-up icon on them are going to start popping up all over the Internet [web]. By clicking one, you indicate that you find the content interesting, relevant or helpful. Basically, you would recommend it to a friend.

Before Wednesday, “like” buttons only were on Facebook. Now, they’ll be all over the place… When you click one, you post the item — whether it’s a blog post, photo or celebrity web page — to your Facebook news feed.

So how will this differ from what we have currently? For instance, how will it differ from things like the Retweet button and the social toolbar (featuring buttons for Tumblr, Facebook, Digg, and so on) found at the bottom of this post and on millions of other websites?

It will differ in three ways:

The “like” button differs from a Facebook button in that it isn’t a gateway to the Facebook website; it’s a piece of the Facebook website stuck on other sites. Conceptually, this makes those sites “pages on Facebook,” and makes Facebook a dominant platform.

Unlike with ordinary social buttons, you won’t have to enter a user name and password. If you’ve used Facebook recently, you’ll be able to click the “like” button on Joe’s website and have it show up in your Facebook news feed—no further action required. Again, the concept is that every site on the web is merely a page or section on Facebook; that Facebook, instead of a walled garden hidden from the web, is now the firmament on which the rest of the web rests.

Finally—and here’s the part that freaks some people out—your friends’ faces will show up on websites where they’ve clicked the “like” button. Think about that. You’re on Joe’s website. You see your wife’s, girlfriend’s, and minister’s faces smiling at you from Joe’s website. The people who matter to you, and who you thought you had compartmentalized in the privacy of Facebook, a non-public-facing, password-protected website, are now out in the open. (Of course, they are out in the open to you. Achmed will see his friends, not yours. Still.)

So what will this Facebook’s redefinition mean, ultimately? No clue. But most of us, if we think about it, have seen Big Things like this come and go on the web. Remember when every third website required Microsoft Passport to unlock features or let you log in? And Mac and Linux users were angry, because the web is supposed to be an open platform, not a dominant vendor’s sandbox? Remember? Probably not. It was quite a big deal at the time, but almost nobody thinks about it now.

Stop chasing followers

The internet is not a numbers game. It’s about dialog, persuasion, and influence.

You don’t want a million people reading your HTML5 blog. You want members of the HTML5 working groups and key influencers from Google, Apple, and Microsoft reading your HTML5 blog. Likewise, it’s better to have twenty meaningful comments than a thousand +1s.

Ditto with Twitter follower counts. What it would gain you to acquire all the followers in the world? Bragging rights? Mysterious leverage? The ability to convince a not-very-bright business person that what you have to say matters, because n millions follow you?

Following doesn’t mean paying attention. You don’t want numbers on Twitter, not really. What you want is to follow and be followed by human beings who care about issues you care about.

This thing we make together. This thing is about hearts and minds, not eyeballs. Especially not eyeballs that aren’t even watching. Eyeballs is so 90s. And it was never the right metric.

This thing. If numbers are your strategy to win at this thing, you’ve already lost. This thing is not a game. There is no winning. There is only mattering. If you don’t understand that, you aren’t making a difference.

Opera loves my web font

And so do my iPhone and your iPad. All it took was a bit o’ the old Richard Fink syntax and a quick drive through the Font Squirrel @Font-Face Kit Generator (featuring Base 64 encoding and SVG generation) to bring the joy and wonder of fast, optimized, semi-bulletproof web fonts to Safari, Firefox, Opera, Chrome, iPhone, and Apple’s latest religious device.

Of Google and Page Speed

Google’s addition of a page speed signal to its search rankings algorithm officially links performance with search engine marketing. The loading speed of a web page affects user psychology in a number of ways, and now it can effect its rankings as well.

This back-to-basics message catches us at a funny time in web design history.

“Make more of less” has long been the norm

Most of us who’ve designed sites for quite a while, and who consider ourselves user- and standards-focused, have traditionally designed sites that loaded faster than the competition. We did it by using caching technologies (CSS instead of table layouts, linked instead of inline JavaScript, and so on). For many, many years, we also did it by keeping images to a minimum, using system fonts instead of pictures of type, CSS colors instead of faux backgrounds, and so on.

As the web audience grew, heavily trafficked sites became even more restrictive in their decorative flourishes, whether they cared about web standards or not. Thus Google, while happily using bad CSS and markup, exerted monk-like discipline over its designers. Not only were images out, even such details as rounded corners were out, because the tiny images needed to facilitate rounded corners prior to CSS3 added a tenth of a kilobyte to page weight, and a tenth of a kilobyte multiplied by a billion users was too much.

Of late, we have grown fat

Yet in the past few years, as wideband became the norm, every mainstream site and its brother started acting as if bandwidth didn’t matter. Why use 1K of web form when you could use 100K of inline pseudo-Ajax? Why load a new page when you could load a lightbox instead?

Instead of medium-quality JPEGs with their unimportant details painstakingly blurred to shave KB, we started sticking high-quality PNG images on our sites.

As these bandwidth-luxuriant (and not always beautiful, needed, or useful) practices became commonplace on mainstream sites, many advanced, standards-focused web designers were experimenting with web fonts, CSS3 multiple backgrounds, full-page background images, and other devices to create semantic, structurally lean sites that were as rich (and heavy) as Flash sites.

So now we face a dilemma. As we continue to seduce viewers via large, multiple background images, image replacement, web fonts or sIFR, and so on, we may find our beautiful sites losing page rank.

Opera hates my web font

So I’ve wanted to use a condensed, bold Franklin typeface for my site’s headlines since, well, forever. So I bought Fontspring’s fine Franklin Gothic FS Demi Condensed and licensed it for @font-face use for a mere $2.99, an incomparable value.

It looks great in Safari, Chrome, and Firefox, but not so nice in the latest version of Opera, where it resembles the inside-out test monkey in Cronenberg’s “The Fly.” (Okay, okay, it looks like a ransom note, but the monkey simile was more picturesque.)

And this, my friends, is why Typekit exists. Because even when you find a great font that’s optimized for screen display and can be licensed for CSS @font-face use, guess what? There is almost always some glitch or bug somewhere. And Typekit almost always seems to find and work around these bugs. It’s the kind of grueling task designers hate dealing with, and Typekit’s team loves solving.

If this were a client site, I’d switch to Typekit, or try licensing a different vendor’s Franklin, or (if neither of those options proved satisfactory) dump web fonts altogether and use Helvetica backed by Arial instead. But as this is zeldman.com, I’d rather nudge my friends at Opera to look into the problem and fix it. This will make browsing zeldman.com in Opera a somewhat weird experience, but hopefully it will help all Opera users in the long run.

Implementation Notes and Details

I haven’t made an SVG version yet, so the web fonts don’t work in iPhone or iPad.

iPhone and iPad see normal weight Helvetica instead of bold Helvetica, because if I leave “font-weight: bold” in the CSS declaration, Firefox double-bolds the font. This is not smart of Firefox. Fixed via technique below.

In order to match the impact of the previous Helvetica/Arial bold, I boosted the font-size from 25px to 32px. (This also helps smooth the font. Web fonts need more help in this regard than system fonts.)

Camino ignores @font-face and supports the first system font in the font stack, Helvetica Neue (correctly styled bold).

Crowdsourcing Dickens

As an experiment in new new media thinking, I recently crowdsourced a new new literature version of Charles Dickens’s musty old old old lit chestnut, Great Expectations—the familiar tale of Pip, Ms Havisham, the convict Magwitch, et al.

Creative excellence and spin-worthy results required a pool of 10,000 people who had never read Great Expectations. Fortunately, I had access to 10,000 recent American college graduates, so that was no problem.

To add a dab of pseudoscience and appeal obliquely to the copyleft crowd, I remixed the new work’s leading literary themes with the top 20 Google search queries, using an algorithm I found in the mens room at Penn Station.

The result was a work of pure modern genius, coming soon to an iPad near you. (Profits from the sale will be used to support Smashing Magazine’s footer and sidebar elements.)

Gone was the fusty old title. Gone were the cobwebbed wedding cake and other dare I say emo images. It was goodbye to outdated characters like Joe the blacksmith and the beautiful Estella, farewell to the love story and the whole careful parallel between that thing and that other thing.

Gone too was the tired old indictment of the Victorian class system, and by implication of all economic and social systems that separate man from his brothers in Christ, yada yada. As more than one of my young test subjects volunteered in a follow-up survey, “Heard it.”

In place of these obsolete narrative elements, the students and the prioritized Google searches created, or dare I say curated, a tale as fresh as today’s algorithmically generated headlines.

The results are summarized in the table below.

Old Great Expectations

New Great Expectations

On Christmas Eve, Pip, an orphan being raised by his sister, encounters the convict Magwitch on the marshes.

n/a

The convict compels Pip to steal food from his sister’s table, and a file from her husband the blacksmith’s shop. Pip thereby shares the convict’s guilt and sin—but his kindness warms the convict’s heart.

Guy on girl

Pip’s sister, Mrs. Joe, abuses him. Her husband loves Pip but is unable to protect him or offer him a future beyond blacksmithing.

Girl on girl (multiple entries)

Pip meets Miss Havisham, an old woman abandoned on her wedding day, who sits in her decrepit house, wearing a yellowing wedding gown, her only companion the beautiful and mysterious girl Estella. Pip falls in love with Estella, but Miss Havisham has trained the girl to break men’s hearts.

Guy on guy

Pip visits Miss Havisham until his apprenticeship with Joe the blacksmith begins. Pip hates being a blacksmith and worries that Estella will see him as common.

Two girls, one guy

Mrs Joe suffers a heart attack that leaves her mute. A kind girl named Biddy comes to take care of Mrs Joe. After Mrs Joe’s death, Biddy and Joe will marry. Meanwhile, Pip comes into an unexpected inheritance and moves to London, where he studies with a tutor and lives with his friend Herbert.

Dragons

Pip believes Miss Havisham is his benefactor and that she intends him to marry Estella, whom he still adores. Day by day, Estella grows more cruel. Pip never tells her of his love for her.

Wizards

One stormy night, Pip discovers that his benefactor is not Miss Havisham but the convict Magwitch. The news crushes Pip, but he dutifully allows Magwitch to live with him—worrying, all the while, because Magwitch is a wanted man who will be hanged if discovered.

Explosions

Miss Havisham repents having wasted her life and perverted Estella. She is caught in a fire. Pip heroically saves her but she later dies from her burns. Soon afterwards, Pip and Herbert try to help Magwitch escape, but Magwitch’s old enemy Compeyson—who happens to be the man who abandoned Miss Havisham at the altar—betrays Magwitch to the authorities. Magwitch and Compeyson struggle. Compeyson dies and Magwitch is taken to prison.

Gunfights

Pip now realizes that Magwitch is a decent man and tries to make Magwitch’s last years happy ones. He also discovers that Magwitch is Estella’s father. Magwitch dies in prison shortly before he was to be executed. Pip tells the dying Magwitch of his love for Estella.

Fistfights

Pip becomes ill and is nursed back to health by Joe, whom Pip recognizes as a good man in spite of his lack of education and “class.” Pip goes into business overseas with Herbert. Eventually he returns to England and visits Joe, who has married Biddy. They have a child named Pip. As the book ends, the middle-aged Pip makes one last visit to Miss Havisham’s house, where he discovers an older and wiser Estella. There is the implication that Pip and Estella may finally be together.

My Love/Hate Affair With Typekit

GEORGIA and Verdana, Lucida and (to a lesser extent) Arial and Times New Roman have served us well. For fifteen years, these cross-platform default fonts have been faithful stewards of our desire to read, write, design, and publish web pages. Yet we designers have always wanted more. As far back as 1994, we hoped for the day when we could brand our layouts as magazine and poster designers do, by setting our pages in Franklin or Garamond, our headlines in Futura or Rosewood. And since 1998, CSS2 has provided a standard way to embed any typeface, not just the fab five, on a web page.

In August, 2007, CSS co-creator and Opera Software CTO Håkon Wium Lie wrote CSS At Ten, reminding us that CSS provided a mechanism by which actual font files could be linked to and retrieved from the web. Soon after the article was published, “web fonts” discussions started popping up at interactive design festivals and my friend Jeffrey Veen got the idea for a product that would get web fonts happening without running afoul of inconsistent browser support, multiple format hangups, or type designer licensing agreements and piracy concerns.

Speeding up design acceptance

While browser improvements and web standards alone provided multiple partial solutions, Typekit offered a complete solution that just worked. And the people behind Typekit (including Bryan Mason and Jason Santa Maria) did everything right: they reached out to the type design, graphic design, and standards-based web design communities; they worked with vendor after vendor to offer as many fonts as possible; they spoke everywhere, marketing their venture one lecture and even one designer at a time.

Typekit excited the web design community about type and proved that licensing and hosting web type was a viable business, providing options and convenience for designers and their clients, while bringing new revenue to type designers and protecting their intellectual property.

Typekit is the tipping point

Publicly and truly, I support Typekit because it is getting us to the world of web fonts faster. We could wait indefinitely for type vendors to agree to industry-standard licensing terms and font formats. We could wait far longer for IE, Firefox, Safari, Chrome, Opera, Opera Mini, Mobile Safari, and the rest to support the same font formats. (Currently Firefox supports WOFF and TrueType, Safari and Chrome support TrueType, MobileSafari supports SVG, IE supports EOT, and on, and on.)

But with Typekit, we don’t have to bother our pretty little heads worrying about these inconsistencies, and we don’t have to sit on the sidelines, waiting for all font makers and all browser makers to support a single standard format.

Platforms and performance

Typekit works, and that helps web designers and type designers take “web fonts” seriously. Typekit’s success is even helping to make web designers and type designers more aware of platform problems that can make fonts hideous on various platforms. Georgia was designed for the screen. Garamond was not. Moreover, platforms vary the way they hint fonts (Apple throws out hinting altogether, Microsoft over-hints) and the way they render them (from purely pixellated to at least three varieties of sub-pixel anti-aliasing), making a font’s appearance on a given user’s system hard to predict.

If not for Typekit, we might have had to wait years for most or all type designers to license web fonts. Only then would we have discovered that body text set in anything other than Georgia and Verdana pretty much blows on many Windows OS, browser, and monitor combinations.

Thanks to Typekit, we all know about the problem, and type designers are re-hinting their fonts, and in some cases redesigning them for the screen.

For all this I and all of us can be grateful to Typekit.

They also understand that designers will only use “web fonts” if they have access to the fonts they need. Just as a huge selection enabled iTunes to dominate online music, Typekit’s makers know their service must offer pretty much every good typeface out there—and they are working on it.

Renting versus “owning”

All this said in Typekit’s favor, I have mixed feelings about their product because I’d rather buy a web-licensed font than rent it—and Typekit’s success at establishing the viability of a rental model means that individual type foundries will also rent their fonts—and those who succeed at renting their fonts to web designers may not be inclined to sell.

Of course you never really own the fonts you buy—you simply license their use. So the analogy of owning versus renting doesn’t exactly hold true. But a one-time font purchase as a line item in a design budget is easier to explain and sell to a client than an ongoing rental charge.

Web Standards and @font-face

My other qualm has to do with a preference for pure web standards over product-assisted web standards. I don’t know if my preference is ideological or just the way my mind works (or fails to). But, given my druthers, I’d rather see millions of websites using standard @font-face to link to self-hosted web-licensed fonts than see that same number of fonts using a service—even a brilliant service created by friends for whom I wish continued, deserved, great success. It must be a quirk of mind; there’s no other logical explanation for this preference.

For those who share this bias, possess the properly licensed fonts, and don’t mind using FTP and writing a little code, the CSS @Font-Face Generator by Font Squirrel provides an exceptionally easy way to automatically generate the font formats necessary to take all browsers (including mobile) into account—complete with automated Cufón backup and your choice of best-practice @font-face code strings.

Gowalla My Dreams

What if Gowalla and Foursquare could communicate seamlessly with Address Book? What if Google Maps contained the postal address, company names, and primary phone numbers of every pin on the map? All this information could be marked up in Microformats and standard HTML on optional detail pages you could visit with a click from your web browser or phone. Heck, while we’re at it, let’s add Bump, an iPhone app that lets two people share contact data the same way they share DNA—except that in this case they bump iPhones.

What if every time you used Gowalla to check into or found a spot, you had the option to add that spot’s street address, company name(s), and so on to your Address Book? Imagine meeting a potential client for the first time in an unfamiliar city or neighborhood. No longer simply a passive repository of spots you create, Gowalla or Foursquare could function as a guide, helping you locate the unfamiliar address to make your meeting on time.

As you check into your meeting in reality, you could notify not only Facebook and Twitter (as you can today) but also Basecamp, which would optionally check off a radio box, marking you as having arrived at your meeting.

Something like this (and much more than this) will surely happen soon, thanks to APIs and ubiquitous standard platforms. You just feel, when you’re around people developing the best new web software, that something new is happening, and that many strands are coming together.

We used to imagine a dystopian future in which Big Brother knew everything you did. Later it was the machines that knew. We’ve been talking about ubiquitous computing for years, and we’ve pictured it happening somehow without necessarily addressing the how—that is, some of the brightest and most inspiring futurists have concerned themselves more with the ethical and cultural transformative dimensions of ubiquitous computing than with the technical nuts and bolts of how it’s supposed to get done.

I’m thinking the nuts and bolts are here. To me it seems that it is already happening. The web is the platform. HTML, CSS, JavaScript/JQuery, Ruby, and PHP are the tools. I’m thinking an uplifting (non-dystopian) ubiquitous computing is going to get done with the stuff we already use every day. Am I dreaming?

You cannot copyright a Tweet

CONTRARY to popular belief and Twitter’s terms of service, you cannot copyright a Tweet. Under US law, copyright is granted on publication to “original works of authorship” finalized in “fixed forms of expression” but this does not extend to names, titles, or short phrases (PDF).

As messages sent via Twitter cannot be longer than 140 characters, they cannot be copyrighted. However original, witty, or profound they may be, nothing more than good manners protects your original expression of authorship. If you wish to let other people quote or use your Tweets, you need not “license” them; indeed, technically, you cannot license them, since they are in the public domain the instant you publish them.

If you write a clever Tweet and wish to assert ownership (and if money is no object), you may apply for a trademark. Good luck with that.

Otherwise, your Tweets are like the air. Anyone can do anything like to them, including quoting them with or without your permission. If an enterprising company wants to take something you said on Twitter and slap it on a tee shirt, they may do so. If a gent of the disturbed persuasion wants to engrave your tweet into a 600-foot swastika, he may do so.

If this disturbs you, suck it up, or stop using Twitter—or mark your Twitter feed as private. This will not copyright your Twitter mutterings but it will keep many people from seeing them.

If it deeply disturbs you (and money is no object), mount a case to change the law.

Me, I plan to use Twitter forever. And any party so inclined may make a whistle of my Tweets. But my saying so here is irrelevant because you cannot copyright a Tweet.

Update: Comments are now closed, but you may read what others had to say. Thanks to all for a lively and illuminating discussion.

Free advice: show up early

DELAY happens. The train is late, the flight is cancelled, the traffic is murder. Travel is the leading edge of entropy, and entropy is the universe’s final comment on the meaning of it all. If the universe is expanding and there are snow delays on Route 1, it’s not your fault that you’re 15 minutes late to the meeting, right?

Don’t be so quick to excuse yourself. If 80% of success is just showing up, 90% is showing up early.

It’s hard for the client to sympathize with your lateness when she, who had farther to travel, managed to make the meeting on time. No matter how well you tell your story about the newbie cab driver who thought you said 114th Street, the client still sat waiting for you for twenty minutes after denying herself a Starbuck’s so she would be on time. Everyone in the room is a grownup, and, on the surface, your lateness isn’t an issue. But although nothing will be said, somehow the meeting will not turn out as well as expected.

Of course the conference organizers care that you, their keynote speaker, spent the night in the airport because of a cancelled flight. As sensitive human beings, they’d love to upgrade your room to a suite, hire you a masseuse, and send you to bed. But as business people who spent the morning juggling their schedule and making impromptu excuses to attendees because their keynote speaker showed up late, they will never hire you again.

How can a client blame you for a cab driver’s mistake? How can a conference organizer hold you accountable for an airline’s cancelled flight?

They can do it because lateness is part of the order of things, and grownup professionals plan for it, just as they plan for budget shortfalls and extra rounds of revision.

If you plan to arrive early, then you are covered when circumstances beyond your control conspire to make you late.

This is simple and obvious but many otherwise brilliant professionals clearly don’t think about it. The result is that they often arrive late. It’s never their fault, and yet it’s always the same people who are late.

I’m a bleeding heart. If your pet turtle dies, I’ll give you a month’s paid vacation. But promptness is a duty we owe people who pay for our services. So here’s some free advice. Give yourself more time to arrive than you reasonably need. If you work uptown and you have a meeting downtown in two hours, head downtown now. If you’re speaking on the opposite side of the continent early Monday morning, fly out Saturday, not Sunday. That way, you’ll be where you’re supposed to be, no matter what obstacles the weather, the airlines, and the TSA throw your way.

Love means never having to say you’re sorry, but client services means apologizing every five minutes. Give yourself one less thing to be sorry for. Take some free advice. Show up often, and show up early.