Posts in the Tech Category

Results of the GIF Survey

Published 8 years, 6 months past

The GIF Survey is complete.  In just under a week, 1,457 people gave their answers on how they pronounce the acronym, and their perceptions of the rightness of that pronunciation.  I thought that, today of all days, it made some sense to share the results of a far less momentous poll.

For those who missed, it, how this survey worked was that the first question was: “How do you pronounce GIF?”  To this, the choices were:

  • The obviously correct way
  • The clearly incorrect way

Upon answering this, respondents moved on to a section that asked three optional demographic questions: age, gender, and race/ethnicity, all as open text fields.  These had about a 16% skip rate, and about a 4% ‘faithless’ response rate; that is, answers that were clearly jokes, insults, or other explicit refusals to answer the question as intended.

Once the demographic questions were answered or skipped, there was a final question: “How do you pronounce GIF?”, exactly the same as the first question of the survey.  Only this time, the options were:

  • Hard G (like “gift”)
  • Soft G (like “gin”)

For both pronunciation questions, the answer order was randomized so as to avoid any first-choice advantage.  The demographic questions, being open entries, didn’t have options to randomize.

(Aside: I discovered in the course of the survey that there are other pronunciations, most commonly in non-English languages.  My apologies to those who fell outside the binary choice I presented.)

So!  The results came out like this:

Table 1. Perception of pronunciation
The obviously correct way 83.7%
The clearly incorrect way 16.3%

First of all, it amuses and slightly mystifies me that more than 16% of respondents feel they say it the “incorrect” way.  Second of all, these percentages didn’t line up with actual pronunciation.

Table 2. Actual pronunciation
Hard G 77.8%
Soft G 22.2%

This deserves a closer look.  How do perceptions of correctness break down by actual pronunciation?

Table 3. Perception versus pronunciation
Pronunciation “Correct” “Incorrect”
Hard G 87.3% 12.7%
Soft G 71.2% 28.8%

In other words, people who pronounce it with a hard G are significantly more likely to believe their pronunciation is correct than those who go the soft-G route.

It’s an interesting inversion of what one might (perhaps naïvely?) expect: given that the creator of the format has explicitly said the pronunciation is with a soft G, one might expect that those who use the hard G know it’s incorrect but say it anyway.  My personal opinion is that this is actually a reflection of human nature: faced with evidence that undermines our instinctive reactions, we tend to double down.  (Of course, if the evidence lines up with what we believe, we seize on that too.)

Now: demographics, which actually were the point of the survey, but not in the way I think some people assumed.  After I did my first, tongue-in-cheek version of the poll on Twitter, my colleague Aki noted that she’d love to know something about the demographics behind those results, something I’d had flitting around in the back of my mind.  Her comment made me decide to just go for it.  What I wanted to see was whether there were significant differences in perceptions of correctness in various groups.  For example, one might hypothesize that those identifying as female were more likely to say their choice was incorrect.  Well, if that were the hypothesis, what evidence I was able to gather contradicts it.

Table 4. Perception of pronunciation by gender
Gender “Correct” “Incorrect”
Female 83.4% 16.6%
Male 83.5% 16.5%

Roughly speaking, of those people who gave an answer about their gender (81.5% of the total), about 25% of respondents identified as female, and about 70% identified as male.  One thing that did jump out at me was that those identifying as female were more likely to use the hard G, rather than the soft G.  Not by a lot, possibly within the margin of error, but still.

Table 5. Actual pronunciation by gender
Gender Hard G Soft G
Female 82.7% 17.3%
Male 77.2% 22.8%

The other thing that interested me was how patterns of pronunciation and correctness would correspond, if they did at all, to age — for example, were younger respondents more or less likely to think they were right than older respondents?  I decided to group by decades, in effect.  Of the 81.6% of respondents who gave a reasonably valid age (I tossed, for example, “1.7977E+308”), here’s how they clustered.

Table 6. Age groups
20-29 22.2%
30-39 42.7%
40-49 25.5%
50-59 6.6%

There weren’t enough respondents outside the 20-59 range to analyze.  I’m not even sure about the 50-59 group, to be honest — I’m not sure 79 replies out of 1,457 is enough.  But what the heck, I’m rolling with it.  Respondents’ perception of correctness didn’t change a lot, but did seem to rise a bit with age.

