Journal tags: content

Those HTML web components I made for date inputs are very simple. All they do is slightly extend the behaviour of the existing input elements.

This would be the ideal use-case for the is attribute:

<input is="input-date-future" type="date">

Alas, Apple have gone on record to say that they will never ship support for customized built-in elements.

So instead we have to make HTML web components by wrapping existing elements in new custom elements:

<input-date-future>
  <input type="date">
<input-date-future>

The end result is the same. Mostly.

Because there’s now an additional element in the DOM, there could be unexpected styling implications. Like, suppose the original element was direct child of a flex or grid container. Now that will no longer be true.

So something I’ve started doing with HTML web components like these is adding something like this inside the connectedCallback method:

connectedCallback() {
    this.style.display = 'contents';
  …
}

This tells the browser that, as far as styling is concerned, there’s nothing to see here. Move along.

Or you could (and probably should) do it in your stylesheet instead:

input-date-future {
  display: contents;
}

Just to be clear, you should only use display: contents if your HTML web component is augmenting what’s within it. If you add any behaviours or styling to the custom element itself, then don’t add this style declaration.

It’s a bit of a hack to work around the lack of universal support for the is attribute, but it’ll do.

I’ve mentioned before that one of my roles at Clearleft is to be a 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.

Ideally this happens in real time over video while we both have the same Google doc open:

That way, instead of just getting the suggestions, we can talk through the reasoning behind each one.

I was doing that recently with Rebecca when she was writing an announcement blog post for the Leading Design on-demand platform.

Talking through the structure, I suggested this narrative flow:

1. Start by describing the problem from the reader’s perspective—put yourself in their shoes and enumerate their struggles. This is the part of the story where you describe the dragon in all its horrifying detail.
2. Now show them the sword, the supernatural aid that you can hand to them. Describe the product in purely subjective terms. No need to use adjectives. Let the scale of the offering speak for itself.
3. Then step back into the reader’s shoes and describe what life will be like after they’ve signed up and they’ve slain the dragon.
4. Finish with the call to adventure.

I think that blog post turned out well. And we both had good fun wrangling it into shape.

Today I was working on another great blog post, this time by Luke. Alas, the content buddying couldn’t be in real time so I had to make my suggestions asynchronously.

I still like to provide some reasoning for my changes, so I scattered comments throughout. I was also able to refer to something I put together a little while back…

Here’s the Clearleft tone of voice and style guide document.

I tried to keep it as short as possible. There’s always a danger that the style guide section in particular could grow and grow, so I kept to specific things that have come up in actual usage.

I hadn’t looked at it in a while so I was able to see it with somewhat fresh eyes today. Inevitably I spotted some things that could be better. But overall, I think it’s pretty good.

It’s just for internal use at Clearleft, but rather than have it live in a Google Drive or Dropbox folder, I figured it would be easier to refer to it with a URL. And we’ve always liked sharing our processes openly. So even though it’s probably of no interest to anyone outside of Clearleft, here it is: toneofvoice.clearleft.com

I’ve added five more faces to the UX London line-up.

Irina Rusakova will be giving a talk on day one, the day that focuses on research. Her talk on designing with the autistic community is one I’m really looking forward to.

Also on day one, my friend and former Clearleftie Cennydd Bowles will be giving a workshop called “What could go wrong?” He literally wrote the book on ethical design.

Day two is all about creation. My co-worker Chris How will be speaking. “Nepotism!” you cry! But no, Chris is speaking because I had the chance to his talk—called “Unexpectedly obvious”—and I thought “that’s perfect for UX London!”:

Let him take you on a journey through time and across the globe sharing stories of designs that solve problems in elegant if unusual ways.

Also on day two, you’ve got two additional workshops. Lou Downe will be running a workshop on designing good services, and Giles Turnbull will be running a workshop called “Writing for people who hate writing.”

I love that title! Usually when I contact speakers I don’t necessarily have a specific talk or workshop in mind, but I knew that I wanted that particular workshop from Giles.

When I wrote to Giles to ask come and speak, I began by telling how much I enjoy his blog—I’m a long-time suscriber to his RSS feed. He responded and said that he also reads my blog—we’re blog buddies! (That’s a terrible term but there should be a word for people who “know” each other only through reading each other’s websites.)

Anyway, that’s another little treasure trove of speakers added to the UX London roster:

• Irina Rusakova
• Cennydd Bowles
• Chris How
• Lou Downe
• Giles Turnbull

That’s nineteen speakers already and we’re not done yet—expect further speaker announcements soon. But don’t wait on those announcements before getting your ticket. Get yours now!

It wasn’t that long ago that I told you about some of the speakers that have been added to the line-up for UX London in June: Steph Troeth, Heldiney Pereira, Lauren Pope, Laura Yarrow, and Inayaili León. Well, now I’ve got another five speakers to tell you about!

Aleks Melnikova will be giving a workshop on day one, June 28th—that’s the day with a focus on research.

Stephanie Marsh—who literally wrote the book on user research—will also be giving a workshop that day.

Before those workshops though, you’ll get to hear a talk from the one and only Kat Zhou, the creator of Design Ethically. By the way, you can hear Kat talking about deceptive design in a BBC radio documentary.

Day two has a focus on content design so who better to deliver a workshop than Sarah Winters, author of the Content Design book.

Finally, on day three—with its focus on design systems—I’m thrilled to announce that Adekunle Oduye will be giving a talk. He too is an author. He co-wrote the Design Engineering Handbook. I also had the pleasure of talking to Adekunle for an episode of the Clearleft podcast on design engineering.

So that’s another five excellent speakers added to the line-up:

• Aleks Melnikova
• Stephanie Marsh
• Kat Zhou
• Sarah Winters
• Adekunle Oduye

That’s a total of fifteen speakers so far with more on the way. And I’ll be updating the site with more in-depth descriptions of the talks and workshops soon.

If you haven’t yet got your ticket for UX London, grab one now. You can buy tickets for individual days, or to get the full experience and the most value, get a ticket for all three days.

If you’ve signed up to the UX London newsletter then this won’t be news to you, but more speakers have been added to the line-up.

Steph Troeth will be giving a workshop on day one. That’s the day with a strong focus on research, and when it comes to design research, Steph is unbeatable. You can hear some of her words of wisdom in an episode of the Clearleft podcast all about design research.

Heldiney Pereira will be speaking on day two. That’s the day with a focus on content design. Heldiney previously spoke at our Content By Design event and it was terrific—his perspective on content design as a product designer is invaluable.

Lauren Pope will also be on day two. She’ll be giving a workshop. She recently launched a really useful content audit toolkit and she’ll be bringing that expertise to her UX London workshop.

Day three is going to have a focus on design systems (and associated disciplines like design engineering and design ops). Both Laura Yarrow and Inayaili León will be giving talks on that day. You can expect some exciting war stories from the design system trenches of HM Land Registry and GitHub.

I’ve got some more speakers confirmed but I’m going to be a tease and make you wait a little longer for those names. But check out the line-up so far! This going to be such an excellent event (I know I’m biased, but really, look at that line-up!).

June 28th to 30th. Tobacco Dock, London. Get your ticket if you haven’t already.

The first speakers are live on the UX London 2022 site! There are only five people announced for now—just enough to give you a flavour of what to expect. There will be many, many more.

Putting together the line-up of a three-day event is quite challenging, but kind of fun too. On the one hand, each day should be able to stand alone. After all, there are one-day tickets available. On the other hand, it should feel like one cohesive conference, not three separate events.

I’ve decided to structure the three days to somewhat mimic the design process…

The first day is all about planning and preparation. This is like the first diamond in the double-diamond process: building the right thing. That means plenty of emphasis on research.

The second day is about creation and execution. It’s like that second diamond: building the thing right. This could cover potentially everything but this year the focus will be on content design.

The third day is like the third diamond in the double dia— no, wait. The third day is about growing, scaling, and maintaining design. That means there’ll be quite an emphasis on topics like design systems and design engineering, maybe design ops.

But none of the days will be exclusively about a single topic. There are evergreen topics that apply throughout the process: product design, design ethics, inclusive design.

It’s a lot to juggle! But I’m managing to overcome choice paralysis and assemble a very exciting line-up indeed. Trust me—you won’t want to miss this!

Early bird tickets are available until February 28th. That’s just a few days away. I recommend getting your tickets now—you won’t regret it!

Quite a few people are bringing their entire teams, which is perfect. UX London can be both an educational experience and a team-bonding exercise. Let’s face it, it’s been too long since any of us have had a good off-site.

If you’re one of those lucky people who’s coming along (or if you’re planning to), I’m curious: given the themes mentioned above, are there specific topics that you’d hope to see covered? Drop me a line and let me know.

Also, if you read the description of the event and think “Oh, I know the perfect speaker!” then I’d love to hear from you. Maybe that speaker is you. (Although, cards on the table; if you look like me—another middle-age white man—I may take some convincing.)

Right. Time to get back to my crazy wall of conference curation.

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.

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.

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.

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.

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.

I’m at An Event Apart in Seattle, ready for three days of excellence. Setting the scene with the first talk of the event is the one and only Jeffrey Zeldman. His talk is called Slow Design for an Anxious World:

Most web pages are too fast or too slow. Last year, Zeldman showed us how to create design that works faster for customers in a hurry to get things done. This year he’ll show how to create designs that deliberately slow your visitors down, helping them understand more and make better decisions.

Learn to make layouts that coax the visitor to sit back, relax, and actually absorb the content your team works so hard to create. Improve UX significantly without spending a lot or chasing the tail lights of the latest whiz-bang tech. Whether you build interactive experiences or craft editorial pages, you’ll learn how to ease your customers into the experience and build the kind of engagement you thought the web had lost forever.

I’m going to attempt to jot down the gist of it as it happens…

Jeffrey begins by saying that he’s going to slooooowly ease us into the day. Slow isn’t something that our industry prizes. Things change fast on the internet. “You’re using last year’s framework!?” Ours is a newly-emerging set of practices.

Slow is negative in our culture too. We don’t like slow movies, or slow books. But somethings are better slow. Wine that takes time to make is better than wine that you produce in a prison toilet in five days. Slow-brewed coffee is well-brewed coffee. Slow dancing is nice. A slow courtship is nice. And reading slowly is something enjoyable. Sometimes you need to scan information quickly, but when we really immerse ourselves in a favourite book, we really comprehend better. Hold that thought. We’re going to come to books.

Fast is generally what we’re designing for. It’s the best kind of design for customer service designs—for people who want to accomplish something and then get on with their lives. Fast is good for customer service designs. Last year Jeffrey gave a talk last year called Beyond Engagement where he said that service-oriented content must be designed for speed of relevancy. Speed of loading is important, and so is speed of relevancy—how quickly can you give people the right content.

But slow is best for comprehension. Like Mr. Rogers. When things are a little bit slower, it’s kind of easier to understand. When you’re designing for readers, s l o w i t d o w n.

How do we slow down readers? That’s what this talk is about (he told us it would be slow—he only just got to what the point of this talk is).

Let’s start with a form factor. The book. A book is a hack where the author’s brain is transmitting a signal to the reader’s brain, and the designer of the book is making that possible. Readability is more than legibility. Readability transcends legibility, enticing people to slow down and read.

This is about absorption, not conversion. We have the luxury of doing something different here. It’s a challenge.

Remember Readability? It was designed by Arc90. They mostly made software applications for arcane enterprise systems, and that stuff tends not to be public. It’s hard for an agency to get new clients when it can’t show what it does. So they decided to make some stuff that’s just for the public. Arc90 Labs was spun up to make free software for everyone.

Readability was like Instapaper. Instapaper was made by Marco Arment so that he could articles when he was commuting on the subway. Readability aimed to do that, but to also make the content like beautiful. It’s kind of like how reader mode in Safari strips away superfluous content and formats what’s left into something more readable. Safari’s reader mode was not invented by Apple. It was based on the code from Readability. The mercury reader plug-in for Chrome also uses Readability’s code. Jeffrey went around pointing out to companies that the very existence of things like Readability was a warning—we’re making experiences so bad that people are using software to work around them. What we can do so that people don’t have to use these tools?

Craig Mod wrote an article for A List Apart called A Simpler Page back in 2011. With tablets and phones, there isn’t one canonical presentation of content online any more. Our content is sort of amorphous. Craig talked about books and newspapers on tablets. He talked about bed, knee, and breakfast distances from the body to the content.

1. Bed (close to face): reading a novel on your stomach, lying in bed with the iPad propped up on a pillow.
2. Knee (medium distance from face): sitting on the couch, iPad on your knee, catching up on Instapaper.
3. Breakfast (far from face): propped up at a comfortable angle, behind your breakfast coffee and bagel, allowing hands-free news reading.

There’s some correlation between distance and relaxation. That knee position is crucial. That’s when the reader contemplates with pleasure and concentration. They’re giving themselves the luxury of contemplation. It’s a very different feeling to getting up and going over to a computer.

So Jeffrey redesigned his own site with big, big type, and just one central column of text. He stripped away the kind of stuff that Readability and Instapaper would strip away. He gave people a reader layout. You would have to sit back to read the content. He knew he succeeded because people started complaining: “Your type is huge!” “I have to lean back just to read it!” Then he redesigned A List Apart with Mike Pick. This was subtler.

Medium came along with the same focus: big type in a single column. Then the New York Times did it, when they changed their business model to a subscription paywall. They could remove quite a bit of the superfluous content. Then the Washington Post did it, more on their tablet design than their website. The New Yorker—a very old-school magazine—also went down this route, and they’re slow to change. Big type. White space. Bold art direction. Pro Publica is a wonderful non-profit newspaper that also went this route. They stepped it up by adding one more element: art direction on big pieces.

How do these sites achieve their effect of slowing you down and calming you?

Big type. We spend a lot of our time hunched forward. Big type forces you to sit back. It’s like that first moment in a yoga workshop where you’ve got to just relax before doing anything. With big type, you can sit back, take a breathe, and relax.

Hierarchy. This is classic graphic design. Clear relationships.

Minimalism. Not like Talking Heads minimalism, but the kind of minimalism where you remove every extraneous detail. Like what Mies van der Rohe did for architecture, where just the proportions—the minimalism—is the beauty. Or like what Hemingway did with writing—scratch out everything but the nouns and verbs. Kill your darlings.

Art direction. When you have a fancy story, give it some fancy art direction. Pro Publica understand that people won’t get confused about what site they’re on—they’ll understand that this particular story is special.

Whitespace. Mark Boulton wrote an article about whitespace in A List Apart. He talked about two kinds of whitespace: macro and micro. Macro is what we usually think about when we talk about whitespace. Whitespace conveys feelings of extreme luxury, and luxury brands know this. Whitespace makes us feels special. Macro whitespace can be snotty. But there’s also micro whitespace. That’s the space between lines of type, and the space inside letterforms. There’s more openness and air, even if the macro whitespace hasn’t changed.

Jeffrey has put a bunch of these things together into an example.

To recap, there are five points:

1. Big type
2. Hierarchy
3. Minimalism
4. Art direction
5. Whitespace

There are two more things that Jeffrey wants to mention before his done. If you want people to pay attention to your design, it must be branded and it must be authoritative.

Branded. When all sites look the same, all content appears equal. Jeffrey calls this the Facebook effect. Whether it’s a noble-prize-winning author, or your uncle ranting, everthing gets the same treatment on Facebook. If you’re taking the time to post content to the web, take the time to let people know who’s talking.

Authoritative. When something looks authoritative, it cues the reader to your authenticity and integrity. Notice how every Oscar-worthy movie uses Trajan on its poster. That’s a typeface based on a Roman column. Strong, indelible letter forms carved in stone. We have absorbed those letterforms into our collective unconcious. Hollywood tap into this by using Trajan for movie titles.

Jeffrey wrote an article called To Save Real News about some of these ideas.

And with that, Jeffrey thanks us and finishes up.

A few people on Twitter have asked about the table of contents for my new book about service workers, Going Offline. Fair enough—why not see the menu before placing your order?

1. Introducing Service Workers Does what is says on the tin. It also talks about switching to HTTPS. This chapter is online at A List Apart so you can try before you buy.
2. Preparing for Offline This chapter talks about how you register a service worker, and introduces the concept of promises in JavaScript.
3. Making Fetch Happen Yes, this chapter title is a Mean Girls reference; fight me. The chapter explains fetch events and shows how a service worker can intercept them.
4. Cache Me if you Can This puntastic chapter is all about caching, and shows you can use caches in your service worker script.
5. Service Worker Strategies This is the heart of the book, where you get decide what kind of strategy you want to implement—when to go to the network, when to go a cache, and so on. And as a last resort, you can have a custom offline page.
6. Refining Your Service Worker Building on the previous chapter, this one looks at how you can use different strategies for different kinds of files—images, pages, etc.
7. Tidying Up This chapter is about good service worker hygiene like deleting old caches. It also introduces some more coding style options.
8. The Offline Experience By this chapter, the service worker script is done. But there’s still plenty of room for enhancements on that custom offline page, including the use of offline storage.
9. Progressive Web Apps The book finishes with an explanation of progressive web apps, and a step-by-step guide to creating your own web app manifest.

Sound good? Pre-order your copy of the book now and you’ll have it in your hands ten days from now.

I’m at An Event Apart Seattle (Special Edition). Jeffrey is kicking off the show with a presentation called Beyond Engagement: the Content Performance Quotient. I’m going to jot down some notes during this talk…

First, a story. Jeffrey went to college in Bloomington, Indiana. David Frost—the British journalist—came to talk to them. Frost had a busy schedule, and when he showed up, he seemed a little tipsy. He came up to the podium and said, “Good evening, Wilmington.”

Jeffrey remembers this and knows that Seattle and Portland have a bit of a rivalry, and so Jeffrey thought, the first time he spoke in Portland, it would be funny to say “Good morning, Seattle!” …and that was the last time he spoke in Portland.

Anyway …”Good morning, Portland!”

Jeffrey wants to talk about content. He spends a lot of time in meetings with stakeholders. Those stakeholders always want things to be better, and they always talk about “engagement.” It’s the number one stakeholder request. It’s a metric that makes stakeholders feel comfortable. It’s measurable—the more seconds people give us, the better.

But is that really the right metric?

There are some kinds of sites where engagement is definitely the right metric. Instagram, for example. That’s how they make money. You want to distract yourself. Also, if you have a big content site—beautifully art-directed and photographed—then engagement is what you want. You want people to spend a lot of time there. Or if you have a kids site, or a games site, or a reading site for kids, you want them to be engaged and spend time. A List Apart, too. It’s like the opposite of Stack Overflow, where you Google something and grab the piece of code you need and then get out. But for A List Apart or Smashing Magazine, you want people to read and think and spend their time. Engagement is what you want.

But for most sites—insurance, universities—engagement is not what you want. These sites are more like a customer service desk. You want to help the customer as quickly as possible. If a customer spends 30 minutes on our site, was she engaged …or frustrated? Was it the beautiful typography and copy …or because she couldn’t find what they wanted? If someone spends a long time on an ecommerce site, is it because the products are so good …or because search isn’t working well?

What we need is a metric called speed of usefulness. Jeffrey calls this Content Performance Quotient (CPQ) …because business people love three-letter initialisms. It’s a loose measurement: How quickly can you solve the customer’s problem? It’s the shortest distance between the problem and the solution. Put another way, it’s a measurement of your value to the customer. It’s a new way to evaluate success.

From the customer’s point of view, CPQ is the time it takes the customer to get the information she came for. From the organisation’s point of view, it’s the time it takes for a specific customer to find, receive, and absorb your most important content.

We’re all guilty of neglecting the basics on our sites—just what it is it that we do? We need to remember that we’re all making stuff to make people’s live’s easier. Otherwise we end up with what Jeffrey calls “pretty garbage.” It’s aesthetically coherent and visually well-designed …but if the content is wrong and doesn’t help anyone, it’s garbage. Garbage in a delightfully responsive grid is still garbage.

Let’s think of an example of where people really learned to cut back and really pare down their message. Advertising. In the 1950s, when the Leo Burnett agency started the Marlboro campaign, TV spots were 60 seconds long. An off-camera white man in a suit with a soothing voice would tell you all about the product while the visuals showed you what he was talking about. No irony. Marlboro did a commercial where there was no copy at all until the very end. For 60 seconds they showed you cowboys doing their rugged cowboy things. Men in the 1950s wanted to feel rugged, you see. Leo Burnett aimed the Marlboro cigarettes at those men. And at the end of the 60 second montage of rugged cowboys herding steers, they said “Come to where the flavour is. Come to Marlboro Country.” For the billboard, they cut it back even more. Just “Come to Marlboro Country.” In fact, they eventually went to just “Marlboro.” Jeffrey knows that this campaign worked well, because he started smoking Marlboros as a kid.

Leaving aside the ethical implications of selling cigarettes to eight-graders, let’s think about the genius of those advertisers. Slash your architecture and shrink your content. Constantly ask yourself, “Why do we need this?”

As Jared Spool says, design is the rendering of intent. Every design is intentional. There is some intent—like engagement—driving our design. If there’s no intent behind the design, it will fail, even if what you’re doing is very good. If your design isn’t going somewhere, it’s going nowhere. You’ve got to stay ruthlessly focused on what the customer needs and “kill your darlings” as Hemingway said. Luke Wroblewski really brought this to light when he talked about Mobile First.

To paraphrase David Byrne, how did we get here?

Well, we prioritised meetings over meaning. Those meetings can be full of tension; different stakeholders arguing over what should be on the homepage. And we tried to solve this by giving everyone what they want. Having a good meeting doesn’t necessarily mean having a good meeting. We think of good meetings as conflict-free where everyone emerges happy. But maybe there should be a conflict that gets resolved. Maybe there should be winners and losers.

Behold our mighty CMS! Anyone can add content to the website. Anyone can create the information architecture …because we want to make people happy in meetings. It’s easy to give everyone what they want. It’s harder to do the right thing. Harder for us, but better for the customer and the bottom line.

As Gerry McGovern says:

Great UX professionals are like whistleblowers. They are the voice of the user.

We need to stop designing 2001 sites for a 2018 web.

One example of cutting down content was highlighted in A List Apart where web design was compared to chess: The King vs. Pawn Game of UI Design. Don’t start by going through all the rules. Teach them in context. Teach chess by starting with a checkmate move, reduced down to just three pieces on the board. From there, begin building out. Start with the most important information, and build out from there.

When you strip down the game to its core, everything you learn is a universal principle.

Another example is atomic design: focus relentlessly on the individual interaction. We do it for shopping carts. We can do it for content.

Another example on A List Apart is No More FAQs: Create Purposeful Information for a More Effective User Experience. FAQ problems include:

• duplicate and contradictory information,
• lack of discernible content order,
• repetitive grammatical structure,
• increased cognitive load, and
• more content than they need.

Users come to any type of content with a particular purpose in mind, ranging from highly specific (task completion) to general learning (increased knowledge).

The important word there is purpose. We need to eliminate distraction. How do we do that?

One way is the waterfall method. Do a massive content inventory. It’s not recommended (unless maybe you’re doing a massive redesign).

Agile and scrum is another way. Constantly iterate on content. Little by little over time, we make the product better. It’s the best bet if you work in-house.

If you work in an agency, a redesign is an opportunity to start fresh. Take everything off the table and start from scratch. Jeffrey’s friend Fred Gates got an assignment to redesign an online gaming platform for kids to teach them reading and management skills. The organisation didn’t have much money so they said, let’s just do the homepage. Fred challenged himself to put the whole thing on the homepage. The homepage tells the whole story. Jeffrey is using this same method on a site for an insurance company, even though the client has a bigger budget and can afford more than just the homepage. The point is, what Fred did was effective.

So this is what Jeffrey is going to be testing and working on: speed of usefulness.

And for those of you who do need to use engagement as the right metric, Jeffrey covered the two kinds of metrics in an article called We need design that is faster and design that is slower.

For example, “scannability” is good for transactions (CPQ), but bad for thoughtful content (engagement). Our news designs need to slow down the user. Bigger type, typographic hierarchy, and more whitespace. Art direction. Shout out to Derek Powazek who designed Fray.com—each piece was designed based on the content. These days, look at what David Sleight and his crew are doing over at Pro Publica.

Who’s doing it right?

The Washington Post, The New York Times, Pro Publica, Slate, Smashing Magazine, and Vox are all doing this well in different ways. They’re bringing content to the fore.

Readability, Medium, and A List Apart are all using big type to encourage thoughtful reading and engagement.

But for other sites …apply the Content Performance Quotient.

See also:

• Luke's notes from this talk
• Torre's notes from this talk

I have a new role at Clearleft. It’s not a full-time role. It’s in addition to my existing role of …um …whatever it is I do at Clearleft.

Anyway, my new part-time role is that of being a content buddy. Sounds a little dismissive when I put it like that. Let me put in capitals…

My new part-time role is that of being a Content Buddy.

This is Ellen’s idea. She’s been recruiting Content Guardians and Content Buddies. The Guardians will be responsible for coaxing content out of people, encouraging to write that blog post, article, or case study. The role of the Content Buddy is to help shepherd those pieces into the world.

I have let it be known throughout the office that I am available—day or night, rain or shine—for proof-reading, editing, and general brain-storming and rubber-ducking.

On my first official day as a Content Buddy on Friday I helped Ben polish off a really good blog post (watch this space), listened to a first run-through of Charlotte’s upcoming talk at the Up Front conference in Manchester (which is shaping up to be most excellent), and got together with Paul for a mutual brainstorming session for future conference talks. The fact that Paul is no longer a full-time employee at Clearleft is a mere technicality—Content Buddies for life!

Paul is preparing a talk on design systems for Smashing Conference in Freiburg in September. I’m preparing a talk on the A element for the HTML Special part of CSS Day in Amsterdam in just one month’s time (gulp!). We had both already done a bit of mind-mapping to get a jumble of ideas down on paper. We learned that from Ellen’s excellent workshop.

Then we started throwing ideas back and forth, offering suggestions, and spotting patterns. Once we had lots of discrete chunks of stuff outlined (but no idea how to piece them together), we did some short intense spurts of writing using the fiendish TheMostDangerousWritingApp.com. I looked at Paul’s mind map, chose a topic from it for him, and he had to write on that non-stop for three to five minutes. Meanwhile he picked a topic from my mind map and I had to do the same. It was exhausting but also exhilarating. Very quickly we had chunks of content that we could experiment with, putting them in together in different ways to find different narrative threads. I might experiment with publishing them as short standalone blog posts.

The point was not to have polished, finished content but rather to get to the “shitty first draft” stage quickly. We were following Hemingway’s advice:

Write drunk, edit sober.

…but not literally. Mind you, I could certainly imagine combining beer o’clock on Fridays with Content Buddiness. That wasn’t an option on this particular Friday though, as I had to run off to band practice with Salter Cane. A very different, and altogether darker form of content creation.

It was only last week that myself and Ellen were brainstorming ideas for a combined workshop. Our enthusiasm got the better of us, and we said “Let’s just do it!” Before we could think better of it, the room was booked, and the calendar invitations were sent.

The topic was “story.”

No wait, maybe it was …”narrative.”

That’s not quite right either.

“Content,” perhaps?

Basically, here’s the issue: at some point everyone at Clearleft needs to communicate something by telling a story. It might be a blog post. It might be a conference talk. It might be a proposal for a potential client. It might be a case study of our work. Whatever form it might take, it involves getting a message across …using words. Words are hard. We wanted to make them a little bit easier.

We did two workshops. Ellen’s was yesterday. Mine was today. They were both just about two hours in length.

Get out of my head!

Ellen’s workshop was all about getting thoughts out of your head and onto paper. But before we could even start to do that, we had to confront our first adversary: the inner critic.

You know the inner critic. It’s that voice inside you that says “You’ve got nothing new to say”, or “You’re rubbish at writing.” Ellen encouraged each of us to drag this inner critic out into the light—much like Paul Ford did with his AnxietyBox.

Each of us drew a cartoon of our inner critic, complete with speech bubbles of things our inner critic says to us.

In a bizarre coincidence, Chloe and I had exactly the same inner critic, complete with top hat and monocle.

With that foe vanquished, we proceeded with a mind map. The idea was to just dump everything out of our heads and onto paper, without worrying about what order to arrange things in.

I found it to be an immensely valuable exercise. Whenever I’ve tried to do this before, I’d open up a blank text file and start jotting stuff down. But because of the linear nature of a text file, there’s still going to be an order to what gets jotted down; without meaning to, I’ve imposed some kind of priority onto the still-unformed thoughts. Using a mind map allowed me get everything down first, and then form the connections later.

There were plenty of other exercises, but the other one that really struck me was a simple framework of five questions. Whatever it is that you’re trying to say, write down the answers to these questions about your audience:

1. What are they sceptical about?
2. What problems do they have?
3. What’s different now that you’ve communicated your message?
4. Paint a pretty picture of life for them now that you’ve done that.
5. Finally, what do they need to do next?

They’re straightforward questions, but the answers can really help to make sure you’re covering everything you need to.

There were many more exercises, and by the end of the two hours, everyone had masses of raw material, albeit in an unstructured form. My workshop was supposed to help them take that content and give it some kind of shape.

The structure of stories

Ellen and I have been enjoying some great philosophical discussions about exactly what a story is, and how does it differ from a narrative structure, or a plot. I really love Ellen’s working definition: Narrative. In Space. Over Time.

This led me to think that there’s a lot that we can borrow from the world of storytelling—films, novels, fairy tales—not necessarily about the stories themselves, but the kind of narrative structures we could use to tell those stories. After all, the story itself is often the same one that’s been told time and time again—The Hero’s Journey, or some variation thereof.

So I was interested in separating the plot of a story from the narrative device used to tell the story.

To start with, I gave some examples of well-known stories with relatively straightforward plots:

• Star Wars,
• Little Red Riding Hood,
• Your CV,
• Jurassic Park, and
• Ghostbusters.

I asked everyone to take a story (either from that list, or think of another one) and write the plot down on post-it notes, one plot point per post-it. Before long, the walls were covered with post-its detailing the plot lines of:

• Robocop,
• Toy Story,
• Back To The Future,
• Elf,
• E.T.,
• The Three Little Pigs, and
• Pretty Woman.

Okay. That’s plot. Next we looked at narrative frameworks.

Flashback

Begin at a crucial moment, then back up to explain how you ended up there.

e.g. Citizen Kane “Rosebud!”

Dialogue

Instead of describing the action directly, have characters tell it to one another.

e.g. The Dialogues of Plato …or The Breakfast Club (or one of my favourite sci-fi short stories).

In Media Res

Begin in the middle of the action. No exposition allowed, but you can drop hints.

e.g. Mad Max: Fury Road (or Star Wars, if it didn’t have the opening crawl).

Backstory

Begin with a looooong zooooom into the past before taking up the story today.

e.g. 2001: A Space Odyssey.

Distancing Effect

Just the facts with no embellishment.

e.g. A police report.

You get the idea.

In a random draw, everyone received a card with a narrative device on it. Now they had to retell the story they chose using that framing. That led to some great results:

• Toy Story, retold as a conversation between Andy and his psychiatrist (dialogue),
• E.T., retold as a missing person’s report on an alien planet (distancing effect),
• Elf, retold with an introduction about the very first Christmas (backstory),
• Robocop, retold with Murphy already a cyborg, remembering his past (flashback),
• The Three Little Pigs, retold with the wolf already at the door and no explanation as to why there’s straw everywhere (in media res).

Once everyone had the hang of it, I asked them to revisit their mind maps and other materials from the previous day’s workshop. Next, they arranged the “chunks” of that story into a linear narrative …but without worrying about getting it right—it’s not going to stay linear for long. Then, everyone is once again given a narrative structure. Now try rearranging and restructuring your story to use that framework. If something valuable comes out of that, great! If not, well, it’s still a fun creative exercise.

And that was pretty much it. I had no idea what I was doing, but it didn’t matter. It wasn’t really about me. It was about helping others take their existing material and play with it.

That said, I’m glad I finally got this process out into the world in some kind of semi-formalised way. I’ve been preparing talks and articles using these narrative exercises for a while, but this workshop was just the motivation I needed to put some structure on the process.

I think I might try to create a proper deck of cards—along the lines of Brian Eno’s Oblique Strategies or Stephen Andersons’s Mental Notes—so that everyone has the option of injecting a random narrative structural idea into the mix whenever they’re stuck.

At the very least, it would be a distraction from listening to that pesky inner critic.

I’m at An Event Apart in Atlanta, the first show of the year.

Jeffrey is opening the show with a talk called 10 Commandments of Web Design. He jokes that the W3C asked him to change it to 10 Recommendations of Web Design.

1. Thou Shalt Entertain

Have fun. We spend a lot of time thinking about accessibility, usability, performance, all that good stuff …but we sometimes forget about making it delightful and entertaining—the kind of thing that TV people have to think of all the time.

Take Panic Software, for example. Their logos—designed by Icon Factory—look beautiful, unlike your typical logo. Think about every website you’ve ever visited with a corporate philosophy or mission statement that nobody reads or is interested in …well, Panic’s personality is embodied in their design, their typeface choices, and their icons.

A List Apart uses Kevin Cornell’s illustrations to make technical-sounding articles into something more fun. It’s a lesson learned from the advertising world: the headline and the visual play together (and don’t forget: James Thurber wasn’t a good illustrator, but his work became immensely popular and is often emulated).

Jeffrey shows an example of a 404 page from Rdio, which doesn’t entertain. It just states the facts: page not found. Not very fun. Style-architects, on the other hand, refer to their missing page as a wardrobe malfunction. You don’t have to be Louis C.K., but try to be a bit witty. A Canadian political party’s 404 page states: “Ottawa’s broken. And so is this link. We’re working to fix both.” Nice. The New York Daily News website has a great illustration for its 404 page.

Gnu bars are fibre bars …that help you go to the bathroom. This could have been the worst website assignment ever, but they worked hard to get the joy of going to the bathroom in there. They have a Gnusletter (groan). On their serious medical pages, however, the tone isn’t so playful.

Flickr has its greeting in different languages. There’s no real point to this feature apart from providing some delight. A little touch, a little detail that didn’t need to be there, but it’s fun. But you probably wouldn’t want to do it on a military site about how to launch atomic weapons.

2. Test Everything (including assumptions)

“Who here has a test suite of devices?”, asks Jeffrey. You need one. Brad Frost has written a great post to get you started. There’s also technology like Remote Preview. Ryan Irelan wrote an article about putting together the Happy Cog device lab by getting a bunch of used equipment.

But let’s also test our assumptions. On the redesign of An Event Apart, there were some decisions that went against the accepted best practices. So they wrote about why they made those decisions, such as deciding to have empty alt text on photos in author bios because the author’s name (which would have been the alt text) is already in the headline. There were lots of comments, and many of them were really angry.

To get meta, Cennydd wrote a post about challenging the assumption that we should challenge our assumptions. Inception! Sort of. It was challenging the accepted wisdom that user-centred design is always the superior approach (compared to, for example, genius design). So, if Luke Wroblewski is putting a form together, given his years of experience, maybe he doesn’t need to test every little thing this time. Pushing user-centred design was important in the wild-west days of the web, but now we’re in a position to question it.

3. Thou Shalt Iterate

The website for A List Apart looks quite different from the original design ideas. Milton Glaser once said that the way he designs is by “moving stuff around on the page until it looks right.”

A List Apart used to have sharing links at the bottom of its articles. Logical, right? Who would want to share before reading the article? In the new design, those links are at the top of the page, and they got rid of the pretty buttons. You’d think they’d get less usage. In fact, they get much more usage: the Twitter link is just a simple link with pre-filled text. It turns out that users share and retweet before reading—they want to be the first to share. Jeffrey jokes that, as an experiment, he’d like to put something awful half-way through an article just to see if everyone would still share it (and I’m sitting next to Rey Bango who says, “That’s my fear!” “You share before reading?”, I ask him. He nods).

Amazon is constantly iterating, but in very small, subtle ways. And they test those changes.

4. Thou Shalt Ship

Good is the enemy of great …but great is the enemy of shipping. Sometimes we get so hung up on making something great, it gets in the way of shipping.

Jeffrey used to work at a company that had a perfectionist as a president, which is good in some ways, but they never shipped their product. Then the competition shipped. The company went out of business. They were so concerned about being great, they forgot to ship.

A friend of Jeffrey’s raises his rates when his clients don’t ship. The client questions, “Why does this now cost this much?” “Because you were supposed to have launched by now — and that’s preventing me from moving on to the next project.”

5. Engage Thy Community

Instagram did a poor job of relating their change of terms of service. This was actually pretty good for Flickr, who had just launched their great iPhone app.

Big companies buy small companies to get the cachet that the small companies have. “Isn’t that right?”, Jeffrey asks Rey. “Yes.”

Fonts.com are beginning to get more playful and engage with the type community. It’ll never be as cool as something like Dribbble (because fonts.com is a big company) but they can still push things forward.

The Happy Cog website has comments via Twitter (because, hey, who comments on blogs anymore?). A List Apart has embeddable comments: you can take a comment with you and embed it on your own website.

6. Love Thy User As Thyself

The first five commandments are really about this: knowing your user, and making sure they have a good experience, regardless of browser or device. Be responsive — not just in the technical definition of responsive web design, but in your mindset. Don’t make dumb assumptions just because someone is using a phone.

7. Remember The Content

Jeffrey brings up my blog post about Content First. And, of course, Mark has been writing about A Richer Canvas. Jeffrey took our words and wrote about them thusly: put the content first always. Instead of asking “Where should we put the sidebar?”, ask “Do we need a sidebar?”

Karen McGrane talks about content strategy for mobile and how it is literally becoming the law of the land: governments are mandating that content must be accessible on mobile. You don’t want to be the test case in a law suit.

8. Ignore Workflow At Thy Peril

Instagram nailed the workflow of sharing images. It starts uploading the picture in the background, even while you’re still futzing around with titles and descriptions. There are other things they don’t do particularly well, and it was more of a walled garden for a long time, but they prioritised the workflow of uploading images. Which leads us nicely to…

9. Thou Shalt Prioritize

Github allows you to label bugs and to-dos according to how important they are. That helps you nail the most important stuff without stopping you from shipping.

Kevin Hoffman wrote a great article about meetings, of all things. It’s all about coming to agreement on priorities.

10. To Thine Own Self Be True

Ah, the old Hay.net site: have hay, need hay. The site has since changed, but it’s still about hay. It didn’t “pivot.”

Smart talented people get promoted to being directors, but they might not be as good or as happy at that.

11. Think For Yourself

A bonus eleventh commandment. Don’t be a lemming.

In his tap essay Fish, Robin sloan said:

On the internet today, reading something twice is an act of love.

I’ve found a few services recently that encourage me to return to things I’ve already read.

Findings is looking quite lovely since its recent redesign. They may have screwed up with their email notification anti-pattern but they were quick to own up to the problem. I’ve been taking the time to read back through quotations I’ve posted, which in turn leads me to revisit the original pieces that the quotations were taken from.

Take, for example, this quote from Dave Winer:

We need to break out of the model where all these systems are monolithic and standalone. There’s art in each individual system, but there’s a much greater art in the union of all the systems we create.

…which leads me back to the beautifully-worded piece he wrote on Medium.

At the other end of the scale, reading this quote led me to revisit Rob’s review of Not Of This Earth on NotComing.com:

Not of This Earth is an early example of a premise conceivably determined by the proverbial writer’s room dartboard. In this case, the first two darts landed on “space” and “vampire.” There was no need to throw a third.

Although I think perhaps my favourite movie-related quotation comes from Gavin Rothery’s review of Saturn 3:

You could look at this film superficially and see it as a robot gone mental chasing Farrah Fawcett around a moonbase trying to get it on with her and killing everybody that gets in its way. Or, you could see through that into brilliance of this film and see that is in fact a story about a robot gone mental chasing Farrah Fawcett around a moonbase trying to get it on with her and killing everybody that gets in its way.

The other service that is encouraging me to revisit articles that I’ve previously read is Readlists. I’ve been using it to gather together pieces of writing that I’ve previously linked to about the Internet of Things, the infrastructure of the internet, digital preservation, or simply sci-fi short stories.

Frank mentioned Readlists when he wrote about The Anthologists:

Anthologies have the potential to finally make good on the purpose of all our automated archiving and collecting: that we would actually go back to the library, look at the stuff again, and, holy moses, do something with it. A collection that isn’t revisited might as well be a garbage heap.

I really like the fact that while Readlists is very much a tool that relies on the network, the collected content no longer requires a network connection: you can send a group of articles to your Kindle, or download them as one epub file.

I love tools like this—user style sheets, greasemonkey scripts, Readability, Instapaper, bookmarklets of all kinds—that allow the end user to exercise control over the content they want to revisit. Or, as Frank puts it:

…users gain new ways to select, sequence, recontextualize, and publish the content they consume.

I think the first technology that really brought this notion to the fore was RSS. The idea that the reader could choose not only to read your content at a later time, but also to read it in a different place—their RSS reader rather than your website—seemed quite radical. It was a bitter pill for the old guard to swallow, but once publishing RSS feeds became the norm, even the stodgiest of old media producers learned to let go of the illusion of control.

That’s why I was very surprised when Aral pushed back against RSS. I understand his reasoning for not providing a full RSS feed:

every RSS reader I tested it in displayed the articles differently — completely destroying my line widths, pull quotes, image captions, footers, and the layout of the high‐DPI images I was using.

…but that kind of illusory control just seems antithetical to the way the web works.

The heart of the issue, I think, is when Aral talks about:

the author’s moral rights over the form and presentation of their work.

I understand his point, but I also value the reader’s ideas about the form and presentation of the work they are going to be reading. The attempt to constrain and restrict the reader’s recontextualising reminds me of emails I used to read on Steve Champeon’s Webdesign-L mailing list back in the 90s that would begin:

How can I force the user to …?

or

How do I stop the user from …?

The questions usually involved attempts to stop users “getting at” images or viewing the markup source. Again, I understand where those views come from, but they just don’t fit comfortably with the sprit of the web.

And, of course, the truth was always that once something was out there on the web, users could always find a way to read it, alter it, store it, or revisit it. For Aral’s site, for example, although he refuses to provide a full RSS feed, all I have to is use Reeder with its built-in Readability functionality to get the full content.

This is an important point: attempting to exert too much control will be interpreted as damage and routed around. That’s exactly why RSS exists. That’s why Readability and Instapaper exist. That’s why Findings and Readlists exist. Heck, it’s why Huffduffer exists.

To paraphrase Princess Leia, the more you tighten your grip, the more content will slip through your fingers. Rather than trying to battle against the tide, go with the flow and embrace the reality of what Cameron Koczon calls Orbital Content and what Sara Wachter-Boettcher calls Future-Ready Content.

Both of those articles were published on A List Apart. But feel free to put them into a Readlist, or quote your favourite bits on Findings. And then, later, maybe you’ll return to them. Maybe you’ll read them twice. Maybe you’ll love them.

Right after I wrote about combining flexbox with responsive design—to switch the display of content and navigation based on browser size—I received an email from Raphaël Goetter. He pointed out a really elegant solution to the same use-case that makes use of display:table.

Let’s take the same markup as before:

<body>
<div role="main">
<p>This is the main content.</p>
</div>
<nav role="navigation">
<p>This is the navigation.</p>
<ol>
<li><a href="#">foo</a></li>
<li><a href="#">bar</a></li>
<li><a href="#">baz</a></li>
</ol>
</nav>
</body>

The source order reflects the order I want on small-screen devices (feature phones, smart phones, etc.). Once the viewport allows it, I’d like to put that navigation at the top. I can do this by wrapping some display declarations in a media query:

@media screen and (min-width: 30em) {
    body {
        display: table;
        caption-side: top;
    }
    [role="navigation"] {
        display: table-caption;
    }
}

That’s it. It works much like box-orient:vertical with box-direction:reverse but because this is good ol’ CSS 2.1, it’s very well supported.

We can solve the other issue too: making those list items display horizontally on larger screens:

[role="navigation"] ol {
    display: table-row;
}
[role="navigation"] ol li {
    display: table-cell;
}

Once again, I’ve put a gist up on Github (get me! I’m like a proper computer nerd).

Update: And Remy has put it on JSbin so you can see it in action (resize the live preview pane).

So there you go: we’ve at least two different mechanisms in CSS to re-order the display of content and navigation in response to screen real-estate. The default is content first, navigation second—a pattern that Luke talked about in this interview with Jared:

Yeah, one of the design principles that I’ll be talking on the tour about, for mobile, is content first, navigation second; which is just really putting something up right away that somebody can engage with, and saving the pivoting and the navigating for later.

There’s, basically, UI patterns that you can use to make that happen. I’m still surprised at how many, both mobile websites and applications, the first thing they give you is a menu of choices, instead of content.

Don’t get me wrong, the menu’s important, and you can get to it, but it’s actually the content that the immediacy of mobile, and the fact that you’re probably on a slower network, and in some cases you’re even paying for your data transfers, right? Giving you a list of choices as your first time experience tends not to work so well.