meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Archive: 'Web' Category

Designing for Crisis, Design for Real Life

Back in October of 2014, at An Event Apart Orlando, I returned to public speaking with “Designing for Crisis”, my first steps toward illuminating how and why design needs to consider more than just the usual use cases.  I continued refining and delivering that talk throughout 2015, and it was recorded in October 2015 at An Event Apart Austin.  As of late last week, you can see the entire talk for free.

Vimeo: Designing for Crisis by Eric Meyer

There were a lot of strange confluences that went into that talk, some of them horrific, others just remarkable.  One that stands out for me, as I look at that screenshot, is how a few years ago, Jared Spool gave a talk at AEA where he discussed the GE Adventure Series, in a segment that never failed to choke me up (and often choked up Jared).  I remember being completely floored by that example, and at one point, based solely on what he’d said about the GE Adventure Series, I remarked to Jared that I occasionally though about switching career tracks to become an experience designer.

Less than two years later, I stood in one of the first Adventure Series rooms at the University of Pittsburgh Medical Center, standing in the middle of a design I’d only ever seen on a projector screen, the same room you can see in the screenshot above, as my daughter’s head was scanned to see if the experimental medicine we’d been giving her had slowed her tumors.

Six months after that, I was talking about it on stage in Orlando, as an example of how designing for crisis can have spectacularly positive results.  The video we released last week came a year later, and is a much better version of that first talk.  I’m very happy that we can now share it with the world.

As I’ve said before, I came to realize that “Designing for Crisis” was just one piece of a larger puzzle.  To start exploring and understanding the whole puzzle, I recently finished co-authoring Design for Real Life with Sara Wachter-Boettcher, to be published by A Book Apart, possibly as soon as March (but there’s not an official date yet, so that could change).  In it, Sara and I explore a small set of principles to use in approaching design work, and talk about how to incorporate those principles into your existing design practice.  The book is the foundation for a new talk I’ll be presenting at every An Event Apart in 2016—including this year’s Special Edition show in Orlando.

As soon as the book is available for order, we’ll let everyone know—but for now, I hope you’ll find last year’s talk useful and enlightening.  Several people have told me it changed the way they approach their work, and it serves as a pretty good introduction to the ideas and themes I’ve built on it for the book and this year’s talk, so I hope it will be an hour well spent.

CSS:TDG Update

It’s time for a semi-periodic update on CSS: The Definitive Guide, 4th Edition!  The basic news is that things are proceeding, albeit slowly.  Eight chapters are even now available as ebooks or, in most cases, print-on-demand titles.  Behold:

  • CSS and Documents, which covers the raw basics of how CSS is associated with HTML, including some of the more obscure ways of strapping external styles to the document as well as media query syntax.  It’s free to download in any of the various formats O’Reilly offers.
  • Selectors, Specificity, and the Cascade, which combines two chapters to cover all of the various Level 3 selector patterns as well as the inner details of how specificity, inheritance, and cascade.
  • Values, Units and Colors, which covers all the various ways you can label numbers as well as use strings.  It also takes advantage of the new cheapness of color printing to use a bunch of nice color-value figures that aren’t forced to be all in grayscale.
  • CSS Fonts, which dives into the gory details of @font-face and how it can deeply affect the use of font-related properties, both those we use widely as well as many that are quickly gaining browser support.
  • CSS Text, which covers all the text styles that aren’t concerned with setting the font face—stuff like indenting, decoration, drop shadows, white-space handling, and so on.
  • Basic Visual Formatting in CSS, which covers how block, inline, inline-block, and other boxes are constructed, including the surprisingly-complicated topic of how lines of text are constructed.  Very fundamental stuff, but of course fundamentals are called that for a reason.
  • Transforms in CSS, which is currently FREE in ebook format, covers the transform property and its closely related properties.  2D, 3D, it’s all here.
  • Colors, Backgrounds, and Gradients, which covers those three topics in FULL GLORIOUS COLOR, fittingly enough.  Curious about the new background sizing options?  Ever wondered exactly how linear and radial gradients are constructed?  This book will tell you all that, and more.

Here’s what I have planned to write next:

  • Padding, Borders, Outlines, and Margins — including the surprisingly tricky border-image
  • Positioning – basically an update, with new and unexpected twists that have been revealed over the years (case in point)
  • Grid Layout – though this is coming faster than many of us realize, I may put this one off for a little bit while we see how browser implementations go, and find out what changes happen as a result

