Monday, 26 December 2011

Facebook, Twitter and Google Plus shun HTML, causing the infographic plague.

By choosing images over links, and by restricting markup, Facebook, Twitter and Google+ are hostile to HTML. This is leading to the plague of infographics crowding out text, and of video used to convey minimal information.

graph from Google trends of rising incidence of 'infographic' since 2009

The rise of so-called infographics has been out of control this year, though the term was unknown a couple of years ago. I attribute this to the favourable presentation that image links get within Facebook, followed by Twitter and Google plus, and of course though other referral sites like Reddit. By showing a preview of the image, the item is given extra weight over a textual link; indeed even for a url link, Facebook and G+ will show an image preview by default.

Consequently, the dominant form of expression has become the image. This was already happening with LOLcats and other meme generators like Rage Comics, where a trite observation can be dressed up with an image or series of images.

Facebook, Twitter, Google+, Y U no like HTML, just pix?

Before this, in the blogging age, there was a weight given to prose pieces, and Facebook and Google preserve some of this, but the expressiveness of HTML through linking, quoting, using images inline, changing font weight and so on, is filtered out by the crude editing tools they make available.

Feeds and feed readers started out this way too, but rapidly gained the ability to include HTML markup. Twitter went back to the beginning, and added the extra constrain of 140 characters because of it's initial SMS focus. Now it is painfully reinventing markup, though the gigantic envelope and wrapper of metadata that accompanies every tweet. This now has an edit list for entities pointing into it, and instructions for how to parse this to regain the author's intent is part of the overhead of working with their API.

Image links, however — at least those from recognised partners — are given privileged treatment. Facebook and Google have emulated this too, leading to the 'trite quote as image' trope. The spillover of this to news organisations became complete this year, with blogs and newspapers falling over themselves to link to often-tendentious information presented in all-caps and crude histogram form.

So here's my plea for 2012: Twitter, Facebook, Google+: please provide equal space for HTML. And for authors and designers everywhere, stop making giant bitmaps when well-written text with charts that are worth the bytes spent on them could convey your message better.

Update: My son made a Rage Comic version of this post (with an explanation) why.

