Categories
Advocacy art direction Design Designers Ideas industry interface IXD Jason Santa Maria links Off My Lawn! Redesigns Responsive Web Design State of the Web Tech The Profession User Experience UX Web Design Web Design History webfonts

The Web We Lost: Luke Dorny Redesign

Like 90s hip-hop, The Web We Lost™ retains a near-mystical hold on the hearts and minds of those who were lucky enough to be part of it. Luke Dorny’s recent, lovingly hand-carved redesign of his personal site encompasses several generations of that pioneering creative web. As such, it will repay your curiosity.

Details, details.

Check Luke’s article page for textural, typographic, and interactive hat tips to great old sites from the likes of k10k, Cameron Moll, Jason Santa Maria, and more. 

And don’t stop there; each section of the updated lukedorny.com offers its own little bonus delights. Like the floating titles (on first load) and touchable, complex thumbnail highlights on the “observer” (AKA home) page. 

And by home page, I don’t mean the home page that loads when you first hit the site: that’s a narrow, fixed-width design that’s both a tribute and a goof.

No, I mean the home page that replaces that narrow initial home page once the cookies kick in. Want to see the initial, fixed-width home page again? I’m not sure that you can. Weird detail. Cool detail. Who thinks of such things? Some of us used to.

And don’t miss the subtle thrills of the silken pull threads (complete with shadows) and winking logo pull tab in the site’s footer. I could play with that all day.

Multiply animated elements, paths, and shadows bring life to the footer of Luke Dorny’s newly redesigned website.

Now, no site exactly needs those loving details. But danged if they don’t encourage you to spend time on the site and actually peruse its content

There was a time when we thought about things like that. We knew people had a big choice in which websites they chose to visit. (Because people did have a big choice back in them days before social media consolidation.) And we worked to be worthy of their time and attention.

Days of future past

We can still strive to be worthy by sweating details and staying alive to the creative possibilities of the page. Not on every project, of course. But certainly on our personal sites. And we don’t have to limit our creative love and attention only to our personal sites. We pushed ourselves, back then; we can do it again.

In our products, we can remember to add delight as we subtract friction.

And just as an unexpected bouquet can brighten the day for someone we love, in the sites we design for partners, we can be on the lookout for opportunities to pleasantly surprise with unexpected, little, loving details.

Crafted with care doesn’t have to mean bespoke. But it’s remarkable what can happen when, in the early planning stage of a new project, we act as if we’re going to have to create each page from scratch.

In calling Luke Dorny’s site to your attention, I must disclaim a few things:

  • I haven’t run accessibility tests on lukedorny.com or even tried to navigate it with images off, or via the keyboard.
  • Using pixel fonts for body copy, headlines, labels, and so on—while entirely appropriate to the period Luke’s celebrating and conceptually necessary for the design to work as it should—isn’t the most readable choice and may cause difficulty for some readers.
  • I haven’t tested the site in every browser and on every known device. I haven’t checked its optimization. For all I know, the site may pass such tests with flying colors, but I tend to think all this beauty comes at a price in terms of assets and bandwidth. 

Nevertheless, I do commend this fine website to your loving attention. Maybe spend time on it instead of Twitter next time you take a break?

I’ll be back soon with more examples of sites trying harder.


Simulcast on Automattic Design

Categories
A List Apart Advertising art direction Best practices Brands conferences Content First Content-First Deck, the Fonts Ideas industry Medium Platforms Publications Publishing reportage Standards State of the Web studio.zeldman The Essentials The Profession Themes and Templates Usability User Experience UX Web Design Zeldman

Authoritative, Readable, Branded: Report from Poynter Design Challenge, Part 2

Poynter style guide

THIS year’s Poynter Digital Newspaper Design Challenge was an attempt by several designers and pundits, working and thinking in parallel, to save real news via design. In Part 1 of my report from Poynter, I discussed the questions driving the challenge, and talked about the design work done in response to it by my colleagues Kat Downs Mulder, Mike Swartz, Lucie Lacava, and Jared Cocken. Here in Part 2, I’ll discuss my own work and the approach we took at my studio. But we begin with a quick look back at the past designs that brought us to this point:

Experiment 1: The Deck

During the past decade and a half, as both a publication designer and a publisher, I watched in horror as our publications became reader-hostile minefields of intrusive ads, overlays, and popups. The first thing I tried to do about this (besides removing the web equivalent of chart junk from my magazine) was to offer an alternative approach to advertising via The Deck, an ad network I cofounded with Jim Coudal of coudal.com and Jason Fried of Basecamp (formerly 37signals). The Deck permitted only one appropriately targeted ad per each page of content viewed. As primary instigator Jim Coudal put it:

A buy in The Deck reaches the creative community on the web in an uncluttered, controlled environment, far more valuable than a standard banner or a single text ad among dozens of others.

Jim, Jason, and I hoped that our cost-per-influence model would replace the CPM race to the bottom, and that our quasi-religious use of whitespace would be widely imitated by the smartest publications online.

But that didn’t happen. Advertising just got more intrusive. The Deck succeeded as a small business supporting a network of interesting small publications, but not at all as a primary influencer on the direction taken by advertising that supports web content.

Experiment 2: Readability

Then about seven years ago, my friend Rich Ziade and his engineers created Readability, an app that sat between you and the ugly site you were trying to read, the way screen readers sit between visual websites and blind web users. Readability grabbed an article page’s primary content, removed the junk, and replaced the cluttered and illegible layout with a clean, readable page inspired by the clarity of iBooks and Kindle, which were just taking off at the time.