My co-author, Estelle, has these three chapters/short books currently in process:

  • Transitions
  • Animations
  • Flexbox

Beyond those 14 chapters, we have eight more on the roster, covering topics like floating, multicolumn layout, shapes, and more.  CSS is big now, y’all.

So that’s where we are right now.  Our hope is to have the whole thing written by the middle of 2016, at which point some interesting questions will have to be answered.  While most of the book is fine in grayscale, there are some chapters (like Colors, Backgrounds, and Gradients) that really beenfit from being in color.  Printing a 22-chapter book in color would make it punishingly expensive, even with today’s drastically lower cost of color printing.  So what to do?

Not to mention, printing a 22-chapter book is its own level of difficulty.  Even if we assume an average of 40 pages a chapter—an unreasonabnly low figure, but let’s go with it—that’s still a nine hundred page book, once you add front and back matter.  The binding requirements alone gets us into the realm of punishingly expensive, even without color.

Of course, ebook readers don’t have to care about any of that, but some people (like me) really do prefer paper.  So there will be some interesting discussions.  Print in two volumes?  Sell the individual chapter books in a giant boxed set, Chronicles of Narnia style?  We’ll see!

Content Blocking Primer

Content blockers have arrived, as I’m sure you’re aware by now.  They’re more commonly referred to as ad blockers, but they’re much more than that, really.  In fact, they’re a time machine.

Consider: a user who runs a content blocker can prevent the loading of Javascript, CSS, cookies, and web fonts.  (They can block more than that, but those asset types seem to be the main targets thus far.)  A person loading an article or other page from a web site gets the content, and that’s it, assuming the publisher hasn’t put some sort of “go away” server-side script in place.

Sound familiar?  It should.  We’ve been here before.  It’s 1995 all over again.

And, just as in 1995, publishers are faced with a landscape where they’re not sure how to make money, or even if they can make money.

Content blockers are a two-decade reset button.  We’re right back where we were, twenty years ago.  Except this: we already know a bunch of stuff that doesn’t work.

I don’t mean that ads don’t work.  Ads can work.  We’ve seen small, independent ad networks like The Deck do pretty okay.  They didn’t make anyone a billionaire, but they provided a good audience to advertisers via a low-impact mechanism, and some earnings for those who ran the ads and the network.

The ads that are at risk now are the ones delivered via bloated, badly managed, security-risk mechanisms.  In other words: what’s at risk here is terrible web development.

Granted, the development of these ads was so terrible that it made the entire mobile web ecosystem appear far more broken that it actually is, and prompted multiple attempts to rein it in.  Now we have content blockers, which are basically the nuclear option: if you aren’t going to even attempt to respect your customers, they’re happy to torch your entire infrastructure.

Ethical?  Moral?  Rational?  Hell if I know or care.  Content blockers became the top paid apps within hours of iOS9’s release, and remain so.  The market is speaking incredibly loudly.  It’s almost impossible not to hear it.  The roar is so loud, in fact, it’s difficult to make out what people are actually saying.

I have my interpretation of their shouting, but I’m going to keep it to myself.  The observation I really want to make is this: the entire industry is being given a do-over here.  Not the ad industry; the web industry.

Remember, this isn’t just about ads.  Ads are emblematic of the root problem, but they’re not the actual root problem.  If ads were the sole concern of content blockers, then the blockers (mostly) wouldn’t bother to block web fonts.  It’s possible to use web fonts smartly and efficiently, but most sites don’t, so web fonts are a major culprit in slow mobile load times.  The same is true for Javascript, whether it’s served by an ad network, an analytics engine, or some other source.  So they’re both targeted by blockers—not for enabling ads, but for disabling the web.

Content blockers strip the web back to what it was 20 years ago.  All the same challenges and questions are back, full force.  How do we make sites better, smarter, and cooler?  How do we make money by publishing online?

There are reputations and probably fortunes to be made by learning from our many mistakes and finding new, smarter ways to move forward.  I would advocate that people start with the core principles of the web standards movement, particularly progressive enhancement, but those are starting points, a foundation—just as they always were.