64 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Wow, now that's bizarre. I went straight from the summary on Facebook to the comment section without reading that you'd already said everything I was going to say in my comment in the bulk of your post.

    The Internet has destroyed my ability to read.

    ReplyDelete
  3. That rather makes my point, Charles. in old school feed reading, you'd at least have had the post there...

    ReplyDelete
  4. You can call on FB Twit and G+ to change, but you shouldn't expect designers or publishers to shoulder the burden of fixing this.

    The issue for Designers and Publishers is that it's a decision of how many people see your information rather than whether the medium is the best display for the information.

    It doesn't do any designer or publisher any good if they use HTML and the work they do fails to spread because Facetweet+ prefers images.

    If images get shared more, they are worth more money and will be used more.

    ReplyDelete
  5. Is this not the TL;DR problem? A picture is worth a thousand words, so people would rather glance over an infographic rather than read a full page of text.

    ReplyDelete
  6. Wow what a mess. Happy new year.

    ReplyDelete
  7. i beg to differ on this though, infographics still seems to be the best way to glance over a piece of relevant information.

    ReplyDelete
  8. I think some of this also has to do with SPAM, XSS, and SQLi attacks being carried out,

    In other words, it's easier for Twitter, FB, and Google+ to provide crude markup and favor images than it is to embrace the semantic web.

    Sanitizing all user input is expensive from a processing perspective. It also opens up the platform to new and as-yet discovered vulnerabilities.

    While I agree with you that the problem has gotten out of hand, I don't see any of those Companies changing their stance anytime soon.

    ReplyDelete
  9. I disagree. Infographics are a great way of communicating.
    Shunning HTML or not does not matter. In the end, reliable communication is what matters.

    ReplyDelete
  10. @vineeth wrote:
    In the end, reliable communication is what matters.

    As a web accessibility specialist, I am most concerned that the conveyance of "reliable communication" via images alone effectively shuts out a significant segment of the on-line community: those who cannot see those pretty infographics which are rarely if ever accompanied with the equivalent text (and no, @alt is not going to cut it).

    Meanwhile, a significant segment of the standardista community is actively seeking to eliminate accommodation mechanisms (a.k.a. the obsolete @longdesc folks) - often with the response that authors should include the textual equivalent of these complex images on the same page. Yet as we see here, this is simply not happening.

    This is not to suggest that retaining @longdesc will solve the problem - authors still need to invest the time and effort to actually supply the longer text, but mechanisms such as @longdesc at least provide a means of linking textual equivalents to the infographic (thus accommodating both the non-sighted as well as the "semantic web" requirements that are currently being lost) while still preserving the visual info-bite requirements that are driving this current trend.

    ReplyDelete
  11. Don: the problem is that innovative, dynamic visualisations will get previews that are text striped of styling if they are done in HTML, but a much bigger visual image if they are made as a static, giant .png
    Tom: similarly with your 'page full of text'; if layout is stripped that is all you'll get.
    GME: input sanitization is a reasonable well-understood problem.Have a look at Caja for a mature, resilient answer.

    ReplyDelete
  12. johnfoliot: Accessibility is another key point; it used to be that indexability by Google was important enough that pure image content was deterred, whereas this trend is having the opposite effect. (I also realized that I omitted useful al text in the images in this post; corrected that now)

    ReplyDelete
  13. As i mentioned on Twitter there are two major reasons I see them not implementing HTML embedding.

    1) Security. Yes, of course there are ways around this, but there are *always* ways around those security patches. If there wasn't, Caja wouldn't *still* be in active development. Having to handle security just so people can make text big red and blinking is far less a priority. Also, Caja as you mentioned needs SVN and Java. That's an immediate turn off for many, many engineers making these large sites. Most of these new big sites use things like Rails, Python, and now Node/JS.

    2) The other, probably bigger reason, people don't want to learn HTML to embed content. My mom, grandma, high school friends, etc, don't want to know <a href="http://url.com"><img src="http://url.com/img.jpg"></a> to just make an image. They'd much rather copy and paste a link. Simpler is better. This has been shown again, and again with consumer sites (and even enterprise now). Or to embed a YouTube video they want to copy and paste a link that generates the embed code. Same with all media. I think you have an engineers view and you're forgetting the majority of people.

    3. Shorter reason, I personally don't want to see crap like <h1 style="color:red;text-style:blink">CLICK THIS LINK BELOW</h1>. That's annoying. I follow social media sites and people for the social aspects, I do not follow them so I can see Myspace style Twitter. Twitter also was meant to be a short message type network, why would you want graphs and marquees going on in your twitter stream.

    ReplyDelete
  14. "And for authors and designers everywhere, stop making giant bitmaps when well-written text with charts that are worth the bytes spent on them could convey your message better."

    ... and eat your vegetables too!

    Kevin,
    A rose by any other name would smell as sweet. Communication through graphics (or video) has the same utility that the written word has, the transference of knowledge.

    You seem to be arguing that to communicate with pictures is puerile therefore web services should prioritize accordingly when point in fact that strength of the web has always been its dynamism with regard to how information is presented and consumed.

    ReplyDelete
  15. Love the intentional irony of the rage comic (though I admit I had click the explanation to make sure it was intentional). Also appreciate you shedding light on something that I formerly took for granted regarding infographics vs HTML. Thanks for the thought provoking piece!

    ReplyDelete
  16. The article is right on the mark. It’s been bugging me for a while now that every other link I click on is an image containing… text and nothing else.

    As for infographics, I find that most of them hinder more than they help, so I skip any such links I see. (Mind you, I’m not the sort of person who believes images are evil or anything like that. I just haven’t seen many genuinely useful infographics.)

    ReplyDelete
  17. Bookzer: I din't say this was trivial, I was noting a pattern. to respond to your points:
    1. If embedding iframes is so bad, how come Facebook gets everyone to do that for it's like buttons on their sites? Twitter embeds end up injecting them via JS too.
    2. is irrelevant. the cases I'm talking about have UX to embed previews already, and youtube's copyable embed tags are a good counterexample.
    3. the richer embedding is arguably how mySpace outcompeted the earlier SNS's; Facebook and Twitter found different paths. There's room for compromise.

    Jeff Nolan: fair point. Perhaps I should have been less extreme and said to think about what the right mode is, not pick one reflexively. I love good visualisations; I own all the Tufte books, but so many of the infographics are nothing of the kind.

    ReplyDelete
  18. Hello Kevin,
    I find it ironic that you post an infographic (from google , showing the increase in use of the term "infographic") in a post saying how evil they are.

    But maybe the word has started to cheapen, and yes, if an infographic is just somebody's wank in illustrator, I agree such images are very irritating, but there is always a place for well-made tables, figures, charts and other data-driven visualisations. I regard these as infographics too!

    ReplyDelete
  19. Who cares about HTML. I certainly wouldn't give any weight to it. Images are links. But I think the author is trying to say two things.

    1. A link with a text label should give the contextual text a greater weight

    2. A link to textual content should have greater weight than a link to an image.

    Ignoring the fact that "weight" is not giving to the link -- the link gives weight to it's destination - - both arguments are flawed.

    1. Images can have text labels. These can provide useful semantic information or be completely bogus. So you can't give too much credence to it.

    2. Almost all images that are provided in link (especially of the lolcats variety) are actually links to HTML and the image is embedded as an additional link within the HTML. All images are in fact links -- well, not exactly, but they're separate HTTP requests, which is what you mean when you say "follow a link".

    I understand what the author is trying to get at, which is that textual information is more easily categorized than an image, and text embedded in an image (a la lolcats) is too difficult to get contextual information out of. In theory you could use OCR but it's not practical.

    You could use meta semantic markup, but like link text, it can't be trusted.

    Now there may be some weighting done if the text of a link such Aaron's blog matches the content of the destination some higher weighting could be given to it, but that's also easy to fake, because I could put bogus content on the destination with a font that matches the background and have my SPAM page content clearly displayed (perhaps in an image so a search engine couldn't detect that it wasn't relevant.)

    ReplyDelete
  20. James Burke: @kevinmarks ...and it seems that the cards do not work in TweetDeck
    via twitter.com

    ReplyDelete
  21. Kevin Marks: @deburca but that can't be right. @ev explained that twitter had to own the client apps for UX consistency
    via twitter.com

    ReplyDelete
  22. Mark Goodge: @kevinmarks @cstross I particularly hate Facebook's "Press return to post" paradigm, which actively discourages proper text formatting.
    via twitter.com

    ReplyDelete
  23. Firas: @kevinmarks @mat when I ponder this I also think of @photomatt's “The format of a weblog dictates its writing”: ma.tt/2004/05/asides/
    via twitter.com

    ReplyDelete
  24. Kevin Marks: @firasd @mat @photomatt right, this is the note vs post distinction. Permalinks being standalone pages was the start of this dichotomy
    via twitter.com

    ReplyDelete
  25. this is still a problem, years later

    ReplyDelete
  26. Kevin Marks: +John Panzer why not do your research in public? http://microformats.org/wiki/voting-examples
    via plus.google.com

    ReplyDelete
  27. Kevin Marks: Reddit links:
    http://www.reddit.com/r/fffffffuuuuuuuuuuuu/comments/nsnis/an_article_my_dad_wrote_in_rage_form_link_to_the/
    http://www.reddit.com/r/fffffffuuuuuuuuuuuu/comments/nsicz/silly_dad_just_happened/
    via plus.google.com

    ReplyDelete
  28. John Panzer: Anyone care to propose an upvoteLink for schema.org?
    via plus.google.com

    ReplyDelete
  29. Kevin Marks: +John Panzer see also http://wiki.activitystrea.ms/w/page/23655855/Actions
    via plus.google.com

    ReplyDelete
  30. Marcus Rademacher: I'd give you some upvotes on Reddit...but there's no link to the submission anywhere here.
    via plus.google.com

    ReplyDelete