Rich released Readability 1.0 as open source; Apple immediately absorbed it into the Safari browser, where it continues to provide Safari’s built-in “reader” mode. (Safari’s “reader” mode was Apple’s first step in decluttering the web and returning it to the people who use it; “content blocking” would be the second step.)

Moreover, Readability 2.0, released by Rich’s then-company Arc90 the following year, added automatic payment for content creators slash publishers, as I explained at the time to anyone who would listen. Had Readability been allowed to continue the experiment, content monetization might have been less of a problem than it is today, and publication brands (the notion that it matters who publishes what we read) would be in exactly the same pickle they’re in anyway—except that readers would get their news in Readability’s attractive and customizable format, instead of from Apple News, Facebook, and the like.

I used to go around the world on lecture tours, warning my fellow designers that if we didn’t figure out how to declutter and compellingly brand sites, apps like Readability would do it for us. I still go around on lecture tours, but I’ve moved on to other issues. As for Readability, it was killed by a digital lynch mob after one powerful blogger, misunderstanding the motivation behind it, issued the digerati equivalent of a fatw?. But that’s another story.

Experiment 3: Big Type Revolution

In 2012, inspired by Readability and frustrated by the industry’s determination to make ever less legible, ever more cluttered sites full of tracking and popups and everything except what readers need, I bet big on large type:

This redesign is a response to ebooks, to web type, to mobile, and to wonderful applications like Instapaper and Readability that address the problem of most websites’ pointlessly cluttered interfaces and content-hostile text layouts by actually removing the designer from the equation. (That’s not all these apps do, but it’s one benefit of using them, and it indicates how pathetic much of our web design is when our visitors increasingly turn to third party applications simply to read our sites’ content. It also suggests that those who don’t design for readers might soon not be designing for anyone.)

Writing in Forbes, Anthony Wing Kosner saw the future in my initially crude experiment:

If you want to know where the web is going, one clue is to look at the personal sites of top-tier web designers. And one trend that just bubbled to the surface is large body type—the kind you don’t have to command-plus to read.

Jeffrey Zeldman…made a particularly strong point about it in his “Web Design Manifesto 2012,” that he published yesterday.

Large Type: One Web Designer Puts Content First in a Big Way

Not to brag (okay, too late), but he wasn’t wrong. It was the future.

(Also, I’m fairly sure I wasn’t the only designer at the time who reacted against tiny type and cluttered anti-user layouts by stripping pages down to only their most necessary elements, and boosting the type size to enforce a more relaxed reading posture. The idea was in the air.)

The experiment becomes the norm

In any case, soon enough, readable (big type and plenty of whitespace) layouts starting popping up everywhere. At medium.com. In Mike Pick’s redesign of A List Apart. In article pages for The New York Times, Washington Post, Vox, Newsweek, The New Yorker, and, eventually, many other publications.

An uncluttered page focused on the reading experience (reminder: big type and plenty of whitespace) is now the default at several leading news publications. But many smaller publications, struggling just to survive, have not kept up. And so we have a perfect crisis:

Publications that do not encourage reading, loyalty, or repeat visits are struggling to survive at the very moment real news is under attack from an authoritarian president. What to do?

 

A two-up from the Poynter challenge

My response to the Poynter Design Challenge

There are many ways to respond to an existential crisis like the one facing most news publications. You can rethink the relationship between reader and publication. Rethink the job of the publication. Make news work more like a lifestyle app. Make it more immersive. My colleagues followed those paths out brilliantly (as described in Part 1).

But I went for the low-hanging fruit. The thing any publisher, no matter how cash-strapped, could do. The thing I had seen working since I started yelling about big type in 2012. I went for a clean, uncluttered, authoritative, branded page. Authoritative because this isn’t fake news. Branded because the source matters.

The easiest, fastest, most readily attainable path to clean, uncluttered, authoritative, branded design is through typography.

 

Sample reader layout from the Poynter challenge

Any publication can be readable

Any newspaper, however poor, can afford better typography. Any newspaper with a designer on staff can attain it, if the paper stops treating design as a lackey of marketing or editorial or advertising, and sets designers free to create great reading experiences.

In my work, which is still underway (and will continue for some time), I focused on creating what I call “reader” layouts (and probably other designers call them that too; but I just don’t know). Layouts that are branded, authoritative, clean, uncluttered, and easy to read.

I played with type hierarchies and created simple style guides. Most of my little pages began as Typecast templates that I customized. And then Noël Jackson from my studio cleaned up the HTML and CSS to make it more portable. We put the stuff up on GitHub for whoever wants to play with it.

These are only starting points. Any designer can create these kinds of layouts. There’s nothing special about what I did. You can do the same for your paper. (And if you can’t, you can hire us.)

The work I share here is the start of a project that will continue at our studio for a long time. #realnews for the win!

Additional reading

Categories
Acclaim Advocacy Appearances art direction Best practices Brands conferences Damned Fine Journalism democracy Design Designers ForHire Ideas industry interface Layout Press Publications Publishing Redesigns reportage State of the Web Usability User Experience Web Design

Digital newspaper design challenge: a report from Poynter, part 1

CAN design create a better user experience that engages readers and drives revenue? Can it fight fake news and help save real journalism at a time when news organizations large and small are underfinanced and under attack?

These questions drove the Poynter Design Challenge, “a project to create new visual models for digital news publications” sponsored by William R. Hearst III, hosted by the Poynter Institute, and directed by publication designer Roger Black.

The challenge began October 17–18 in New York, with five pundits and five designers, of whom I was honored to be one, workshopping a project brief during a two-day conference event at the Columbia Journalism School. (You can watch videos of all these sessions courtesy of Fora.tv.)

The next phase took place yesterday in St. Petersburg, Florida, as the four other designers and I presented our work to a live audience. In this short piece, I’ll talk about the designs my colleagues presented; in the next, I’ll discuss my own.