It’s not often that an entire industry gets an almost literal do-over.  We have two decades of hindsight to work with now, as we try to figure out how to (re)build a web where users don’t feel like they need content blockers just to be online.  This is an incredibly rare and exciting juncture.  Let’s not waste it.

Dislike

Facebook is emotionally smarter than we give it credit for, though perhaps not as algorithmically smart as it could be.

I’ve been pondering this for a few weeks now, and Zeynep Tufekci’s “Facebook and the Tyranny of the ‘Like’ in a Difficult World” prodded me to consolidate my thoughts.

(Note: This is not about what Tufekci writes about, exactly, and is not meant as a rebuttal to her argument.  I agree with her that post-ranking algorithms need to be smarter.  I also believe there are design solutions needed to compensate for the unthinking nature of those algorithms, but that’s a topic for another time.)

Tufekci’s piece perfectly describes the asymmetrical nature of Facebook’s “engagement” mechanisms, commented on for years: there is no negative mirror for the “Like” button.  As she says:

Of course he cannot like it. Nobody can. How could anyone like such an awful video?

What happens then to the video? Not much. It will mostly get ignored, because my social network has no way to signal to the algorithm that this is something they care about.

What I’ve been thinking of late is that the people in her network can comment as a way to signal their interest, caring, engagement, whatever you want to call it.  When “Like” doesn’t fit, comments are all that’s left, and I think that’s appropriate.

In a situation like Tufekci describes, or any post that deals with the difficult side of life, comments are exactly what’s called for.  Imagine if there were a “Dislike” button.  How many would just click it without commenting?  Before you answer that question, consider: how many click “Like” without commenting?  How many more would use “Dislike” as a way to avoid dealing with the situation at hand?

When someone posts something difficult—about themselves, or someone they care about, or the state of the world—they are most likely seeking the support of their community.  They’re asking to be heard.  Comments fill that need.  In an era of Likes and Faves and Stars and Hearts, a comment (usually) shows at least some measure of thought and consideration.  It shows that the poster has been heard.

Many of those posts can be hard to respond to.  I know, because many of the Facebook posts my wife and I were making two years (and one year) ago right now were doubtless incredibly hard to read.  I remember many people leaving comments along the lines of, “I don’t know what to say, but I’m thinking of you all.”  And even that probably felt awkward and insufficient to those who left such comments.  Crisis and grief and fear in others can make us very uncomfortable.  Pushing past that discomfort to say a few words is a huge show of support.  It matters.

Adding “Dislike” would be a step backward, in terms of emotional intelligence.  It could too easily rob people who post about the difficult parts of life of something they clearly seek.

Undoing oncut/oncopy/onpaste Falsities

Inspired by Ryan Joy’s excellent and deservedly popular tweet, I wrote a small, not-terribly-smart Javascript function to undo cut/copy/paste blocking in HTML.

function fixCCP() {
   var elems = document.getElementsByTagName('*');
   var attrs = ['onpaste','oncopy','oncut'];
   for (i = 0; i < elems.length; i++) {
      for (j = 0; j < attrs.length; j++) {
         if (elems[i].getAttribute(attrs[j])) {
            elems[i].setAttribute(attrs[j],elems[i]
            .getAttribute(attrs[j])
            .replace("return false","return true"));
         }
      }
   }
}

Here it is as a bookmarklet, if you still roll that way (as I do): fixCCP.  Thanks to the Bookmarklet Maker at bookmarklets.org for helping me out with that!

If there are obvious improvements to be made to its functionality, let me know and I’ll throw it up on Github.

Everything Looks Like a Nail

I have recently, perhaps inevitably, taken up woodworking as a hobby.  It’s just clichéd enough to be credible, isn’t it?  Web, wood, maybe it’s in the leading “w”.

A programmer friend and I get together Wednesday evenings to try our hand at what is currently best described as rough carpentry.  The usual reason to take up a “physical-world” hobby like woodworking is to “get away from the computer for a while, man!”  But of course we pull out our iPhones to use as calculators, look up techniques, or find online tools that can help us.  The laptops stay indoors, but computers and the internet still smooth our way.

In web terms, we’re past “hello world” and at about the point where we understand the basics of HTML and have set a few colors and faces with beginner CSS.  We could put up a single-column fan site if that were the goal, but not much more than that.  We’re still at the stage of making a lot of mistakes and not knowing if our problems spring entirely from not knowing how to use our tools, or also from not knowing enough to realize the tools themselves are deficient.  We’re figuring things out as we go, hitting up YouTube for how-to guides on just about everything.  Wikipedia may aspire to be the site of record for Things of Import, but YouTube holds the sum total of humanity’s practical knowledge, hidden amongst all the pop-star and cat videos.

