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.
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 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:
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:
<img> with proper alt text. This is precisely why we have this attribute.Of course, the ideal scenario is to stop messing with images and just make it HTML text.
In a world of @font-face, Google web fonts, liberal licensing of traditional typefaces and the documented issues of font-rendering alternatives, why anyone would still use Cufón or sIFR is beyond me. Let’s briefly ignore the performance weight of yet another JavaScript file, the fact no development has happened in years, and the pointed message on the website to try TypeKit to “embrace standards”, and you have a solution that:
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.)
Good luck.
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.
<label> tags. They don’t even have title attributes. In fact, the only clue to their individual purpose is placeholder text which is not a replacement to a proper label.<a href="javascript:;">send</a>.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.
| Type | Requests | File Size |
|---|---|---|
| Images | 66 | 947.3 kb |
| Script | 40 | 842.9 kb |
| HTML | 13 | 131.9 kb |
| CSS | 11 | 58.5 kb |
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.
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:
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.
For stories so powerful, understanding the dialogue is critical. Captions can be completely non-intrusive visually, and with YouTube, easy to implement technically.
Not everyone can use a mouse, or has a large touch-enabled device. The ability to navigate via keyboard cannot be ignored.
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.
Previously …
January: The xx
March: Efterklang
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:
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:
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:
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:
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.
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.
Thanks to Textpattern’s ability to create arbitrary XML feeds1, services like IFTTT, and third-party APIs, syndication can be automated. A sample of some of the plumbing installed here:
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.
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.
1 Textpattern has built-in feed generators, but its rich template system enables creating feeds for authors, future-dated content, recent comments and more.
2 I do not have a Facebook account. I’ve sold my digital soul to every demon except Zuckerberg.