Reconnecting with the people: the challenge for digital news

Roger Black described the difficulties facing digital news publications:

The challenge is serious. Fake news crowds real news. Numbers no longer add up for publishers. Readers jump from site to site without knowing where they are, or staying for long. You can see the brief for this project here.

Can design help? Well, as a I designer, I think it can. I mean, the design of most news pages is not what you’d call attractive. But the solutions proposed at Poynter will be much more strategic than cosmetic. And they’re strategies that can be combined.
Five design answers that add up, Roger Black, January 20, 2017

“A news publication might think a bit more like Fitbit”

News prototype by Kat Downs Mulder, Graphics director at The Washington Post.

Between us, we designers had about a century of experience designing digital publications—internally, as consultants, or both. This means that, even though an open “design challenge” brief necessarily omits an unknown number of the specific requirements any actual publication design assignment would include, all of us were aware of, and to some degree addressed, typical news publication requirements not included in our brief.

Kat Downs Mulder, Graphics Director at The Washington Post, shared a prototype for a big-brand news site. Kat had just given birth to a healthy baby boy (congratulations!), so her work was presented by two of her colleagues from The Post. Kat did not design with the avid, committed news reader in mind (since those folks are not the problem for most publications). Instead, she pondered how to engage the typically fragmented attention of today’s distracted and passive news reader:

“A big-brand news site [should be] aware that people have a lot more to do in their lives than read the news,” Kat posited. Thus, “A news publication might think a bit more like Fitbit. That is, it should make you feel like it’s working for you. A reader should say, ‘I’m reading everything I need to know.’”

Keep that dopamine pumping

Kat presented a multi-paned prototype. The wider pane on the right contained news content; the narrower pane at left was navigation. As I’ve just described it, this isn’t much different from the current Post website, but Kat’s prototype was very different, because it prized reader control over editorial director control; kept track of what you read; encouraged extra reading the way Fitbit encourages extra steps, and rewarded it the same way Fitbit does, with an accumulation of points that give the reader dopamine hits and create the perception that the “news app” is working for her—as a rewarding part of her busy lifestyle.

An Operating System for your city

Mike Swartz, Partner at Upstatement, a design and engineering studio in Boston, took on the challenge to smaller publications (such as his original hometown paper, the Pittsburgh Post-Gazette) which lack the resources of a Washington Post or New York Times.

Mike’s presentation, “information OS for a city: redefining the opportunity for local media,” turned the journalistic prowess of a good local paper into a superpower, connecting readers to their city the way the “terrible towel” stunt concocted in desperation by radio announcer Myron Cope in 1975 reconnected Pittsburghers to their hometown football team, and helped the Steelers win Super Bowl X over the Dallas Cowboys.

There’s a potential for an operation like the [Post Gazette] to rebrand itself as more of an “informational operating system” for its city. With different types of products that are focused and useful and not necessarily bundled into a traditional news format, we can create more enjoyable experiences and more useful products readers will love.

Building reader interest and finding a way to pay for it all

Lucie Lacava designed an app targeted at millennials.

Where the rest of us avoided the elephant in the room, in her design Lucie Lacava, president of Lacava Design Inc., boldly confronted the challenges of advertising and monetization. Algorithm-driven advertising frustrates users, who, in desperation, block it. Choked for income as a result, publications and advertisers create more and more intrusive forms of unwanted advertising. Nobody wins.

And while subscription models have worked, at least partly, for some of the very top news publications, such models are not likely to help most news publications in the near term.

Digital publication as digital application

Lucie’s design addressed these challenges by recasting the news as a hyper-customized application targeted at younger users, who get to choose news streams and ads that are relevant to them. “The elusive millennial” was Lucie’s target. I cannot do her idea justice with a couple of paragraphs and a single screen shot.

Affordable, immersive VR is here

Jared Cocken, brand and product designer for hire and co-founder of STYLSH.co., approached the “attention war” by showing how any size publication could create “video or VR driven stories that enrich a user’s understanding of the world around them.”

Because VR video is immersive, it holds viewer attention. Because it is reality-based, it fights fake news. (It’s hard to call bullshit on a scene you can explore from any angle.) VR also, potentially, builds compassion. It’s one thing to read about conditions in a Syrian refugee camp, another to visually experience them in VR.

Until now VR and video have been cost-prohibitive, but, working (and co-presenting) with VR startup founder Anna Rose and Hollywood producer/actor Banks Boutté, Jared showed how even woefully under-financed newsrooms can use newly designed, super-affordable tools to create “video or VR-driven stories that enrich a user’s understanding of the world around them.”

(For more on VR and the web, see webvr.info and VR Gets Real with WebVR by studio.zeldman’s Roland Dubois.)

Parting thought for now

Blogging about a conference is like tweeting about a sexual experience. You had to be there. I wanted to record and share the outlines of what my fellow designers presented, but these few paragraphs should in no way be considered authentically representative of the deep thinking and work that went into every presentation.

You may see holes in some of the arguments presented here. In some cases, I might agree with you—some ideas, while dazzlingly creative, did not seem to me like the right way to save news. But in most cases, if an idea seems wrong, blame my telling. If you had been there and heard and seen everything, the value of the proposal would have far more apparent than it can be here.

I love that each of us took on a quite different aspect of the problem, and addressed it using very different tools. I’ll be back soon with a short write-up of the design approach I took. Meanwhile, I want to thank all the pundits, designers, and attendees in New York and St. Petersburg—and the Poynter Institute, Roger Black, and William R. Hearst III for making it all possible.

 

Also published in Track Changes.