A lot of the best practices map back and forth, too.  Planning ahead is a core competency, and the more you practice, the better you get at it.  Measurement is vital, and cleverness is as useful as it is dangerous.  The importance of quality tools can’t be overstated.  There are a lot of (very) specialized tools available, but you can get really far with the core set of flexible, time-honored basics.  As long as you have a boatload of clamps, that is.

The one major difference is that there is no versioning in woodworking.  It’s like building a project with only the “Save” command—no milestones, no repositories, no undo.  When you do something, you’re committing to altering the project with no take-backs.  If you get it wrong, you have to find a way to patch over the problem.  If you get it really wrong, you have to scrap what you just did and replace the botched part.  And if you get it really, really wrong, all you can do is scrap the whole thing and start over.

So far we haven’t had to scrap anything.  Our first couple of projects were the classic starters: a simple bookshelf, a firewood box, a more complex bookshelf.  For each, we’ve intentionally stepped up the complexity, a bit at a time.  The first bookshelf was just screwed together, but the pieces were all pretty much the right size and properly aligned.  The firewood box was also screwed together, but it involved angled cuts and hinges and sealant.  The second bookshelf involved a wood router in a variety of ways, both structural and decorative.

As in networking, we swore a lot at the router, but it got us where we needed to be.  Eventually, that is, once we figured out how to properly configure it and deal with its quirks.

I can’t deny that there’s a visceral satisfaction in picking up a hammer and whacking on a thing until it’s properly assembled, or disassembled, as the case may be.  There’s definitely a triumph in finding out you did all the measuring and cutting and aligning just right, much like the rush you get when your first major coding project does what you meant it to do, except more so because you’ve wrestled atoms into doing your bidding.  That’s literal orders of magnitude beyond wrangling electrons.

Our next steps are what I assume is the usual second phase: building a wood shop in order to learn how to use a wood shop.  We’re moving up to building fold-down work surfaces with tool storage, custom-fitted wood storage, and braced shelves.  That experience will enable us to move into other, more complicated projects.  Some we already have in mind.  Others will suggest themselves to us.  At every step, we’ll look for new skills to try and practice.

And that, I think, is the real ultimate goal here: to teach ourselves new things, to enrich our skill sets and create useful objects thereby.

So it’s pretty much like working on the web.

Well, except for all the staining.

This article was originally published at The Pastry Box Project on 2 July 2015.

Warning Hashflags

Over the weekend, I published “Time and Emotion” on The Pastry Box, in which I pondered the way we’re creating the data that the data-miners of the future will use to (literally) thoughtlessly construct emotional minefields—if we don’t work to turn away from that outcome.

The way I introduced the topic was by noting the calendar coincidence of the Star Wars-themed tradition of “May the Fourth be with you” and the anniversary of the Kent State shootings in 1970, and how I observe the latter while most of the internet celebrates the former: by tweeting some song lyrics with a relevant hashtag, #maythe4th.  I did as I said I would…and Twitter blindly added a layer of commentary with a very simple little content filter.  On twitter.com and in the official Twitter app, a little Stormtrooper helmet was inserted after the hashtag #maythe4th.

So let’s review: I tweeted in remembrance of a group of National Guardsmen firing into a crowd of college students, wounding nine and killing four.  After the date hashtag, there appeared a Stormtrooper icon.  To someone who came into it cold, that could easily read as a particularly tasteless joke-slash-attack, equating the Guardsmen with a Nazi paramilitary group by way of Star Wars reference.  While some might agree with that characterization, it was not my intent.  The meaning of what I wrote was altered by an unthinking algorithm.  It imposed on me a rhetorical position that I do not hold.

In a like vein, Thijs Reijgersberg pointed out that May 4th is Remembrance of the Dead Day in the Netherlands, an occasion to honor those who died in conflict since the outbreak of World War II.  He did so on Twitter, using the same hashtag I had, and again got a Stormtrooper helmet inserted into his tweet.  A Stormtrooper as part of a tweet about the Dutch remembrance of their war dead from World War II on.  That’s…troublesome.

