Findings of the A List Apart Survey 2008

Published 15 years, 7 months past

At last—at long, long last!—the results of the A List Apart Survey 2008 are available, along with the anonymized raw data we collected.

There are a great many reasons why it took so long to get this out the door.  A big part is that it’s almost entirely a volunteer effort, which means it happens in our “free time” (and there the word “free” has a couple of meanings).  I say it’s almost entirely a volunteer effort because the detailed analysis is actually done by a pair of professional statisticians, who are paid for their time and expertise.  They did a great job once more, and did it in a reasonable time frame.  It just took us a while to get them the data to analyze, and then a while longer to take their report and findings and process them into report form.

The biggest change this year is that we’re publishing the results as HTML+CSS instead of a PDF.  This greatly increased the challenge, because it was important to me that the data be presented using styled tables, not images.  That’s easy like cake if all you’re doing is putting them up as visual tables, and we certainly do that for some of the figures.  In the other cases, where we have bar charts of varying kinds, things got difficult.  I managed to devise solutions that are 99.9% effective, and I’m both proud of and frustrated by those solutions.  Proud, of course, because I managed to wring three-stack bars out of table markup; frustrated because of the markup I had to construct to make them possible.  I think this report represents more than half my lifetime usage of the style attribute, but unfortunately there’s no way (using just CSS) to say {width: content;}.

So why not use JavaScript to do that, or to just replace the tables with canvas-drawn charts?  I did consider both, but decided that I would push as far as I could with plain HTML+CSS. 

A few implementation notes:

  • I used HTML 5 in order to step around some previously unrealized limitations of HTML 4—did you know tfoot has to come before tbody in HTML 4?  I didn’t.  I did not use elements like header and footer due to known problems in Firefox 2 and related browsers, which mangle pages containing those elements.  Instead, I took the same path Jon Tan recommends, and classed divs using those names for later, easier conversion.

  • The tables which underlie the charts do not have summary attributes.  If a group of civic-minded individuals would like to write useful summaries, please let me know in the comments and I’ll let you know how best to submit them.  Similarly, I did my very best to make sure all the table headers had accurate scope values, but if I botched any, let me know.

  • I’m aware that Opera shows horizontal scrollbars on most chapters of the report.  This is due to its refusal to apply overflow to table boxes, which according to my recent reading of the CSS 2.1 specification is the correct thing to (not) do.  Every other browser I tested does apply overflow to table boxes, though, which I found most useful.  I tried applying overflow: hidden to a few other boxes, and that got rid of Opera’s horizontal scrollbars, but it also cut off actual content in some other browsers.  I chose a cosmetic problem in one browser over loss of content in others.  The best fix I’ve devised is to wrap the tables in divs and apply overflow: hidden to those divs, but I didn’t want to rush the fix and botch it, so it didn’t make it in time for first publication.  I expect to get it in shortly after publication.

  • In a like vein, there are a few combo charts where a bar goes shooting off the right side of the chart in IE7.  This appears to be due to some kind of width-doubling problem that’s only invoked on elements with a style attribute when the row header goes to two lines instead of being just one.  Googling for an explanation yielded no joy, and a lengthy series of attempts to hack around the problem came to nothing.  If anyone knows how to counteract that problem other than preventing the header text from going past a single line, I’d love to hear it.  (Update: I’ve implemented the “fix” of preventing line-wrapping in the report, so there aren’t any off-the-page bars right now, but you can see an example of the problem on this test page.)

  • Surprisingly, the charts mostly work in IE6.  The exception is some of the triple-stack charts, where data points overlap when the rightmost sub-bars get too small, and also the double-width bars mentioned in the previous point.  I don’t really have a fix for this short of upgrading the browser, but if somebody finds one, I’d be happy to test it out.

On that last point, if there are questions or suggestions surrounding the implementation of the report, we can certainly discuss them here.  With regard to the survey and report itself, though—that is, the questions asked and the results we’re publishing—please direct those thoughts to the comments section of the ALA article announcing the report.  I’m hoping that we’ll have the 2009 survey up within a few months, so comments on what we asked and how we asked it, what we didn’t ask but should have, and that sort of thing could well have a direct impact on the next survey.  But please put those on the ALA site, where more people are likely to see them.

It’s done, it’s out, it’s yours—both the report and the data, about which I’ll soon write a little bit more.  Read the report, or produce your own report using the data.  Just always know that when we publish these reports, we do not mean for them to be the final word.  No, what we always mean is for them to be the first words, a starting point, a place from which to grow.  What comes next is as much up to you as anyone else, and I can’t wait to see what you do.

