Support Web Standards: A collection of limited edition products, created so you can show your love and support for web standards.
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.||Anal|
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.
See also FontSpring.
- Web Fonts and Standards (great place to start)
- Nicewebtype: How to Use @Font-Face (a great piece to read next)
- A List Apart: Tim Brown: Real Web Type in Real Web Context
- A List Apart: Jason Santa Maria: On Web Typography
- Web fonts at A List Apart
- Web fonts at zeldman.com
- Paul Irish: Bulletproof Font-face Implementation Syntax
- Kernest.com – CSS-based web font delivery service
- A List Apart: Real Fonts on the Web: I interview David Berlow
- New! Some facts about Web Fonts at Nice Web Type
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.
Is it getting hot in here? Or is it just the flames?
In An Early Look At IE9 for Developers, Dean Hachamovitch, General Manager for Internet Explorer, reports on performance progress, web standards progress (border-radius, bits of CSS3, Acid 3 performance), and “bringing the power of PC hardware and Windows to web developers in the browser” (e.g. improved type rendering via Direct2D, a Windows sub-pixel rendering technology that replaces Cleartype).
The reported web standards improvements are encouraging, and better type rendering in IE is a consummation much to be desired. These positive notes notwithstanding, what is most interesting about the post is the political tightrope Microsoft team leaders are still forced to walk.
The world has moved to web standards, and Microsoft knows it must at least try to catch up. Its brilliant browser engineers have been working hard to do so. This web standards support is not optional: having just been spanked hard in Europe for anticompetitive practices, Microsoft knows it is no longer invincible, and cannot continue to use claims of innovation to stifle the overall market or drag its feet on advanced standards compliance.
At the same time, Microsoft’s marketing department wants the public to believe that IE and Windows are profoundly innovative. Thus efforts to catch up to the typographic legibility and beauty of Mac OS X and Webkit browsers are presented, in Dean Hachamovitch’s blog post, as leading-edge innovations. Don’t get me wrong: these improvements are desirable, and Direct2D may be great. I’m not challenging the quality of the hardware and software improvements; I’m pointing out the enforced bragging, which is mandated from on high, and which flies in the face of the humble stance other high-level divisions in Microsoft would like to enforce in the wake of the company’s European drubbing and the dents Apple and Google have made on its monopoly and invulnerability.
In short, the tone of these announcements has not changed, even though the times have.
Hachamovitch does an admirable job of sticking to the facts and pointing out genuine areas of interest. But he is stuck in a corporate box. A slightly more personal, down-to-earth tone would have come across as the beginnings of transparency—Web 1.1, if not Web 2.0—and a more transparent tone might have slightly reduced the percentage of flamebait in the post’s comments. (It could only have slightly reduced that percentage, because, on the internet, there is no such thing as a calm discussion of improvements to a Microsoft browser, but still.)
Although I disagree with the tone of many of the comments—rudeness to engineers is not admirable, kind, or helpful—I agree with the leading thoughts they express, which are:
- Getting IE fully up to speed on web standards is much more important than introducing any proprietary innovations. (Naturally I agree with this, as it is, in a nutshell, what The Web Standards Project told browser companies back in 1998—and it is still true.)
- Switching to Webkit might be a better use of engineering resources than patching IE.
On the other hand, Microsoft’s refusal to switch to Webkit gives Apple and Google a competitive advantage, and that is good because a web in which one browser has a monopoly stifles standards and innovation alike. By torturing the IE rendering engine every couple of years instead of putting it out of its misery, Microsoft contributes to the withering away of its own monopoly. That might not be good for the shareholders, but it is great for everyone else.
In Issue No. 302 of A List Apart for people who make websites, Joe Clark explains what E-book designers can learn from 10 years of standards-based web design, and Daniel Mall tells designers what they can do besides bicker over formats.
- Web Standards for E-books
by Joe Clark
E-books aren’t going to replace books. E-books are books, merely with a different form. More and more often, that form is ePub, a format powered by standard XHTML. As such, ePub can benefit from our nearly ten years’ experience building standards-compliant websites. That’s great news for publishers and standards-aware web designers. Great news for readers, too. Our favorite genius, Joe Clark, explains the simple why and how.
- Flash and Standards: The Cold War of the Web
by Daniel Mall
You’ve probably heard that Apple recently released the iPad. The absence of Flash Player on the device seems to have awakened the HTML5 vs. Flash debate. Apparently, it’s the final nail in the coffin for Flash. Either that, or the HTML5 community is overhyping its still nascent markup language update. The arguments run wide, strong, and legitimate on both sides. Yet both sides might also be wrong. Designer/developer Dan Mall is equally adept at web standards and Flash; what matters, he says, isn’t technology, but people.
Illustration by Kevin Cornell for A List Apart.
“Content with form—Definite Content—is almost totally the opposite of Formless Content. Most texts composed with images, charts, graphs or poetry fall under this umbrella. It may be reflowable, but depending on how it’s reflowed, inherent meaning and quality of the text may shift.”
—Craigmod, Books in the Age of the iPad
Web designer Joshua Lane, currently best know for doing fancy web stuff at Virb.com, has overhauled his personal site in ways that are aesthetically pleasing and visually instructive.
Like all good site redesigns, this one starts with the content. Whereas the recent zeldman.com redesign emphasizes blog posts (because I write a lot and that’s what people come here for), Lane’s redesign appropriately takes exactly the opposite approach:
There is a much smaller focus on blog posts (since I don’t write often), and a much larger focus on the things I do elsewhere (Twitter, Flickr, Last.fm etc). Individually, I don’t contribute a great deal to each of those services. But collectively, I feel like it’s a good amount of content to showcase (as seen on the home page). And something that feels like a really good representation of “me.”
Not one to ignore the power of web fonts, Lane makes judicious use of Goudy Bookletter 1911 from The League of Movable Type, an open-source type site founded by Caroline and Micah, featuring only “well-made, free & open-source, @font-face ready fonts.” (Read their Manifesto here.)
The great Barry Schwartz based his Goudy Bookletter 1911 on Frederic Goudy’s Kennerley Oldstyle, a font Schwartz admires because it “fits together tightly and evenly with almost no kerning.” Lane inserts Schwartz’s open-source gem via simple, standards-compliant CSS @font-face. Because of its size, it avoids the secret shame of web fonts, looking great in Mac and Windows.
But considered type is far from the redesigned site’s only nicety. Among its additional pleasures are elegant visual balance, judicious use of an underlying horizontal grid, and controlled tension between predictability and variation, ornament and minimalism. Restraint of color palette makes photos, portfolio pieces, and other featured elements pop. And smart CSS3 coding allows the designer to play with color variations whenever he wishes: “the entire color scheme can be changed by replacing a single background color thanks to transparent pngs and rgba text and borders.”
In short, what Lane has wrought is the very model of a modern personal site: solid design that supports content, backed by strategic use of web standards.
Thousands of … filmmakers and writers around the country are operating with the same loose standards, racing to produce the 4,000 videos and articles that Demand Media publishes every day. The company’s ambitions are so enormous as to be almost surreal: to predict any question anyone might ask and generate an answer that will show up at the top of Google’s search results. To get there, Demand is using an army of [impoverished filmmakers and writers] to feverishly crank out articles and videos. They shoot slapdash instructional videos with titles like “How To Draw a Greek Helmet” and “Dog Whistle Training Techniques.” They write guides about lunch meat safety and nonprofit administration. They pump out an endless stream of bulleted lists and tutorials about the most esoteric of subjects.