Table 7. Perception by age group
Age Group “Correct” “Incorrect”
20-29 81.8% 18.2%
30-39 84.3% 15.7%
40-49 83.2% 16.8%
50-59 86.1% 13.9%

It would be interesting to see if a different division of age groups would create different results.  But what really caught my eye was how the pronunciation shifts with age: younger respondents were notably more likely to use the soft G than older respondents.

Table 8. Pronunciation by age group
Age Group Hard G Soft G
20-29 73.1% 26.9%
30-39 77.8% 22.2%
40-49 84.2% 15.8%
50-59 83.7% 16.5%

So if you’re a soft-G speaker and are convinced that’s correct, perhaps you can take comfort in the belief that the children are our future.

I’m not going to present numbers on race/ethnicity.  This is partly because the question was a MacGuffin: I asked it because it would have seemed odd not to after asking for age and gender, and also because I’ve found over the years that asking for ethnic or racial identification is a handy way to give some people a chance to vent a little built-up animus.  The other reason is that even after filtering out the few abusive and the somewhat more numerous “decline to answer” replies, the remaining values are all over the place and difficult to make consistent.

If you’d like to try, you can download the filtered-and-resorted data set for that question, as well as similar sets for age and for gender.  I’ve also put up a data set containing just the answers to the two mandatory pronunciation questions.  Feel free to analyze them as you like!  Each file is a ZIP of the data set in tab-separated text format, so they’re pretty small.

And just to be clear, I’m not planning to post the complete data set, just in case any combination of demographic answers could be used to reconstruct an identity.  (Each set was sorted differently, so a line number in one set doesn’t correspond to the line number in another.)

So what did all this tell us?  It told us something about the people who saw the survey and chose to respond.  It told us that if the results are representative, then people who are older tend to use the hard G and be more convinced of their rightness.  Maybe that’s representative of the world as a whole, and maybe not.  It may not mean a lot in the grand scheme of things, but it was fun to ask, hopefully fun for people to answer, and fun to crunch the numbers that resulted.

My thanks to everyone who took part, and to Aki for prompting me to do it in the first place.

Workshopping

Published 8 years, 7 months past

I’m criminally behind in sharing this with everyone, so I’m jumping straight to the bottom line here: I’m teaching a workshop on advanced CSS layout techniques in October, and co-teaching another workshop on CSS animation in November with the inestimable Val Head.  Both are courtesy O’Reilly & Associates, and will be conducted at their offices in Boston.

A few more details:

  • New CSS Layout (October 17-18) is two days of deep diving into flexbox, multicolumn, grid, and related technologies.  There will be a heavy emphasis on Things You Can Use Today, including bugs and how to handle them, with a keen focus on using everything in a progressively enhancing way.  In other words, you should walk away knowing how to use new technologies right away, without leaving behind users of older browsers, and have a good sense of what you’ll be able to do in the next 6-12 months.  This will be hands-on, interactive, and very much a dialogue with technical instruction.  If you’re looking for two days of watching me drone in front of a slide show, this is not that.  I’m not even sure I’ll have any slides at all — I’ll probably spend the entire time in BBEdit and a browser instead.  The class size is limited to 40 people.
  • CSS Animation (November 17-18) is another two days of diving deep into the topic.  For this one, I’ll spend the first day going through every last piece of CSS transition and animation syntax, with generous helping of transform.  On the second day, Val will show how to put that syntax to use in a way that serves and strengthens your design, instead of undermining it.  It’s basically a day of learning how the tools work, and a day of learning how to properly use the tools.  Again, class size of 40; and again, very much hands-on and interactive.

So that’s what’s up.  Looking for ways to seriously expand your skills in layout or animation or both?  Come, join us!

Invisible Airwaves

Published 9 years, 1 week past

All of a sudden, I’m on three different podcasts that released within the last week.  Check ‘em out:

  • The Web Ahead #115  —  recorded LIVE! at An Event Apart Nashville, I joined Rachel Andrew, Jeffrey Zeldman, and host Jen Simmons for an hour-plus look at the present and future of web design and web design technologies, featuring a number of really sharp questions submitted by the audience as we talked.  We got Nostradamic with this one, so warm up the claim chowder pots!
  • User Defenders #20  —  Sara and I talked with host Jason Ogle for just over an hour about Design for Real Life, digging deep into the themes and our intentions.  Jason really brought great questions from having just read the book, and I feel like Sara and I kept our answers focused and compact.
  • The Big Web Show #144  —  Jeffrey and I talked for just under an hour about Design for Real Life and the themes of my AEA talk this year.  This one’s more of a ramble between two friends and colleagues, so if you prefer conversation a little looser, this one’s for you.