Comments (35)

  1. Slightly tangental (but you mentioned it in passing): you can repair Firefox 2/ Camino HTML5-induced tummy upsets with some scripting:

    http://blog.whatwg.org/supporting-new-elements-in-firefox-2

  2. How was <tfoot> having to come before <tbody> a limitation? It still renders at the bottom of the table.

  3. Bruce: yes, I could, but I’m not happy with DOMming my way out of parsing problems. Nor are you, it would seem, based on my last visit to your blog. Of course, I may end up doing some DOM-based repair for some other problems, in which case I’ll think about adding that.

    Justin: I wasn’t willing to assume that would be the case in actual browsers. I had enough trouble trying to stamp out the layout problems I did encounter without gambling on creating more.

  4. Eric, the whole point of is that, if necessary or desirable, the footer can be displayed before all of the table rows are received over the wire—or can still be displayed if the table is truncated. It’s a feature, not a limitation, and any Web agent worth its salt should render at the bottom as you would expect. As far as I know there exist no interop problems there.

  5. J, I don’t know of any interoperability problems with bottom placement of ‘tfoot’ either. Of course, so far as I knew there were no such problems with things like inline styling and overflowing tables, and I was wrong on both counts. As I said, I didn’t want to gamble on being surprised in an area where I had scant experience.

    Besides, it’s not that big a deal. HTML 4 has a structural requirement that HTML 5 does not. I like how HTML 5 does it better. I went that route.

  6. Eric, beautiful work.

    I went looking for the IE7 problem you mentioned (“a bar goes shooting off the right”) but couldn’t see it anywhere. I browsed the whole report on IE7 on Vista and didn’t see any issues.

  7. Pingback ::

    Jeffrey Zeldman Presents : ALA Survey Findings Up!

    […] This year’s survey findings, culled from answers provided by over 30,000 ALA readers, are now up for your pleasure on a specially designed website. We’ve sliced and diced the data, making sense of complex interrelationships, and displaying the results in miniature CSS masterworks by Mr Eric Meyer. (More about the CSS.) […]

  8. Dan, my apologies– I decided I needed to fix the bar problem with a nowrap solution in the report. Here’s an example of the problem showing the chart with and without the “fix” in place.

  9. Pingback ::

    Renata Fros, Web Designer » Blog Archive » Findings from the A LIST APART Survey, 2008

    […] Eric Meyer did a really phenomenal job of laying this out HTML/CSS-wise (obviously). It’s always a treat […]

  10. Eric, thanks for posting the IE examples.
    If you give the rows with wrapped lines a height of 3em or so then IE doesn’t seem to freak out. It means more style statements in the code, but it does allow you to wrap lines, which I think looks better.

  11. Hi Eric!
    What is exactly the purpose of the div tag inside every td wrapping the ?
    FS

  12. Pardon me but I fail to see what is so very impressive about this. All I can see is variable column widths.

  13. I’ll have to try that, Dan—though doesn’t that spread the bars fairly far apart?

    FS, those are used to get the charts’ bars to be the correct sizes. Lines 45-56, 71, and 85 of charts.css may provide some clues as to how.

    You’re pardoned, Cole. Now go and sin no less.

  14. It does spread the bars a bit apart. If you only apply the height to the row with the line wrap then I don’t think it’s significant. If you apply it to every row it does add more whitespace to the overall chart. Here’s my sample.

    And you’re sure doing a lot more than just variable width columns. I think it’s pretty ingenious how you set the two cells to 50% width, the p to the percentage width you want the bar to be and then the div to 200%. It all works out beautifully.

  15. Pingback ::

    The WHATWG Blog » Blog Archive » This Week in HTML 5 - Episode 29

    […] Meyer uses HTML 5 to present the results of the “A List Apart Survey […]

  16. Christ, man, that’s a nice looking report.
    I am inspired and slightly awed at at your determination to use markup and css for the graphs.
    Thanks!

  17. Whatever happened to SVG?

  18. “I”m not happy with DOMming my way out of parsing problems. Nor are you, it would seem, based on my last visit to your blog”

    Depends. For Firefox 2/ Camino, I figure that most people will upgrade to the newest version of Gecko that doesn’t have the parsing error. But I do apply DOM-o-plast for IE users because they tend not to upgrade so fast and even the newest versions have the same problems.

    This inconsistency of approach means that I am evil and not to be trusted.

  19. Very beatuifulll…and nice examples too

  20. Pingback ::

    The Survey for People Who Make Websites (2008) « Cambridge University Design / UX group

    […] Oh, and check out those lovely, simple, CSS-powered horizontal bar charts!    Eric Meyer has some interesting things to say about producing those, if you’re interested, and it links to my previous post about this […]

  21. As always, an amazing display of CSS chops. Thanks for sharing the background details and the associated trials and tribulations. In the past, those kinds of headaches have confounded my efforts to display tables as charts via CSS. Great to see that you stared ’em down.

    Lately, my approach has instead been to use a bit of JavaScript to convert plain tables into Google Charts. Doing that, it turns out that bar charts, pie charts, and line charts are pretty easy to wrangle. I blogged about it with an example here: Turn Your Tables into Spiffy Charts

  22. Well, I don”t know of any device that even bothers with tfoot, which is solely for @media print {} in the first place.

  23. Great work as always and super short ans sweet CSS work. That being said, I’ve a question if you don’t mind:

    I understand the how and why your reset.css does what it does, but why can’t you add :focus to wherever you add :hover just in case there might be someone who uses a keyboard in a browser that’d recognise the dynamic pseudo class selector to figure out where they are in the documents?

  24. Dan, thanks a million for your work on this problem. I’m thinking I’ll sneak in your solution via an ‘iefix’-type class on the charts that need it.

    Right enough, Bruce— though I feel compelled to mention that while Firefox users can upgrade their way out of the parsing problem, Camino users can’t unless they’re willing to run beta software. The auto-upgrade notices in Camino still push 1.6.7, which is based on the FF2 engine.

    Anyway, I’m going to revisit some of that stuff in the near future, as I prepare to also revisit the AEA markup.

    Josh, as I said, we almost did that (or at least something very much like it). I was a little wary of taking that approach with Google Charts, though, since it meant the charts would fail if the GC service were unavailable. And I didn’t want to pull the images off GC and embed them for accessibility reasons. Had we decided to go the JS route, I’d probably have used something like Bluff with a JS script as a go-between to scan the tables and construct the Bluff calls. But why do that when I could pound my head against the CSS and see if I could pull off the seemingly impossible?

    Joe, do you mean you don’t know of a device that bothers to use tfoot to create a running table footer (as thead should create a running table header) in paged media?

  25. No problem, glad to help. You did all the hard work. Although last time I did get a t-shirt ;)

  26. Pingback ::

    A List Apart Survey 2008: i risultati | Edit - Il blog di HTML.it

    […] si tratta di un utilizzo intelligente di tabelle, div e paragrafi). Meyer ha postato sul suo blog alcune considerazioni al […]

  27. Pingback ::

    Weekly Links #48 | GrantPalin.com

    […] Findings from the A LIST APART Survey, 2008 The results of the annual web developer survey. Comments from Eric Meyer. […]

  28. Pingback ::

    Safely Ignored » Progressive Charts

    […] has. Now Eric Meyer (who helped popularize the slant technique) brought it to mind again with his CSS bar charts (granted, without resorting to […]

  29. Curious why you used b tags instead of strong within the h3’s?

  30. eric-

    well, you are to be congratulated heartily
    for eating your own dogfood, as well as
    for being honest about how bad it tastes.

    hopefully it shows how far you have to go,
    especially since you needed to reach ahead
    to html5 just to accomplish what you wanted.

    i, for one, won’t pay much attention to you
    standardistas until you can convince even
    the unsophisticated among us how _easy_
    it is to create ordinary stuff like these charts,
    not how _hard_ it is, or what kinds of hoops
    we need to jump through for all the browsers.

    which, i would hazard a guess, means that i
    won’t be paying any attention any time soon.

    but surely you must be glad that you no longer
    have to eat that .pdf, along with your integrity.

    no matter how much work that might have took,
    i’d guess that that alone was well worth it to you.

    i repeat, congratulations on a job well done…

    -bowerbird

  31. James, I did that because I didn’t want to strongly emphasize the figure numbers, and also because in a non-CSS environment the headings would already be boldfaced, so using b changed nothing. Basically, since all I needed was a non-semantic element on which to hang some presentation, I used a non-semantic presentational element.

  32. Eric, for the Totals columns in the Survey graphs, whereby you considered :last but went with cell-classing (and which you discussed the personal dilemma in AEA’s Day II talk)… Could you have used col tags instead, styling the final col as needed? I’m unsure of the browser support for this across the spectrum (and I’m being lazy by not testing myself), but it seems a viable option, and the tradeoff of multiple td classes with “last” for a single set of col’s with the final col classed for styling seems to be a potential improvement. Thoughts?

  33. Awesome work Eric… there’s only thing that I am hung up on. Can you explain your methodology behind the div styles within charts.css? Specifically, lines 45-56, 71, & 85 (as mentioned in comments #13 & #14).

    I’m having difficulty figuring out what the width percentages are accomplishing.

    Thanks again for your great CSS work!

  34. It looks like the link at the outset of this article isn’t working anymore, I get the (quite amusing) 404 page from ALA.

    I think this is it:
    http://aneventapart.com/alasurvey2008/

    [The link is working again—it’s supposed to point to the article announcing the results. -E.]

  35. Pingback ::

    Findings from the A List Apart Survey, 2008 | Renata Fros, Web Designer

    […] Eric Meyer did a really phenomenal job of laying this out HTML/CSS-wise (obviously). It’s always a treat […]

Add Your Thoughts

Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand.

HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

if you’re satisfied with it.

Comment Preview