People ask me what I do for a living. The answer, in short, is marketing and branding. For awhile I wished I saved lives, but it occurred to me that no one actually saves lives. “Saving lives” is just “delaying death” with better marketing and branding.
Dove does good marketing. Their Real Beauty Campaign was a lovely change of pace in a marketing world full of airbrushing and anorexia. Their newest campaign, Real Beauty Sketches, is a thoughtful follow-up, and has earned mostly positive commentary (and a few reasoned objections). I encourage you to visit the site and experience it.
Except, if you are in the minority that possess one or more disabilities that inhibit or prevent the consumption of certain web media, you won’t be able to experience it. Or, at best, your experience will be more like an endeavor.
The web developers at Ogilvy Brazil (Dove’s agency on this project) have built a page that breaks many basic accessibility guidelines.1 Here is why visitors with low-fidelity connections, hearing challenges, mobility impairments and vision disabilities will be hard-pressed to get the complete story.
Almost No Text is Accessible
If you’re a user who can see well, has no mobility impairments, has a large screen and reads English or Portuguese, you’ll have a great reading experience. Otherwise …
The Opening Text
The page’s opening text is rendered as an image, set to a background via CSS. Inside the
<div> there is an anchor tag with a single word: “dove”.
This guarantees lots of things:
- No screenreader can read back any text, except “dove”. An entire paragraph of information, including the entire reason behind the campaign, is lost.
- If a visitor is using IE with enlarged text, that image will remain locked in size. In a more traditional browser zoom, where the whole page scales, the text becomes heavily aliased and hard to read.
- It cannot be selected, which means it cannot be subjected to on-the-fly translation.
- It cannot be parsed with custom user styles, which may help increase size or contrast.
- It cannot be indexed properly by search engines.
It is worth noting the developers included a second
<div> containing a complete copy of the text, but hid it with
display: none. As has been the case for a decade,
display: none allows nothing to access its contents: no human, no browser, no screenreader, no search engine, no mobile device except primitive feature phones from the 90s. The only way to see hidden content is if the page renders without CSS, which is a practical use-case of never.
Text rendered as an image is a generally inept way to do the internets, but there are ways to make it more accessible. Two, in fact:
- Place it via an
alttext. This is precisely why we have this attribute.
- Place it as a background image inside an element that contains the full transcript, but then hide the text using an intelligent image replacement technique.
Of course, the ideal scenario is to stop messing with images and just make it HTML text.
- Finds each word,
- renders it as an image inside a span,
- and then puts it back on the page.
Here is how a “normal” visitor would literally read the text:
FBI trained artist talks about his experience in the forensic world and how that influenced this experiment.
Here is how Apple VoiceOver reads the text:
Image. FBI. Image. Trained. Image. Artist. Image. Talks. Image. About. Image. His. Image. Experience. Image. In. Image. The. Image. Forensic. Image. World. Image. And. Image. How. Image. That. Image. Influenced. Image. This. Image. Experiment.
Cufón, sIFR and other bygone typography hacks were products of designer vanity. They’re antiquated. There’s no way to make Cufón better except to not use it at all.
Video playback is via YouTube, which has advantages: fast delivery, playable on just about any device that can play full frame video, and a captioning engine built in. For a campaign reliant on video, there are far worse choices. If nothing else, there are more accessible versions of YouTube using their own API.
The problem here is captions. The main video has Portuguese captions embedded so they can use the same video on both language sites. That’s fine, except for the embedded part. When YouTube’s dynamic captioning is turned on, the new captions overlay the embedded text.
Worse, the automated speech-to-text is complete gibberish. With a wee bit of effort, the team could have used properly encoded captions. With the effort that went into creating and laying in the Portuguese captions, this would have been trivial. (The silver lining here is that visitors to the Portuguese version of the site have an inherently more accessible video, even if by accident.)
- Not a single focus state.
- No way to control YouTube videos.
- No way to navigate through Disqus comments.
- No way to activate anything in the portraits exhibition.
Within each portrait in the exhibition, there is a form to email a friend. Unfortunately, the form to do so breaks almost every accessibility best practice in existence to the point that the only way it could be worse would be to build it in Flash, render it via a Java applet, and then ask people to print it out and fax it back.
- No identification for fields. The fields have no corresponding
<label>tags. They don’t even have
titleattributes. In fact, the only clue to their individual purpose is
placeholdertext which is not a replacement to a proper label.
- The placeholder text has no polyfill for older browsers, which I would say is a problem, except that accessing the form is 100% reliant on CSS transforms, which also have no polyfill, which means fuck all if you’re using anything less than the most current version of a desktop browser.
- The form submission is not a button, but
It’s worth noting these forms are problematic to the point that they are hidden from iPads.
The initial load of the page is 144 requests totaling 1.9 MB. Since there is no mobile-optimized version, all visitors are served the same assets. Anecdotally, testing with an iPhone and a Windows Phone over 3G sucked; I waited a long time just to start seeing elements appear.
Looking at the breakdown, it’s not hard to see why.
Besides the basics of image optimization, unconcatenated scripts and frivolous CSS, there are tons of social media junk and the aforementioned Cufón. This page gets a “D” grade on ySlow using the V2 ruleset, and an “F” grade using the classic V1 ruleset.
Performance is not just usability, but accessibility. Overburdened wifi, unreliable 3G/4G, throttled connections and even dialup are hard realities.
Conclusion and Lessons
We have a beautiful campaign with heart and honesty, but it can only be experienced by users who fit the cultural assumptions and technical biases of the developers. Dove spent real money on the talent to produce fantastic stories, but let a web team deliver an utterly subpar product.
The good news is we can learn from this. The basics make a big difference:
Let your text be text.
When words are native HTML text, it can be resized, translated, selected, accessed. Locking it into images is conceited. It has precisely zero benefit to anyone accept your creative director who must absolutely have Helvetica Neue 35 Thin because it adheres to an arbitrary style guide.
Videos are better with captions.
For stories so powerful, understanding the dialogue is critical. Captions can be completely non-intrusive visually, and with YouTube, easy to implement technically.
A mouse is not attached to every computer.
Not everyone can use a mouse, or has a large touch-enabled device. The ability to navigate via keyboard cannot be ignored.
Not everyone has a new browser.
Graceful degradation, progressive enhancement, adaptive design — whatever you want to call it — goes a long way in ensuring as many people as possible can enjoy your content. Targeting only the newest browsers sets a dangerous tone of exclusion.
Forcing MBs of superfluous scripts (40!) and images (66!) reflects developers not willing to step outside their high-capacity comfort zone.
Finally, it took me awhile to publish this post because I do not want people to feel I am attacking the campaign. Actually, the opposite. The campaign is good. But its delivery via the web is terrible. That’s an injustice and a missed opportunity. This post is intended to illustrate how we — the collective building web experiences — can avoid similar mistakes.
1 For those who are curious, I tried to reach out to Ogilvy Brazil directly about this. There is no direct contact info, so it was through indirect channels. If I get a response, I’ll update this post.
Pretty much the best live music season of my life.
This concert series brought to you by Johnnie Walker Black, our babysitter, and the great city of Philadelphia whose vast network of just-good-enough venues help me avoid spendy trips into NYC.
April 20: Rhye
This was at World Cafe Live, which is basically a restaurant with a stage (picture). The band was excellent: they did wide, jazz-like re-interpretations of the album tracks, and clearly had good chemistry. The major surprise of the night was when we learned Rhye was, uh, a guy, which, if you listen to them sight unseen, you would swear it was the next Sade. Proof:
April 30: Tom Odell
Tom Odell, evidently, is the new hotness in the UK. Imagine James Blake mashed up with Jerry Lee Lewis: young and soulful and tragically British, but a beast behind the piano. Unfortunately the stage at Johnny Brenda’s is tight, so he didn’t get to rock as hard as his music videos would have you believe. No matter. It’s clear the kid has buckets of talent, and if he doesn’t fuck it up, could be big. Here is his performance on Letterman, which was recorded the day after the Philadelphia show:
May 3: Daughter
While the venue (Union Transfer) is fantastic, this show was a major letdown. Opening for Daughter was a group called Wilsen, and both acts suffered the same stage afflictions: no presence, no audience connection, little movement, and a lack of confidence that made you cringe. Being on the fence about their music, I wanted so much to fall in love with the group, but at the end of the night we just walked away cold. Which, after listening to the guts laid out in songs like this, you’ll find hard to believe:
May 15: Ola Podrida
I really like the venue Kung Fu Necktie. Easy to get to, totally awesome vibe, intimate stage where you could literally touch the singer’s mic. (And top shelf drinks for seven bucks.) Unfortunately, on this night, the number of audience members matched the number of band members on stage, which made for an awkward emptiness that everyone avoided. This ickiness was compounded by really loud, poorly mixed sound, which sucked the life out of a musically accomplished project that spun out of Explosions in the Sky.
May 23: Beacon
June 7: The National
June 16: Junip
June 18: The Boxer Rebellion
September 18: City and Colour
You are Google. Your responsibility is to sell clicks and eyeballs to literally the highest bidder. When the best content is not on your domain, you do two things:
- Build a platform that encourages longer form writing than Twitter, and more thoughtful audience filtering than Facebook, and stupidly easy sharing.
- Kill Reader, the one product that encourages you to discover and share content outside this new platform.
Profit is derived from control1. RSS interferes with controlling not just access to content, but the content itself. A content-sharing protocol not in their direct control is incongruous with their business model in the same way a true democracy hampers megalomaniac politicians. The web’s open API cannot be throttled, manipulated and mediated like a proprietary API.
Google are not alone in their dismissal of RSS. Twitter has been removing RSS capabilities for years. Facebook, like Google+, doesn’t have RSS at all. Tumblr ceased the ability to import RSS entirely. Media morons have been proclaiming RSS IS DEAD for years not because it is dead, but because they’ve swallowed the PR swill of those who won’t support it.
Facebook, Google and Twitter are designed silos. They are vassals to advertisers. They sell you.
The more they reject RSS, the more important it becomes.
Our vast network of independent URLs is the antithesis to the content-monoculture these companies seek to erect. With every brick that goes up around their walled gardens, another means of maintaining an open, connected net is closed. This follows the pattern of a capitalist ecosystem: innovators innovate, a select few build empires on top of those innovations, and those at the top then seek to empirically control the market.
While humble in scope and even more humble in adoption, RSS is a rock in their boots. RSS connects us without them. No matter our publishing platform, we can all boil our content down to a single common tongue. That middle ground has no place in organizations scrambling for the high ground.
RSS is an equalizer, not an advantage. An idea, not a patent. An open hand, not a secret handshake.
1 Just ask Apple.
Internet companies rise and fall. Sometimes the descent is slow and painful (MySpace), sometimes a crash (Magnolia), sometimes the downward trajectory hasn’t started but is clearly inevitable (Instagram). Every company that relies on your content to support its business model is a point of risk for you losing your information. Even services with honest revenue models (Flickr, app.net, Pinboard) can go down without warning.
I have no problem giving my content to other services. My poor Twitter followers know that. But I do have a problem when I become dependent on that service to store my words. I refuse to cultivate content in a feudalistic publishing ecosystem; I refuse to be a serf reliant on a distant lord for access, permission, and privacy. I want to share my content, not have my content sharecropped.
Our websites are our own. Graphicpush, in particular, houses a decade of writing. To me, it’s worth protecting.
Three Categories of Content
- Ephemeral bullshit thoughts. Music opinions, political links, cat videos, insipid brain farts, anger management speed-therapy, and thinly disguised argument baiting. Twitter is the dumping ground for this collection of crap.
- Important bookmarks and slightly longer thoughts. These are not passing links, but referencable bookmarks. They include a sentence or two of commentary.
- Long-form articles and blog posts. The quality and timeliness of these vary, but they required time to write and are, for better or worse, part of the permanent archive.
I could publish all of these things on graphicpush, and then syndicate out to miscellaneous services. That’s overkill. “Poopin” tweets do not need a permanent home. Frankly, if I don’t want my own mom as a follower, I’m pretty sure I don’t want a future archivist digging up my tweets.
But content categories #2 and #3 are worth publishing from a central source and syndicating out. Graphicpush is the source, not a facsimile. This is the model Tantek Çelik described. Others, including Jeremy Keith, have evangelized it.
Pushing It Out
- Links on graphicpush have their own XML feed. A new bookmark gets published to Delicious and syndicated to app.net simultaneously.
- If I give the bookmark a hashtag of #tw, it gets syndicated to Twitter as well.
- I created a new category called “256” for short-form thoughts. This also has its own XML feed. Items published to this category appear in the main feed of the site and are simultaneously syndicated to app.net. App.net’s lovely API handles both the text of the post and reference the post’s canonical URL. (Sample.)
- New long-form posts, no matter what length, push an update to Twitter, app.net, and Feedburner (who make it pretty for traditional RSS readers)2.
- I’ve started a photo-pushing service, but I don’t much care about pictures so I’m not sure that will ever get done.
So the tedious linking to these services is eliminated, and my website remains the central content authority. If Twitter, app.net, Delicious or any future service crumbles to dust, my content remains intact. If my website fails, I have a SQL backup. If that fails, I have a backup career as a park ranger.
Can This Apply To Organizations?
Actually, even more so. The larger the organization, the more complex the governance of content, and operating it from a Single Source of Truth — whether that be a WCM, WPS, a third-party application or a homegrown system — becomes increasingly important.
Blog post syndication, new webinar announcements, job openings and more can be orchestrated together. Some of these become automated based on triggers, but most of it is simply planned and written more efficiently. Less guesswork. Fewer mistakes. Consistency and scheduling that support a broader content strategy.
Content is mine, not theirs.
Content is centrally maintained.
Content is syndicated automatically.
Content is archived on my rules.
If a service goes out of business, gets hit by a meteor, jeopardizes my privacy or alters their TOS to a point of incongruousness, that faucet can be turned off and those sellouts can go fuck themselves.
2 I do not have a Facebook account. I’ve sold my digital soul to every demon except Zuckerberg.