Share and enjoy!

Design for Real Life

Published 9 years, 2 months past

The cover of ‘Design for Real Life’

On March 8th, 2016 — just eight days from the day I’m writing this — Design for Real Life will be available from A Book Apart.  My co-author Sara Wachter-Boettcher and I are really looking forward to getting it into people’s hands.

The usual fashion is to say something like “getting it into people’s hands at long last”, but in this case, that’s not really how it went down.  Just over a year ago now, Sara published “Personal Histories”, and it was a revelation.  In her post, I could see the other half of the book that was developing in my head, a book that was growing out of “Designing for Crisis” and “Inadvertent Algorithmic Cruelty”.  So I emailed Sara and opened with:

Your post was like a bolt of lightning for me.  In the same way the Year in Review thing opened my eyes to what lay beyond “Designing for Crisis”, your post opened my eyes to how far that land beyond reaches.

After research and some intense discussions, we started writing in the spring of 2015, and finished before summer was over.  Fall of 2015 was devoted to rewrites, revisions, additions, and editing.  Winter 2015-2016 was spent in collaborative editorial and production work by the amazing team at A Book Apart.  And now…here we are.  The book is just a week away from being in people’s hands.

To celebrate, Sara and I will be hosting, with incredibly generous support from A Book Apart and PhillyCHI, a launch party at Frankford Hall in Philadelphia.  We’ll be providing some munchies, some tasty adult beverages, and there will be giveaways of both paper and digital copies of the book.  We’d love to see you there!  If you can make it, please do RSVP at that link, so we know how much food to order.

We chose Philadelphia as the site for our launch party for a few reasons.  For one, Sara lives there, so only one of us had to travel.  But to me, it brings some very personal histories full circle, because Philadelphia is where this really all got started.  It’s where Rebecca first went to be treated, where she was given the best possible shot at life, and where I started to notice the failures and successes of user experience design when it collided with the stresses of real life.

In a number of ways, this book has been a labor of love.  The most important, I think, is the love Sara and I have for our field, and how we would love to see it become more humane — really, more human.  That’s why we packed the book not just with examples of good and bad design choices, but of how we can do better.  The whole second part of the book is about how to take the principles we explore in the first part and put them to work right now — not by throwing out your current process and replacing it with a whole new, but by bringing them into your existing practice.  It’s very much about enhancing what you already do.

It’s been an intense process, both emotionally and work-wise.  We pushed as hard as we could to get this to you as soon as we could.  Now the time is almost here.  We’re really looking forward to hearing what you think of it.

Designing for Crisis, Design for Real Life

Published 9 years, 3 months past

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 thought 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.

Subgrids Considered Essential

Published 9 years, 3 months past

Grid layout is a pretty darned fantastic thing.  I’ve been digging into it as I write the grid layout chapter of CSS:TDG4e, and there are more things in here than have been dreamt of in our layout philosophies.  One of the things I’ve recently come to realize is the power and necessity of subgrids.

To understand why, let’s explore a use case, which you can see in various forms on this test page.  I cribbed this use case pretty directly from Fantasai, but I’m going to be analyzing it a little differently.  The basis is a form with the various fields and labels in unordered list items, to help with accessibility and to be basically readable and usable if the CSS somehow fails to be applied.  The markup looks like this:

<form method="post" action="script.cgi">
  <ul>
    <li><label for=name>Name:</label>
        <input id=name name=name></li>
    <li><label for=email>Email:</label>
        <input id=email name=email type=email></li>
    <li><label for=tel>Telephone:</label> 
        <input id=tel name=tel type=tel></li>
    <li><label for=url>Homepage:</label>
        <input id=url name=url type=url></li>
    <li><label for=bday>Birthday:</label>
        <input id=bday name=bday type=date></li>
  </ul>
</form>

The basic form with no grids.

Ideally, we’d like the form fields to all line up into a column, and the labels to be in another column.  Furthermore, we’d like the label column to be only as wide as the widest label’s element box, and no more; the rest of the grid can be taken up by the input column.

