Categories
Best practices Design eric meyer ethics Publisher's Note reportage Responsibility

Streaming suicide and other design decisions

A 12-year-old girl live-streamed her suicide. It took two weeks for Facebook to take the video down.”

So reads the headline of a January 15 news story in The Washington Post. Saying that she’d been sexually abused by a family member, 12-year-old Katelyn Nicole Davis, of Polk County, Georgia, hanged herself, broadcasting the suicide via a 40-minute live stream seen worldwide.

While YouTube immediately removed the video, it “lingered on Facebook for nearly two weeks,” according to the Post’s reporting of Buzzfeed and other unspecified “media reports.”

First, it just hurts

I keep rereading the short article and its headline as if it will make sense or stop hurting on the next scan-through. As a human being, I can’t fully process the horror and sadness of this tragedy.

I was initially going to write “as a human being and the father of a 12-year-old girl,” but that last part shouldn’t matter. You don’t need to be the parent of a child Katelyn’s age and sex to feel the feelings.

Nor does there need to be someone in your life who was raped or molested—although, whether they’ve told you about it or not, there almost surely is. Statistically there are likely multiple someones in your life who have suffered unspeakably, too frequently at the hands of people whose main job in life was to protect them. I’m sorry to have to write these words, and I hope reading them doesn’t rip open wounds.

But the point is, even if you and everyone in your circle has lived a magical life untouched by too-common crimes and horrors, it is still unbearable to contemplate too closely what Katelyn must have felt, and what she did about it, and what watching what she did must have done to those who watched the video—both the empathetic majority, and the hopefully small minority of viewers who, because of their own damage, may have gotten off on it, edging just that much closer to some future sociopathic acting-out.

A designer’s job

On a personal level, I’m good citing horror and sadness as a reaction to this ugly story. But as a web and product designer, I can’t help but see it as another instance of what Eric Meyer and Sara Wachter-Boettcher warn about in their book, Design For Real Life. Namely:

For every wonderfully fresh use of the internet’s social power we conceive, we must always ask ourselves, how might this be used to make our world more hurtful, less loving, less kind? What unforeseen dangers might our well intentioned innovation unleash?

I published Design For Real Life, but I don’t cite Katelyn’s story or repeat Sara and Eric’s moral here to sell copies. I do it to remind us all that what we make matters. Our design decisions matter. The little qualms that might float through our minds while working on a project need to be examined, not suppressed in the interest of continued employment. And the diversity of our workforce matters, because it takes many different minds to foresee potential abuses of our products.

Streaming suicide, monitoring content

Live.me isn’t the first live streaming app, and, as a category, live streaming likely does more good than harm. The existence of a live streaming app didn’t drive a girl to kill herself, although, in despair at not being listened to, she might have found solace and an appeal in the idea that her suicide, witnessed globally, could lead to an investigation and eventual justice.

Similarly, when Facebook began allowing its customers to perform live streaming (or, in Nicole’s case) to post video streams from third parties, use cases like pre-teen suicide or the torture of a mentally disabled teenager most likely did not factor into those business decisions. But here we are.

And, as much content as Facebook produces in a day, you can’t really fault them for not always being johnny-on-the-spot when some of that content violates their guidelines. But surely they can do better. 

Invention is a mother

There’s no closing Pandora’s box, nor would we wish to. But we who create websites and applications must remain mindful, honest, and vigilant. We must strive to work in diverse teams that are better than homogenous groups at glimpsing and preparing for the unforeseen. More than ever, we must develop design practices that anticipate the horrible and tragic—not to mention the illegal and authoritarian.

And in life, as well as design, we must do a better job of asking ourselves what we are not seeing—what struggles the people we meet may be hiding from us, and how we can help them before it is too late.


Also published on Medium

Categories
Best practices CSS HTML industry Markup Off My Lawn! Responsibility Standards State of the Web The Essentials The Profession

Kiss My Classname

SORRY. I disagree. Nonsemantic classnames that refer to visual styles will always be a bad idea.