Categories
Advocacy Announcements art direction content Design Ideas interface Layout nytimes Platforms Publications Publishing Redesigns reportage State of the Web studio.zeldman The Essentials Usability User Experience UX Web Design

To Save Real News

IN a world where newspapers are dying and half the public believes fake news, what online news experiences need is design that is branded, authoritative, and above all, readable:

Branded, because we need to convert the current hummingbird model (where readers flit from flower to flower) back to the idea that your news source matters—and that it is worth your time to return to a source you trust.

Brand helps the social-media-driven seeker notice that they’re returning time and again to a certain resource, facilitating a mental model shift back toward destination web browsing. When every site looks the same, it’s easy to see all content as equal—all spun from the same amorphous mass. A strong brand, which is individual to the given newspaper, can cut through that amorphousness, which is the first step in building (or rebuilding) loyalty.

Authoritative, because combating fake news means visually cueing the reliability of a particular source—one staffed by real journalists and editors, with real sources in real countries. In the coming years this will be more important than ever.

Readable, because an informed public needs to grasp stories that can’t always be reduced to headlines or sound bytes. Readability means even longer articles actually get read, sometimes even all the way through. Readability requires a combination of typeface, type size, leading, measure, hierarchy, contrast, etc.—as well as the introduction of visual information, both to break up the flow of text, and to further illuminate what is being said.

Related news keeps readers reading

Additionally, this branded, authoritative, readable content needs to become (to use an ancient word) sticky: through a combination of editing and algorithms, related content must be presented at the appropriate time in the reading experience, to engage the visitor in continued reading.

Currently two publications—nytimes.com and medium.com—achieve all these goals better than any other publications on the web. One is the newspaper of record; the other is a vehicle for anyone’s content. Yet both really do the job all newspapers will need to do to survive—and to help the Republic survive these next years. I particularly admire the way both publications surface related content in a way that practically demands additional reading.

Design won’t solve all the problems facing newspapers, but it will help. And unlike more “immersive” approaches such as WebVR, original full-screen imagery, and original embedded video, the basics of solid, readable design should not be out of budgetary reach for even the most cash-strapped news publisher—budget being a problem for any business at any time, but especially for newspapers now.

In my studio, we’ve been pondering these problems for content sites of all types (not only newspapers). At the Poynter Digital Design Challenge next month, I hope to share designs that nudge the conversation along just a bit further.

Simultaneously published in Medium.

Categories
Advertising Advocacy Corporatism Design editorial ethics I see what you did there Ideas industry Journalism at its Finest Law & Legal nytimes Standards State of the Web The Essentials Usability User Experience UX Web Design Web Design History

Private Parts: unlikely advocate fights for online privacy, anonymity

MESMERIZED as we have been by the spectacle of the flaming garbage scow of U.S. election news, it would have been easy to miss this other narrative. But in the past few days, just as Google, AT&T, and Time-Warner were poised to turn the phrase “online privacy” into a George Carlin punchline, in marched an unlikely hero to stop them: the American Federal Government. Who have just…

approved broad new privacy rules on Thursday that prevent companies like AT&T and Comcast from collecting and giving out digital information about individuals — such as the websites they visited and the apps they used — in a move that creates landmark protections for internet users.

Broadband Providers Will Need Permission to Collect Private Data, by Cecilia Kang, The New York Times, Oct. 27, 2016

Given the increasingly deep bonds between corporate overlords and elected officials, this strong assertion of citizens’ right to privacy comes as something of a surprise. It’s especially startling given the way things had been going.

On Friday, Oct. 21, shortly before a massive DDOS attack took out most U.S. websites (but that’s another story), ProPublica reported that Google had quietly demolished its longstanding wall between anonymous online ad tracking and user’s names. I quote ProPublica’s reporting at length because the details matter:

When Google bought the advertising network DoubleClick in 2007, Google founder Sergey Brin said that privacy would be the company’s “number one priority when we contemplate new kinds of advertising products.”

And, for nearly a decade, Google did in fact keep DoubleClick’s massive database of web-browsing records separate by default from the names and other personally identifiable information Google has collected from Gmail and its other login accounts.

But this summer, Google quietly erased that last privacy line in the sand – literally crossing out the lines in its privacy policy that promised to keep the two pots of data separate by default. In its place, Google substituted new language that says browsing habits “may be” combined with what the company learns from the use Gmail and other tools.

The change is enabled by default for new Google accounts. Existing users were prompted to opt-in to the change this summer.

The practical result of the change is that the DoubleClick ads that follow people around on the web may now be customized to them based on your name and other information Google knows about you. It also means that Google could now, if it wished to, build a complete portrait of a user by name, based on everything they write in email, every website they visit and the searches they conduct.

The move is a sea change for Google and a further blow to the online ad industry’s longstanding contention that web tracking is mostly anonymous.

Google Has Quietly Dropped Ban on Personally Identifiable Web Tracking, by Julia Angwin, ProPublica, Oct. 21, 2016

Et tu, Google

Google has long portrayed itself as one of the good guys, and in many ways it continues to be that. I can’t think of any other insanely powerful mega-corporation that works so hard to advocate web accessibility and performance—although one of its recipes for improved web performance, making up a whole new proprietary markup language and then using its search engine dominance to favor sites that use that language and, of necessity, host their content on Google servers over sites that use standard HTML and host their own content, is hardly a white hat move. But that, too, is another story.

On privacy, certainly, Google had shown ethics and restraint. Which is why their apparent decision to say, “f–– it, everyone else is doing it, let’s stop anonymizing the data we share” came as such an unpleasant shock. And that sense of shock does not even take into account how many hundreds of millions of humans were slated to lose their privacy thanks to Google’s decision. Or just how momentous this change of heart is, given Google’s control and knowledge of our searches, our browsing history, and the contents and correspondents of our email.

