Not only are we enabling folks to express themselves uniquely on the web, unlike the cookie cutter looks that all the social sites try to put you into. We’re doing it in a way which is standards-based, interoperable, based on open source, and increases the amount of freedom on the web.
Our static tools and linear workflows aren’t the right fit for the flexible, diverse reality of today’s Web. Making prototyping a central element of your workflows will radically change how you approach problem solution and save you a lot of headaches – and money. But most importantly, you will be creating the right products and features in a way that resonates with the true nature of the Web. A discourse on processes, flexibility, the Web as a material, and how we build things.
THIS year’s Poynter Digital Newspaper Design Challenge was an attempt by several designers and pundits, working and thinking in parallel, to save real news via design. In Part 1 of my report from Poynter, I discussed the questions driving the challenge, and talked about the design work done in response to it by my colleagues Kat Downs Mulder, Mike Swartz, Lucie Lacava, and Jared Cocken. Here in Part 2, I’ll discuss my own work and the approach we took at my studio. But we begin with a quick look back at the past designs that brought us to this point:
Experiment 1: The Deck
During the past decade and a half, as both a publication designer and a publisher, I watched in horror as our publications became reader-hostile minefields of intrusive ads, overlays, and popups. The first thing I tried to do about this (besides removing the web equivalent of chart junk from my magazine) was to offer an alternative approach to advertising via The Deck, an ad network I cofounded with Jim Coudal of coudal.com and Jason Fried of Basecamp (formerly 37signals). The Deck permitted only one appropriately targeted ad per each page of content viewed. As primary instigator Jim Coudal put it:
A buy in The Deck reaches the creative community on the web in an uncluttered, controlled environment, far more valuable than a standard banner or a single text ad among dozens of others.
Jim, Jason, and I hoped that our cost-per-influence model would replace the CPM race to the bottom, and that our quasi-religious use of whitespace would be widely imitated by the smartest publications online.
But that didn’t happen. Advertising just got more intrusive. The Deck succeeded as a small business supporting a network of interesting small publications, but not at all as a primary influencer on the direction taken by advertising that supports web content.
Experiment 2: Readability
Then about seven years ago, my friend Rich Ziade and his engineers created Readability, an app that sat between you and the ugly site you were trying to read, the way screen readers sit between visual websites and blind web users. Readability grabbed an article page’s primary content, removed the junk, and replaced the cluttered and illegible layout with a clean, readable page inspired by the clarity of iBooks and Kindle, which were just taking off at the time.
Rich released Readability 1.0 as open source; Apple immediately absorbed it into the Safari browser, where it continues to provide Safari’s built-in “reader” mode. (Safari’s “reader” mode was Apple’s first step in decluttering the web and returning it to the people who use it; “content blocking” would be the second step.)
Moreover, Readability 2.0, released by Rich’s then-company Arc90 the following year, added automatic payment for content creators slash publishers, as I explained at the time to anyone who would listen. Had Readability been allowed to continue the experiment, content monetization might have been less of a problem than it is today, and publication brands (the notion that it matters who publishes what we read) would be in exactly the same pickle they’re in anyway—except that readers would get their news in Readability’s attractive and customizable format, instead of from Apple News, Facebook, and the like.
I used to go around the world on lecture tours, warning my fellow designers that if we didn’t figure out how to declutter and compellingly brand sites, apps like Readability would do it for us. I still go around on lecture tours, but I’ve moved on to other issues. As for Readability, it was killed by a digital lynch mob after one powerful blogger, misunderstanding the motivation behind it, issued the digerati equivalent of a fatw?. But that’s another story.
Experiment 3: Big Type Revolution
In 2012, inspired by Readability and frustrated by the industry’s determination to make ever less legible, ever more cluttered sites full of tracking and popups and everything except what readers need, I bet big on large type:
This redesign is a response to ebooks, to web type, to mobile, and to wonderful applications like Instapaper and Readability that address the problem of most websites’ pointlessly cluttered interfaces and content-hostile text layouts by actually removing the designer from the equation. (That’s not all these apps do, but it’s one benefit of using them, and it indicates how pathetic much of our web design is when our visitors increasingly turn to third party applications simply to read our sites’ content. It also suggests that those who don’t design for readers might soon not be designing for anyone.)
Writing in Forbes, Anthony Wing Kosner saw the future in my initially crude experiment:
If you want to know where the web is going, one clue is to look at the personal sites of top-tier web designers. And one trend that just bubbled to the surface is large body type—the kind you don’t have to command-plus to read.
Not to brag (okay, too late), but he wasn’t wrong. It was the future.
(Also, I’m fairly sure I wasn’t the only designer at the time who reacted against tiny type and cluttered anti-user layouts by stripping pages down to only their most necessary elements, and boosting the type size to enforce a more relaxed reading posture. The idea was in the air.)
An uncluttered page focused on the reading experience (reminder: big type and plenty of whitespace) is now the default at several leading news publications. But many smaller publications, struggling just to survive, have not kept up. And so we have a perfect crisis:
Publications that do not encourage reading, loyalty, or repeat visits are struggling to survive at the very moment real news is under attack from an authoritarian president. What to do?
My response to the Poynter Design Challenge
There are many ways to respond to an existential crisis like the one facing most news publications. You can rethink the relationship between reader and publication. Rethink the job of the publication. Make news work more like a lifestyle app. Make it more immersive. My colleagues followed those paths out brilliantly (as described in Part 1).
But I went for the low-hanging fruit. The thing any publisher, no matter how cash-strapped, could do. The thing I had seen working since I started yelling about big type in 2012. I went for a clean, uncluttered, authoritative, branded page. Authoritative because this isn’t fake news. Branded because the source matters.
The easiest, fastest, most readily attainable path to clean, uncluttered, authoritative, branded design is through typography.
Any publication can be readable
Any newspaper, however poor, can afford better typography. Any newspaper with a designer on staff can attain it, if the paper stops treating design as a lackey of marketing or editorial or advertising, and sets designers free to create great reading experiences.
In my work, which is still underway (and will continue for some time), I focused on creating what I call “reader” layouts (and probably other designers call them that too; but I just don’t know). Layouts that are branded, authoritative, clean, uncluttered, and easy to read.
I played with type hierarchies and created simple style guides. Most of my little pages began as Typecast templates that I customized. And then Noël Jackson from my studio cleaned up the HTML and CSS to make it more portable. We put the stuff up on GitHub for whoever wants to play with it.
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.
Jeremy Keith was the seventh speaker at An Event Apart San Francisco this month. His presentation, Evaluating Technology, set out to help us evaluate tools and technologies in a way that best benefits the people who use the websites we design and develop. We looked at some of the hottest new web technologies, like service workers and web components, and dug deep beneath the hype to find out whether they will really change life on the web for the better.
Days of future past
Its easy to be overwhelmed by all the change happening in web design and development. Things make more sense when we apply an appropriate perspective. Although his presentation often dealt with “bleeding-edge” technologies (i.e. technologies that are still being figured out and just beginning to be supported in some browsers and devices), Jeremy’s framing perspective was that of the history of computer science—a field, pioneered by women, that evolved rationally.
Extracting the unchanging design principles that gave rise to the advances in computer science, Jeremy showed how the web evolved from these same principles, and how the seemingly dizzying barrage of changes taking place in web design and development today could be understood through these principles as well—providing a healthy means to decide which technologies benefit human beings, and which may be discarded or at least de-prioritized by busy designer/developers working to stay ahead of the curve.
Resistance to change
“Humans are allergic to change,” computer science pioneer Grace Hopper famously said. Jeremy showed how that very fear of change manifested itself in the changes human beings accept: we have 60 seconds in a minute and 24 hours in a day because of counting systems first developed five thousand years ago. Likewise, we have widespread acceptance of HTML in large part because its creator, Tim Berners-Lee, based it on a subset of elements familiar from an already accepted markup language, SGML.
How well does it fail?
In our evaluating process, Jeremy argued, we should not only concern ourselves with how well a technology works, but also how well it fails. When XHTML 2.0 pages contained an error, the browser was instructed not to skip that error but to shut down completely. Thus, XHTML 2.0 was impractical and did not catch on. In contrast, when an HTML page contains an error or new element, the browser skips what it does not understand and renders the page. This allows us to add new elements to HTML over time, with no fear that browsers will choke on what they don’t understand. This fact alone helps account for the extraordinary success of HTML over the past 25 years.
Likewise, service workers, a powerful new technology that extends our work even when devices are offline, fails well, because it is progressively enhanced by design. If a device or browser does not support service workers, the content still renders.
Jeremy used the example of The Washington Post’s Progressive Web App, which has been much touted by Google, who are a driving force behind the movement for progressive web apps. A true progressive web app works for everyone. But The Washington Post’s progressive web app demands that you open it in your phone. This kind of retrograde door-slam is like the days when we told people they must use Flash, or must use a certain browser or platform, to view our work. This makes it the antithesis of progressive.
Dancing about architecture
There was much, much more to Jeremy’s talk—one of the shortest hours I’ve ever lived through, as 100 years of wisdom was applied to a dizzying array of technologies. Summarizing it here is like trying to describe the birth of your child in five words or less. Fortunately, you can see Jeremy give this presentation for yourself at several upcoming An Event Apart conference shows in 2017.
The next AEA event, An Event Apart St. Louis, takes place January 30-February 1, 2017. Tomorrow I’ll be back with more takeaways from another AEA San Francisco 2016 speaker.
12 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.
MESMERIZED as we have been by the spectacle of the flaming garbage scow of U.S. election news, it would have been easy to miss this other narrative. But in the past few days, just as Google, AT&T, and Time-Warner were poised to turn the phrase “online privacy” into a George Carlin punchline, in marched an unlikely hero to stop them: the American Federal Government. Who have just…
approved broad new privacy rules on Thursday that prevent companies like AT&T and Comcast from collecting and giving out digital information about individuals — such as the websites they visited and the apps they used — in a move that creates landmark protections for internet users.
Given the increasingly deep bonds between corporate overlords and elected officials, this strong assertion of citizens’ right to privacy comes as something of a surprise. It’s especially startling given the way things had been going.
On Friday, Oct. 21, shortly before a massive DDOS attack took out most U.S. websites (but that’s another story), ProPublica reported that Google had quietly demolished its longstanding wall between anonymous online ad tracking and user’s names. I quote ProPublica’s reporting at length because the details matter:
When Google bought the advertising network DoubleClick in 2007, Google founder Sergey Brin said that privacy would be the company’s “number one priority when we contemplate new kinds of advertising products.”
And, for nearly a decade, Google did in fact keep DoubleClick’s massive database of web-browsing records separate by default from the names and other personally identifiable information Google has collected from Gmail and its other login accounts.
The change is enabled by default for new Google accounts. Existing users were prompted to opt-in to the change this summer.
The practical result of the change is that the DoubleClick ads that follow people around on the web may now be customized to them based on your name and other information Google knows about you. It also means that Google could now, if it wished to, build a complete portrait of a user by name, based on everything they write in email, every website they visit and the searches they conduct.
The move is a sea change for Google and a further blow to the online ad industry’s longstanding contention that web tracking is mostly anonymous.
On privacy, certainly, Google had shown ethics and restraint. Which is why their apparent decision to say, “f–– it, everyone else is doing it, let’s stop anonymizing the data we share” came as such an unpleasant shock. And that sense of shock does not even take into account how many hundreds of millions of humans were slated to lose their privacy thanks to Google’s decision. Or just how momentous this change of heart is, given Google’s control and knowledge of our searches, our browsing history, and the contents and correspondents of our email.
Scant days after ProPublica broke the Google story, as a highlight of the proposed merger of AT&T and Time-Warner, came the delightful scenario of TV commercials customized just for you, based on combined knowledge of your web using and TV viewing habits. And while some humans might see it as creepy or even dangerous that the TV they’re watching with their family knows what they were up to on the internet last night, from an advertiser’s point of view the idea made $en$e:
Advertisers want … to combine the data intensity of internet advertising with the clear value and ability to change peoples’ perceptions that you get with a television ad. If you believe in a future where the very, very fine targeting of households or individuals with specific messaging makes economic sense to do at scale, what this merger does is enable that by making more audience available to target in that way.
Into this impending privacy hellscape marched the U.S. Government:
Federal officials approved broad new privacy rules on Thursday that prevent companies like AT&T and Comcast from collecting and giving out digital information about individuals — such as the websites they visited and the apps they used — in a move that creates landmark protections for internet users. …
The new rules require broadband providers to obtain permission from subscribers to gather and give out data on their web browsing, app use, location and financial information. Currently, broadband providers can track users unless those individuals tell them to stop.
The passage of the rules deal a blow to telecommunications and cable companies like AT&T and Comcast, which rely on such user data to serve sophisticated targeted advertising. The fallout may affect AT&T’s $85.4 billion bid for Time Warner, which was announced last week, because one of the stated ambitions of the blockbuster deal was to combine resources to move more forcefully into targeted advertising.
The consequences of these new rules—exactly how advertising will change and networks will comply, the effect on these businesses and those that depend on them (i.e. newspapers), how Google in particular will be effected, who will cheat, who will counter-sue the government, and so on—remain to be seen. But, for the moment, we’re about to have a bit more online privacy and anonymity, not less. At least, more online privacy from advertisers. The government, one assumes, will continue to monitor every little thing we do online.
2006 DOESN’T seem forever ago until I remember that we were tracking IE7 bugs, worrying about the RSS feed validator, and viewing Drupal as an accessibility-and-web-standards-positive platform, at the time. Pundits were claiming bad design was good for the web (just as some still do). Joe Clark was critiquing WCAG 2. “An Inconvenient Truth” was playing in theaters, and many folks were surprised to learn that climate change was a thing.
I was writing the second edition of Designing With Web Standards. My daughter, who is about to turn twelve, was about to turn two. My dad suffered a heart attack. (Relax! Ten years later, he is still around and healthy.) A List Apart had just added a job board. “The revolution will be salaried,” we trumpeted.
Preparing for An Event Apart Atlanta, An Event Apart NYC, and An Event Apart Chicago (sponsored by Jewelboxing! RIP) consumed much of my time and energy. Attendees told us these were good shows, and they were, but you would not recognize them as AEA events today—they were much more homespun. “Hey, kids, let’s put on a show!” we used to joke. “My mom will sew the costumes and my dad will build the sets.” (It’s a quotation from a 1940s Andy Hardy movie, not a reflection of our personal views about gender roles.)
Jim Coudal, Jason Fried and I had just launched The Deck, an experiment in unobtrusive, discreet web advertising. Over the next ten years, the ad industry pointedly ignored our experiment, in favor of user tracking, popups, and other anti-patterns. Not entirely coincidentally, my studio had just redesigned the website of Advertising Age, the leading journal of the advertising profession.
Other sites we designed that year included Dictionary.com and Gnu Foods. We also worked on Ma.gnolia, a social bookmarking tool with well-thought-out features like Saved Copies (so you never lost a web page, even if it moved or went offline), Bookmark Ratings, Bookmark Privacy, and Groups. We designed the product for our client and developed many of its features. Rest in peace.
In short, it was a year like any other on this wonderful web of ours—full of sound and fury, true, but also rife with innovation and delight.
As part of An Event Apart’s A Decade Apart celebration—commemorating our first ten years as a design and development conference—we asked people we know and love what they were doing professionally ten years ago, in 2006. If you missed parts one, two, three, or four, have a look back.
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.
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.
THE WORLD has finally caught up with Been, Inc. Three years ago, this tiny start-up company shared my studio space in New York. Their product idea was remarkably original: instead of passively accepting the data collection and loss of privacy that comes with most ad networks on the web, what if people had a choice—to either block ads and third-party trackers entirely, or earn rewards for letting ads through?
The initial web-based product, playfully designed by Monkey Do, took the scariness and complexity out of tracking issues, and returned the decision making power to the consumer. Unfortunately, the mainstream web wasn’t ready for ad blocking, and consumers en masse either weren’t ready to think about privacy, or simply didn’t know the company’s value proposition because of its nonexistent marketing budget. (The only thing that kills products faster than no marketing is poor execution—although a handful of products have survived both.)
To stay afloat in the face of mass indifference, the company temporarily pivoted, using a portion of their technology to facilitate sharing of web content between consumers, much like the late lamented Ma.gnolia or Pocket’s new Recommended section. But where Ma.gnolia and Pocket were/are text-powered, the pivoted Been app was primarily visual, which helped it gain traction in the eduation market. Grade-school teachers and kids loved using the app for research projects—and their support helped the company stay in business long enough for the internet to catch up with their ideas.
Version 2.0 of their Choice app for iOS is the product of years of work on user privacy, data ownership, and control. iOS fans can download it at www.been.mobi/getv2edu.
The company’s site explains the push-button mechanics through which you can choose to block ads and third-party trackers in your apps and Safari, or earn rewards by letting ads through and sharing (strictly non-personal) information with Been. (Earn Mode is limited to US users for now.)
When I foolhardily put down my deposit on a New York studio that was larger and more costly than what I needed, my hope was that it would attract a like-minded community of designers and tech companies from whom I would learn and be inspired. That was certainly the case with my friends at Been! I wish them great success at helping to bring the changes our web needs.
TOUCH introduces physicality to designs that were once strictly virtual, and puts forth a new test: How does this design feel in the hand? Josh Clark’s new book, Designing For Touch, guides designers through this new touchscreen frontier, and is the launchpad for today’s Big Web Show conversation.
In a fast-paced, freewheeling conversation, Josh and I discuss why game designers are some of our most talented and inspiring interaction designers; the economy of motion; perceptions of value when viewing objects on touchscreen versus desktop computer; teaching digital designers to think like industrial designers (and vice-versa); long press versus force touch; how and when to make gestures discoverable; and much more.
Sponsored by DreamHost and BrainTree. Big Web Show listeners can save 15% when ordering Designing For Touch at abookapart.com with discount code DFTBIGWEB. Discount valid through the end of January 2016.
WEB DESIGNERS have cared about web performance since the profession’s earliest days. When I started, we saved user bandwidth by employing GIF images that had the fewest possible colors—with no dithering, when possible, and by using actual web text instead of pictures of web text. (Kids, ask your parents about life before CSS enabled, type designers created formats for, browsers finally supported, and Typekit quickly popularized web fonts.)
Later, we learned to optimize JPEGs and blur their backgrounds: the blurrier large swathes of a JPEG image can be, the lower the bandwidth requirements for the image. We found the optimally performant size for repeating background tiles (32 x 32 and 64 x 64 were pretty good) and abandoned experiments like single-pixel-wide backgrounds, which seemed like a good idea but slowed browsers, servers, and computers to a crawl.
We developed other tricks, too. Like, when we discovered that GIF images optimized better if they possessed repeating patterns of diagonal lines, we worked diagonal background images into a design trend. It was the trend that preceded drop shadows, the wicked worn look, and skeuomorpic facades, which were themselves a retro recurrence of one of the earliest styles of commercial web design; that trend, which was always on the heavy side, performance-wise, eventually gave way to a far more performant grid-driven minimalism, which hearkened back to classic 1940s Swiss graphic design, but which our industry (sometimes with little knowledge of design history) called “flat design” and justified as being “born digital” despite its true origins going back to pixels, protractors, and a love of Greek mathematics.
I cannot verify every detail Nate provides, but it is all in line with recommendations I’ve heard over and over at top conferences, and read in articles and books by such performance mavens as Jake Archibald, Lara Hogan, Scott Jehl, and Yesenia Perez-Cruz.
You should also pick up these great books on performance:
(It’s not why I wrote this post, but if you order Scott’s book today, you can save 10% when you enter discount code ABAHARVEST at checkout.)
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.)
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?