This seems like a case tailor-made for grid layout, but there’s a problem.  Because grid items are only ever the child elements of a grid container, we can’t just apply a grid to the ul element and go from there.  Instead, we have to make each li element a grid container, in order to make each label and input element a grid item.  But that means each list item’s grid affects its children, with no reference to the other list items’ grids.  We can write the template we want, like so:

form ul li {display: grid;
  grid-template-columns: [start label] max-content [input] 1fr [end];}

Each list item a grid, but to what end?

That will get us a result almost precisely as if we’d applied no grids at all.  The only difference is that the input elements will all be as wide as their columns, according to the CSS Grid specification.  Chrome fails to do this last bit correctly, whereas Firefox Nightly gets it right, but otherwise the layout is essentially the same.  You can see this in the #form1 example on the test page.  (Remember, you have to have a current grid-supporting browser for the examples to correspond to what I’m talking about here.)

We can get closer to our goal by experimenting with a fixed-width grid column for the labels, figuring out the width of the widest label, and then just making all the label columns be that wide.  That would be written something like this:

form ul li {display: grid;
  grid-template-columns: [start label] 7em [input] 1fr [end];}

Using fixed-width columns to simulate a single column.

That works pretty well so long as none of the labels ever change — if a label is added (or edited) to be wider, it will wrap to multiple lines.  Alternatively, if the longest label is dropped or edited to be shorter, the label column won’t resize down.  It will just stay the same dumb fixed width until someone hand-adjusts it.  And honestly, at that point I may as well be using flexbox, which would do this version of the layout just as well, and would be more widely supported for the near to intermediate future.  At any rate, you can see the grid version of this in the #form2 example on the test page.

But what if we could set a grid on the ul element, and then make all the li elements grids that use their parents’ grid for the layout of their children?  That’s exactly what subgrids do.  This is the solution we’ve been seeking, in basic form:

form ul {display: grid;
  grid-template-columns: [start label] max-content [input] 1fr [end];}
form ul li {display: grid; grid: subgrid; grid-column: start / end;}

Here the list items establish grid containers, thus making the label and input elements into grid items like before, but are stretched across the two columns of the ul while using those very grid lines for laying out their child elements, plus those children influence the placement of their grandparent’s grid lines.  Thus, we can specify things like max-content for the label column size and have it Just Work™.

Or it would Just Work™, except that as I write this, none of the grid implementations have subgrid support.  Authors who want to create the kind of layout we’re after have to compromise in one way or another — either by faking the content-sizing with a fixed-width column, or by stripping down the markup until there’s barely anything left — thus sacrificing accessibility, progressive enhancement, and general best practices, as Fantasai illustrated in her article.

You can probably see a lot of other ways in which subgrids would be useful.  Take defining a full-page grid, the kind with a bunch of regularly repeating grid lines onto which various elements can be attached, like this one or this one.  In this scenario, being able to designate each section of the page a subgrid would let you have all the pieces inside that section participate in, and lay out in relation to, the overall page grid.  Without subgrids, you’d either have to make every element you want to lay out a child of the body element (or whatever you used to create the page grid), or you’d have to recreate segments of the page grid in each nested grid, and give up any hope of columns that can flex with the contents of multiple page sections.  Neither solution is appealing.

This is why I’ve come to the same conclusion other grid experts (like Rachel) already have: subgrids are a major component of grid layout, and should be a part of any grid layout implementation when it emerges from developer-preview status.  If that means delaying the emergence of grids, I think it’s worth it.

I say that because our field has a tendency to glom onto the first iteration of a technology, learn it inside out, hack around its limitations, and then ignore any future improvements unless somehow forced to do so.  If grid layout is released without subgrid support, we’re risking shoving subgrids into the back of the author-practices cupboard for a long time to come.  And along with it, potentially, grids themselves.  The frustration of trying to build layouts without subgrids will quickly become overwhelming for all but the simplest cases, leading authors to try and then discard grids as a serious tool.

First impressions matter.  CSS itself suffered for years from the initial impressions designers formed of “boring, boxy” layouts, and it still suffers from the handicap of being a presentation system without a layout engine at its core.  Grid layout is the first serious candidate to fill that hole in the past two decades, and I don’t want to see them hamstrung from the outset.  Subgrids are essential to the adoption of grids.  I hope they’ll be implemented as soon as possible, and before grids are pushed into public release channels.