Michael Wiik, following on our observations, took it all one step further by tweeting a number of historical events collected from Wikipedia.  I know several of my British chums would heartily agree with the 1979 tweet’s added layer of commentary, but there are others who might well feel enraged and disgusted.  That could include someone who tweets about the election in celebration, the way people sometimes do about their heroes.

But what about appending a Stormtrooper helment to an observance of the liberation of the Neuengamme concentration camp in 1945?  For that matter, suppose someone tweets May-4th birthday congratulations to a Holocaust survivor, or the child of a Holocaust survivor?  The descendant of a Holocaust victim?

You might think that this is all a bit much, because all you have to do is avoid using the hashtag, or Twitter altogether.  Those are solutions, but they’re not very useful solutions.  They require humans to alter their behavior to accommodate code, rather than expecting code to accommodate humans; and furthermore, they require that humans have foreknowledge.  I didn’t know the hashtag would get an emoji before I did it.  And, because it only shows up in some methods of accessing Twitter, there’s every chance I wouldn’t have known it was there, had I not used twitter.com to post.  Can you imagine if someone sent a tweet out, found themselves attacked for tweeting in poor taste, and couldn’t even see what was upsetting people?

And, as it happens, even #may4th wasn’t safe from being hashflagged, as Twitter calls it, though that was different: it got a yellow droid’s top dome (I assume BB-8) rather than a Stormtrooper helmet.  The droid doesn’t have nearly the same historical baggage (yet), but it still risks making a user look like they’re being mocking or silly in a situation where the opposite was intended.  If they tagged a remembrance of the 2007 destruction of Greensburg, Kansas with #may4th, for example.

For me, it was a deeply surreal way to make the one of the points I’d been talking about in my Pastry Box article.  We’re designing processes that alter people’s intended meaning by altering content and thus adding unwanted context, code that throws pieces of data together without awareness of meaning and intent, code that will synthesize emotional environments effectively at random.  Emergent patterns are happening entirely outside our control, and we’re not even thinking about the ways we thoughtlessly cede that control.  We’re like toddlers throwing tinted drinking glasses on the floor to see the pretty sparkles, not thinking about how the resulting beauty might slice someone’s foot open.

We don’t need to stop writing code.  We do need to start thinking.

Heard and Received

A week ago today, I stood on a stage in San Francisco and told a couple thousand developers they were doing it wrong.  I mean, I got up there at O’Reilly’s Fluent, The Web Platfom conference, and gave a talk with a slide that literally said, “The Web is NOT a Platform”.  You can see it here, all fifteen minutes of it, in which I borrowed liberally from Jeremy Keith, added a splash of Mike Monteiro, and mixed it all together with things I’ve been saying and thinking for the past, oh, decade or more.

As it turned out, and a little bit to my surprise, a fair number of people completely agreed with what I had to say, judging by the reactions I got both online and in person.  Only a few people disagreed with me in person, which was fine; I actually hoped that there would be some pushback, since I’m not the smartest person in the world by any stretch.  The best part was, our disagreements were friendly, well-sourced, and collegial.  I love having conversations like that.  I don’t know that any of us changed our minds, but we were able to test our assumptions and viewpoints against each other.  In one case, I shook hands on a friendly, no-stakes bet over which of us would prove to be right, five or ten years down the line.

What made it really fun is that not twenty minutes after I stepped off the stage at the end of that talk, I stepped back on to accept a 2015 Web Platform Award alongside Sara Soueidan, Mark Nottingham, and Mikeal Rogers.  Those are some amazing people to stand with, and that it came from O’Reilly made it even more humbling.  In fact, Sara said it best: “This is my first time ever winning a web award, and I feel privileged to have won it from such a prestigious company.”  To which I would only add, and in such prestigious company.

I do want to note that what I said at the very end of my acceptance remarks was woefully insufficient.  What I should have said, and would have said if I hadn’t suddenly felt completely overwhelmed, is that the web has meant more to me, done more for me, and given more to me in the past two years than any one person could ever have any right to expect.  The web and what it makes possible, the ability to reach out and share and hear from you and stay in touch—that kept me sane, and may very well have kept me alive.

Thank you all.

February 2016
SMTWTFS
January  
 123456
78910111213
14151617181920
21222324252627
2829  

Archives

Feeds

Extras