Tags: content

112

sparkline

Thursday, September 16th, 2021

Writing the Clearleft newsletter

The Clearleft newsletter goes out every two weeks on a Thursday. You can peruse the archive to see past editions.

I think it’s a really good newsletter, but then again, I’m the one who writes it. It just kind of worked out that way. In theory, anyone at Clearleft could write an edition of the newsletter.

To make that prospect less intimidating, I put together a document for my colleagues describing how I go about creating a new edition of the newsletter. Then I thought it might be interesting for other people outside of Clearleft to get a peek at how the sausage is made.

So here’s what I wrote…

Topics

The description of the newsletter is:

A round-up of handpicked hyperlinks from Clearleft, covering design, technology, and culture.

It usually has three links (maybe four, tops) on a single topic.

The topic can be anything that’s interesting, especially if it’s related to design or technology. Every now and then the topic can be something that incorporates an item that’s specifically Clearleft-related (a case study, an event, a job opening). In general it’s not very salesy at all so people will tolerate the occasional plug.

You can use the “iiiinteresting” Slack channel to find potential topics of interest. I’ve gotten in the habit of popping potential newsletter fodder in there, and then adding related links in a thread.

Tone

Imagine you’re telling a friend about something cool you’ve just discovered. You can sound excited. Don’t worry about this looking unprofessional—it’s better to come across as enthusiastic than too robotic. You can put real feelings on display: anger, disappointment, happiness.

That said, you can also just stick to the facts and describe each link in turn, letting the content speak for itself.

If you’re expressing a feeling or an opinion, use the personal pronoun “I”. Don’t use “we” unless you’re specifically referring to Clearleft.

But most of the time, you won’t be using any pronouns at all:

So-and-so has written an article in such-and-such magazine on this-particular-topic.

You might find it useful to have connecting phrases as you move from link to link:

Speaking of some-specific-thing, this-other-person has a different viewpoint.

or

On the subject of this-particular-topic, so-and-so wrote something about this a while back.

Structure

The format of the newsletter is:

  1. An introductory sentence or short paragraph.
  2. A sentence describing the first link, ending with the title of the item in bold.
  3. A link to the item on its own separate line.
  4. An excerpt from the link, usually a sentence or two, styled as a quote.
  5. Repeat steps 2 to 4 another two times.


Take a look through the archive of previous newsletters to get a feel for it.

Subject line

Currently the newsletter is called dConstruct from Clearleft. The subject line of every edition is in the format:

dConstruct from Clearleft — Title of the edition

(Note that’s an em dash with a space on either side of it separating the name of the newsletter and the title of the edition)

I often try to come up with a pun-based title (often a punny portmanteau) but that’s not necessary. It should be nice and short though: just one or two words.

Sunday, March 28th, 2021

Content Design Basics by Giles Turnbull - YouTube

This is a great series of short videos all about content design. The one on writing for humans is particularly good.

Tuesday, March 9th, 2021

Content buddy

One of my roles at Clearleft is “content buddy.” If anyone is writing a talk, or a blog post, or a proposal and they want an extra pair of eyes on it, I’m there to help.

Sometimes a colleague will send a link to a Google Doc where they’ve written an article. I can then go through it and suggest changes. Using the “suggest” mode rather than the “edit” mode in Google Docs means that they can accept or reject each suggestion later.

But what works better—and is far more fun—is if we arrange to have a video call while we both have the Google Doc open in our browsers. That way, instead of just getting the suggestions, we can talk through the reasoning behind each one. It feels more like teaching them to fish instead of giving them a grammatically correct fish.

Some of the suggestions are very minor; punctuation, capitalisation, stuff like that. Where it gets really interesting is trying to figure out and explain why some sentence constructions feel better than others.

A fairly straightforward example is long sentences. Not all long sentences are bad, but the longer a sentence gets, the more it runs the risk of overwhelming the reader. So if there’s an opportunity to split one long sentence into two shorter sentences, I’ll usually recommend that.

Here’s an example from Chris’s post, Delivering training remotely – the same yet different. The original sentence read:

I recently had the privilege of running some training sessions on product design and research techniques with the design team at Duck Duck Go.

There’s nothing wrong with that. But maybe this is a little easier to digest:

I recently had the privilege of running some training sessions with the design team at Duck Duck Go. We covered product design and research techniques.

Perhaps this is kind of like the single responsibility principle in programming. Whereas the initial version was one sentence that conveyed two pieces of information (who the training was with and what the training covered), the final version has a separate sentence for each piece of information.

I wouldn’t take that idea too far though. Otherwise you’d end up with something quite stilted and robotic.

Speaking of sounding robotic, I’ve noticed that people sometimes avoid using contractions when they’re writing online: “there is” instead of “there’s” or “I am” instead of “I’m.” Avoiding contractions seems to be more professional, but actually it makes the writing a bit too formal. There’s a danger of sounding like a legal contract. Or a Vulcan.

Sometimes a long sentence can’t be broken down into shorter sentences. In that case, I watch out for how much cognitive load the sentence is doling out to the reader.