I’m sure you’re a good coder. Probably much better than I am these days. I know most of you weren’t around for the standards wars and don’t know how much damage non-semantic HTML and CSS did to the web.

I’ve worked on big sites and I understand how bloated and non-reusable code can get when a dozen people who don’t talk to each other work on it over a period of years. I don’t believe the problem is the principle of semantic markup or the cascade in CSS. I believe the problem is a dozen people working on something without talking to each other.

Slapping a visually named class on every item in your markup may indeed make your HTML easier to understand for a future developer who takes over without talking to you, especially if you don’t document your work and create a style guide. But making things easier for yourself and other developers is not your job. And if you want to make things easier for yourself and other developers, talk to them, and create a style guide or pattern library.

The codebase on big sites isn’t impenetrable because developers slavishly followed arbitrary best practices. The codebase is broken because developers don’t talk to each other and don’t make style guides or pattern libraries. And they don’t do those things because the people who hire them force them to work faster instead of better. It starts at the top.

Employers who value quality in CSS and markup will insist that their employees communicate, think through long-term implications, and document their work. Employers who see developers and designers as interchangable commodities will hurry their workers along, resulting in bloated codebases that lead intelligent people to blame best practices instead of work processes.

The present is always compromised, always rushed. We muddle through with half the information we need, praised for our speed and faulted when we stop to contemplate or even breathe. Frameworks built on newish worst practices seem like the way out, but they end up teaching and permanently ingraining bad habits in a generation of web makers. Semantics, accessibility, and clarity matter. Reusability is not out of reach. All it takes is clarity and communication.

Categories
Best practices better-know-a-speaker client services Content First Design Designers development industry Interviews Publications Publishing State of the Web The Big Web Show The Profession Web Design Web Design History Web Standards writing

Big Web Show ? 150: Giant Paradigm Shifts and Other Delights With Brad Frost

Brad Frost, photographed at An Event Apart by Jeffrey Zeldman.

BOY, was this show overdue. For the first time ever on The Big Web Show, I chat with my friend, front-end developer extraordinaire Brad Frost, author of the spanking new book, Atomic Design.

We have fun. We go way over time. We kept talking after the show stopped. There was just so much to discuss—including Pattern Lab and style guides, being there for the iPad launch, working with big brands, how to say no and make the client happy you said it, avoiding antipatterns, mobile versus “the real web” (or the way we saw things in 2009), dressing for success, contributing to open source projects, building a community, the early days of Brad’s career, and that new book of his.

Listen to Episode ? 150 on the 5by5 network, or subscribe via iTunes. And pick up Brad’s book before they sell out!

Sponsored by Braintree and Incapsula.

Brad Frost URLS

@brad_frost
http://bradfrost.com
http://patternlab.io/
http://bradfrost.com/blog/
http://bradfrost.github.com/this-is-responsive/
http://wtfmobileweb.com/
http://deathtobullshit.com/
http://wtfqrcodes.com/
http://bradfrost.com/music
http://bradfrost.com/art

Categories
Accessibility An Event Apart art direction Best practices Usability User Experience UX

Solve the Right Problem: Derek Featherstone on designing for extremes

Derek Featherstone at An Event Apart

12 LESSONS from An Event Apart San Francisco – ? 3: Derek Featherstone was the 10th speaker at An Event Apart San Francisco, which ended Wednesday. His session, Extreme Design, showed how creating great experiences for people with disabilities results in better designs for everyone.

Focusing relentlessly on accessibility helps us think of extreme scenarios and ask questions like “how can we make this work eyes free?” and “how can we make this work with the least amount of typing?” Most importantly, it leads to deeper design thinking that solves problems for everyone who uses our sites and products.

A Map For The Blind

One of my favorite examples from Derek’s presentation had to do with a map. A Canadian city was expanding geographically to encompass some of the surrounding suburbs. The city’s website was charged with letting all citizens know about the change. The web team did what you or I would probably do: they created a map that clearly showed the old and new city limits.

