Posts in the Projects Category

It’s a little bit hard to comprehend just how incredible a year we’ve had at An Event Apart.  Our colleagues in the audience as well as on stage have been consistently sharp, engaging, and all-around amazing, and I don’t think Jeffrey and I could thank everyone enough even if we were given three lifetimes to tackle the project.  With all seven shows this year selling out (some months in advance), we’ve taken the next step and have scheduled eight shows next year, a figure that occasionally causes me to go a little short of breath at the sheer wonder of it all.  I think back on the hundred-odd people who filled the room at our very first event, tucked away in the upper back corner of Philadelphia’s Franklin Institute back in 2005, and can scarcely believe how far we’ve come.

If you’re inclined to join us in 2013, and I really hope you are, here are the cities and dates:

• Atlanta – February 18-20
• Seattle – April 1-3
• San Diego – May 20-22
• Boston – June 24-26
• Washington, DC – August 5-7
• Chicago – August 26-28
• Austin – September 30-October 2
• San Francisco – December 9-11

Back to San Diego — hooray!  I looove to visit San Diego.

As was the case this year, all eight of 2013’s shows will feature a mix of new and familiar speakers presenting all-new talks shedding light on old problems and new ideas.  Thus not every show’s lineup is yet complete:  while we already have some speakers confirmed and announced for every event, we’re leaving the later shows in the year open so we can add fresh speakers and timely content.

Since all eight shows went on sale last month we’ve already had a bunch of people register, so you should definitely get those approval processes moving now if you want to avoid being shut out.  We had lengthy waiting lists at every 2012 show, and there were very few cancellations.  It never feels good to turn people away, but the venues’ capacities are what they are!

Being a part of An event Apart has been an amazing experience for me and for so many people, and our overriding goal is to make 2013 even better.  I hope you’ll join us!

• An Event Apart 2013 was published on Monday, September 10th, 2012.
• It was assigned to the An Event Apart and Projects categories.
• There have been two replies.

On Tuesday — and I fully acknowledge the fact that it’s taken me until now to blog this is emblematic — A List Apart published the results of the fifth annual A List Apart Survey for People Who Make Websites.  This includes anonymized data sets for the bulk of the survey, as well as standalone data sets for postcodes and a few of the answer sets for questions that allowed “Other” as an option.  (Note that these last were shuffled-then-sorted, and were not filtered for potentially objectionable content.  They are what they are.)

If you really want the TL;DR version, the results are largely the same as they’ve been in the past.  The gender ratio, for example, is still in the vicinity of 5-to-1 male-to-female, with half a percent answering Other (a new option in the 2011 survey).  Most respondents are in the age range 19-44 and live in the United States.  And so on.  That might sound like I’m bored by the results, but their very consistency even as the number of respondents has dropped over five years fascinates me.

It did take quite a while to publish the results.  I feel personally very bad about the delay, because I run the numbers and it just took me a long time to get them run.  Partly, I admit, I put it off because some of the numbers in previous years were a royal pain to generate, thanks in part to the way the data is formatted and in part because of the fine slicing that was done.  This was finally addressed through various means, and now the report is done.  I can’t thank Sara Wachter-Boettcher enough for her keen editing eye and firm strategic oversight, not to mention writing all the commentary text to accompany the charts.  If not for her, the report might still not be done.  And of course without the unwavering support and dedication of Jeffrey Zeldman, the survey might not have existed at all.

So we’ve done this five times, and the results are consistent.  What now?  There is much to discuss, and the answers aren’t yet clear; but I do know that this project brings me more professional pride than almost anything I’ve ever done.  It tells us a lot about ourselves — and in a profession that is often characterized by single-person “web teams” and distributed offices, one which may never have a certification process or other form of registry, that’s something valuable.  Thank you for helping us see ourselves a little bit more clearly.

• Results From The Survey, 2011 was published on Thursday, September 6th, 2012.
• It was assigned to the Projects and Web categories.
• There have been five replies.

I’ve been a fan of “The Cicada Principle” since it was first published.  After wandering through a CSS gradients gallery or two back in April, it occurred to me that it ought to be simple to merge the two things.  So I did: thus was born “Cicadients”.  It took me until now to actually blog about it because, well, you know, things were, hey, what’s that weird thing over there?

What?

As a recap, the Cicada Principle states that if you pick a few simple patterns that repeat at prime-number intervals, you can create complicated patterns that only repeat at intervals that are the product of the individual intervals.  For example, if you have patterns that repeat every 3, 5, and 7 pixels (respectively), the combination of the three will repeat every 3×5×7 pixels, which is to say every 105 pixels.  Bump up the intervals, and you get some truly staggering numbers.  For example, shift up to 7, 11, and 13 pixels and their combination repeat every 1,001 pixels; combining 11, 13, and 17 gets you 2,431; combining 13, 17, and 23 yields 5,083.

The examples presented in the original article use semi-opaque PNGs to achieve this effect.  All I did was replace their images with images of my own; to wit, CSS gradients.  (Yes, gradients are images, every bit as much as any PNG.  They’re just described differently.)  In doing so, I not only reduced server hits, but I also saved a fair number of bytes.  In the first case, I did so while achieving pixel-perfect fidelity to the original.  In the second case, I didn’t make it exactly the same as the original, but I got fairly close in 0.63KB (2.81KB with prefixes).  I could probably get closer to the original with a little more effort — a couple of my gradients are a little too smeary — but that will probably wait a while, if I ever get to it at all.  But, again, the final result is a kilobyte or two; the original example was 23KB plus extra server hits.

That was the real reason for my efforts, aside from the simple pleasure of doing it: to find out how much more efficient a gradient could be than a raster image in appropriate situations.  I had expected some savings with gradients, but I was frankly astounded by how much was saved.  You can do a lot more with gradients than sunset backgrounds and lickable button highlights.

Of course, gradients are not right for every situation: the third example in “The Cicada Principle”, for example, should only be done with gradients as an example of how not to do it.  Possibly also as a public declaration of deep masochistic tendencies.  Either way, you’d probably crash browsers, and that’s currently the job of radial gradients.

I’ll be very interested to see if people come up with their own cicadient examples.  If you do, let us know about them in the comments!

• Cicadients was published on Friday, June 22nd, 2012.
• It was assigned to the CSS and Projects categories.
• There have been ten replies.

Just a quick followup on HSL color visualizations and CSS: The Definitive Guide.

To take those two things in reverse, I got word from my editor that color is definitely an option for the book, though the exact form it will take is not 100% certain.  The options range from an insert of color plates to printing color on a per-page as-needed basis, and it’s hard right now to know what will make the most sense for the book and its price.  We’re hoping for the per-page approach, but it will depend on just how fast color prices plunge in the near(ish) future and what the book requires.  The glorious, glorious upshot is that I can abandon all thought of grayscale requirements and only concentrate on avoiding light yellows, which I guess print badly.

As for visualizations, I created another to go with the HSL-16 and HSL-147 visualizations I mentioned in an earlier post:

• Getting HSL from RGB  —  a look at how the arrangement and fading of the three primaries yields the complete hue wheel.  Its point is a little less obvious than the others, but (I hope) only by a little.  If you’ve ever wondered how RGB and the hue part of HSL relate to each other, this visualization should help answer the question.

I think I’m done with visualizing colors for now, but I think I said that before, so you never know.  I mean, you know, colors, man!  What do they mean?

• Visualizing Colors Again was published on Thursday, June 14th, 2012.
• It was assigned to the CSS and Projects categories.
• There have been seven replies.

I’ve been working through and rewriting the chapters of CSS: The Definitive Guide for its fourth edition, and at present I’m nearing the end of chapter 4, “Values and Units”.  That means I just worked through the color values, which required a lot more of a rewrite than you might think.  After all, when the third edition came out, RGBa, HSL, and HSLa weren’t viable options, so they didn’t get coverage.  Expanding the color-values section to incorporate them posed two major challenges.