Minority Report

Scant days after ProPublica broke the Google story, as a highlight of the proposed merger of AT&T and Time-Warner, came the delightful scenario of TV commercials customized just for you, based on combined knowledge of your web using and TV viewing habits. And while some humans might see it as creepy or even dangerous that the TV they’re watching with their family knows what they were up to on the internet last night, from an advertiser’s point of view the idea made $en$e:

Advertisers want … to combine the data intensity of internet advertising with the clear value and ability to change peoples’ perceptions that you get with a television ad. If you believe in a future where the very, very fine targeting of households or individuals with specific messaging makes economic sense to do at scale, what this merger does is enable that by making more audience available to target in that way.

Individualized Ads on TV Could Be One Result of AT&T-Time Warner Merger by Sapna Maheshwari, The New York Times, Oct. 26

An unlikely privacy advocate

Into this impending privacy hellscape marched the U.S. Government:

Federal officials approved broad new privacy rules on Thursday that prevent companies like AT&T and Comcast from collecting and giving out digital information about individuals — such as the websites they visited and the apps they used — in a move that creates landmark protections for internet users. …

The new rules require broadband providers to obtain permission from subscribers to gather and give out data on their web browsing, app use, location and financial information. Currently, broadband providers can track users unless those individuals tell them to stop.

The passage of the rules deal a blow to telecommunications and cable companies like AT&T and Comcast, which rely on such user data to serve sophisticated targeted advertising. The fallout may affect AT&T’s $85.4 billion bid for Time Warner, which was announced last week, because one of the stated ambitions of the blockbuster deal was to combine resources to move more forcefully into targeted advertising.

Broadband Providers Will Need Permission to Collect Private Data, by Cecilia Kang, The New York Times, Oct. 27

What happens next

The consequences of these new rules—exactly how advertising will change and networks will comply, the effect on these businesses and those that depend on them (i.e. newspapers), how Google in particular will be effected, who will cheat, who will counter-sue the government, and so on—remain to be seen. But, for the moment, we’re about to have a bit more online privacy and anonymity, not less. At least, more online privacy from advertisers. The government, one assumes, will continue to monitor every little thing we do online.


Co-published in Medium.

Categories
A Book Apart A List Apart Advertising Advocacy An Event Apart architecture automattic Blogs and Blogging business Career client services clients climate change Code Community conferences content Coudal Partners creativity CSS Design Designers development DWWS engagement eric meyer Future-Friendly glamorous HTML Ideas industry Jason Santa Maria launches Ma.gnolia My Back Pages Off My Lawn! parenting peachpit Publications Publisher's Note Publishing Redesigns Self-Employment software Standards Startups State of the Web Stories studio.zeldman The Essentials The Profession Usability User Experience UX Web Design Web Design History Web Standards Websites wordpress Working writing Zeldman zeldman.com

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.

 

 

Categories
content Content First Content-First creativity Design Ideas industry State of the Web

The independent content producer refuses to die!

2001 IS CALLING, and while it may not look fresh, its message still resonates:

We believe that the web is a remarkable medium for new forms of art, personal storytelling, and all manner of information and services whose rewards are not necessarily financial.

The independent content scene is alive and well, but is largely unknown by the general web-using public.

We seek to support each other as a community, and to increase, if possible, the general public’s awareness not only of existing independent sites, but of the fact that they can create their own.

INDEPENDENTS DAY is a wholly non-owned, non-commercial, non-subsidiary of nothing.

Independent content on the web: a declaration of principles from 2001, still relevant today, from Independents Day.

Categories
A List Apart Authoring Best practices Culture Design Ideas industry State of the Web

Toward a more inclusive web form

REGISTERING for school, paying bills, updating government documents—we conduct a significant part of our daily lives through web forms. So when simply typing in your name breaks a form, well, user experience, we have a problem. As our population continues to diversify, we need designs that accommodate a broader range of naming conventions. Aimee Gonzalez shows how cultural assumptions affect what we build on the web—and how fostering awareness and refining our processes can start to change that.

Categories
A List Apart Advertising Advocacy Authoring Bandwidth Deck, the Design development editorial glamorous HTML Ideas industry Journalism at its Finest maturity Publications Publisher's Note Publishing Responsibility Responsive Web Design Site Optimization Standards State of the Web Surviving The Essentials User Experience UX W3C Web Design Web Design History Web Standards writing

Publishing v. Performance—or, The Soul of the Web

MY SOUL is in twain. Two principles on which clued-in web folk heartily agree are coming more and more often into conflict—a conflict most recently thrust into relief by discussions around the brilliant Vox Media team, publishers of The Verge.

The two principles are:

  1. Building performant websites is not only a key differentiator that separates successful sites from those which don’t get read; it’s also an ethical obligation, whose fulfillment falls mainly on developers, but can only happen with the buy-in of the whole team, from marketing to editorial, from advertising to design.
  2. Publishing and journalism are pillars of civilized society, and the opportunity to distribute news and information via the internet (and to let anyone who is willing to do the work become a publisher) has long been a foundational benefit of the web. As the sad, painful, slow-motion decline of traditional publishing and journalism is being offset by the rise of new, primarily web-based publications and news organizations, the need to sustain these new publications and organizations—to “pay for the content,” in popular parlance—is chiefly being borne by advertising…which, however, pays less and less and demands more and more as customers increasingly find ways to route around it.

The conflict between these two principles is best summarized, as is often the case, by the wonderfully succinct Jeremy Keith (author, HTML5 For Web Designers). In his 27 July post, “On The Verge,” Jeremy takes us through prior articles beginning with Nilay Patel’s Verge piece, “The Mobile Web Sucks,” in which Nilay blames browsers and a nonexistent realm he calls “the mobile web” for the slow performance of websites built with bloated frameworks and laden with fat, invasive ad platforms—like The Verge itself.