Unfortunately, this visual map was by definition inaccessible to blind citizens, so the city brought in Derek and his colleagues to design an equivalent experience for the unsighted. Derek’s team and the web team pondered typical solutions—such as laborious written descriptions of the city’s shifting geographic borders. But these were not user-friendly, nor did they get to the heart of the problem.

Maybe creating a verbal equivalent of a visual map wasn’t the answer. Derek’s team kept digging. Why was the map created in the first place, they asked. What was the point of it? What were users supposed to take away from it?

It turned out, people wanted to know if their street fell within the new city boundaries because, if it did, then their taxes were going to go up.

Solving for a map wasn’t the point at all. Allowing people to find out if their home address fell inside the new city limits was the point.

A simple data entry form accomplished the task, and was by definition accessible to all users. It was also a much quicker way even for sighted user to get the information they wanted. By solving for an extreme case—people who can’t see this map—the web teams were able to create a design that worked better for everyone.

Tomorrow I’ll be back with another top takeaway from another AEA San Francisco 2016 speaker. The next AEA event, An Event Apart St. Louis, takes place January 30-February 1, 2017.

 

Also published at Medium.

Categories
An Event Apart Best practices eric meyer Standards State of the Web

Identify “stress cases” and design with compassion: Eric Meyer

Eric Meyer at An Event Apart12 LESSONS from An Event Apart San Francisco – ? 2: Eric Meyer was the 11th speaker at An Event Apart San Francisco, which ended Wednesday. His session, Compassionate Design, discussed the pain that can occur when our carefully crafted websites and applications, designed to create an ideal experience for idealized users, instead collide with messy human reality.

You can’t always predict who will use your products, or what emotional state they’ll be in when they do. A case in point: when Facebook’s “Your Year in Review” feature, designed by well-meaning people to help Facebook users celebrate their most important memories from the preceding twelve months, shoved a portrait of Eric’s recently deceased daughter Rebecca in his face, surrounded by dancing and partying clip-art characters who appeared to be celebrating her death.

With great power…

Certainly, no one at Facebook intended to throw a hundred pound bag of salt into the open wound of a grieving parent. What happened, surely, was that no one sitting around the table when the feature was planned asked the question, what if one of our users just had the worst year of their lives?

If even one of the talented Facebook folks charged with creating the new feature had asked themselves “what’s the worst that can happen?”—if just one of them had realized that not everyone using Facebook felt like celebrating their year—they might have put in safeguards to prevent their algorithm from assuming that a Facebook user’s most visited (most “popular”) post of the year was also their happiest.

They might also have made the “year in review” feature an opt-in, with questions designed to protect those who had experienced recent tragedy. Facebook didn’t build in those protections, not because they don’t care, but because our approach to design is fundamentally flawed, in that we build our assumptions around idealized and average users and use cases, and neglect to ask ourselves and our teammates, “what if we’re wrong? How could our product hurt someone?”

It’s not just Facebook. We all ignore the user in crisis.

Eric shared many examples from leading sites and services of unintended and sometimes horrifying instances of designs that hurt someone—from ads that accidentally commented sadistically on tragic news stories (because keyword exclusion is underrated and underused in online advertising); to magic keywords Flickr and Google added to their customers’ photos without asking, resulting in a man’s portrait being labeled “gorilla” and a concentration camp photo being tagged a jungle gym.

The problem, Eric explained, is that our systems have not been designed with people in mind. They’ve been designed with consumers in mind. Consumers are manageable fictions. But human life is inherently messy. To create sites and applications that work for everyone, including  people who may be having the worst day of their lives at the time they encounter or product or service, we must always think about how our product could be used to hurt someone, and plan for the worst-case scenario whenever we design.

When we label a usage an “edge case,” we marginalize that user and choose not to care. Think “stress case,” instead, and design for that human.

We can do better.

