Journal tags: dma

It’s been dispiriting but unsurprising to see American commentators weigh in on the EU’s Digital Markets Act. I really wish they’d read Baldur’s excellent explainer first.

John has been doing his predictable “leave Britney alone!” schtick with regards to Apple (and in this case, Google and Facebook too). Ian Betteridge does an excellent job of setting him straight:

A lot of commentators seem to have the same issue as John: that it’s weird that a governmental body can or should define how products should be designed.

But governments mandate how products are designed all the time, and not just in the EU. Take another market which is pretty big: cars. All cars have to feature safety equipment, which varies from region to region but will broadly include everything from seatbelts to crumple zones. Cars have rules for emissions, for fuel efficiency, all of which are designing how a car should work.

But there’s one assumption in John’s post that Ian didn’t push back on. John said:

It’s certainly possible that Meta can devise ways to serve non-personalized contextual ads that generate sufficient revenue per user.

That comes with a footnote:

One obvious solution would be to show more ads — a lot more ads — to make up for the difference in revenue. So if contextual ads generate, say, one-tenth the revenue of targeted ads, Meta could show 10 times as many ads to users who opt out of targeting. I don’t think 10× is an outlandish multiplier there — given how remarkably profitable Meta’s advertising business is, it might even need to be higher than that.

It’s almost like an article of faith that behavioural advertising is more effective than contextual advertising. But there’s no data to support this. Quite the opposite. I wrote about this four years ago.

Once again, I urge you to read the excellent analysis by Jesse Frederik and Maurits Martijn.

There’s also Tim Hwang’s book, Subprime Attention Crisis:

From the unreliability of advertising numbers and the unregulated automation of advertising bidding wars, to the simple fact that online ads mostly fail to work, Hwang demonstrates that while consumers’ attention has never been more prized, the true value of that attention itself—much like subprime mortgages—is wildly misrepresented.

More recently Dave Karpf said what we’re all thinking:

The thing I want to stress about microtargeted ads is that the current version is perpetually trash, and we’re always just a few years away from the bugs getting worked out.

The EFF are calling for a ban. Should that happen, the sky would not fall. Contrary to what John thinks, revenue would not plummet. Contextual advertising works just fine …without the need for invasive surveillance and tracking.

Like I said:

Tracker-driven behavioural advertising is bad for users. The advertisements are irrelevant most of the time, and on the few occasions where the advertising hits the mark, it just feels creepy.

Tracker-driven behavioural advertising is bad for advertisers. They spend their hard-earned money on invasive ad tech that results in no more sales or brand recognition than if they had relied on good ol’ contextual advertising.

Tracker-driven behavioural advertising is very bad for the web. Megabytes of third-party JavaScript are injected at exactly the wrong moment to make for the worst possible performance. And if that doesn’t ruin the user experience enough, there are still invasive overlays and consent forms to click through (which, ironically, gets people mad at the legislation—like GDPR—instead of the underlying reason for these annoying overlays: unnecessary surveillance and tracking by the site you’re visiting).

The European Union’s Digital Markets Act is being enforced and Apple aren’t happy about it.

Most of the discussion around this topic has centred on the requirement for Apple to provision alternative app stores. I don’t really care about that because I don’t really care about native apps. With one exception: I care about web browsers.

That’s the other part of the DMA that’s being enforced: Apple finally have to allow alternative browsing engines. Hallelujah!

Instead of graciously acknowledging that this is what’s best for users, Apple are throwing a tantrum.

First of all, they’re going to ringfence any compliance to users in the European Union. Expect some very interesting edge cases to emerge in a world where people don’t spent their entire lives in one country.

Secondly, Apple keep insisting that this will be very, very bad for security. You can read Apple’s announcement on being forced to comply but as you do you so, I’d like you to remember one thing: every nightmare scenario they describe for the security of users in the EU is exactly what currently happens on Macs everywhere in the world.

This includes risks from installing software from unknown developers that are not subject to the Apple Developer Program requirements, installing software that compromises system integrity with malware or other malicious code, the distribution of pirated software, exposure to illicit, objectionable, and harmful content due to lower content and moderation standards, and increased risks of scams, fraud, and abuse.

Users of macOS everywhere are currently exposed to all the risks that will supposedly overwhelm iOS users in the European Union. Weirdly, the sky hasn’t fallen.

It’s the same with web browsers. I just got a new Mac. It came with one browser pre-installed: Safari. It’s a good browser. But I also have the option of installing another browser, like Firefox (which I’ve done). A lot of people just use Safari. That’s good. That’s choice. Everyone wins.

Now Apple need to provide parity on iOS, at least for users in the EU. Again, Apple are decribing this coming scenario as an absolute security nightmare. But again, the conditions they’re describing are what already exist on macOS.

All Apple is being asked to do is offer than the same level of choice on mobile that everyone already enjoys on their computers. Rather than comply reasonably, Apple have found a way to throw their toys out of the pram.

As of the next update to iOS, users in the EU will no longer have homescreen apps. Those web apps will now launch in a browser window. Presumably they’ll also lose the ability to send push notifications: being a homescreen app was a prerequisite for that functionality.

This is a huge regression that only serves to harm and confuse users.

I have a website about traditional Irish music. Guess where a significant amount of the audience is based? That’s right: Ireland. In the European Union.

There is no native app for The Session, but you can install it on your phone nonetheless. Lots of people have done that. After a while they forget that they didn’t install it from an app store: it behaves just like any other app on their homescreen.

That’s all about to change. I’m going to get a lot of emails from confused users wondering why their app is broken, now opening in a regular browser window. And I won’t be able to do anything about it, other than to tell them to take it up with Apple.