The Verge’s Web Sucks,” by Les Orchard, quickly countered Nilay’s piece, as Jeremy chronicles (“Les Orchard says what we’re all thinking”). Jeremy then points to a half-humorous letter of surrender posted by Vox Media’s developers, who announce their new Vox Media Performance Team in a piece facetiously declaring performance bankruptcy.

A survey of follow-up barbs and exchanges on Twitter concludes Jeremy’s piece (which you must read; do not settle for this sloppy summary). After describing everything that has so far been said, Mr Keith weighs in with his own opinion, and it’s what you might expect from a highly thoughtful, open-source-contributing, standards-flag-flying, creative developer:

I’m hearing an awful lot of false dichotomies here: either you can have a performant website or you have a business model based on advertising. …

Tracking and advertising scripts are today’s equivalent of pop-up windows. …

For such a young, supposedly-innovative industry, I’m often amazed at what people choose to treat as immovable, unchangeable, carved-in-stone issues. Bloated, invasive ad tracking isn’t a law of nature. It’s a choice. We can choose to change.

Me, I’m torn. As a 20-year-exponent of lean web development (yes, I know how pretentious that sounds), I absolutely believe that the web is for everybody, regardless of ability or device. The web’s strength lies precisely in its unique position as the world’s first universal platform. Tim Berners-Lee didn’t invent hypertext, and his (and his creation’s) genius doesn’t lie in the deployment of tags; it subsists in the principle that, developed rightly, content on the web is as accessible to the Nigerian farmer with a feature phone as it is to a wealthy American sporting this year’s device. I absolutely believe this. I’ve fought for it for too many years, alongside too many of you, to think otherwise.

And yet, as a 20-year publisher of independent content (and an advertising professional before that), I am equally certain that content requires funding as much as it demands research, motivation, talent, and nurturing. Somebody has to pay our editors, writers, journalists, designers, developers, and all the other specialtists whose passion and tears go into every chunk of worthwhile web content. Many of you reading this will feel I’m copping out here, so let me explain:

It may indeed be a false dichotomy that “either you can have a performant website or you have a business model based on advertising” but it is also a truth that advertisers demand more and more for their dollar. They want to know what page you read, how long you looked at it, where on the web you went next, and a thousand other invasive things that make thoughtful people everywhere uncomfortable—but are the price we currently pay to access the earth’s largest library.

I don’t like this, and I don’t do it in the magazine I publish, but A List Apart, as a direct consequence, will always lack certain resources to expand its offerings as quickly and richly as we’d like, or to pay staff and contributors at anything approaching the level that Vox Media, by accepting a different tradeoff, has achieved. (Let me also acknowledge ALA’s wonderful sponsors and our longtime partnership with The Deck ad network, lest I seem to speak from an ivory tower. Folks who’ve never had to pay for content cannot lay claim to moral authority on this issue; untested virtue is not, and so on.)

To be clear, Vox Media could not exist if its owners had made the decisions A List Apart made in terms of advertising—and Vox Media’s decisions about advertising are far better, in terms of consumer advocacy and privacy, than those made by most web publishing groups. Also to be clear, I don’t regret A List Apart’s decisions about advertising—they are right for us and our community.

I know and have worked alongside some of the designers, developers, and editors at Vox Media; you’d be proud to work with any of them. I know they are painfully aware of the toll advertising takes on their site’s performance; I know they are also doing some of the best editorial and publishing work currently being performed on the web—which is what happens when great teams from different disciplines get together to push boundaries and create something of value. This super team couldn’t do their super work without salaries, desks, and computers; acquiring those things meant coming to some compromise with the state of web advertising today. (And of course it was the owners, and not the employees, who made the precise compromise to which Vox Media currently adheres.)

Put a gun to my head, and I will take the same position as Jeremy Keith. I’ll even do it without a gun to my head, as my decisions as a publisher probably already make clear. And yet, two equally compelling urgencies in my core being—love of web content, and love of the web’s potential—make me hope that web and editorial teams can work with advertisers going forward, so that one day soon we can have amazing content, brilliantly presented, without the invasive bloat. In the words of another great web developer I know, “Hope is a dangerous currency—but it’s all I’ve got.”


Also published in Medium.

Categories
conferences content Deserving engagement ethics Existence experience Health Ideas love maturity people Respect Teaching The Mind

A Beautiful Life

LIZZIE VELASQUEZ, age 25, weighs 64 pounds. Born with a rare syndrome that prevents her from gaining weight, she was not expected to survive. Her parents took her home, raised her normally, and, when she turned five, sent her to kindergarten, where she discovered, through bullying, that she was different.

The bullying peaked when an adult male posted a photo of thirteen-year-old Lizzie labeled “World’s Ugliest Woman” on YouTube. The video got four million views. The uniformly unkind comments included sentiments like, “Do the world a favor. Put a gun to your head, and kill yourself.”

Rather than take the advice of anonymous cowards, Lizzie determined not to let their cruelty define her. Instead, as she reveals in this inspiring video captured at TEDxAustinWomen, Lizzie channeled the experience into a beautiful and fulfilling life.

Categories
Design Ideas Illustration Images industry Lettering type Typography

From NYPL to DC Comics: the lettering of Ira Schnapp

Action Comics logo, 1938

Superman, 1940