Eric’s presentation included many techniques for bringing these new principles into our design workflows, and his book with Sara Wachter-Boettcher, Design for Real Life, goes into even greater detail on the matter. (It’s one of those rare and important books that defines how we should be looking at our design jobs today, and I would say that even if I weren’t the publisher.)

Tomorrow I’ll be back with another top takeaway from another AEA San Francisco 2016 speaker. The next AEA event, An Event Apart St. Louis, takes place January 30-February 1, 2017.

 
Also published on Medium.

Categories
A Book Apart A List Apart Advocacy An Event Apart Best practices Big Web Show Browsers chrome Code CSS CSS Grid Layout CSS3 Design HTML Layout Standards State of the Web The Big Web Show Web Design Web Design History Web Standards

CSS Grid Layout with Rachel Andrew: Big Web Show

Rachel Andrew

RACHEL ANDREW—longtime web developer and web standards champion, co-founder of the Perch CMS, and author of Get Ready For CSS Grid Layout—is my guest on today’s Big Web Show. We discuss working with CSS Grid Layout, how Grid enables designers to “do something different” with web layout, why designers need to start experimenting with Grid Layout now, how front-end design has morphed into an engineering discipline, learning HTML and CSS versus learning frameworks, and the magic of David Bowie, RIP.

Enjoy Episode ? 141 of The Big Web Show.

Sponsored by A List Apart and An Event Apart.

URLs

rachelandrew.co.uk
Get Ready for CSS Grid Layout
Perch CMS
Writing by Rachel Andrew
Books by Rachel Andrew
@rachelandrew

Categories
Authoring Best practices Compatibility Content First Content-First CSS CSS3 Design Ethan Marcotte HTML HTML5 Jeremy Keith links Standards State of the Web Told you so Web Design Web Design History Web Standards

Of Patterns and Power: Web Standards Then & Now

IN “CONTENT Display Patterns” (which all front-end folk should read), Dan Mall points to a truth not unlike the one Ethan Marcotte shared last month on 24 ways. It is a truth as old as standards-based design: Construct your markup to properly support your content (not your design).

Modular/atomic design doesn’t change this truth, it just reinforces its wisdom. Flexbox and grid layout don’t change this truth, they just make it easier to do it better. HTML5 doesn’t change this truth, it just reminds us that the separation of structure from style came into existence for a reason. A reason that hasn’t changed. A reason that cannot change, because it is the core truth of the web, and is inextricably bound up with the promise of this medium.

Separating structure from style and behavior was the web standards movement’s prime revelation, and each generation of web designers discovers it anew. This separation is what makes our content as backward-compatible as it is forward-compatible (or “future-friendly,” if you prefer). It’s the key to re-use. The key to accessibility. The key to the new kinds of CMS systems we’re just beginning to dream up. It’s what makes our content as accessible to an ancient device as it will be to an unimagined future one.

Every time a leader in our field discovers, as if for the first time, the genius of this separation between style, presentation, and behavior, she is validating the brilliance of web forbears like Tim Berners-Lee, Håkon Wium Lie, and Bert Bos.

Every time a Dan or an Ethan (or a Sara or a Lea) writes a beautiful and insightful article like the two cited above, they are telling new web designers, and reminding experienced ones, that this separation of powers matters.

And they are plunging a stake into the increasingly slippery ground beneath us.

Why is it slippery? Because too many developers and designers in our amnesiac community have begun to believe and share bad ideas—ideas, like CSS isn’t needed, HTML isn’t needed, progressive enhancement is old-fashioned and unnecessary, and so on. Ideas that, if followed, will turn the web back what it was becoming in the late 1990s: a wasteland of walled gardens that said no to more people than they welcomed. Let that never be so. We have the power.

As Maimonides, were he alive today, would tell us: he who excludes a single user destroys a universe. Web standards now and forever.

Categories
A List Apart art direction Bandwidth Best practices creativity CSS CSS3 Design

CSS & Design: Blending Modes Demystified

A List Apart: Blending Modes Demystified. Illustration by Brad Colbow.

IN AN IDEAL world, we’d be able to modify a design or graphic for the web while keeping the original intact, all without opening an image editor. We’d save tons of time by not having to manually reprocess graphics whenever we changed stuff. Graphics could be neatly specified, maintained, and manipulated with just a few licks of CSS. Oh. Wait. We can do that! Justin McDowell gives us the lowdown: read Blending Modes Demystified in today’s A List Apart.


Illustration by Brad Colbow

Categories
Best practices Code Compatibility Content First content strategy Content-First Design Free Advice HTML Illustration Images IXD maturity mobile Mobile Multi-Device Off My Lawn! Performance photography Responsibility Responsive Web Design Standards State of the Web The Essentials The Profession Told you so tweets Usability User Experience UX Web Design Web Design History Web Standards Websites

The Year in Design

  • Mobile is today’s first screen. So design responsively, focusing on content and structure first.
  • Websites and apps alike should remove distractions and let people interact as directly as possible with content.
  • 90 percent of design is typography. And the other 90 percent is whitespace.
  • Boost usability and pleasure with progressive disclosure: menus and functions that appear only when needed.
  • One illustration or original photo beats 100 stock images.
  • Design your system to serve your content, not the other way around.
  • Remove each detail from your design until it breaks.
  • Style is the servant of brand and content. Style without purpose is noise.
  • Nobody waits. Speed is to today’s design what ornament was to yesterday’s.
  • Don’t design to prove you’re clever. Design to make the user think she is.

Also published in Medium

Translated into German (also here) by Mark Sargent

Translated into French by Jean-Baptiste Sachsé

Translated into Turkish by omerbalyali.

Translated into Spanish by Tam Lopez Breit.

Categories
art direction Bandwidth Best practices Brands CSS CSS3 Design Designers development Fonts Real type on the web software State of the Web Typekit Typography Web Design Web Standards webfonts Websites

A Helvetica For Readers

A Helvetica for readers–introducing Acumin.

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

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

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

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

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

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

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

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

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

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

Categories
Advocacy Best practices Community ethics Jerks love people

Love. Listen. Learn.

NOTE: Below is a transcript of my aural contribution to Episode ? 185 of The ShopTalk Show (“This Idea Must Die”):

AS A COMMUNITY, we have to stop demonizing those with whom we disagree.

Attacking the intelligence, moral fiber, and grip on sanity of those who hold opinions contrary to ours is nothing new on the internet. It’s as old as newsgroups. A minute after somebody started alt.opinions.design, a second person signed up just to tell the first person to screw off.

And of course it’s even older than that. Progressive groups that try to bring positive change to their community are always splitting into factions that despise each other. If you’ve seen Monty Python’s “The Life of Brian,” and remember the sequence where the zealots are sitting in an ancient square, attacking other zealot groups for being “splitters,” you have a good idea of how far back this goes.

To J. Edgar Hoover, there was no difference between Lenin, Stalin, and Trotsky—but, boy, did the Stalinists and Trotskyites disagree with that point of view. Ask two Communists a question and you’ll get three answers and four bullets. And, minus the bullets, the same is true for social-progress-minded web designers and developers. And equally true for reactionaries, who think the system is fair for everyone, since it’s always been good to them.

Until we are free to disagree on the most sensitive of subjects without maligning each other’s integrity, we will not be able to solve the biggest problems we face as a people and an industry.

I’m Jeffrey Zeldman. Thanks for listening.


I encourage you to listen to Episode ? 185 of The ShopTalk Show (“This Idea Must Die”).

Categories
Accessibility animation Best practices Big Web Show Design The Big Web Show

Web Animation with Val Head

The Big Web ShowVAL HEAD and I discuss how to create an animation style guide, the genius of user queries, the web animation API, frame by frame animation, animating with math in Flash, Disney animation and the illusion of life, animating for meaning, how to animate without triggering vestibular disorders, resources for accessible animations, and what to eat in Lawrenceville, PA.

BIG WEB SHOW ? 135: How Does Your Brand Live in Motion? Web Animation with Val Head