Presumably Apple is hoping that users will direct their anger at the EU commission instead. They’re doing their best to claim that they’re being forced to make this change. That’s completely untrue. A lie:

This is emphatically not required by the EU’s Digital Markets Act (DMA). It’s a circumvention of both the spirit and the letter of the Act, and if the EU allows it, then the DMA will have failed in its aim to allow fair and effective browser and web app competition.

Throughout all their communications on this topic, Apple are sticking to their abuser logic:

Look what you made me do!

This is going to hurt me more than it hurts you.

Apple’s petulant policy of malicious compliance is extremely maddening. What they’re about to do to users in the EU is just nasty.

This is a very dark time for the web.

I feel bad for the Safari team. They’ve been working really hard recently to make Safari a very competitive browser with great standards support with a quicker release cycle than we’ve seen before. Then it all gets completely torpedoed at the level of the operating system.

I really hope that Apple won’t get away with their plan to burn down web apps on iOS in the EU. But hope isn’t enough. We need to tell the EU commission how much damage this will do.

If you’ve ever built a web app, then your users will suffer. Remember, it’s a world wide web, including the European Union.

Create a PDF with the following information:

• Your company’s name.
• Your name.
• That your company operates or services the EU.
• How many users your service has in the EU (approximately).
• The level of impact this will have on your business.
• The problems this will cause your business.
• Whether or not the submission is confidential.

The submission can be as short or long as you want. Send it to [email protected], ideally before Monday, February 19th.

I know that’s a lot to ask of you on your weekend, but this really matters for the future of the web.

At the very least, I encourage to get involved with the great work being done by the Open Web Advocacy group. They’re also on Discord.

Please don’t let Apple bully an entire continent of users.

I’ve mentioned before that I don’t enable notifications on my phone. Text messages are the only exception. I don’t want to get notified if a new email arrives (I avoid email on my phone completely) and I certainly don’t want some social media app telling me somebody liked or faved something.

But the number one feature I’d like to see in Safari on iOS is web notifications.

It’s not for me personally, see. It’s because it’s the number one reason why people are choosing not to go all in progressive web apps.

Safari on iOS is the last holdout. But that equates to enough marketshare that many companies feel they can’t treat notifications as a progressive enhancement. While I may not agree with that decision myself, I get it.

When I’m evangelising the benefits of building on the open web instead of making separate iOS and Android apps, I inevitably get asked about notifications. As long as mobile Safari doesn’t support them—even though desktop Safari does—I’m somewhat stumped. There’s no polyfill for this feature other than building an entire native app, which is a bit extreme as polyfills go.

And of course, unlike on your Mac, you don’t have the option of using a different browser on your iPhone. As long as mobile Safari doesn’t support web notifications, nothing on iOS can support web notifications.

I’ve got progressive web apps on the home screen of my phone that match their native equivalents feature-for-feature. Twitter. Instagram. They’re really good. In some ways they’re superior to the native apps; the Twitter website is much calmer, and the Instagram website has no advertising. But if I wanted to get notifications from any of those sites, I’d have to keep the native apps installed just for that one feature.

So in the spirit of complaining about web browsers in a productive way, I just want to throw this plea out there: Apple, please support web notifications in mobile Safari!

The good news is that web notifications on iOS might be on their way. Huzzah!

Alas, we’re reliant on Maximiliano’s detective work to even get a glimpse of a future feature like this. Apple has no public roadmap for Safari. There’s this status page on the Webkit blog but it’s incomplete—web notifications don’t appear at all. In any case, WebKit and Safari aren’t the same thing. The only way of knowing if a feature might be implemented in Safari is if it shows up in Safari Technology Preview, at which point it’s already pretty far along.

So while my number one feature request for mobile Safari is web notifications, a close second would be a public roadmap.

It only seems fair. If Apple devrels are asking us developers what features we’d like to see implemented—as they should!—then shouldn’t those same developers also be treated with enough respect to share a roadmap with them? There’s not much point in us asking for features if, unbeknownst to us, that feature is already being worked on.

But, like I said, my number one request remains: web notifications on iOS …please!

Cennydd asked for recommendations on Twitter a little while back:

Can anyone recommend an outlining app for macOS? I’m falling out with OmniOutliner. Not Notion, please.

This was my response:

The only outlining tool that makes sense for my brain is https://kinopio.club/

It’s more like a virtual crazy wall than a virtual Dewey decimal system.

I’ve written before about how I prepare a conference talk. The first step involves a sheet of A3 paper:

I used to do this mind-mapping step by opening a text file and dumping my thoughts into it. I told myself that they were in no particular order, but because a text file reads left to right and top to bottom, they are in an order, whether I intended it or not. By using a big sheet of paper, I can genuinely get things down in a disconnected way (and later, I can literally start drawing connections).

Kinopio is like a digital version of that A3 sheet of paper. It doesn’t force any kind of hierarchy on your raw ingredients. You can clump things together, join them up, break them apart, or just dump everything down in one go. That very much suits my approach to preparing something like a talk (or a book). The act of organising all the parts into a single narrative timeline is an important challenge, but it’s one that I like to defer to later. The first task is braindumping.

When I was preparing my talk for An Event Apart Online, I used Kinopio.club to get stuff out of my head. Here’s the initial brain dump. Here are the final slides. You can kind of see the general gist of the slidedeck in the initial brain dump, but I really like that I didn’t have to put anything into a sequential outline.

In some ways, Kinopio is like an anti-outlining tool. It’s scrappy and messy—which is exactly why it works so well for the early part of the process. If I use a tool that feels too high-fidelity too early on, I get a kind of impedence mismatch between the state of the project and the polish of the artifact.

I like that Kinopio feels quite personal. Unlike Google Docs or other more polished tools, the documents you make with this aren’t really for sharing. Still, I thought I’d share my scribblings anyway.

I’m at An Event Apart in Seattle, ready for three days of excellence. Setting the scene with the first talk of the event is the one and only Jeffrey Zeldman. His talk is called Slow Design for an Anxious World:

Most web pages are too fast or too slow. Last year, Zeldman showed us how to create design that works faster for customers in a hurry to get things done. This year he’ll show how to create designs that deliberately slow your visitors down, helping them understand more and make better decisions.

Learn to make layouts that coax the visitor to sit back, relax, and actually absorb the content your team works so hard to create. Improve UX significantly without spending a lot or chasing the tail lights of the latest whiz-bang tech. Whether you build interactive experiences or craft editorial pages, you’ll learn how to ease your customers into the experience and build the kind of engagement you thought the web had lost forever.

I’m going to attempt to jot down the gist of it as it happens…

Jeffrey begins by saying that he’s going to slooooowly ease us into the day. Slow isn’t something that our industry prizes. Things change fast on the internet. “You’re using last year’s framework!?” Ours is a newly-emerging set of practices.

Slow is negative in our culture too. We don’t like slow movies, or slow books. But somethings are better slow. Wine that takes time to make is better than wine that you produce in a prison toilet in five days. Slow-brewed coffee is well-brewed coffee. Slow dancing is nice. A slow courtship is nice. And reading slowly is something enjoyable. Sometimes you need to scan information quickly, but when we really immerse ourselves in a favourite book, we really comprehend better. Hold that thought. We’re going to come to books.

Fast is generally what we’re designing for. It’s the best kind of design for customer service designs—for people who want to accomplish something and then get on with their lives. Fast is good for customer service designs. Last year Jeffrey gave a talk last year called Beyond Engagement where he said that service-oriented content must be designed for speed of relevancy. Speed of loading is important, and so is speed of relevancy—how quickly can you give people the right content.

But slow is best for comprehension. Like Mr. Rogers. When things are a little bit slower, it’s kind of easier to understand. When you’re designing for readers, s l o w i t d o w n.

How do we slow down readers? That’s what this talk is about (he told us it would be slow—he only just got to what the point of this talk is).

Let’s start with a form factor. The book. A book is a hack where the author’s brain is transmitting a signal to the reader’s brain, and the designer of the book is making that possible. Readability is more than legibility. Readability transcends legibility, enticing people to slow down and read.

This is about absorption, not conversion. We have the luxury of doing something different here. It’s a challenge.

Remember Readability? It was designed by Arc90. They mostly made software applications for arcane enterprise systems, and that stuff tends not to be public. It’s hard for an agency to get new clients when it can’t show what it does. So they decided to make some stuff that’s just for the public. Arc90 Labs was spun up to make free software for everyone.

Readability was like Instapaper. Instapaper was made by Marco Arment so that he could articles when he was commuting on the subway. Readability aimed to do that, but to also make the content like beautiful. It’s kind of like how reader mode in Safari strips away superfluous content and formats what’s left into something more readable. Safari’s reader mode was not invented by Apple. It was based on the code from Readability. The mercury reader plug-in for Chrome also uses Readability’s code. Jeffrey went around pointing out to companies that the very existence of things like Readability was a warning—we’re making experiences so bad that people are using software to work around them. What we can do so that people don’t have to use these tools?

Craig Mod wrote an article for A List Apart called A Simpler Page back in 2011. With tablets and phones, there isn’t one canonical presentation of content online any more. Our content is sort of amorphous. Craig talked about books and newspapers on tablets. He talked about bed, knee, and breakfast distances from the body to the content.

1. Bed (close to face): reading a novel on your stomach, lying in bed with the iPad propped up on a pillow.
2. Knee (medium distance from face): sitting on the couch, iPad on your knee, catching up on Instapaper.
3. Breakfast (far from face): propped up at a comfortable angle, behind your breakfast coffee and bagel, allowing hands-free news reading.

There’s some correlation between distance and relaxation. That knee position is crucial. That’s when the reader contemplates with pleasure and concentration. They’re giving themselves the luxury of contemplation. It’s a very different feeling to getting up and going over to a computer.

So Jeffrey redesigned his own site with big, big type, and just one central column of text. He stripped away the kind of stuff that Readability and Instapaper would strip away. He gave people a reader layout. You would have to sit back to read the content. He knew he succeeded because people started complaining: “Your type is huge!” “I have to lean back just to read it!” Then he redesigned A List Apart with Mike Pick. This was subtler.

Medium came along with the same focus: big type in a single column. Then the New York Times did it, when they changed their business model to a subscription paywall. They could remove quite a bit of the superfluous content. Then the Washington Post did it, more on their tablet design than their website. The New Yorker—a very old-school magazine—also went down this route, and they’re slow to change. Big type. White space. Bold art direction. Pro Publica is a wonderful non-profit newspaper that also went this route. They stepped it up by adding one more element: art direction on big pieces.

How do these sites achieve their effect of slowing you down and calming you?

Big type. We spend a lot of our time hunched forward. Big type forces you to sit back. It’s like that first moment in a yoga workshop where you’ve got to just relax before doing anything. With big type, you can sit back, take a breathe, and relax.

Hierarchy. This is classic graphic design. Clear relationships.

Minimalism. Not like Talking Heads minimalism, but the kind of minimalism where you remove every extraneous detail. Like what Mies van der Rohe did for architecture, where just the proportions—the minimalism—is the beauty. Or like what Hemingway did with writing—scratch out everything but the nouns and verbs. Kill your darlings.

