It’s that time of year again:
24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.
A primer by David Demaree on Sass, “an extension of CSS3.” A great way to save time and your sanity when working with large stylesheets.
Roger Black on web advertising:
What we have now is the ugliest advertising in the history of the media. I used to say that web sites looked like the walls of a third-world futbol stadium, but that was unfair to the stadiums. Most content sites look so bad they actually repel readers rather than attract them.
Some half-cooked thoughts, not yet popped:
Issues make little sense online. Obviously, they’re necessary for print, but web readers — especially of a less news-driven publication — don’t think that way.
Some content is inexorably tied to a certain date. News and blog posts, in particular. (There’s context again.) But so much is timeless. Why force that content into an artificial issue framework on the web? The web is alive, constantly growing and changing. Does a web reader really care when, say, a great recipe was published?
Don’t think of the website as a repository for magazine stories and the stuff you had to cut from print. And certainly don’t think of the website as a “brand extension” and marketing tool to sell subscriptions. Your site is its own, complementary product. And, yes, you can make money online.
Consider a digital-first approach. Never stop producing stories for the web, and instead pull (and rework for print) the very best for a monthly magazine. Then add to the mag some new, context-appropriate content and you’ve got the kind of durable, evergreen product that magazine people love to hoard. Encourage your magazine readers to visit your website for more great stories, all month long. Macworld is a great example of this model.
Next up on the reading list. Based on the sample chapter, Kissane’s thinking seems to jive with my own. Should be a great read.
Contents is a new magazine at the intersection of content strategy, online publishing, and new-school editorial work.
Some great writing on creativity, design and the web.
A thing I made: @infinite_words, a word a day from David Foster Wallace’s Infinite Jest, delivered via Twitter.
It starts with a lengthy text file of words and definitions — based on a list from this IJ help packet — and a PHP script. Every day, the script sends a new word to Twitter, after which a modified installation of Tweet Nest sucks it up and drops it into an archive. (I’ll eventually add sorting by letter to that archive, but my PHP-fu is only at the yellow-belt level, roughly, and I’m mostly flailing around and punching myself in the face at this point.)
So, follow @infinite_words on Twitter, and soon you too can elicit baffled looks from family and friends by dropping the day’s word into casual conversation.
Months ago I started work on a Tumblr theme. Well, I finally got around to finishing it, and so I present Roy G. Biv, a theme for Tumblr.
The latest at the Chronicle. This one was a lot of fun to design. The animation is all CSS, and the whole page is responsive.
Now more than a bookmarklet:
Here’s how it works: every time you use Readability on a particular article, a portion of your subscription fees go right to the content creators. You get a fantastic reading experience. Publishers and writers get compensated for the content you enjoy. Everyone reads happily ever after.
Craig Mod:
Bibliotype is a (very) simple HTML, CSS and JS based library for rapid prototyping long-form typography and reading on tablets.
Launched in conjunction with his thoughtful A List Apart article.
Paul Ford:
I sometimes chat with people in the book- and magazine-publishing industries. They complain to me about the web. They worry about what is being lost. […]
The web, they are a little proud to admit, confuses them. They say: “We gave away all those short stories on our website but it sold no books.” Or: “We built a promo site for our famous author who does the crime novels and it was just a total boondoggle with no traffic.” Or: “The magazine can’t get enough pageviews, even after we hired the famous blogger. Now management wants to make people pay for access.”
“Look,” I say, “maybe you’re doing it wrong.”
“But,” they say, “we tweet.”
That’s when I tell them about the fundamental question of the web.
Thibaut Sailly:
This article is for the curious among you as it details the ideas and choices gone into the conception and the process used to get Bureau on its feet, back in september.
Great piece on some great design work.
It’s no secret: The Baseball Chronicle isn’t just a celebration of baseball and the narrative. It’s also a place for me to experiment with the latest in web design and development.
I’m a tinkerer by nature, and the Chronicle has become, perhaps even more than this site, that with which I tinker. After months of reading about HTML5, CSS3 and @font-face, I started on a redesign incorporating all of them. What better way to learn? What good is unapplied knowledge?
So after I read Ethan Marcotte’s spectacular “Responsive Web Design” at A List Apart, of course I had to implement it at the Chronicle. I’d long thought about creating a mobile version of the site, but it always seemed excessive. I didn’t need to add content or functionality for mobile users. The site simply needed to be a little more usable for readers with small screens. Enter media queries:
Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.
I started in July on a rudimentary responsive front page, but vacation and other happenings shelved the project until mid-August, while designing “Sunday Fly,” the second story of the bespoke era. (As part of the redesign, I create original designs for every story, using Movable Type logic to search for and apply a style sheet whose name matches the post’s title. Pre-redesign posts, as yet lacking custom styles, inherit a base design.) I tack on the responsive code to the end of each post’s style sheet.
The responsive styles for “The Man on the Mound” begin:
@media screen and (max-width: 750px)
Screens less than 750 pixels wide receive any subsequent styling, which eliminates floats, resizes type and margins, and adds many a width: auto;. The effect is a legible and usable design at any screen size, across devices, without a dedicated mobile subdomain or new style sheet.
For more on responsive design, read the A List Apart article and check out the websites of Dan Cederholm, Simon Collison and Jon Hicks for further inspiration and guidance.
Look, I love the SI Vault.1 But the reading experience induces headaches. If the tiny Verdana type2, flashing advertisements and general cruft don’t do it, then clicking through 11 pages to read a single Gary Smith story surely will.
Without Readability or Safari Reader, I struggle to finish even the most compelling stories. And that’s a shame. I’d readily pay for access to a well-designed Vault with a usable search function and logical architecture. (Oh, to easily browse by writer!)
But alas, for now I can only hope for something better.
[1] When I can get to and stay at the Vault, that is. First: Why does the homepage link, labeled “THE VAULT” right there in the banner, lead instead to the App Store listing for the magazine’s iPad app? How does that make any sense? Instead users must poke around for alternate entry points, head to a search engine, or manually enter the URL (if they know or guess it). Is a few more apps sold worth the frustrating user experience?
And second: Why send me away, again to the App store, when I try to read stories from recent issues? When I click a link that says, “Read all articles,” I expect a table of contents, and nothing else. Even if I were browsing the Vault on an iPad, this sort of deception wouldn’t be right.
[2] I’ll warn you now, don’t touch that text-size widget; the hideous result is far worse than the original. In fact, every article on SI.com sports tiny, sans-serif type. Who enjoys reading that?
Got my copy yesterday. A lovely production, as expected.
Stunning. I’ll be adding this functionality to the Chronicle this week. And Jon Hicks’ implementation is equally inspiring.
Phil Gyford on the making of his experimental newspaper site.
Craig Mod’s follow-up to his excellent iPad essay.
With guest Derek Powazek.
Joe Clark, writing for A List Apart:
People are finally noticing what was staring them in the face all along—HTML is great for expressing words. The web is mostly about expressing words, and HTML works well for it. The same holds true for electronic books.
If you’ve wondered why there haven’t been many Gears releases or posts on the Gears blog lately, it’s because we’ve shifted our effort towards bringing all of the Gears capabilities into web standards like HTML5.
Love, love, love that the writers make HTML5 sound like an Apple-backed web video technology. Because we all know HTML5 is but a video player. It’s only HTML, after all.
More seriously, though, I just don’t understand all this hand-wringing. YouTube has an HTML5 video player beta out, and Hulu can’t be far behind. The web is already moving away from Flash for video; Apple’s only further encouraging that move.
“But what about my beloved Flash games?” you might say. They wouldn’t be playable on the iPad even with Flash enabled, Neven Mrgan notes:
Attention folks expecting “the full web”, including today’s Flash games, on a touchscreen device: no keyboard, no mouseover. Think about it.
And designers using Flash for essential site elements will face increasing pressure to adopt web standards, to the benefit of everyone.
Even if the reasons for doing so are entirely selfish, Apple is trying to relieve the web of its dependency on Flash, and I applaud the effort.
Jeffrey Zeldman:
Lack of Flash in the iPad (and before that, in the iPhone) is a win for accessible, standards-based design. Not because Flash is bad, but because the increasing popularity of devices that don’t support Flash is going to force recalcitrant web developers to build the semantic HTML layer first.
Who needs Flash when you’ve got HTML5 and JavaScript? Mind-blowing stuff. (via Rands.)
Renay San Miguel:
Most of those attending were using social media long before “social media” became the easy buzz-phrase to describe not only a revolution in communications, but also a symptom of what’s good—and bad—about modern journalism. I put myself in the camp that wants to meld social media with best journalistic practices, which is why I was one of the geeks attending the Gnomedex session entitled “Hacker Journalism.”
Taking a new hard line that news articles should not turn up on search engines and Web sites without permission, The Associated Press said Thursday that it would add software to each article that shows what limits apply to the rights to use it, and that notifies The A.P. about how the article is used. […]
Search engines and news aggregators contend that their brief article citations fall under the legal principle of fair use.
Linking is at the very heart of the web—in many ways, it is the web. That the Associated Press and newspapers, without which the AP would be much diminished, do not understand even this simplest of web truisms is regrettable but understandable.
The AP will lose this battle, as any organization that attempts such restrictions will lose and, in turn, only hurt itself. But sadly—and I say that earnestly, as one who still very much loves newspapers—the people with the power to save newspapers are those who have no incentives to change them.
And so we read reports of reduced expectations, margins and costs within, at their cores, unchanged organizations. But without a change, the news organizations of yore have not long to live. The traditional business model just doesn’t work anymore, and forcing it on the web isn’t going to work any better.
The choice, then, is natural selection at its simplest: Evolve or die.
Bloomberg:
Television programs such as “The Simpsons” and “CSI” are for the first time commanding higher advertising rates at Web sites including Hulu.com and TV.com than on prime-time TV.
Understated in the article is the value of targeted web advertising. There’s more to it than a captive audience and passionate fans. Hulu, for example, can use a given user’s demographic data to tailor the ads served. That kind of customization has no real analog outside the online world.
Better yet, Hulu lets its users, in effect, choose their own advertising. Like an ad? Give it a thumbs up, and you’ll see more like it. Never want to see a certain ad again? Give it a thumbs down, and you never will. It’s a better experience for viewers, and advertisers can spend their dollars on people who want to see their ads. Everyone wins.
Michael Andersen:
Okay, question time: Imagine you’re a major national newspaper whose crosstown archrival has somehow obtained two million pages of explosive documents that outed your country’s biggest political scandal of the decade. They’ve had a team of professional journalists on the job for a month, slamming out a string of blockbuster stories as they find them in their huge stack of secrets.
How do you catch up?
Four lessons from the Guardian’s fantastic crowdsourcing experiment.
Paul Graham on web communities.