Categories
Advertising Amazon Apple Best practices Content-First Standards State of the Web

Ad Blocking and the Future of the Web

YOUR site may soon be collateral damage in a war between Silicon Valley superpowers. By including ad blocking in iOS9, Apple isn’t trying to take down your site or mine—just like the drone program doesn’t deliberately target civilians and children. Apple is trying to hurt arch-rival Google while providing a more elegant (i.e. more Apple-like) web experience than user-hostile ad networks have previously allowed. This is a great example of acting in your own self-interest, yet smelling like a rose. Will independent sites that depend on advertising be hurt along with Google?

We have always been at war with Eastasia

We should be used to this war between digital super companies by now. iPhone and iPad users, consider your Amazon experience on the platform. Notice how you can’t buy books in your Kindle app in iOS? Apple supports Amazon to the extent of letting Amazon distribute Kindle software on the iOS platform. But if you want to buy a Kindle book for your phone, you have to go to a desktop browser (or open Safari on your phone and navigate to Amazon.com). Kind of encourages you to get your digital books in iBooks instead.

Same with Amazon’s video app on iOS. You can stream all the movies you want on your phone or iPad, but you can’t buy them in the Amazon Video app. You must use a desktop browser or navigate to amazon.com in the version of Safari that comes with iOS. Kind of encourages you to buy videos from iTunes instead.

You also can’t buy Kindle books or streaming Amazon videos in the Amazon shopping app for iOS, although you can use that app to shop for anything else.

See, Amazon doesn’t want to give Apple a cut of its media sales, so Apple won’t let Amazon sell products in its apps. In Apple’s reasoning, all other vendors pay Apple a cut; Amazon shouldn’t get a pass. And Amazon is serious about not sharing revenue, because Amazon is a ruthless competitor that has taken over nearly all online retail sales in the U.S. by innovating service and delivery, and giving consumers the lowest possible price—a price that leaves them no margin to share with Apple. It’s also a price that strangles the companies that provide the goods Amazon sells. Oh, well.

Because Amazon is serious about not sharing sales revenue with Apple, and Apple is serious about blocking sales by any vendor that refuses to share revenue, Apple denies Amazon the right to sell products via its iOS apps. Who suffers? You, the consumer, as you put down your phone and toddle over to a desktop—or just shrug and do without. (Not that it’s the worst suffering in this world. But it is anti-consumer, and makes both Amazon and Apple look bad.)

And, of course, you can’t stream Amazon video on your Apple TV, and likewise can’t watch video content you’ve purchased through Apple iTunes on Amazon Fire TV without jumping through (possibly illegal) hoops. Not since Microsoft dominated the desktop software world in the 1990s have tech and media companies viewed success as a last-man-standing affair, with the consumer as collateral damage.

Still, we’re used to all this and don’t think about it.

Ad blocking is a different beast.

Certainly, at first, ad blocking seems like a different beast. After all, consumers may want to buy books in their Kindle app, but no consumer is clamoring for more ads. And media and advertising have only themselves to blame for the horrendous experience online advertising has become. We hate advertising so much, we’ve trained ourselves not to look at the top or right sidebar on most sites. In fact, it’s become a designer’s trick that if the client forces you to put the CEO’s pet link on the home page, you hide it in plain sight at the top of the sidebar, where no one but the CEO will see it. Popups and screen takeovers and every other kind of anti-user nightmare have made advertising a hated and largely ignored thing on the web.

There are tasteful ad networks, to be sure. The Deck, which Jim Coudal created with Jason Fried and me, serves one single, small, tasteful, well targeted ad per page. When we launched The Deck, I hoped other networks would take inspiration from it, and figure out how to increase engagement while minimizing clutter. I even tried to sell my studio’s media clients on the notion of fewer, better priced, better targeted ads. But of course the ad networks have done the opposite—constantly interrupting content to force misleading, low-interest ads on you.