Here’s an example from Maite’s post, How to engage the right people when recruiting in house for research. One sentence initially read:

The relevance of the people you invite to participate in a study and the information they provide have a great impact on the quality of the insights that you get.

The verb comes quite late there. As a reader, until I get to “have a great impact”, I have to keep track of everything up to that point. Here’s a rephrased version:

The quality of the insights that you get depends on the relevance of the people you invite to participate in a study and the information they provide.

Okay, there are two changes there. First of all, the verb is now “depends on” instead of “have a great impact on.” I think that’s a bit clearer. Secondly, the verb comes sooner. Now I only have to keep track of the words up until “depends on”. After that, I can flush my memory buffer.

Here’s another changed sentence from the same article. The initial sentence read:

You will have to communicate at different times and for different reasons with your research participants.

I suggested changing that to:

You will have to communicate with your research participants at different times and for different reasons.

To be honest, I find it hard to explain why that second version flows better. I think it’s related to the idea of reducing dependencies. The subject “your research participants” is dependent on the verb “to communicate with.” So it makes more sense to keep them together instead of putting a subclause between them. The subclause can go afterwards instead: “at different times and for different reasons.”

Here’s one final example from Katie’s post, Service Designers don’t design services, we all do. One sentence initially read:

Understanding the relationships between these moments, digital and non-digital, and designing across and between these moments is key to creating a compelling user experience.

That sentence could be broken into shorter sentences, but it might lose some impact. Still, it can be rephrased so the reader doesn’t have to do as much work. As it stands, until the reader gets to “is key to creating”, they have to keep track of everything before that. It’s like the feeling of copying and pasting. If you copy something to the clipboard, you want to paste it as soon as possible. The longer you have to hold onto it, the more uncomfortable it feels.

So here’s the reworked version:

The key to creating a compelling user experience is understanding the relationships between these moments, digital and non-digital, and designing across and between these moments.

As a reader, I can digest and discard each of these pieces in turn:

  1. The key to creating a compelling user experience is…
  2. understanding the relationships between these moments…
  3. digital and non-digital…
  4. and…
  5. designing across and between these moments.

Maybe I should’ve suggested “between these digital and non-digital moments” instead of “between these moments, digital and non-digital”. But then I worry that I’m intruding on the author’s style too much. With the finished sentence, it still feels like a rousing rallying cry in Katie’s voice, but slightly adjusted to flow a little easier.

I must say, I really, really enjoy being a content buddy. I know the word “editor” would be the usual descriptor, but I like how unintimidating “content buddy” sounds.

I am almost certainly a terrible content buddy to myself. Just as I ignore my own advice about preparing conference talks, I’m sure I go against my own editorial advice every time I blurt out a blog post here. But there’s one piece I’ve given to others that I try to stick to: write like you speak.

Thursday, February 25th, 2021

Diving into the ::before and ::after Pseudo-Elements / Coder’s Block

A thorough deep dive into generated content in CSS.

Sunday, November 22nd, 2020

Static sites, slack and scrollytelling. | Clearleft

Cassie’s enthusiasm for fun and interesting SVG animation shines through in her writing!

Monday, October 19th, 2020

world smallest office suite

I like this idea for a minimum viable note-taking app:

data:text/html,<body contenteditable style="line-height:1.5;font-size:20px;">

I have added this to bookmarks and now my zero-weight text editor is one keypress away from me. You might also use it as a temporary clipboard to paste text or even pictures.

See also: a minimum viable code editor.

Saturday, September 26th, 2020

On not choosing WordPress for the W3C redesign project - Working in the open with W3C and Studio 24

The use of React complicates front-end build. We have very talented front-end developers, however, they are not React experts - nor should they need to be. I believe front-end should be built as standards-compliant HTML/CSS with JavaScript used to enrich functionality where necessary and appropriate.

Saturday, July 18th, 2020

Indexing your offline-capable pages with the Content Indexing API

A Chrome-only API for adding offline content to an index that can be exposed in Android’s “downloads” list. It just shipped in the lastest version of Chrome.

I’m not a fan of browser-specific non-standards but you can treat this as an enhancement—implementing it doesn’t harm non-supporting browsers and you can use feature detection to test for it.

Friday, May 8th, 2020

Home | SofaConf 2020

You don’t want to miss this! A five-day online conference with a different theme each day:

  1. Monday: Product Strategy
  2. Tuesday: Research
  3. Wednesday: Service Design
  4. Thursday: Content Strategy
  5. Friday: Interaction Design

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!)

Monday, April 27th, 2020

Looking at coronavirus.data.gov.uk - Matthew Somerville

I worry that more and more nowadays, people jump to JavaScript frameworks because that is what they know or have been taught, even though they are entirely inappropriate for a wide array of things and can often produce poor results.

Last week I wrote about the great work that Matthew did and now he’s written up his process:

The important thing is to have a resilient base layer of HTML and CSS, and then to enhance that with JavaScript.

Thursday, April 23rd, 2020

Lightweight

It’s been fascinating to see how television programmes have adapted to The Situation. It’s like there’s been a weird inversion with the YouTube asthetic. Instead of YouTubers doing their utmost to emulate the look of professional television, now everyone on professional television looks like a YouTuber.

No more lighting or audio technicians. No more studio audiences. Heck, no more studios.

There are some kinds of TV programmes that are showing the strain. A lot of comedy formats just fall flat without the usual production values. But a lot of programmes work just fine. In fact, some of them might be better. Watching Mary Beard present Front Row Late from her house is an absolute delight. It feels more direct and honest without the artiface of a television studio. It kind of makes you wonder whether expensive production costs are really necessary when what you really care about is the content.

All of this is one big belaboured metaphor for websites.

In times of crisis, informational websites sometimes offer a “lite” version. Max has even made an emergency website kit:

The site contains only the bare minimum - no webfonts, no tracking, no unnecessary images. The entire thing should fit in a single HTTP request. It’s basically just a small, ultra-lean blog focused on maximum resilience and accessibility. The Service Worker takes it a step further from there so if you’ve visited the site once, the information is still accessible even if you lose network coverage.

Eric emphasises the importance of performance in his post Get Static:

I’m thinking here of sites for places like health departments (and pretty much all government services), hospitals and clinics, utility services, food delivery and ordering, and I’m sure there are more that haven’t occurred to me.  As much as you possibly can, get it down to static HTML and CSS and maybe a tiny bit of enhancing JS, and pare away every byte you can.

Tom Loosemore offers this advice to teams building new coronavirus services:

  1. Get a 4 year-old Android phone, and use it as your test/demo device.
  2. https://design-system.service.gov.uk is your friend.
  3. Full React isn’t your friend if it makes your service slow & inaccessible

Remember: This is for everyone.

Indeed, Gov.uk are usually a paragon of best practices in just about any situation. But they dropped the ball recently, as Matthew attests:

coronavirus.data.gov.uk is a static site, fetching and displaying remote data. It is also a 100% client-side JavaScript React site.

http://dracos.co.uk/made/coronavirus.data.gov.uk/ is 238K vs 770K (basics) on load. I’ve removed about 550K of JavaScript. It seems to work the same.

As Tom says:

One sign that your website isn’t meeting the needs of all your users is when Matthew Somerville gets sufficiently grumpy about it to do a proper version himself.

It’s true enough that Matthew excels at creating lightweight, accessible versions of services that are too bloated or buggy to use. His accessible Odeon project from back in the day is legendary. And I use his slimline version of the National Rail website all the time: traintimes.org.uk—it’s a terrificly performant progressive web app.

It’s thankless work though. It flies in the face of everything considered “modern” web development. (If you want to know the cost of “modern” framework-driven JavaScript-first web development, Tim has the numbers.) But Matthew is kind of a hero to me. I wish more developers would follow his example.

Maybe now, with this rush to make lightweight versions of valuable services, we might stop and reflect on whether we ever really needed all those added extras in the first place.

Hope springs eternal.

Update: Matthew has written about his process in Looking at coronavirus.data.gov.uk.

Saturday, February 15th, 2020

Standards for Writing Accessibly – A List Apart

  • Write Chronologically, Not Spatially
  • Write Left to Right, Top to Bottom
  • Don’t Use Colors and Icons Alone
  • Describe the Action, Not the Behavior

Monday, July 1st, 2019

Why your design system should include content | Clearleft

Rachel makes the case for integrating content design patterns into component libraries:

Instead of content design systems and visual design systems existing in isolation, the ideal is one design system that accommodates everything, marrying the content and design together in the way it will actually be used and experienced.

Tuesday, June 18th, 2019

How to Section Your HTML | CSS-Tricks

A deep dive with good advice on using—and labelling—sectioning content in HTML: nav, aside, section, and article.

Monday, June 17th, 2019

The Problem With “Content”   – On my Om

My website has my words, my interviews, my photos, and my identity — what it doesn’t have, as far as I’m concerned, is “content.” Looking at it from the other side, for platforms like Facebook, Instagram, and YouTube, everything is “content” regardless of its provenance. Each creation is merely an object, only valuable for its ability to increase our time spent on their platforms, allowing them to sell more advertising.

Thursday, May 2nd, 2019

The Elements of Content Strategy — A Book Apart

Erin’s classic book is now available to read online for free!

Monday, April 8th, 2019

User interfaces: hiding stuff should be a last resort by Adam Silver

When we hide content, there’s a greater risk the user won’t see it. There’s a higher reliance on digital literacy and it’s generally more labour intensive for the user.

Worse still, sometimes we kill off essential content.

Wednesday, March 20th, 2019

CSS custom properties in generated content

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)

Monday, March 4th, 2019

Generation Style by Eric Meyer

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.

Designing for Trust in an Uncertain World by Margot Bloomstein

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.

Voice

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.

Volume

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.

Vulnerability

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.