First, I couldn’t just drop them in as add-ons; the whole section had to be partially rearranged, and chunks of the text rewritten or replaced.  Okay, yes, I admit, that’s par for the new-edition course, and I’m not complaining so much as describing.  The far more troubling challenge: how to explain HSL in a grayscale book.

(I should note that I’m hoping to convince O’Reilly to make the move to color, even though that likely means reshooting damn near every figure in the text.  Even if full color for 600-700 pages is not economically viable, which has always been the problem in the past, then I’m hoping for at least a set of color plates.  We’ll see!  At present, though, I have to assume we’ll be committing grayscale to paper.)

Partly the challenge here is one of clear explanation and illustration, which is never easy even in the most ideal of environments; but the other part is that I’ve never really been comfortable with HSL.  I know it’s held to be far more intuitive than RGB, but I have 30 years of RGB experience and next to no HSL experience.  I can’t help but have that color my perception (ah HA ha).

In an effort to overcome my discomfort, I started messing around with the relationships between HSL and more familiar colors, starting with keyword sets.  I’ve spun two visualizations out of that effort:

• HTML4 Color Keywords in HSL — wherein I map the sixteen color keywords defined in HTML4 onto an HSL color wheel and grayscale bar.  What I really like about the end result is the clear evidence of careful color selection.  It’s a balanced set, at least mathematically, and seeing the relationships between the colors and thus how to present them helped me develop a fair amount of HSL intuition.

  This was also an excuse to attempt cleverness with CSS Transforms.  The results please me.

• SVG/CSS3 Color Keyword Distribution — mapping out how the full set of 147 SVG/CSS3 (neé X11) color keywords are distributed around the hue wheel.  Not very well, as it turns out.  I don’t know that this taught me very much about HSL itself, but I did get a firmer grip on the interplay between saturation, lightness, and luminance, all of which helped a great deal in the arrangement of the ‘spikes’.

  This one turned into an excuse to play with canvas drawing, after Mårten Björk responded to a Twitter request with a huge head start on the problem.  Originally, this was going to be another Transformapalooza, but I’m glad it went in this direction instead.

Thanks to these visualizations and (more importantly) the programming and thinking I did to create them, I’m now much more comfortable with HSL.  As a result, the “HSL and HSLa Colors” section of chapter 4 is a lot better than it would have been.  I even came up with what I think are some pretty good ways for illustrating HSL in a grayscale environment and ways to link it to the RGB model for the benefit of people like me.  The book will be a lot better for it when it finally comes out.  In the meantime, I hope you enjoy the visualizations!

• Visualizing Colors in HSL Space was published on Monday, June 4th, 2012.
• It was assigned to the CSS and Projects categories.
• There have been seven replies.

Back on Tuesday, A List Apart opened the 2011 edition of The Survey for People Who Make Web Sites, the fifth annual effort to learn more about the people who work in the web industry.  If you haven’t taken it yet, please do so!  It should take about ten minutes

I’m proud to have been a part of this effort since its inaugural launch back in 2007.  It’s a major undertaking, mostly in analyzing the data and turning that into a detailed report, but it’s more than worth the time and effort.  Before the Survey, we really didn’t know very much about who we were as a field of practice, and without it we wouldn’t have as clear a picture of who we are today.

There have been growing pains, of course, chief among them UCCASS, the survey software we’ve been using since the outset.  Its limitations and lack of updates finally pushed us to find another platform, and we chose to move over to Polldaddy.  Many thanks to the Polldaddy team for giving the survey a home and helping me figure out the best strategies for recreating the survey.  (And also for putting up with my occasionally testy feature and support requests.  Sorry, gang.)

Due to differences between UCCASS and Polldaddy, we ended up restructuring the survey into two distinct paths.  I think this change actually speeds the process of taking the survey.  I’m pretty sure just about anyone could get through it in under ten minutes.