Hip web consumers have long used third-party ad blockers to unfug the web experience, and great applications like Readability explored alternate content revenue models while boosting type size and removing ad clutter from web content. I served on the Readability advisory board. And I used to go around the world warning designers that if we didn’t figure out a way to create readable, clutter-free layouts for our clients’ sites, apps like Readability would do it for us—putting us out of work, and removing advertising as a revenue stream for media companies. As it happens, in the intervening years, many smart sites have found a way to put content first and emphasize not just legibility but readability in their layouts. The best of those sites—I’m thinking of The New York Times here—have found a way to integrate advertising tastefully in those large-type, content-focused, readability-oriented modern layouts. (Medium.com, of course, does an amazing job with big type and readability, but it doesn’t need to integrate advertising—at least not yet—as it floats on a sea of VC bucks.)

But advertisers don’t want to be ignored, and they are drunk on our data, which is what Google and other large networks are really selling. The ads are almost a by-product; what companies really want to know is what antiperspirant a woman of 25-34 is most likely to purchase after watching House of Cards. Which gets us into issues of privacy and spying and government intrusion and don’t ask.

And in this environment of sites so cluttered with misleading ads they are almost unnavigable, Apple looks heroic, riding to the consumer’s rescue by providing all the content from newspapers without the ads, and by blocking ugly advertising on websites. But if they succeed, will media companies and independent sites survive?

Consumer good vs. consumer good

What Apple’s doing wouldn’t matter as much if consumers were still sitting down at a desktop to get their news and cat gifs. But they’re not. Everyone does everything on mobile. Including browse the web.

Thus in The Verge today, Nilay Patel argues there’s a real risk that, in attacking Google’s revenue stream, Apple may hurt the web itself:

The collateral damage of that war — of Apple going after Google’s revenue platform — is going to include the web, and in particular any small publisher on the web that can’t invest in proprietary platform distribution, native advertising, and the type of media wining-and-dining it takes to secure favorable distribution deals on proprietary platforms. It is going to be a bloodbath of independent media. … Taking money and attention away from the web means that the pace of web innovation will slow to a crawl. —Welcome to hell: Apple vs. Google vs. Facebook and the slow death of the web

John Gruber thinks otherwise, at least for small indie sites like his:

Perhaps I am being smug. But I see the fact that Daring Fireball’s revenue streams should remain unaffected by Safari content-blocking as affirmation that my choices over the last decade have been correct: that I should put my readers’ interests first, and only publish the sort of ads and sponsorships that I myself would want to be served, even if that means leaving (significant) amounts of money on the table along the way. But I take no joy in the fact that a terrific publication like The Awl might be facing hard times. They’re smart; they will adapt.—Because of Apple

In Publishing Versus Performance, I looked at the conflict between advertising and content through the filter of performance. For those who didn’t read it (or don’t remember), I pointed out that most consumer interaction with the web happens on mobile, which means it happens on mobile networks, which, at times at least, may be severely bandwidth-constrained; so performance counts as it hasn’t in years. And while good designers and developers are working like never before to create performant websites, the junk ad networks spew interferes with their good work and slows websites to a crawl. This threatens the future of the web, as consumers will blame the web for poor performance, and stick to apps. But removing those ad networks isn’t an option, I pointed out, since, abhorrent or not, advertising dollars are the engine that drives digital media: no bucks, no content.

Well, now, Apple has decided for us. Removing those ad networks may not be an option, but it’s happening anyway. How will it affect your site?


Also published in Medium.com.

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
Bandwidth Best practices Design Designers development DOM Ethan Marcotte HTML industry Markup Medium Off My Lawn! people Performance Responsive Web Design Standards State of the Web Tech The Essentials The Profession Usability UX Web Design Web Design History Web Standards XHTML

You’re welcome: cutting the mustard then and now.