HE DESIGNED the lettering on The New York Public Library and the James Farley Post Office (“neither snow nor rain…”), created titles for silent movies, movie posters, and pulp magazines in the 1920s, and started working for DC Comics in 1938, where he designed the masthead for Action Comics, refined the Superman logo, and brought dozens of DC Comics texts and titles to life. A new exhibit at The Type Directors Club honors Ira Schnapp and sheds light on his decades of influential work.

Categories
Community editorial Education Existence experience Ideas

Why humans run the world

History professor Yuval Noah Harari, author of Sapiens: A Brief History of Mankind, explains why humans have dominated Earth. The reason’s not what you might expect:

The real difference between us and other animals is on the collective level. Humans control the world because we are the only animal that can cooperate flexibly in large numbers. Ants and bees can also work together in large numbers, but they do so in a very rigid way. If a beehive is facing a new threat or a new opportunity, the bees cannot reinvent their social system overnight in order to cope better. They cannot, for example, execute the queen and establish a republic. Wolves and chimpanzees cooperate far more flexibly than ants, but they can do so only with small numbers of intimately known individuals. Among wolves and chimps, cooperation is based on personal acquaintance. If I am a chimp and I want to cooperate with you, I must know you personally: What kind of chimp are you? Are you a nice chimp? Are you an evil chimp? How can I cooperate with you if I don’t know you?

Only Homo sapiens can cooperate in extremely flexible ways with countless numbers of strangers. One-on-one or ten-on-ten, chimpanzees may be better than us. But pit 1,000 Sapiens against 1,000 chimps, and the Sapiens will win easily, for the simple reason that 1,000 chimps can never cooperate effectively. Put 100,000 chimps in Wall Street or Yankee Stadium, and you’ll get chaos. Put 100,000 humans there, and you’ll get trade networks and sports contests.

Source: Why humans run the world

Categories
art direction Best practices Blogs and Blogging Compatibility Content First content strategy Content-First creativity Design Ideas Layout Redesigns Site Optimization Standards State of the Web The Essentials The Profession Typekit Typography Usability User Experience UX Web Design Web Design History webfonts Websites webtype Zeldman zeldman.com

Web Design Manifesto 2012

THANK YOU for the screen shot. I was actually already aware that the type on my site is big. I designed it that way. And while I’m grateful for your kind desire to help me, I actually do know how the site looks in a browser with default settings on a desktop computer. I am fortunate enough to own a desktop computer. Moreover, I work in a design studio where we have several of them.

This is my personal site. There are many like it, but this one is mine. Designers with personal sites should experiment with new layout models when they can. Before I got busy with one thing and another, I used to redesign this site practically every other week. Sometimes the designs experimented with pitifully low contrast. Other times the type was absurdly small. I experimented with the technology that’s used to create web layouts, and with various notions of web “page” design and content presentation. I’m still doing that, I just don’t get to do it as often.

Many people who’ve visited this site since the redesign have commented on the big type. It’s hard to miss. After all, words are practically the only feature I haven’t removed. Some of the people say they love it. Others are undecided. Many are still processing. A few say they hate it and suggest I’ve lost my mind—although nobody until you has suggested I simply didn’t have access to a computer and therefore didn’t know what I was designing. This design may be good, bad, or indifferent but it is not accidental.

A few people who hate this design have asked if I’ve heard of responsive web design. I have indeed. I was there when Ethan Marcotte invented it, I published his ground-breaking article (and, later, his book, which I read in draft half a dozen times and which I still turn to for reference and pleasure), and I’ve had the privilege of seeing Ethan lecture and lead workshops on the topic about 40 times over the past three years. We’ve incorporated responsive design in our studio’s practice, and I’ve talked about it myself on various stages in three countries. I’m even using elements of it in this design, although you’d have to view source and think hard to understand how, and I don’t feel like explaining that part yet.

This redesign is a response to ebooks, to web type, to mobile, and to wonderful applications like Instapaper and Readability that address the problem of most websites’ pointlessly cluttered interfaces and content-hostile text layouts by actually removing the designer from the equation. (That’s not all these apps do, but it’s one benefit of using them, and it indicates how pathetic much of our web design is when our visitors increasingly turn to third party applications simply to read our sites’ content. It also suggests that those who don’t design for readers might soon not be designing for anyone.)

This redesign is deliberately over the top, but new ideas often exaggerate to make a point. It’s over the top but not unusable nor, in my opinion, unbeautiful. How can passages set in Georgia and headlines in Franklin be anything but beautiful? I love seeing my words this big. It encourages me to write better and more often.

If this were a client site, I wouldn’t push the boundaries this far. If this were a client site, I’d worry that maybe a third of the initial responses to the redesign were negative. Hell, let’s get real: if this were a client site, I wouldn’t have removed as much secondary functionality and I certainly wouldn’t have set the type this big. But this is my personal site. There are many like it, but this one is mine. And on this one, I get to try designs that are idea-driven and make statements. On this one, I get to flounder and occasionally flop. If this design turns out to be a hideous mistake, I’ll probably eventually realize that and change it. (It’s going to change eventually, anyway. This is the web. No design is for the ages, not even Douglas Bowman’s great Minima.)

But for right now, I don’t think this design is a mistake. I think it is a harbinger. We can’t keep designing as we used to if we want people to engage with our content. We can’t keep charging for ads that our layouts train readers to ignore. We can’t focus so much on technology that we forget the web is often, and quite gloriously, a transaction between reader and writer.

Most of you reading this already know these things and already think about them each time you’re asked to create a new digital experience. But even our best clients can sometimes push back, and even our most thrilling projects typically contain some element of compromise. A personal site is where you don’t have to compromise. Even if you lose some readers. Even if some people hate what you’ve done. Even if others wonder why you aren’t doing what everyone else who knows what’s what is doing.