Unsurprisingly, participation in the survey has dropped over the years; last year’s survey had a bit more than half as many respondents as the first-ever survey back in 2007.  Tellingly, the actual results have been pretty consistent over the years.  I’d really like to see how those results stand up to an increase of respondents, so please:

• If you haven’t taken the survey yet, kindly set aside ten minutes and do so.
• If you have taken the survey, thank you.  Now, spread the word!  If you could post a quick link to any mailing lists, web forums, newsgroups, or other professional communities in which you participate, it will be an enormous help.  The more practitioners we have answer, the better the results.

As always, the survey will close a month after it opened; and as always, a detailed report will be published — feel free to peruse the reports from 2007 (PDF), 2008, 2009, and 2010 — along with anonymized data sets for independent analysis.  Together, they form a picture, but one that is still being drawn.  Please help us to add the most essential detail — you!

• The Survey, 2011 was published on Friday, November 18th, 2011.
• It was assigned to the Projects and Web categories.
• There have been no replies.

For very little reason other than I was curious to see what resulted, I’ve compiled a list of various CSS modules’ version histories, and then used CSS to turn it into a set of timelines.  It’s kind of a low-cost way to visualize the life cycle of and energy going into various CSS modules.

I’ll warn you up front that as of this writing the user interaction is not ideal, and in some places the presentation suffers from too much content overlap.  This happens in timelines where lots of drafts were released in a short period of time.  (In one case, two related drafts were released on the same day!)  I intend to clean up the presentation, but for the moment I’m still fiddling with ideas.  The obvious one is to rotate every other spec name by -45 degrees, but that looked kind of awful.  I suspect I’ll end up doing some sort of timestamp comparison and if they’re too close together, toss on a class that invokes a -45deg rotation.  Or maybe I’ll get fancier!

The interaction is a little tougher to improve, given what’s being done here, but I have a few ideas for making things, if not perfect, at least less twitchy.

I should also note that not every module is listed as I write this:  I intentionally left off modules whose last update was 2006 or earlier.  I may add them at the end, or put them into a separate set of timelines.  The historian in me definitely wants to see them included, but the shadow of a UX person who dwells somewhere in the furthest corners of my head wanted to avoid as much clutter as possible.  We’ll see which one wins.

Anyway, somewhat like the browser release timeline, which is probably going to freeze in the face of the rapid-versioning schemes that are all the rage these days, I had fun combining my love of the web and my love of history.  I should do it more often, really.  The irony is that I don’t really have the time.

• CSS Modules Throughout History was published on Tuesday, September 27th, 2011.
• It was assigned to the CSS and Projects categories.
• There have been two replies.

Now available: the results from the A List Apart Survey for People Who Make Web Sites, 2010.  This is the fourth industry snapshot we’ve compiled, and the story that’s emerged over that time is proving to be pretty consistent.  You can get a high-level view from the Introduction, and then dive deeper into the results in the following chapters.  And, as is traditional, the Addendum contains links to the full (anonymized) data set in three formats for your own analytical investigations.  We’d love to see what you come up with!

Something that surprised me quite a bit was that in 2010 we got about half the number of respondents we’ve gotten in past years — not quite seventeen thousand participated in 2010 instead of just over thirty thousand as we saw in previous years.  I’m not quite sure what to make of that.  Is the industry shrinking?  Did we not get the word out as effectively?  Was it a bad time of year to run a survey?  Are people getting tired of taking the survey?  There’s no real way to know.

At least there weren’t any wild swings in the results, which might have indicated we’d lost some subgroups in disproportionate numbers.  Whatever caused the drop in participation, it appears to have done so in an evenly-distributed fashion.

Regardless, I’d like to see higher participation next year, so if anyone has good suggestions regarding how to make that happen, please do let me know in the comments.

We plan to run the 2011 survey in the next couple of months (and I’ll post a bit more about that soon) but for now, I hope you find the 2010 results an interesting and useful look at who we are.

• Results of The Web Design Survey, 2010 was published on Monday, June 27th, 2011.
• It was assigned to the Projects and Web categories.
• There have been eleven replies.