A Decade Apart

Published 9 years, 5 months past

It was ten years ago today that Jeffrey, Jason and I stood up in front of a little over a hundred people in an oversized classroom space in the upper back corner of The Franklin Institute in Philadelphia, PA, and kicked off the very first An Event Apart.

Just the three of us, talking throughout the single day of the event, trading off talks until lunch and then throughout the afternoon.  The slides, most of them running on S5, were projected onto a pull-down Da-Lite screen, and we tapped the screen with our hands to draw attention to bits of design (or code).  In the audience, there was an attendee who’d flown in from Tokyo, just to be there.  Another from London.  We were staggered to think anyone had come more than half an hour’s drive.

It was as lo-fi as it gets without paper megaphones, and we made a whole slew of rookie organizer mistakes — but we got the essentials right, the same essentials we’ve kept alive all these ten years: present in-depth, practical, higher-level content to an audience of savvy web folks, and treat them right.  As we’ve grown over the years from one day to two to three, and from three speakers to twelve (and sometimes eighteen), we’ve kept one central goal in mind: to create a conference we’d gladly pay to attend, every time.  And while I’m admittedly biased, I believe we’ve pretty much succeeded at that goal.

Ten years, which is a lifetime ago and then some, and still rolling strong.  We’re calling it A Decade Apart, because why wouldn’t we?  To celebrate, we’ll be doing some fun stuff at all our events in 2016, special giveaways on top of the usual giveaways, the return of some audience favorites…but I don’t want to give away too much just yet.  Suffice to say, we’re planning on making this our best year ever, and everything’s shaping up to deliver on those plans.

If you’ve been to a past Event Apart, thank you — and if you have a memory to share, I’d really love to hear about it in the comments.  And whether you’ve been or not, I hope to see you in 2016!

In Gratitude

Published 9 years, 5 months past

By most measures, I’ve had a pretty damn successful career.  I’m not at “I can retire today” money and nobody’s erecting statues with my visage on them, but only the first of those holds any interest for me, and I’m not expecting it any time soon.  (At current rates of saving and investment return, I should reach that state… right around the traditional age of retirement, actually.)

Of course, I’ve written a bunch of books that earned me some royalties, but books are not a way to become wealthy, unless you’re crazy lucky.  Yes, you have to put in the work to write the book, but in the end, whether your book makes you coffee money or high-end-chrome coffee machine money is down to forces entirely outside your control.  Certainly outside mine.  When I wrote my first CSS book, nobody expected CSS to be more than a slowly dying niche technology.  When I wrote the second, CSS had been declared dead twice over.  When I wrote the third and fourth, it was just starting to revive.

I invested tons of effort and time into understanding CSS, and then to explaining it.  Because I was lucky enough to put that work toward a technology that turned out to be not just successful, but deeply important to the web, the work paid off.  But think of the people who put that same kind of time and effort into understanding and explaining DSSSL.  “Into what, now?” you say.  Exactly.

Similarly, when Jeffrey and I set out to create An Event Apart, there was no assurance that there was a viable market there.  Nearly all the old web conferences had died, and those few that remained were focused on audience very much unlike the one we had in mind.  Luckily for us, the audience existed.  We worked really hard — still work really hard — to find and speak to that audience with the topics and speakers we present, but it would all have come to nothing if not for the sheer luck of having an audience for the kind of show we wanted to create.

For most of my adult life, I’ve been keenly aware of the incredible amount of luck that goes into success, and the awareness only grows as the years pass by.  Just putting in a lot of hard work isn’t enough.  You also have to have the sheer good fortune to have that hard work pay off.  You can sink everything you have, money and soul, into building a place in life, only to have it all sabotaged and swept away by random chance.  You can invest very bit of your life and fortune into an outcome that blind fate renders impossible.

So yes, I worked hard to understand the web, and to explain the web, and to write books and talks, and to create a conference series, and everything else I’ve done over the years — but I was supremely lucky to have that work come to something.  An incredible combination of time and place and interest and birth and a million million other things made that possible.

More to the point, the existence of people interested in what I have to say made that possible.  So I thank you, one and all, for all that and still more.  Thank you for rewarding and redeeming the work I’ve done.  Thank you for being of like mind.  Thank you for your support.  Thank you for listening.  Thank you.

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

Browse the Archive

Earlier Entries

Later Entries