This may mark the beginning of Gov.uk’s decline. The top-listed priorities are the very antithesis of starting with user needs. Instead from now on it’s going to be about growth, shiny new technology, having a native app, and literally pivoting to video.
It’ll be interesting to see if they try to maintain their existing design principles while simultaneously abandoning them.
Video visions of aspirational futures made from the 1950s to the 2010s, mostly by white dudes with bullshit jobs.
The primary goals of this strategy are to inform decision-making and enhance the success of accessibility-related activities within the GOV.UK Design System team.
Interestingly, accessibility concerns are put into two categories: theoretical and evidenced (with the evidenced concerns being prioritised):
- Theoretical: A question or statement regarding the accessibility of an implementation within the Design System without evidence of real-world impact.
- Evidenced: Sharing new research, data or evidence showing that an implementation within the Design System could cause barriers for disabled people.
I played a lot Lords of Midnight (and Doomdark’s Revenge) on my Amstrad 464 when I was a kid. Turns out there’s a dedicated labour of love to port the games to modern platforms. I just downloaded the OS X port, so there goes my weekend.
A slot machine for speculation. Enter a topic and get a near-future scenario on that topic generated automatically.
A thorough deep dive into generated content in CSS.
You don’t want to miss this! A five-day online conference with a different theme each day:
Speakers include Amy Hupe, Kelly Goto, Kristina Halvorson, Lou Downe, Leisa Reichelt and many more still to be announce, all for ludicrously cheap ticket prices.
I know it sounds like I’m blowing my own trumpet because this is a Clearleft event, but I had nothing to do with it. The trumpets of my talented co-workers should be blasting in harmonious chorus.
(It’s a truly lovely website too!)
It’s been a busy two weeks of travelling and speaking. Last week I spoke at Finch Conf in Edinburgh, Code Motion in Madrid, and Generate CSS in London. This week I was at Indie Web Camp, View Source, and Fronteers, all in Amsterdam.
The Edinburgh-Madrid-London whirlwind wasn’t ideal. I gave the opening talk at Finch Conf, then immediately jumped in a taxi to get to the airport to fly to Madrid, so I missed all the excellent talks. I had FOMO for a conference I actually spoke at.
I did get to spend some time at Code Motion in Madrid, but that was a waste of time. It was one of those multi-track events where the trade show floor is prioritised over the talks (and the speakers don’t get paid). I gave my talk to a mostly empty room—the classic multi-track experience. On the plus side, I had a wonderful time with Jessica exploring Madrid’s many tapas delights. The food and drink made up for the sub-par conference.
I flew back from Madrid to the UK, and immediately went straight to London to deliver the closing talk of Generate CSS. So once again, I didn’t get to see any of the other talks. That’s a real shame—it sounds like they were all excellent.
The day after Generate though, I took the Eurostar to Amsterdam. That’s where I’ve been ever since. There were just as many events as in the previous week, but because they were all in Amsterdam, I could savour them properly, instead of spending half my time travelling.
Indie Web Camp Amsterdam was excellent, although I missed out on the afternoon discussions on the first day because I popped over to the Mozilla Tech Speakers event happening at the same time. I was there to offer feedback on lightning talks. I really, really enjoyed it.
I’d really like to do more of this kind of thing. There aren’t many activities I feel qualified to give advice on, but public speaking is an exception. I’ve got plenty of experience that I’m eager to share with up-and-coming speakers. Also, I got to see some really great lightning talks!
Then it was time for View Source. There was a mix of talks, panels, and breakout conversation corners. I saw some fantastic talks by people I hadn’t seen speak before: Melanie Richards, Ali Spittal, Sharell Bryant, and Tejas Kumar. I gave the closing keynote, which was warmly received—that’s always very gratifying.
After one day of rest, it was time for Fronteers. This was where myself and Remy gave the joint talk we’ve been working on:
Neither of us is under any illusions about the nature of a joint talk. It’s not half as much work; it’s more like twice the work. We’ve both seen enough uneven joint presentations to know what we want to avoid.
I’m happy to say that it went off without a hitch. Remy definitely had the tougher task—he did a live demo. Needless to say, he did it flawlessly. It’s been a real treat working with Remy on this. Don’t tell him I said this, but he’s kind of a web hero of mine, so this was a real honour and a privilege for me.
I’ve got some more speaking engagements ahead of me. Most of them are in Europe so I’m going to do my utmost to travel to them by train. Flying is usually more convenient but it’s terrible for my carbon footprint. I’m feeling pretty guilty about that Madrid trip; I need to make ammends.
I’ll be travelling to France next week for Paris Web. Taking the Eurostar is a no-brainer for that one. Straight after that Jessica and I will be going to Frankfurt for the book fair. Taking the train from Paris to Frankfurt will be nice and straightforward.
I’ll be back in Brighton for Indie Web Camp on the weekend of October 19th and 20th—you should come!—and then I’ll be heading off to Antwerp for Full Stack Fest. Anywhere in Belgium is easily reachable by train so that’ll be another Eurostar journey.
After that, it gets a little trickier. I’ll be going to Berlin for Beyond Tellerrand but I’m not sure I can make it work by train. Same goes for Web Clerks in Vienna. Cities that far east are tough to get to by train in a reasonable amount of time (although I realise that, compared to many others, I have the luxury of spending time travelling by train).
Then there are the places that I can only get to by plane. There’s the United States. I’ll be speaking at An Event Apart in San Francisco in December. A flight is unavoidable. Last time we went to the States, Jessica and I travelled by ocean liner. But that isn’t any better for the environment, given the low-grade fuel burned by ships.
And then there’s Ireland. I make trips back there to see my mother, but there’s no alternative to flying or taking a ferry—neither are ideal for the environment. At least I can offset the carbon from my flights; the travel equivalent to putting coins in the swear jar.
Don’t get me wrong—I’m not moaning about the amount of travel involved in going to conferences and workshops. It’s fantastic that I get to go to new and interesting places. That’s something I hope I never take for granted. But I can’t ignore the environmental damage I’m doing. I’ll be making more of an effort to travel by train to Europe’s many excellent web events. While I’m at it, I can ask Paul for his trainspotter expertise.
A short, snappy web book on product development from Ryan Singer at Basecamp.
Like Resilient Web Design, the whole thing is online for free (really free, not “give us your email address” free).
Over the last fifty years, we have come to recognize that the fuel of our civilizational expansion has become the main driver of our extinction, and that of many of the species we share the planet with. We are now coming to realize that is as true of our cognitive infrastructure. Something is out of sync, felt everywhere: something amiss in the temporal order, and it is as related to political and technological shifts, shifts in our own cognition and attention, as it is to climatic ones. To think clearly in such times requires an intersectional understanding of time itself, a way of thinking that escapes the cognitive traps, ancient and modern, into which we too easily fall. Because our technologies, the infrastructures we have built to escape our past, have turned instead to cancelling our future.
James writes beautifully about rates of change.
The greatest trick our utility-directed technologies have performed is to constantly pull us out of time: to distract us from the here and now, to treat time as a kind of fossil fuel which can be endlessly extracted in the service of a utopian future which never quite arrives. If information is the new oil, we are already, in the hyper-accelerated way of present things, well into the fracking age, with tremors shuddering through the landscape and the tap water on fire. But this is not enough; it will never be enough. We must be displaced utterly in time, caught up in endless imaginings of the future while endlessly neglecting the lessons and potential actions of the present moment.
Spoiler: it’s plain text. Every time.
Nothing boosts opens and clicks as well as an old school, plain-text email.
I feel vindicated.
People say they prefer HTML emails ..but they actually prefer plain-text.
This seems like a plausable explanation:
Think about how you email colleagues and friends: Do you usually add images or use well-designed templates? Probably not, and neither does your audience. They’re used to using email to communicate in a personal way, so emails from companies that look more personal will resonate more.
Now get off my lawn, you pesky HTML-email lovin’ kids.
I have a bittersweet feeling today. Danielle is moving on from Clearleft.
I used to get really down when people left. Over time I’ve learned not to take it as such a bad thing. I mean, of course it’s sad when someone moves on, but for them, it’s exciting. And I should be sharing in that excitement, not putting a damper on it.
Besides, people tend to stay at Clearleft for years and years—in the tech world, that’s unheard of. So it’s not really so terrible when they decide to head out to pastures new. They’ll always be Clearlefties. Just look at the lovely parting words from Harry, Paul, Ellen, and Ben:
Working at Clearleft was one of the best decisions I ever made. 6 years of some work that I’m most proud of, amongst some of the finest thinkers I’ve ever met.
(Side note: I’ve been thinking about starting a podcast where I chat to ex-Clearlefties. We could reflect on the past, look to the future, and generally just have a catch-up. Would that be self indulgent or interesting? Let me know what you think.)
So of course I’m going to miss working with Danielle, but as with other former ‘lefties, I’m genuinely excited to see what happens next for her. Clearleft has had an excellent three years of her time and now it’s another company’s turn.
In the spirit of “one door closes, another opens,” Danielle’s departure creates an opportunity for someone else. Fancy working at Clearleft? Well, we’re looking for a head of front-end development.
Do you remember back at the start of the year when we were hiring a front-end developer, and I wrote about writing job postings?
My first instinct was to look at other job ads and take my cue from them. But, let’s face it, most job ads are badly written, and prone to turning into laundry lists. So I decided to just write like I normally would. You know, like a human.
That worked out really well. We ended up hiring the ridiculously talented Trys Mudford. Success!
So I’ve taken the same approach with this job ad. I’ve tried to paint as clear and honest a picture as I can of what this role would entail. Like it says, there are three main parts to the job:
Now, I could easily imagine someone reading the job description and thinking, “Nope! Not for me.” Let’s face it: There Will Be Meetings. And a whole lotta context switching:
Within the course of one day, you might go from thinking about thorny code problems to helping someone on your team with their career plans to figuring out how to land new business in a previously uncharted area of technology.
I can equally imagine someone reading that and thinking “Yes! This is what I’ve been waiting for.”
Oh, and in case you’re wondering why I’m not taking this role …well, in the short term, I will for a while, but I’d consider myself qualified for maybe one third to one half of the required tasks. Yes, I can handle the professional development side of things (in fact, I really, really enjoy that). I can handle some of the technical leadership stuff—if we’re talking about HTML, CSS, JavaScript, accessibility, and performance. But all of the back-of-the-front-end stuff—build tools, libraries, toolchains—is beyond me. And I think I’d be rubbish at the business support stuff, mostly because that doesn’t excite me much. But maybe it excites you! If so, you should apply.
I can picture a few scenarios where this role could be the ideal career move…
Suppose you’re a lead developer at a product company. You enjoy leading a team of devs, and you like setting the technical direction when it comes to the tools and techniques being used. But maybe you’re frustrated by always working on the same product with the same tech stack. The agency world, where every project is different, might be exactly what you’re looking for.
Or maybe you’re an accomplished and experienced front-end developer, freelancing and contracting for years. Perhaps you’re less enamoured with being so hands-on with the code all the time. Maybe you’ve realised that what you really enjoy is solving problems and evaluating techologies, and you’d be absolutely fine with having someone else take care of the implementation. Moving into a lead role like this might be the perfect way to make the best use of your time and have more impact with your decisions.
You get the idea. If any of this is sounding intriguing to you, you should definitely apply for the role. What do you have to lose?
Also, as it says in the job ad:
If you’re from a group that is under-represented in tech, please don’t hesitate to get in touch.
Erin’s classic book is now available to read online for free!
Cassie posted a neat tiny lesson that she’s written a reduced test case for.
Here’s the situation…
CSS custom properties are fantastic. You can drop them in just about anywhere that a property takes a value.
Here’s an example of defining a custom property for a length:
:root {
--my-value: 1em;
}
Then I can use that anywhere I’d normally give something a length:
.my-element {
margin-bottom: var(--my-value);
}
I went a bit overboard with custom properties on the new Patterns Day site. I used them for colour values, font stacks, and spacing. Design tokens, I guess. They really come into their own when you combine them with media queries: you can update the values of the custom properties based on screen size …without having to redefine where those properties are applied. Also, they can be updated via JavaScript so they make for a great common language between CSS and JavaScript: you can define where they’re used in your CSS and then update their values in JavaScript, perhaps in response to user interaction.
But there are a few places where you can’t use custom properties. You can’t, for example, use them as part of a media query. This won’t work:
@media all and (min-width: var(--my-value)) {
...
}
You also can’t use them in generated content if the value is a number. This won’t work:
:root {
--number-value: 15;
}
.my-element::before {
content: var(--number-value);
}
Fair enough. Generated content in CSS is kind of a strange beast. Eric delivered an entire hour-long talk at An Event Apart in Seattle on generated content.
But Cassie found a workaround if the value you want to put into that content property is numeric. The CSS counter value is a kind of generated content—the numbers that appear in front of ordered list items. And you can control the value of those numbers from CSS.
CSS counters work kind of like variables. You name them and assign values to them using the counter-reset property:
.my-element {
counter-reset: mycounter 15;
}
You can then reference the value of mycounter in a content property using the counter value:
.my-element {
content: counter(mycounter);
}
Cassie realised that even though you can’t pass in a custom property directly to generated content, you can pass in a custom property to the counter-reset property. So you can do this:
:root {
--number-value: 15;
}
.my-element {
counter-reset: mycounter var(--number-value);
content: counter(mycounter);
}
In a roundabout way, this allows you to use a custom property for generated content!
I realise that the use cases are pretty narrow, but I can’t help but be impressed with the thinking behind this. Personally, I would’ve just read that generated content doesn’t accept custom properties and moved on. I would’ve given up quickly. But Cassie took a step back and found a creative pass-the-parcel solution to the problem.
I feel like this is a hack in the best sense of the word: a creatively improvised solution to a problem or limitation.
I was trying to display the numeric value stored in a CSS variable inside generated content… Turns out you can’t do that. But you can do this… codepen.io/cassie-codes/p… (not saying you should, but you could)
It’s time for the afternoon talks at An Event Apart in Seattle. We’re going to have back-to-back CSS, kicking off with Eric Meyer. His talk is called Generation Style. The blurb says:
Consider, if you will, CSS generated content. We can, and sometimes even do, use it to insert icons before or after pieces of text. Occasionally we even use it add a bit of extra information. And once upon a time, we pressed it into service as a hack to get containers to wrap around their floated children. That’s all fine—but what good is generated content, really? What can we do with it? What are its limitations? And how far can we push content generation in a new landscape full of flexible boxes, grids, and more? Join Eric as he turns a spotlight on generated content and shows how it can be a generator of creativity as well as a powerful, practical tool for everyday use.
Wish me luck, ‘cause I’m going to try to capture the sense of this presentation…
So we had a morning of personas and user journeys. This afternoon: code, baby! Eric is going to dive into a very specific corner of CSS—generated content. For an hour. Let’s do it!
He shows the CSS Generated Content Module Level 3. Eric wants to focus on one bit: the pseudo-elements ::before and ::after. What does pseudo-element mean?
You might have used one of these pseudo-elements for blockquotes. Perhaps you’ve put a great big quotation mark in front of them.
blockquote:: after {
content: "“";
font-size: 4em;
opacity: 0.67;
/* placement styles here */
}
Why is Eric using ::after? Because you can. You can put the ::after content wherever you want. But if your placement styles fail, this isn’t a good place for the generated content. So don’t do this. Use ::before.
Another example of using generated content is putting icons beside certain links:
a[href$=".pdf"]::after {
content: url(i/icon.png);
height: 1em;
margin-right: 0.5em;
vertical-align: top;
}
But these icons look yucky. But if you use larger images, they will be shown full size. You only have so much control over what happens in there. I mean, that’s true of all CSS: think of CSS as a series of strong suggestions. But here, we have even less control than we’re used to. Why isn’t the image 1em tall like I’ve specified in the CSS? Well, the generated content box is 1em tall but the image is breaking out of this box. How about this:
a[href]::after * {
max-width: 100%;
max-height: 100%
}
This doesn’t work. The image isn’t an element so it can’t be selected for.
The way around it is to use background images instead:
a[href$=".pdf"]::after {
content: '';
height: 1em; width: 1em;
margin-right: 0.5em;
vertical-align: top;
background: center/contain;
background-image: url(i/icon.png);
}
Notice there’s a right margin there. That stretches out the width of the whole link. That’s exactly the same as if there were an actual span in there:
a[href$=".pdf"] span {
height: 1em; width: 1em;
margin-right: 0.5em;
vertical-align: top;
background: center/contain;
background-image: url(i/icon.png);
}
So why use generated content instead of a span? So that you don’t have to put extra spans in your markup.
Generated content is great for things that work great when they’re there, but still work fine if they’re not. It’s progressive enhancement.
You’ve almost certainly used generated content for the clearfix hack.
.clearfix::after {
content: '';
display: table;
clear: both;
}
Ask your parents. It’s when we wanted to make the containing element for a group of floating elements to encompass the height of those elements. Ancient history, right? Well, Eric is showing an example of a certain large media company today. There are a lot of clearfixes in there.
Eric makes the clearfix visible:
.clearfix::after {
content: '';
display: table;
clear: both;
border: 10px solid purple;
}
It looks like a span: a 10 pixel wide box. Now change the display property:
.clearfix::after {
content: '';
display: block;
clear: both;
border: 10px solid purple;
}
Now it behaves more like a div than a span.
The big question here is: who cares?
Let’s say we’re making a site about corduroy pillows (I hear they’re really making headlines).
<header>
<h1>Corduroy pillows</h1>
<p>Lorum ipsum...</p>
</header>
We can add a box under the header:
header::after {
content: " ";
display: block;
height: 1em;
}
You can do stuff with that extra content, like using a linear gradient:
header::after {
content: " ";
display: block;
height: 1em;
background: linear-gradient(to right, #DDD, #000, #DDD) center / 100% 1px no-repeat;
}
The colour stops are #DDD, #000, and #DDD. You get this nice gradiated line under the header. You can chain a bunch of of radial gradients together to get some nice effects. You could mix in some background images too. Now you’ve got some on-brand separators. You could use generated content to add some “under construction” separators.
By the way, ever struggled to keep track of the order of backgrounds? Think about how you would order layers in Photoshop.
How about if we could use generated content to make design tools?
div[id]::before {
content: attr(id);
}
Now the generated content is taken from the id attribute. You can make it look like Firebug:
div[id]::before {
content: '#' attr(id);
font: 0.75rem monospace;
position: absolute;
top: 0;
left: 0;
border: 1px dashed red;
padding: 0 0.25em;
background: #FFD;
}
You can even make the content cover the whole box with bottom and right values too:
div[id]::before {
content: '#' attr(id);
font: 0.75rem monospace;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 1px dashed red;
padding: 0 0.25em;
background: #FFD8;
}
(And yes, that is a hex value with opacity.)
Let’s make it less code-y:
div[id]::before {
content: attr(id);
font: bold 1.5rem Georgia serif;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 1px dashed red;
padding: 0 0.25em;
background: #FFD8;
}
Throw in some text-shadow. Maybe some radial gradients. We’re at the wireframe stage. Let’s drop in some SVG images to show lines across the boxes.
How about automating design touches?
pre {
padding: 0.75em 1.5em;
background: #EEE;
font: medium Consolas, monospace;
position: relative;
}
Let’s say that applies to:
<pre class="css">
...
</pre>
You can generate labels with that class attribute:
pre::before {
content: attr(class);
display: block;
padding: 0.25em 0 0.15em;
font: bold 1em Noah, sans-serif;
text-align: center;
text-transform: uppercase;
}
Let’s align it to the top of it’s parent with negative margins:
pre::before {
content: attr(class);
display: block;
padding: 0.25em 0 0.15em;
margin: -0.75em -1.5em 1em;
font: bold 1em Noah, sans-serif;
text-align: center;
text-transform: uppercase;
}
Or you can use absolute positioning:
pre::before {
content: attr(class);
display: block;
padding: 0.25em 0 0.15em;
position: absolute;
top: 0;
right: 0;
left: 0;
font: bold 1em Noah, sans-serif;
text-align: center;
text-transform: uppercase;
}
Now let’s change the writing mode:
pre::before {
content: attr(class);
display: block;
padding: 0.25em 0 0.15em;
position: absolute;
top: 0;
right: 0;
bottom: 0;
writing-mode: vertical-rl;
font: bold 1em Noah, sans-serif;
text-align: center;
text-transform: uppercase;
}
Now the text is running down the side, but it’s turned on its side. You can transform it:
pre::before {
content: attr(class);
display: block;
padding: 0.25em 0 0.15em;
position: absolute;
top: 0;
right: 0;
bottom: 0;
writing-mode: vertical-rl;
transform: rotate(180deg);
font: bold 1em Noah, sans-serif;
text-align: center;
text-transform: uppercase;
}
But if you this, be careful. Your left margin is no longer on the left. Everything’s flipped around.
You could also update the generated content according to the value of the class attribute:
pre.css:: before {
content: '{ CSS }';
}
pre.html::before {
content: '< HTML >';
}
pre.js::before,
pre.javascript::before {
content: '({ JS })();';
}
It’s presentational, so CSS feels like the right place to do this. But you can’t generate markup—just text. Angle brackets will be displayed in their raw form.
But positioning is so old-school. Let’s use CSS grid:
pre {
display: grid;
grid-template-columns: min-content 1fr;
grid-gap: 0.75em;
}
pre::before {
content: attr(class);
margin: -1em 0;
padding: 0.25em 0.1em 0.25em 0;
writing-mode: vertical-rl;
transform: rotate(180deg);
font: bold 1em Noah, sans-serif;
text-align: center;
text-transform: uppercase;
}
Heck, you could get rid of the negative margins by putting the code content inside a code element and giving that a margin of 1em.
You can see generated content in action on the website of An Event Apart:
li.news::before {
content: attr(data-cat);
background-color: orange;
color: white;
}
The data-cat attribute (which contains a category value) is displayed in the generated content.
Cool. That’s all stuff we can do now. What about next?
Well, suppose you had to put some legalese on your website. You could generate the numbers of nested sections:
h1 { counter-reset: section; }
h2 { counter-reset: subsection; }
Increment the numbers each time:
h2 { counter-increment: section; }
h3 { counter-increment: subsection; }
And display those values:
h2::before {
content: counter(section) ".";
}
h2::before {
content: counter(section) counter ":" (subsection, upper-roman);
}
Soon you’ll be able to cycle through a list of counter styles of your own creation with a @counter-style block.
But remember, if you really need that content to be visible for everyone, don’t rely on generated content: put it in your markup. It’s for styles.
So, generated content. It’s pretty cool. You can do some surprising things with it. Maybe ::before this talk, you didn’t think about generated content much, but ::after this talk ,you will.
The second talk of the first day of An Event Apart Seattle is from Margot Bloomstein. She’ll be speaking about Designing for Trust in an Uncertain World. The talk description reads:
Mass media and our most cynical memes say we live in a post-fact era. So who can we trust—and how do our users invest their trust? Expert opinions are a thing of the past; we favor user reviews from “people like us” whether we’re planning a meal or prioritizing a newsfeed. But as our filter bubbles burst, consumers and citizens alike turn inward for the truth. By designing for empowerment, the smartest organizations meet them there.
We must empower our audiences to earn their trust—not the other way around—and our tactical choices in content and design can fuel empowerment. Margot will walk you through examples from retail, publishing, government, and other industries to detail what you can do to meet unprecedented problems in information consumption. Learn how voice, volume, and vulnerability can inform your design and content strategy to earn the trust of your users. We’ll ask the tough questions: How do brands develop rapport when audiences let emotion cloud logic? Can you design around cultural predisposition to improve public safety? And how do voice and vulnerability go beyond buzzwords and into broader corporate strategy? Learn how these questions can drive design choices in organizations of any size and industry—and discover how your choices can empower users and rebuild our very sense of trust itself.
I’m sitting in the audience, trying to write down the gist of what she’s saying…
She begins by thanking us for joining her to confront some big problems. About ten years ago, A List Apart was the first publication to publish a piece of hers. It had excellent editors—Carolyn, Erin, and so on. The web was a lot smaller ten years ago. Our problems are bigger now. Our responsibilities are bigger now. But our opportunities are bigger now too.
Margot takes us back to 1961. The Twilight Zone aired an episode called The Mirror. We’re in South America where a stealthy band are working to take over the government. The rebels confront the leader. He shares a secret with them. He shows them a mirror that reveals his enemies. The revolution is successful. The rebels assume power. The rebel leader starts to use the same oppressive techniques as his predecessor. One day he says in his magic mirror the same group of friends that he worked with to assume power. Now they’re working to depose him, according to the mirror. He rounds them up and has them killed. One day he sees himself in the mirror. He smashes the mirror with his gun. He is incredibly angry. A priest walking past the door hears a commotion. The priest hears a gunshot. Entering the room, he sees the rebel leader dead on the ground with the gun in his hand.
We look to see ourselves. We look to see the truth. We hope the images coincide.
When our users see themselves, and then see the world around them, the images don’t coincide.
Internal truths trump external facts.
We used to place trust in brands. Now we’ve knocked them off the pedestal, or they’ve knocked themselves off the pedestal. They’ve been shady. Creeping inconsistencies. Departments of government are exhorting people not to trust external sources. It’s gaslighting. The blowback of gaslighting is broad. It effects us. An insidious scepticism—of journalism, of politics, of brands. This is our problem now.
To regain the trust of our audiences, we must empower them.
Why now? Maybe some of this does fall on our recent history. We punish politicians for flip-flopping and yet now Rudy Giuliani and Donald Trump simply deny reality, completely contradicting their previous positions. The flip-flopping doesn’t matter. If you were a Trump supporter before, you continued to support him. No amount of information would cause you to change your mind.
Inconsistency erodes our ability to evaluate and trust. In some media circles, coached scepticism, false equivalency, and rampant air quotes all work to erode consensus. It offers us a cosy echo chamber. It’s comforting. It’s the journalism of affirmation. But our ability to evaluate information for ourselves suffers. Again, that’s gaslighting.
You can find media that bolsters your existing opinions. It’s a strange space that focuses more on hiding information, while claiming to be unbiased. It works to separate the listener, viewer, and reader from their own lived experiences. If you work in public services, this effects you.
Do we get comfortable in our faith, or confidentally test our beliefs through education?
Marketing relies on us re-evaluating our choices. Now we’ve turned away from the old arbiters of experts. We’ve moved from expertise to homophily—only listening to people like us. But people have recently become aware of their own filter bubbles. So people turn inward to narcissism. If you can’t trust anyone, you can only turn inward. But that’s when we see the effects of a poor information diet. We don’t know what objective journalism looks like any more. Our analytic skills are suffering as a result. Our ability to trust external sources of expertise suffers.
Inconsistency undermines trust—externally and internally. People turn inward and wonder if they can even trust their own perceptions any more. You might raise an eyebrow when a politician plays fast and loose with the truth, or a brand does something shady.
We look for consistency with our own perceptions. Does this fit with what I know? Does this make me feel good? Does this brand make me feel good about myself? It’s tied to identity. There’s a cycle of deliberation and validation. We’re validating against our own worldview. Referencing Jeffrey’s talk, Margot says that giving people time to slow down helps them evaluate and validate. But there’s a self-perpetuating cycle of belief and validation. Jamelle Bouie from Slate says:
We adopt facts based on our identities.
How we form our beliefs affects our reality more than what we already believe. Cultural predisposition is what give us our confirmation bias.
Say you’re skeptical of big pharma. You put the needs of your family above the advice of medical experts. You deny the efficacy of vaccination. The way to reach these people is not to meet them with anger and judgement. Instead, by working in the areas they already feel comfortable in—alternative medicine, say—we can reach them much more effictively. We need to meet a reluctant audience on their own terms. That empowers them. Empowerment reflects and rebuilds trust. If people are looking inward for information, we can meet them there.
The language a brand uses to express itself. You don’t want to alienate your audience. You need to bring your audience along with you. When a brand changes over time, it runs the risk of alienating its audience. But by using a consistent voice, and speaking with transparency, it empowers the audience.
A good example of this is Mailchimp. When Mailchimp first moved into the e-commerce space, they approached it from a point of humility. They wrote on the blog in a very personal vulnerable way, using plain language. The language didn’t ask more acclimation from their audience.
ClinicalTrials.gov does not have a cute monkey. Their legal disclaimer used to have reams of text. They took a step back to figure what they needed to provide in order to make the audience comfortable. They empowered their audience by writing clearly, avoiding the passive voice.
What is enough detail to allow a user to feel good about their choices? We used to think it was all about reducing information. For a lot of brands, that’s true. But America’s Test Kitchen is known for producing a lot of content. They’re known for it because their content focuses on empowering people. You’re getting enough content to do well. They try to engage people regardless of level of expertise. That’s the ultimate level of empathy—meeting people wherever they are. Success breeds confidence. That’s the ethos that underpins all their strategy.
Crutchfield Electronics also considers what the right amount of content is to allow people to succeed. By making sure that people feel good and confident about the content they’re receiving, Crutchfield Electronics are also making sure that people good and confident in their choices.
Gov.uk had to contend with where people were seeking information. The old version used to have information spread across multiple websites. People then looked elsewhere. Government Digital Services realised they were saying too much. They reduced the amount of content. Let government do what only government can do.
So how do you know when you have “enough” content? Whether you’re America’s Test Kitchen or Gov.uk. You have enough content when people feel empowered to move forward. Sometimes people need more content to think more. Sometimes people need less.
How do we open up and support people in empowering themselves? Vulnerability can also mean letting people know how we’re doing, and how we’re going to change over time. That’s how we build a conversation with our audience.
Sometimes vulnerability can mean prototyping in public. Buzzfeed rolled out a newsletter by exposing their A/B testing in public. This wasn’t user-testing on the sidelines; it was front and centre. It was good material for their own blog.
When we ask people “what do you think?” we allow people to become evalangists of our products by making them an active part of the process. Mailchimp did this when they dogfooded their new e-commerce product. They used their own product and talked openly about it. There was a conversation between the company and the audience.
Cooks Illustrated will frequently revisit their old recommendations and acknowledge that things have changed. It’s admitting to a kind of falliability, but that’s not a form of weakness; it’s a form of strength.
If you use some of the recommendations on their site, Volkswagen ask “what are you looking for in a car?” rather than “what are you looking for in Volkswagen?” They’re building the confidence of their audience. That builds trust.
Buzzfeed also hosts opposing viewpoints. They have asides on articles called “Outside Your Bubble”. They bring in other voices so their audiences can have a more informed opinion.
A consistent and accessible voice, appropriate volume for the context, and humanising vulnerability together empowers users.
Margot says all that in the face of the question: do we live in a post-fact era? To which she says: when was the fact era?
Cynicism is a form of cowardice. It’s not a fruitful position. It doesn’t move us forward as designers, and it certainly doesn’t move us forward as a society. Cynics look at the world and say “it’s worse.” Designers look at the world and say “it could be better.”
Design won’t save the world—but it may make it more worth saving. Are we uniquely positioned to fix this problem? No. But that doesn’t free us from working hard to do our part.
Margot thinks we can design our way out of cynicism. And we need to. For ourselves, for our clients, and for our very society.
Harry divides his web performance work into three categories:
I feel like a lot of businesses are still unsure where to even start when it comes to performance monitoring, and as such, they never do. By demystifying it and breaking it down into three clear categories, each with their own distinct time, place, and purpose, it immediately takes a lot of the effort away from them: rather than worrying what their strategy should be, they now simply need to ask ‘Do we have one?’
A great long-term perspective from Rachel on the pace of change in standards getting shipped in browsers:
The pace that things are shipping, and at which bugs are fixed is like nothing we have seen before. I know from sitting around a table with representatives from each browser vendor at the CSS Working Group how important interop is. No-one wants features to be implemented differently in browsers. This is what we were asking for with WaSP, and despite the new complexity of the platform, browsers rendering standard features in different ways is becoming increasingly rare. Bugs happen, sometimes in the browser and sometimes in the spec, but there is a commitment to avoid these and to create a stable platform we can all rely on. It is exciting to be part of it.
This is a perceptive overview of three different species of agencies—consulting-led, engineering-led, and design-led. Clearleft fits squarely into that last category …and the weaknesses of that particular flavour of agency ring very true:
Design firms have historically lacked the business strategy chops and pedigree of the consultants.
It will probably come as no surprise that Clearleft has been getting “more strategic” recently.
Design needs more MBAs with C-suite relationships and an almost arrogant assumption that of course they belong there, advising the CEO and truly bringing design thinking to business. It’s time to do strategy for real. The market has never been more receptive to it than it is right now.
A useful set of questions to ask on any project, shuffled and dealt to you.
They’ll not only help you foresee unintended consequences—they can also reveal opportunities for positive change.
All of the content in images. Not a single image has alternative text. If only they had asked themselves:
When you picture your user base, who is excluded? If they used your product, what would their experience be like?