As a developer, you may overlook the tiniest bits of text on your app or website. The copy on your buttons, labels, tooltips and error messages can have the biggest impact. It can help your users to understand how to use your app or website.
Picking out the right words can help people to keep using your website or choose another. Use these tools and tips to help improve your microcopy.
1. Keep it casual
You want to convey a tone that is friendly and relaxed. Keep it simple and conversational. Address your users by using “you” and “your”.
2. Use simple, everyday words
Pick out words that talk to your users. Use the same language that they do. Avoid using complex jargon and words. Keep it short and to the point.
3. Be helpful
You want your users to keep using your app or website. Microcopy should help guide them. Pick words that help them to understand what is going to happen. Words like download, buy now, learn more or get more information.
Depending on what you want your users to do, you’ll want to confirm that they completed an action. Or shows an error message if it fails. You want to provide feedback to the user that helps them complete their tasks.
4. Use a microcopy tool
You can use an AI writing assistant or a microcopy collection to help you write better.
When you write CSS, do you create classes that reflect the UI? Classes like card, button, title, sidebar or link. Your classes have every possible element defined in that class.
What if you didn’t write your CSS that way? Utility-first CSS creates a series of helper classes or utilities. A utility class does one thing really well. For example, you might write a class that changes the background color to blue. Then, you would use to change the background color on buttons, cards and CTA boxes. Use it wherever you want. You mix and match these utilities to create the look you want.
As a developer, you spend a lot of time writing. More than writing code. You reply to emails, update bug requests and write project documentation and more. Code allows us to communicate with computers. With people, we need to use words to communicate.
Every day, we communicate with clients, users, team members and other developers. We write all kinds of different things to communicate with them. From a quick email to help them get started using our product to a full user’s guide.
"If you can’t automate it, document it. – Hila Fish
You want to write technical documentation to help reduce your work load. Technical docs help you to remember why you are doing things a certain way. You or future developers will be glad you took the time to document the choices made.
Documentation keeps your project on track
When you work on your own projects, writing becomes more important. You write documentation to help explain what your product does. How it solves your customers’ problem and how they can use it. If you like to work on many projects, documentation helps you to keep going. Simon Willison explains how to use documentation to maintain multiple projects.
Document your project quirks
Every project has its own quirks. You make choices that affect how things turn out. To help your future self or the next developer, document the following:
Choices that you make while you are working on the project
Things that bugged you
Items that aren’t clear or straight forward
Any surprises that came along
Issues or things to consider when using this tool or language feature
Have you tried a coding challenge? Coding challenges allow you to stretch you programming and design skills. You have your choice of places to find coding challenges.
You can pick coding challenges that ask you to build components or a simple app. Some of the challenges include working with an API.
The Advice Generator coding challenge on Frontend Mentor has you working with an API. This API provides you with data for displaying advice on a web page.
How I Built It
If you don’t use the cache option of no-cache, you get the small piece of advice. When you call the API which returns a random piece of advice, it doesn’t display on the web page. It is caching the data. When you use the no-cache option, fetch retrieves a random piece of advice.
The layout required centering the advice box and the dice icon for the button. To handle this, I used FlexBox to center the box and to align the button on top of the bottom of the box. You need to use a combination of absolute positioning and FlexBox to get the dice to appear where you want it.
The advice box needs to be flexible. It has to expand and contract depending on the size of the advice. FlexBox makes this easier.
Whether you use a computer, phone, table or some other device to access the Internet, you expect it to work. Sometimes things can break. Your connection is slow. Images don’t load. They are using a third-party tool that is having their own issues with the Internet. What can you do? Wait. Try again. Come back later to see if they fixed it.
The Internet provides information to users. By allowing them to use, whatever tools they wish. This feature makes the web resilient or fault tolerant.
What is a resilient website?
Being fault tolerant or resilient is part of the how the web works. HTML and CSS are the simplest tools for building a website. If errors are in either the HTML or CSS, the browser skips the errors and loads the page anyway. It may not look the way you want, but people can read the information.
What can you do?
1. Start with the basics
Use HTML and CSS. HTML is the foundation of the web. You can build a website with HTML only and have it work. CSS allows you to use new features and older browsers ignore what they don’t understand. The more things we add to our web apps, the more they affect user experience. site performance and accessibility.
2. Pick the right framework for the job
3. Prevent errors and make them easy to fix
Where can I learn more about making resilient websites?
Jeremy Keith wrote Resilient Web Design. A book that gives you ideas and approaches on how to build a more resilient web.