Art direction. When you have a fancy story, give it some fancy art direction. Pro Publica understand that people won’t get confused about what site they’re on—they’ll understand that this particular story is special.

Whitespace. Mark Boulton wrote an article about whitespace in A List Apart. He talked about two kinds of whitespace: macro and micro. Macro is what we usually think about when we talk about whitespace. Whitespace conveys feelings of extreme luxury, and luxury brands know this. Whitespace makes us feels special. Macro whitespace can be snotty. But there’s also micro whitespace. That’s the space between lines of type, and the space inside letterforms. There’s more openness and air, even if the macro whitespace hasn’t changed.

Jeffrey has put a bunch of these things together into an example.

To recap, there are five points:

1. Big type
2. Hierarchy
3. Minimalism
4. Art direction
5. Whitespace

There are two more things that Jeffrey wants to mention before his done. If you want people to pay attention to your design, it must be branded and it must be authoritative.

Branded. When all sites look the same, all content appears equal. Jeffrey calls this the Facebook effect. Whether it’s a noble-prize-winning author, or your uncle ranting, everthing gets the same treatment on Facebook. If you’re taking the time to post content to the web, take the time to let people know who’s talking.

Authoritative. When something looks authoritative, it cues the reader to your authenticity and integrity. Notice how every Oscar-worthy movie uses Trajan on its poster. That’s a typeface based on a Roman column. Strong, indelible letter forms carved in stone. We have absorbed those letterforms into our collective unconcious. Hollywood tap into this by using Trajan for movie titles.

Jeffrey wrote an article called To Save Real News about some of these ideas.

And with that, Jeffrey thanks us and finishes up.

I’m at An Event Apart Seattle (Special Edition). Jeffrey is kicking off the show with a presentation called Beyond Engagement: the Content Performance Quotient. I’m going to jot down some notes during this talk…

First, a story. Jeffrey went to college in Bloomington, Indiana. David Frost—the British journalist—came to talk to them. Frost had a busy schedule, and when he showed up, he seemed a little tipsy. He came up to the podium and said, “Good evening, Wilmington.”

Jeffrey remembers this and knows that Seattle and Portland have a bit of a rivalry, and so Jeffrey thought, the first time he spoke in Portland, it would be funny to say “Good morning, Seattle!” …and that was the last time he spoke in Portland.

Anyway …”Good morning, Portland!”

Jeffrey wants to talk about content. He spends a lot of time in meetings with stakeholders. Those stakeholders always want things to be better, and they always talk about “engagement.” It’s the number one stakeholder request. It’s a metric that makes stakeholders feel comfortable. It’s measurable—the more seconds people give us, the better.

But is that really the right metric?

There are some kinds of sites where engagement is definitely the right metric. Instagram, for example. That’s how they make money. You want to distract yourself. Also, if you have a big content site—beautifully art-directed and photographed—then engagement is what you want. You want people to spend a lot of time there. Or if you have a kids site, or a games site, or a reading site for kids, you want them to be engaged and spend time. A List Apart, too. It’s like the opposite of Stack Overflow, where you Google something and grab the piece of code you need and then get out. But for A List Apart or Smashing Magazine, you want people to read and think and spend their time. Engagement is what you want.

But for most sites—insurance, universities—engagement is not what you want. These sites are more like a customer service desk. You want to help the customer as quickly as possible. If a customer spends 30 minutes on our site, was she engaged …or frustrated? Was it the beautiful typography and copy …or because she couldn’t find what they wanted? If someone spends a long time on an ecommerce site, is it because the products are so good …or because search isn’t working well?

What we need is a metric called speed of usefulness. Jeffrey calls this Content Performance Quotient (CPQ) …because business people love three-letter initialisms. It’s a loose measurement: How quickly can you solve the customer’s problem? It’s the shortest distance between the problem and the solution. Put another way, it’s a measurement of your value to the customer. It’s a new way to evaluate success.

From the customer’s point of view, CPQ is the time it takes the customer to get the information she came for. From the organisation’s point of view, it’s the time it takes for a specific customer to find, receive, and absorb your most important content.

We’re all guilty of neglecting the basics on our sites—just what it is it that we do? We need to remember that we’re all making stuff to make people’s live’s easier. Otherwise we end up with what Jeffrey calls “pretty garbage.” It’s aesthetically coherent and visually well-designed …but if the content is wrong and doesn’t help anyone, it’s garbage. Garbage in a delightfully responsive grid is still garbage.

Let’s think of an example of where people really learned to cut back and really pare down their message. Advertising. In the 1950s, when the Leo Burnett agency started the Marlboro campaign, TV spots were 60 seconds long. An off-camera white man in a suit with a soothing voice would tell you all about the product while the visuals showed you what he was talking about. No irony. Marlboro did a commercial where there was no copy at all until the very end. For 60 seconds they showed you cowboys doing their rugged cowboy things. Men in the 1950s wanted to feel rugged, you see. Leo Burnett aimed the Marlboro cigarettes at those men. And at the end of the 60 second montage of rugged cowboys herding steers, they said “Come to where the flavour is. Come to Marlboro Country.” For the billboard, they cut it back even more. Just “Come to Marlboro Country.” In fact, they eventually went to just “Marlboro.” Jeffrey knows that this campaign worked well, because he started smoking Marlboros as a kid.

Leaving aside the ethical implications of selling cigarettes to eight-graders, let’s think about the genius of those advertisers. Slash your architecture and shrink your content. Constantly ask yourself, “Why do we need this?”

As Jared Spool says, design is the rendering of intent. Every design is intentional. There is some intent—like engagement—driving our design. If there’s no intent behind the design, it will fail, even if what you’re doing is very good. If your design isn’t going somewhere, it’s going nowhere. You’ve got to stay ruthlessly focused on what the customer needs and “kill your darlings” as Hemingway said. Luke Wroblewski really brought this to light when he talked about Mobile First.

To paraphrase David Byrne, how did we get here?

Well, we prioritised meetings over meaning. Those meetings can be full of tension; different stakeholders arguing over what should be on the homepage. And we tried to solve this by giving everyone what they want. Having a good meeting doesn’t necessarily mean having a good meeting. We think of good meetings as conflict-free where everyone emerges happy. But maybe there should be a conflict that gets resolved. Maybe there should be winners and losers.

Behold our mighty CMS! Anyone can add content to the website. Anyone can create the information architecture …because we want to make people happy in meetings. It’s easy to give everyone what they want. It’s harder to do the right thing. Harder for us, but better for the customer and the bottom line.

As Gerry McGovern says:

Great UX professionals are like whistleblowers. They are the voice of the user.

We need to stop designing 2001 sites for a 2018 web.

One example of cutting down content was highlighted in A List Apart where web design was compared to chess: The King vs. Pawn Game of UI Design. Don’t start by going through all the rules. Teach them in context. Teach chess by starting with a checkmate move, reduced down to just three pieces on the board. From there, begin building out. Start with the most important information, and build out from there.

When you strip down the game to its core, everything you learn is a universal principle.

Another example is atomic design: focus relentlessly on the individual interaction. We do it for shopping carts. We can do it for content.

Another example on A List Apart is No More FAQs: Create Purposeful Information for a More Effective User Experience. FAQ problems include:

• duplicate and contradictory information,
• lack of discernible content order,
• repetitive grammatical structure,
• increased cognitive load, and
• more content than they need.

Users come to any type of content with a particular purpose in mind, ranging from highly specific (task completion) to general learning (increased knowledge).

The important word there is purpose. We need to eliminate distraction. How do we do that?

One way is the waterfall method. Do a massive content inventory. It’s not recommended (unless maybe you’re doing a massive redesign).

Agile and scrum is another way. Constantly iterate on content. Little by little over time, we make the product better. It’s the best bet if you work in-house.

If you work in an agency, a redesign is an opportunity to start fresh. Take everything off the table and start from scratch. Jeffrey’s friend Fred Gates got an assignment to redesign an online gaming platform for kids to teach them reading and management skills. The organisation didn’t have much money so they said, let’s just do the homepage. Fred challenged himself to put the whole thing on the homepage. The homepage tells the whole story. Jeffrey is using this same method on a site for an insurance company, even though the client has a bigger budget and can afford more than just the homepage. The point is, what Fred did was effective.

So this is what Jeffrey is going to be testing and working on: speed of usefulness.

And for those of you who do need to use engagement as the right metric, Jeffrey covered the two kinds of metrics in an article called We need design that is faster and design that is slower.

For example, “scannability” is good for transactions (CPQ), but bad for thoughtful content (engagement). Our news designs need to slow down the user. Bigger type, typographic hierarchy, and more whitespace. Art direction. Shout out to Derek Powazek who designed Fray.com—each piece was designed based on the content. These days, look at what David Sleight and his crew are doing over at Pro Publica.

Who’s doing it right?

The Washington Post, The New York Times, Pro Publica, Slate, Smashing Magazine, and Vox are all doing this well in different ways. They’re bringing content to the fore.

Readability, Medium, and A List Apart are all using big type to encourage thoughtful reading and engagement.

But for other sites …apply the Content Performance Quotient.

See also:

• Luke's notes from this talk
• Torre's notes from this talk

It had been a while since we had a movie night at Clearleft so I organised one for last night. We usually manage to get through two movies, and there’s always a unifying theme decided ahead of time.

For last night, I decided that the broad theme would be …transport. But then, through voting on Slack, people could decide what the specific mode of transport would be. The choices were:

• taxi,
• getaway car,
• truck, or
• submarine.

Nobody voted for submarines. That’s a shame, but in retrospect it’s easy to understand—submarine films aren’t about transport at all. Quite the opposite. Submarine films are about being trapped in a metal womb/tomb (and many’s the spaceship film that qualifies as a submarine movie).

There were some votes for taxis and trucks, but the getaway car was the winner. I then revealed which films had been pre-selected for each mode of transport.

Taxi

• Collateral, Michael Mann, 2004 (86% 🍅)
• Night On Earth, Jim Jarmusch, 1991 (73% 🍅)
• Taxi Driver, Martin Scorsese, 1976 (99% 🍅)

Getaway car

Shorts: Getaway Driver, The Getaway

• Baby Driver, Edgar Wright, 2017 (93% 🍅)
• Wheelman, Jeremy Rush, 2017 (88% 🍅)
• Drive, Nicolas Winding Refn, 2011 (93% 🍅)
• The Driver, Walter Hill, 1978 (80% 🍅)

Truck

• Fury Road, George Miller, 2015 (97% 🍅)
• Duel, Steven Spielberg, 1971 (88% 🍅)

Submarine

• Below, David Twohy, 2002 (64% 🍅)
• Crimson Tide, Tony Scott, 1995 (87% 🍅)
• The Hunt For Red October, John McTiernan, 1990 (86% 🍅)

I thought Baby Driver would be a shoe-in for the first film, but enough people had already seen it quite recently to put it out of the running. We watched Wheelman instead, which was like Locke meets Drive.

So what would the second film be?

Well, some of those films in the full list could potentially fall into more than one category. The taxi in Collateral is (kinda) being used as a getaway car. And if you expand the criterion to getaway vehicle, then Furiosa’s war rig surely counts, right?

Okay, we were just looking for an excuse to watch Fury Road again. I mean, c’mon, it was the black and chrome edition! I had the great fortune of seeing that on the big screen a while back and I’ve been raving about it ever since. Besides, you really don’t need an excuse to rewatch Fury Road. I loved it the first time I saw it, and it just keeps getting better and better each time. The editing! The sound! The world-building!

With every viewing, it feels more and more like the film for our time. It may have been a bit of stretch to watch it under the thematic umbrella of getaway vehicles, but it’s a getaway for our current political climate: instead of the typical plot involving a gang driving at full tilt from a bank heist, imagine one where the gang turns around, ousts the bankers, and replaces the whole banking system with a matriarchal community.

“Hope is a mistake”, Max mansplains (maxplains?) to Furiosa at one point. He’s wrong. Judicious hope is what drives us forward (or, this case, back …to the citadel). Watching Fury Road again, I drew hope from the character of Nux. An alt-warboy in thrall to a demagogue and raised on a diet of fake news (Valhalla! V8!) can not only be turned by tenderness, he can become an ally to those working for a better world.

Witness!

My friend Jeffrey has been writing on his website for twenty years. There are very few things on the web that last that long. I’m very, very glad that his website is one of them.

I remember finding Zeldman.com—and Ask Dr. Web, and the Ad Graveyard—back when I was first “going online.” I remember being so grateful for his generosity, but I also remember that what really struck me was the warmth and humility in the writing.

My own website will turn twenty in another few years. I never would have started it if it weren’t for Jeffrey.

Jessica and I went to see Mad Max: Fury Road at the Dukes At Komedia last week. We both thoroughly enjoyed it. There’s the instant thrill of being immersed in a rollicking good action movie but this film also stayed with me long after leaving the cinema.

This isn’t really Max’s movie at all—it’s Furiosa’s. And oh, what a wonderful protagonist she is.

Max’s role in this movie is to be an ally. And for that reason, I see him as a role model—one who offers a shoulder, not to cry on, but to steady a rifle’s aim.

When I was preparing my Responsive Enhancement workshop for last year’s dConstruct, I thought I should create an example site to demonstrate the various techniques I would be talking about to demonstrate how responsive design could be combined with progressive enhancement to make something works great on any device.

Round about that time, while I was scratching my head trying to figure out what the fake example site should be, I got an email from Bobbie asking if I wanted to meet up for a coffee and a chat. We met up and he told me about a project he wanted to do with his colleague Jim Giles. They wanted to create a place for really good long-form journalism on science and technology.

“The thing is,” said Bobbie, “we want to make sure it’s readable on phones, on tablets, on Kindles, everything really. But we don’t know the best approach to take for that.”

“Well, Bobbie, it’s funny you should mention that,” I said. “I’m currently putting together a workshop all about responsive design, which sounds perfect for what you want to do. And I need to create an example site to showcase the ideas.”

It was a perfect match. Bobbie gave me his design principles, personas, and—most importantly—content. In return, he would get a prototype that would demonstrate how that content could be readable on any device; perfect for drumming up interest and investment.

The workshop went really well, and some great ideas came out of the brainstorming the attendees were doing.

A few months later, Bobbie and Jim put the project—now called Matter—up on Kickstarter. They met their target, and then some. Clearly there was a lot of interest in well-written original journalism on the web. Now they had to build it.

They got hold of Phil to do the backend so that was sorted but Bobbie asked me if I knew any kick-ass designers and front-end developers.

“Well, I would love to work on it,” I said. “So how about working with Clearleft?”

“I didn’t think you guys would be available,” he said. “I’d love to work with you!”

And so we began a very fun collaboration. Paul moved his desk next to mine and we started playing around with the visual design and front-end development. Phil and Bobbie came by and we hammered out design principles, user journeys, and all that fun stuff.

It was really nice to work on a project where readability took centre stage. “Privilege the reading experience” was our motto.

Paul did some fantastic work, not just on creating a typographic system, but also creating a brand identity including what I think is a really great logo.

I started putting together a system of markup and CSS patterns, using the device lab to test them. Phil started implementing those patterns using Django. It all went very smoothly indeed.

Today is launch day. Matter is live. If you backed the project on Kickstarter, you’ve got mail. If not, you can buy the first issue for a mere 99 cents.

The first piece is a doozy. It’s called Do No Harm:

Why do some people want to amputate a perfectly healthy limb? And why would any doctor help them?

If this is indicative of the kind of work that Matter will be publishing, it will definitely live up to its ambitious promise:

MATTER commissions, crafts and publishes unmissable journalism about science, technology and the ideas shaping our future.

I’m at An Event Apart in Boston where Jeffrey Zeldman is about to kick things off. I figured I’d try my hand at a little bit of good ol’ fashioned liveblogging…

Jeffrey’s talk is called What Every Web Designer Should Know—A Better You At What You Do. He asks “what does it mean to be a designer when everyone is calling themselves a designer?” 15 years ago, Jeffrey thought everyone would learn HTML and be a web designer. That didn’t happen but what did happen is social media, which is democratising online publishing. His 6-year old daughter uses an iPad like a natural, figuring out the interfaces of drawing tools.

The rules are changing. You may not be in control of the user’s visual experience. (those are direct quotes from his slides—he’s delivering pre-formatted tweets for the audience’s benefit)

Here’s the website of Roger Ebert. He’s a great guy and his website is full of links but it really isn’t set up well for reading. But that’s okay. Jeffrey uses Readability (and there’s also Instapaper) to format the content.

It used to be that the client or boss was in charge of the brand but that’s changing. There was always a minority of web users—using older devices, say—that wouldn’t see what you intended, but nowadays every user has the power to manipulate the output. Sure, us geeks always used user stylesheet to hide ads, but now it’s mainstream.

Readability is open source and it’s also the underlying code behind Safari’s Reader functionality

Definitions are in flux, discussion is contentious. A List Apart runs a survey every year. They ask “what is your job title?” They get a lot of different job titles that sound like they’re doing the same thing. At a university you might be called a “webmaster” whereas at an agency you might be called a “creative director” and yet you’d be doing the same work.

We geeks love to argue about definitions. See, for example, Whitney’s recent post called You’re Not A UX Designer If… A lot of people loved what she wrote; a lot of people didn’t. Luke wrote on Twitter:

Happy to find I’m not a UX designer.

Jeffrey responded:

Me neither. That’s why I hire them.

There are different kinds of creative people. That’s why Jeffrey likes to have a mix of people at his agency—the intuitive creative types along with the researchers.

Design that does not serve people does not serve business. It used to be that designers would respond to client feedback with their opinions; “here’s what I think…” and we could present data and research. It’s really important to think about the user first and foremost.

For example, apps that auto-spam people on Twitter sounds like a great idea to the client …but of course users hate it. It’s an anti-user pattern. Anti-user patterns are anti-business.

As Jeffrey was getting ready this morning, he want on Facebook and announced he was about to give a talk. He found thousands and thousands of spammy updates from some automated app. It’s embarrassing for the users who have been taken advantage of.

Content precedes design. Design without content is decoration. Jeffrey wrote that on Twitter, which is a great way of planting an idea in people’s minds Inception-style.

Remember Blogger? When Google bought it, they hired a bunch of people—including the viking-like Jeff Veen’s Adaptive Path—to retool the user experience of signing up for Blogger to make it accessible for everyone. They turned to Douglas Bowman. He reached out to a bunch of his designer friends, asking them to design templates. It was a really, really hard design job because there was no content to design with. Jeffrey feels that he himself failed at the task but somehow Doug managed to do it. He created a really nice template that worked for everyone. It has stood the test of time remarkably well. In his fifteen years of designing websites, this is the only example Jeffrey can think of of a good design created in the absence of content.

On a related note, 37 Signals have famously declared war on lorem ipsum placeholder text. All websites are based around content—including web apps. Take this link call-out to their first million-selling book Defensive Design in the sidebar. You need to know how long the blurb is going to be to make sure it works with the design.

You can’t solve the problem until you define it. You probably can’t solve it alone.

If you can’t solve a problem alone and you need to some user testing—not that we’re testing users; it’s design testing with users—one of the ways to do that is with Silverback. But like Jeffrey said, there’s always dissent. Naz Hammid said:

User testing is great but it can also be a crutch when what you really want to be doing is changing behaviour and thought patterns.

Take for example the “pull down to refresh” gesture from Tweetie. That was an innovation that wasn’t based on user testing. It worked though, and apps that didn’t use that pattern started to feel old-fashioned and dated.

Then there’s Tweetbot. Some people feel that the interface is excessive but they’re trying out new stuff like swiping left on a tweet to see a whole conversation and swiping right to see related tweets.

So you can innovate and get the innovation to go viral.

He not busy being born is busy dying. The three books from A Book Apart are quite different, from HTML5 to content strategy. What’s surprising is that the same people are buying all the books. We need to know a bit of everything in this industry. Maybe I’m not going to be a content strategist, but I need to know about content strategy.

It’s remarkable how nice is everyone is in this line of work. We all blog and share our ideas and techniques. That’s not the norm in other disciplines.

RIGHT NOW is the best time in more than a decade to create websites and applications. There are new opportunities: Webkit and Mobile, HTML5 and CSSS3, UX and Content Strategy. The landscape has changed in a good way. It’s bringing up a lot of challenges, for instance…

A Mobile and Small Screen Strategy: what’s the difference? A lot of time we say “mobile” when what we really mean is “small screen.” Is the “mobile” version of A List Apart really mobile? No. It doesn’t do any location-based cleverness. Instead it’s a layout optimised for a small-screen. So ask yourself, do you need a mobile site or do you need a small-screen site?

For some sites, especially content-driven sites, small-screen optimisation is the smartest strategy. For other sites, especially those with a location pivot, a mobile strategy is what you need.

Real web designers write code. Always have, always will. That’s another controversial little soundbite that Jeffrey put out on Twitter to spark discussion, like Whitney’s post. You don’t to code to the level of say, Ethan Marcotte, but you do need to know what’s possible with markup and CSS.

Progressive enhancement is a universal smart default. This is the watchword of the web standards movement. We’re okay with everyone not have the same experience as long as everyone has a good experience. Be sure to check out Adaptive Web Design by Aaron Gustafson. (note: seriously, this book is going to be amazing: I’ve had a sneak peek)

Some more soundbites:

Semantic markup is a fundamental skill.

UX and design are not antonyms.

A quick look at HTML5 Design Principles. We can learn a lot from ideas like “Pave the cowpaths.” Fail predictably. That’s a really, really, really important part of HTML5: consistent error handling. Beyond outline documents. Audio, video, articles, sections …HTML5 has new features that people want. If people are publishing video, shouldn’t HTML5 allow that?

Happy Cog wrote an article about strategies for using HTML5. Jenn Lukas did some research into how many sites are switching to HTML5. There are a lot of big sites switching their doctype: Google, Yahoo, etc. It’s kind of crazy the way that HTML5 has become a mainstream meme. Like, for example, Steve Jobs publishing his letter the day before HTML5 For Web Designers came out (good timing, Steve).

HTML5 DOCTYPE using limited HTML elements and ARIA roles. You can tailor your HTML5 strategy.

HTML5 + CSS3 = vector art in browsers. Experiment with things like RGBa.

There’s more that Jeffrey would like to cover, like Responsive Web Design, but the other speakers—like Ethan—are going to cover this stuff and time is up so that’s it, folks.

I’m at An Event Apart San Francisco where Jeffrey Zeldman is taking to the stage. He’s going to talk about web design and what it means.

First question, “What is the thing that you need most?” “Empathy,” he says. He brings up a screenshot of Real.com. Everything that looks like a link isn’t a link. Everything that doesn’t look a link is a link …except the “Free Download” button. This site isn’t being driven by user needs, it’s being driven by corporate needs. Their mission is to compete with Quicktime and other media players but they also want to push the advanced player and make it hard to find the free player …competing needs.

Here’s another site: Consumer Search. You can find consumer reports there. They have a store of reports on how well products work or don’t work. But the site has no visual hierarchy, no sex appeal, just a long list of links.

Both sites suffer from a lack of empathy; empathy with the site’s users.

It’s hard being a web designer. The unmotivated need not apply. You have to constantly educate yourself. There are plenty of tutorials out there on using web design tools like Photoshop, Flash, Dreamweaver, and so on. But teaching Excel is not the same as teaching business. Knowing how to use Photoshop and Illustrator doesn’t make you a web designer. Good resources are hard to find. There’s that really good place in Florida (where Jade studied) that has a great curriculum but it’s the exception that proofs the rule. Once you’re out of college and in a job, you still have to keep learning. Jeffrey asks who often feels like they’re faking it and most of the audience puts their hands on.

The A List Apart Web Design Survey aims to answer some questions about working in web design. Last year’s survey showed that many people found that their education was not relevant to their job. In fact there seemed to be a correlation between how rich you are and how irrelevant your education is. When you break it down by job title, it turns out that graphic designers did find their education relevant but most developers are self-taught.

Web designers get no respect. Imagine you’re on a plane and you start chatting with the person in the seat next to you. If you ask someone what they do and they say they’re an architect then you make some assumptions about them; that they’re educated and respected. You don’t get that when you tell someone you’re a web designer. Part of the problem is that there is no standardisation of job titles. We call ourselves lots of different things. If you’re working with Fortune 500 companies that use lots of baloney titles, you feel you need to make up baloney titles for your company too. If you’re at a university, someone might be called a Webmaster. If you’re at a startup, someone might be called a User Experience Director. But they’re probably doing the same thing.

Another problem for people working in-house is answering the question “Who owns the website?” Usually it’s either Marketing or IT. There should be a separate Web division.

Another thing that the survey showed is that web designers don’t get rich. They make less money than people in comparable fields. This field also suffers from many of the same prejudices as other fields.

So who speaks for web design? Communication Arts is a magazine about graphic design. Every year they have an end-of-the-year round-up of the best in design. The problem with any kind of competition is that it fosters the same kind of design all the time. For example, when Jeffrey was a judge for Communication Arts, there was a beautiful site but it was half a gig in size. Jeffrey didn’t think that was worthy of a prize (although it really was gorgeous). In the 90s in advertising, it was much the same. There was a trend for edgy, sarcastic advertising that won awards and therefore prompted more sarcastic advertising.

Then there’s the Webby Awards, a very glitzy affair. David Bowie was the host this year. Jeffrey loves Bowie (he has bought his music multiple times) but is he necessarily the best judge of web design?

If you can’t rely on competitions and awards, you could turn to traditional news media. A few years ago Wolf Blitzer discovered blogs. They didn’t quite get it.

Jeffrey asks who reads TechC*nt. People put up their hands …they should be ashamed of themselves. Jeffrey, like me, doesn’t read TechC*nt because it just makes him angry. Who gives a shit about how much money people are making? Aren’t the ideas more interesting?

There’s the old chestnut about iconic web design, sparked by Armin Vit’s Under Consideration article. Jeffrey and Jason disagree on this one. Jeffrey thinks that lamenting the lack of a web design equivalent of a Milton Glaser poster is missing the point of web design.

Time for some practical lessons. Most importantly, we need to get away from the guitar solo approach to design. You should not be designing just to make other designers jealous. It happens a lot in design but it happens in development too (I’m looking at you, Ajax). Good design is invisible. It’s about the character of the content, not the character of the designer. Let’s get away from showing off get to empathetic web design. It means user-centred design but by abandoning that label we can side-step the religious wars between UCD and agile.

Here are twelve tips to empathetic web design.

1. Start with the user. If you’re making a personal site, great, do whatever you want. But if it’s a site for other people, start with the user and stay there.
2. Know yourself. Know your weaknesses. Know what you’re good at and what you’re bad at. Jeffrey knows that he’s good at painting the big picture on a project but he’s not good at dealing with the details.
3. Find the right client (or job). Find an environment or project where you can thrive. This ties in with tip number two: when you know what you like doing, you can seek out that environment.
4. Sell ideas not pixels. Andy paraphrases this as sell the sizzle, not the sausage.
5. I don’t know is okay. It should be acceptable to tell a client you don’t know something. If you’re afraid of saying that, that might not be the right client.
6. Build trust. They need to know that you know what you’re doing.
7. Bring out the big guns. Don’t be afraid to quote research at your clients. They won’t read it but they’ll be persuaded to trust you.
8. Create a paper trial. Remind people what they already agreed to.
9. Never underprice your works.
10. Say no to spec. Don’t work on spec. Don’t work for free.
11. Say no to rush jobs. They never work. The clients are always in a rush but they’re always late getting back to you. The reason it’s a rush job is because they spent months disagreeing about stuff.
12. End with the user. When in doubt, go back to the user.