I don’t think you will see much type quite this big but I do think you will see more single-column sites with bigger type coming soon to a desktop and device near you. For a certain kind of content, bigger type and a simpler layout just make sense, regardless of screen size. You don’t even have to use Typekit or its brothers to experiment with big type (awesome as those services are). In today’s monitors and operating systems, yesterday’s classic web fonts—the ones that come with most everyone’s computer—can look pretty danged gorgeous at large sizes. Try tired old Times New Roman. You might be surprised.

The present day designer refuses to die.


Categories
Big Web Show Ideas industry people spec Standards State of the Web Web Design History

Tantek Çelik on Mozilla & Microformats: Big Web Show

TANTEK ÇELIK is my guest on Episode No. 68 of The Big Web Show (“everything web that matters”).

Currently web standards lead at Mozilla, Tantek is one of the founders of both the microformats.org open standards community and the Global Multimedia Protocols Group, and an invited expert to the World Wide Web Consortium (W3C) Cascading Style Sheets working group.

Tantek has played a key role in the development and popularization of practical social network portability technologies such as the hCard and XFN microformats. In 2003, Tantek collaborated with Eric Meyer and Matt Mullenweg in the invention of the XHTML Friends Network (XFN), which has since become the most popular decentralized social relationship format in the history of the Web. In 2004 Tantek proposed hCard for representing people and organizations, which has since similarly become the most popular user profile format on the web.

During his years as Technorati’s Chief Technologist, Tantek played an active role in refining and evangelizing hCard, bringing it from a wiki proposal to one that’s endorsed and supported by individuals, numerous small organizations, major companies ranging from AOL to Yahoo, and implemented for over a hundred million user identities and business listings on the web.

At Microsoft, Tantek led the development of Internet Explorer 5 for Macintosh and its Tasman rendering engine, which was the most standards-compliant layout engine of its time. He was also an early member of The Web Standards Project, and is the creator of the Box Model Hack, the first IE hack that let developers work around the incorrect box model in old versions of Internet Explorer.

Listen to Episode 68: Tantek Çelik on Mozilla and Microformats.

Links in this episode

Subscribe to The Big Web Show

The Big Web Show features special guests and topics like web publishing, art direction, content strategy, typography, web technology, and more. Get episodes delivered to you automatically:

Categories
An Event Apart Appearances CSS CSS3 Design development eric meyer HTML HTML5 Ideas industry Information architecture IXD Platforms Publishing Redesigns Responsive Web Design Scripting Standards State of the Web User Experience UX Web Design Web Standards

CSS & Mobile To The Future | Embrace Users, Constrain Design | An Event Apart Seattle 2012 Day II

TUESDAY, 3 APRIL 2012, was Day II of An Event Apart Seattle, a sold-out, three-day event for people who make websites. If you couldn’t be among us, never fear. The amazing Luke Wroblewski (who leads a day-long seminar on mobile web design today) took excellent notes throughout the day, and shares them herewith:

The (CSS) Future is Now – Eric Meyer

In his The Future is Now talk at An Event Apart in Seattle, WA 2012 Eric Meyer talked about some of the visual effects we can achieve with CSS today. Create shiny new visual elements with no images using progressive enhancement and CSS that is available in all modern browsers.

A Philosophy of Restraint
– Simon Collison

In his A Philosophy of Restraint talk at An Event Apart in Seattle, WA 2012 Simon Collison outlined his design philosophy and how he applies it to web projects. Embrace constraints; simplicity and complexity; design aesthetic; design systems as foundations that prepare us for future projects and complexity; affordances and type; focus and content; audit and pause — prevent catastrophic failures and shine a new light on what you’ve learned with each project.

Touch Events – Peter-Paul Koch (PPK)

In his Touch Events talk at An Event Apart in Seattle, WA 2012 Peter-Paul Koch talked about touch support in mobile browsers and how to handle touch events in web development. Includes a ranking of current mobile browsers; interaction modes in mobile versus desktop (mouse) and keyboard — how do we adjust scripts to work with touch?; touch events; supporting modes; event cascade; and “stick with click.”

Mobile to the Future – Luke Wroblewski

Alas, Luke could not take notes on his own presentation. Here’s what it was about: When something new comes along, it’s common for us to react with what we already know. Radio programming on TV, print design on web pages, and now web page design on mobile devices. But every medium ultimately needs unique thinking and design to reach its true potential. Through an in-depth look at several common web interactions, Luke outlined how to adapt existing desktop design solutions for mobile devices and how to use mobile to expand what’s possible across all devices.Instead of thinking about how to reformat your websites to fit mobile screens, attendees learned to see mobile as way to rethink the future of the web.

What’s Your Problem? – Whitney Hess

In her What’s Your Problem? Putting Purpose Back into Your Projects talk at An Event Apart in Seattle, WA 2012 Whitney Hess outlined the value of learning about opportunities directly from customers. Understand the problem before designing the solution. Ask why before you figure out how. There is no universal solution for all our projects, we need to determine which practices are “best” through our understanding of problems. Our reliance on best practices is creating a world of uniform websites that solve no one’s problem. Leave the desk and interact with people. Rather than the problem solver, be the person who can see the problem.

Properties of Intuitive Pages
– Jared Spool

At An Event Apart in Seattle WA 2012, Jared Spool walked through what makes a design intuitive, why some users need different treatment, and the role of design. Current versus acquired knowledge and how to bridge the gap (how to train users, thus making your site or app “intuitive”). Redesigns and how to avoid disaster. Design skills. The gap between current knowledge and target knowledge is where design happens. Why intuitive design is only possible in small, short iterations.


Day III begins in 90 minutes. See some of you there.

Photos: AEA Seattle Flickr pool or hashtags #aea and #aeasea on Instagram.