EVERY TIME I hear a young web developer cite the BBC’s forward-thinking practice of “cutting the mustard,” by which they mean testing a receiving web device for certain capabilities before serving content, I remember when my team and I at The Web Standards Project invented that very idea. It’s a million web years ago, by which I mean fourteenish human years ago, so nobody remembers but me and some other long toothed grayhairs, plus a few readers of the first edition of Designing With Web Standards. But I like you, so I will tell you the story.

Back then in those dark times, it was common practice for web developers to create four or more versions of the same website—one for each browser then in wide use. It was also a typical (and complementary) practice to send server-side queries to figure out which browser was about to access a site’s content, and then send the person using that browser to the site version that was configured for her browser’s particular quirks, proprietary tags, and standards compliance failings.

The practice was called “browser detection.” Nobody but some accessibility advocates had ever questioned it—and the go-go dot-com era had no time or care for those folks.

But we at The Web Standards Project turned everything on its head. We said browsers should support the same standards instead of competing to invent new tags and scripting languages. We said designers, developers, and content folks should create one site that was accessible to everyone. In a world like that, you wouldn’t need browser detection, because every browser and device that could read HTML would be able to feast on the meat of your site. (And you’d have more meat to share, because you’d spend your time creating content instead of crafting multiple versions of the same site.)

To hasten that world’s arrival, in 2001 we launched a browser upgrade campaign. Those who participated (example participant here) employed our code and content to send their users the message that relatively standards-compliant browsers were available for every platform, and inviting them to try one. Because if more people used relatively standards-compliant browsers, then we could urge more designers and developers to create their sites with standards (instead of quirks). And as more designers and developers did that, they’d bump against still-unsolved standards compliance conundrums, enabling us to persuade browser makers to improve their standards compliance in those specific areas. Bit by bit, stone by stone, this edifice we could, and would, erect.

The code core of the 2001 browser upgrade campaign was the first instance of capability detection in place of browser detection. Here’s how it worked. After creating a valid web page, you’d insert this script in the head of your document or somewhere in your global JavaScript file:

if (!document.getElementById) {
window.location =
"http://www.webstandards.org/upgrade/"
}

We even provided details for various flavors of markup. In HTML 4 or XHTML 1 Transitional documents, it looked like this:

<script type="text/javascript" language="javascript">
<!-- //
if (!document.getElementById) {
window.location =
"http://www.webstandards.org/upgrade/"
}
// -->
</script>

In STRICT documents, you’d either use a global .js file, or insert this:

<script type="text/javascript">
<!-- //
if (!document.getElementById) {
window.location =
"http://www.webstandards.org/upgrade/"
}
// -->

You could also just as easily send visitors to an upgrade page on your own site:

if (!document.getElementById) {
window.location =
"http://www.yourdomain.com/yourpage.html"
}

Non-WaSP members (at the time) J. David Eisenberg, Tantek Çelik, and Jim Heid contributed technical advice and moral support to the effort. WaSP sysadmin Steven Champeon, the inventor of progressive enhancement, made it all work—under protest, bless him. (Steve correctly believed that all web content should always be available to all people and devices; therefore, in principle, he disliked the upgrade campaign, even though its double purpose was to hasten the arrival of truly standards-compliant browsers and to change front-end design and development from a disrespected world of hacks to a sustainable and professional craft. ((See what I did there? I’m still respectfully arguing with Steve in my head.)))

Discovering rudimentary DOM awareness or its absence in this fashion was the first time web developers had tested for capabilities instead of chasing the dragon in a perpetual and futile attempt to test for every possible browser flavor and version number. It was the grandparent, if you will, of today’s “cutting the mustard.” And it is analogous as well to the sensible responsive design practice of setting breakpoints for the content, instead of trying to set appropriate breakpoints for every possible device out there (including all the ones that haven’t been invented yet).

Which reminds us that the whole point of web standards was and is forward compatibility—to create content that will work not only in yesterday’s and today’s browsers and devices, but in all the wonderful devices that have yet to be invented, and for all the people of the world. You’re welcome.

—CHICAGO, Westin Chicago River Hotel, 1 September 2015


Hat tip: John Morrison

%d bloggers like this: