Category: Standards

Web standards for design and communication.

Categories
A List Apart art direction Design Standards State of the Web Web Design Web Design History Web Standards webfonts Websites webtype

The Next Generation of Web Layouts

Who will design the next generation of readable, writerly web layouts?

Layouts for sites that are mostly writing. Designed by people who love writing. Where text can be engaging even if it isn’t offset by art or photography. Where text is the point.

With well considered flexible typesetting, modular scaling, and readable measures across a full range of proportions and devices. With optional small details that make reading screens of text a pleasure instead of a chore. With type sizes that are easy to read without needing to zoom in. And with a range of interesting sans and serif fonts (including variable fonts) that support reading and encourage creative exploration where headlines are concerned.

Well? How did we get here?

The web has come along way since design meant crafting UIs in Photoshop and exporting them as sliced GIFs. Flash. SiFR. Table layout. Rebellion and rethinking. Liquid layout. Semantic HTML and CSS layout. Adaptive layout. Responsive layout. Intrinsic layout. Web fonts. Big type and super lightweight UX emphasizing readability was new (and controversial!) in 2012. We’ve long since accepted and improved upon it. Today’s news, magazine, and blog pages are more flexible, readable, and refined than ever before.

So what comes next? For writers, one hopes that what’s next is a fresh crop of small, innovative advancements. Improvements that are felt by readers, even when they aren’t always consciously noticed. Layouts that are not merely legible, but actually feel inevitable, at all sizes and in all contexts.

Beyond outside the box

Services like Typetura may point the way. A marriage of type and tech, Typetura is different from other typesetting methods. An intrinsic typography technology, it “enables you to design with more flexibility, while dramatically reducing code.” Disclaimer: I’m friends with, and have long admired the work of, Typetura founder Scott Kellum. Designing With Web Standards readers will recognize his name from the Kellum Image Replacement days of the early 2000s, but that ain’t the half of what he has done for web design, e.g. inventing dynamic typographic systems, high impact ad formats, new parallax techniques, and fluid typesetting technology. Scott was also the coder, along with Filipe Fortes, of Roger Black’s late, lamented Treesaver technology. But I digress.

The tech is not the point—except in so far as it improves our ability to think beyond our current understanding of what design and layout means. Just as Gutenberg’s printing press was not the point, but it was the point of departure. Initially, the invention of movable type reproduced the writing we already knew (i.e. the King James Bible). But ultimately, by freeing writing and reading from narrow elite circles and bringing it to more (and more diverse) minds, Gutenberg’s invention transformed what writing was and could be—from the invention of newspapers to the fiction of Virginia Woolf to multimedia experiences, and perhaps even to the web.

Let us all to play with Jen Simmons’s intrinsic web layout ideas and Scott Kellum and partners’s Typetura. While we also sketch in pencil and spend time looking at well designed books —printed, bound ones as well as digital publications in various devices. And specifically, not just fabulous coffee table books, but books that you’ve reread over and over, to understand what, beyond the text itself, encourages that reading response. So that, together, we may take the experiences of both reading and writing to the next level.

Appendix: Resources

If you’re new to the interplay between design and code on the open web, or if you just want a refresher, here are some evergreen links for your further learning and pleasure:


Categories
Advocacy Archiving Browsers Community Design glamorous HTML industry javascript launches links Off My Lawn! people Publications Responsive Web Design Standards State of the Web Stories The Profession W3C Web Design Web Design History Web Standards Websites

He Built This City: The Return of Glenn Davis

You may not know his name, but he played a huge part in creating the web you take for granted today. 

As the first person to realize, way back in 1994, that the emerging web could be a playground, he created Cool Site of the Day as a single-focused blog dedicated to surfacing interesting sites, thereby demonstrating the web’s potential while creating its first viral content. (As an example, traffic from his followers, or, as we called them back then, readers, brought NASA’s web server to its knees.)

He co-founded The Web Standards Project, which succeeded in bringing standards to our browsers at a time when browser makers saw the web as a software market to be dominated, and not a precious commons to be nurtured.

He anticipated responsive web design by more than 20 years with his formulation of Liquid, Ice, and Jello as the three possible ways a designer could negotiate the need for meaningful layout vis-a-vis the unknowns of the user’s browsing environment.

He taught the web DHTML through his educational Project Cool Site. 

And then, like a handful of other vital contributors to the early web (e.g. Todd Fahrner and Dean Allen), he vanished from the scene he’d played so large a role in creating.

He’s ba-ack

Glenn Davis wasn’t always missed. Like many other creators of culture, he is autistic and can be abrasive and socially unclueful without realizing it. Before he was diagnosed, some people said Glenn was an a**hole—and some no doubt still will say that. I think of him as too big for any room that would have him. And I’m talking about him here because he is talking about himself (and the history of the early web) on his new website, Verevolf.

If you go there, start with the introduction, and, if it speaks to you, read his stories and consider sharing your own. That’s how we did it in the early days, and it’s still a fine way to do it—maybe even the best way.

I knew Glenn, I worked with him and a lot of other talented people on The Web Standards Project (you’re welcome!), and it’s my opinion that—if you’re interested in how the web got to be the web, or if you were around at the time and are curious about a fellow survivor—you might enjoy yourself.

Categories
Advocacy automattic Blogs and Blogging Brands Community Design industry Own your content software Standards Web Design Web Standards wordpress

Enabling Folks to Express Themselves on the Web: State of the Word 2021

Screenshot of slide highlighting the four phases of WordPress Gutenberg.

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.

—Matt Mullenweg, State of the Word 

In a live address, Automattic’s Matt Mullenweg…

  • Introduces Openverse (an opt-in content commons);
  • Announces that WordPress’s beginner-friendly Learn.Wordpress.org is now available in 21 languages;
  • Philosophizes about Web3 and the “decentralized web” —which, despite big company colonization attempts, is really what the web has always been;
  • Extols the virtues of Open Source;
  • And more. 

Watch the 2021 #StateoftheWord annual keynote address on YouTube. It’s two hours long, so bring popcorn.

Selected Additional Reactions & Commentary

Hat tips to Chenda Ngak, Reyes Martínez, and Josepha Haden.

Categories
Best practices Browsers Code Design development Future-Friendly HTML Ideas industry Internship IXD Layout links Multi-Device Responsive Web Design software Standards State of the Web User Experience UX Web Design Web Design History Web Standards Websites

Saving Your Web Workflows with Prototyping

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.

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

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

Poynter style guide

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

Experiment 1: The Deck

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

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

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

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

Experiment 2: Readability

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

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

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

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

Experiment 3: Big Type Revolution

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

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

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

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

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

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

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

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

The experiment becomes the norm

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

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

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

 

A two-up from the Poynter challenge

My response to the Poynter Design Challenge

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

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

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

 

Sample reader layout from the Poynter challenge

Any publication can be readable

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

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

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

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

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

Additional reading

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

Kiss My Classname

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

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

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

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

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

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

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

Categories
An Event Apart Jeremy Keith Standards State of the Web

State of the Web: Evaluating Technology | Jeremy Keith

Jeremy Keith at An Event Apart.

12 LESSONS from An Event Apart San Francisco – ? 6: We work with technology every day. And every day it seems like there’s more and more technology to understand: graphic design tools, build tools, frameworks and libraries, not to mention new HTML, CSS, and JavaScript features landing in browsers. How should we best choose which technologies to invest our time in? When we decide to weigh up the technology choices that confront us, what are the best criteria for doing that?

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 argued that pages built on fragile technologies—technologies which are powerful when they work, but which fail poorly—are a dangerous platform for web content. Frameworks that require JavaScript, for example, offer developers extraordinary power, but at a price: the failure of even a small script can result in no content at all. Service workers technology also offers tremendous power, but it fails well, so is safe to use in the creation of responsive sites and web applications.

On progressive web apps

Likewise, progressive web apps, when designed responsively and with progressive enhancement, are a tremendously exciting web development. But when they are designed the wrong way, they fail poorly, making them a step backward for the web.

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.

Also published in Medium.

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

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

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

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

With great power…

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

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

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

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

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

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

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

We can do better.

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

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

 
Also published on Medium.

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

Private Parts: unlikely advocate fights for online privacy, anonymity

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

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

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

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

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

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

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

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

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

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

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

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

Et tu, Google

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

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

Minority Report

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

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

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

An unlikely privacy advocate

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

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

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

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

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

What happens next

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

Co-published in Medium.

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

Ten Years Ago on the Web

2006 DOESN’T seem forever ago until I remember that we were tracking IE7 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.

I was reading Adam Greenfield’s Everyware: The Dawning Age of Ubiquitous Computing, a delightfully written text that anticipated and suggested design rules and thinking for our present Internet of Things. It’s a fine book, and one I helped Adam bring to a good publisher. (Clearly, I was itching to break into publishing myself, which I would do with two partners a year or two afterwards.)

In short, it was a year like any other on this wonderful web of ours—full of sound and fury, true, but also rife with innovation and delight.

As part of An Event Apart’s A Decade Apart celebration—commemorating our first ten years as a design and development conference—we asked people we know and love what they were doing professionally ten years ago, in 2006. If you missed parts one, two, three, or four, have a look back.

 

 

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

CSS Grid Layout with Rachel Andrew: Big Web Show

Rachel Andrew

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

Enjoy Episode ? 141 of The Big Web Show.

Sponsored by A List Apart and An Event Apart.

URLs

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

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

Of Patterns and Power: Web Standards Then & Now

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

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

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

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

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

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

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

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

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

The Year in Design

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

Also published in Medium

Translated into German (also here) by Mark Sargent

Translated into French by Jean-Baptiste Sachsé

Translated into Turkish by omerbalyali.

Translated into Spanish by Tam Lopez Breit.

Categories
A Space Apart Advertising privacy Products Responsibility software Standards Startups State of the Web The Essentials Usability User Experience UX Web Design Web Design History

Ad Blocking Phase II

screenshot of Choice app from Been, Inc.

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.

Categories
A Book Apart Big Web Show Design mobile Mobile Multi-Device Platforms Standards State of the Web The Big Web Show Touchscreen User Experience UX Web Design Web Design History Web Standards

? 139: Every Time We Touch—Josh Clark, author of “Designing For Touch”

Author Josh Clark on The Big Web ShowTOUCH 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.

URLS

Big Web Show Episode ? 139
Big Medium
Designing For Touch

%d bloggers like this: