How do you make a great website? Everyone has an answer at the ready: Flashy animations! The latest punk-rock CSS trick! Gradients! Illustrations! Colors to pack a punch! Vite! And, sure, all these things might make a website better. But no matter how fancy the application is or how dazzling the technology will ever be under the hood, a great website will always require great text.
So, whenever I’m stuck pondering the question: “how do I make this website better?” I know the answer is always this:
care for the text.
Without great writing, a website is harder to read, extremely difficult to navigate, and impossible to remember. Without great writing, it’s hardly a website at all. But it’s tough to remember this day in and day out—especially when it’s not our job to care about the text—yet each and every <p> tag and <button> element is an opportunity for great writing. It’s a moment to inject some humor or add a considerate note that helps people.
So: care for the text. Got it. But there are so many ways to care! From commas and smart quotes, to labels in our forms, to typography, and even the placeholders in our inputs. It’s a dizzying amount of responsibility—but it’s worth every second of our time.
Here’s one example: a while ago, we needed to explain a new feature to our users and point to it in the UI. We could use our pop-up component to explain how our team just fixed something for a ton of folks—but!—I knew that no matter what the fancy new feature was, our customers would be annoyed by a pop-up.
After thinking about it for far too long I realized that this was an opportunity to acknowledge how annoying this popup was:
With this project, I could’ve just thrown some text in that button that says “Dismiss” but our little team of writers at Sentry constantly remind me that even the smallest, most boring block of text can be a playground. Each string has potential, even in this dumb example. It doesn’t change the world or anything, but it improves something that would otherwise be yawn-worthy, predictable.
Not every bit of text in a website needs to be passive-aggressive though. When you’re in the checkout ordering medicine, you likely don’t want to be reading a quirky story or a poem, and you don’t want to click a button that insults you. In this context, caring for the text means something entirely different. It’s about not getting in the way but being as efficient and empathetic as possible. And this is true of every link in the footer, every navigation item, every <alt> tag, and subtitle—they all require care and attention. Because all of these details add up.
These are the details that make a good website great.
I love these little things when they pop up – I know it’s such a small thing, but it’ll always bring a smile to my face.
I understand what you mean near the end though, to paraphrase Syndrome from The Incredibles: “If everything’s super, nothing will be.”
This type of fun copy that you sometimes delightfully find, most often seems to be removed from a website or service when it grows larger, due to accessibility. I think you really have to know the target audience of your site too, e.g. a tool that needs to be used by many people, maybe an online form, would probably detriment from fun copy like described above. It could make the experience confusing.
I think as with all a11y concerns, it’s a balancing act. You certainly don’t have to remove all emotion from your copy, but you probably don’t want it to be too colourful as well. I think Google has a few basic friendly copy guidelines in their material design specification that’s a good starting point for accessible, but not dry copy.
(and i18n is important!)
Good thinking, but this isn’t very useful. I care about alt text and everyone says it’s important, but finding information on how to actually write a good alt text is harder than it should be.
Should it describe the purpose of the image? Should it describe what appears in it? Even if it’s only for style and doesn’t say anything about its purpose on the page? To what level of detail should I do it? How do I approach abstract or symbolic imagery, or images that can be interpreted in multiple ways?
Even if I’m armed with the best intentions, if everyone tells me what a good page looks like but doesn’t tell me how to get there, or gives advice that’s too specific to the examples they craft, the web isn’t going to change. The why alone isn’t enough, the how, in the technical world, is essential.
Translating that label wouldn’t be trivial, if i18n matters.