Microcopy Tools and Tips

Posted on by djbrensinger

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.

Microcopy Tools and Tips
Photo by Med Badr Chemmaoui on Unsplash

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.

5. Test your copy

Not all copy resonates with your users. You may need to try different words before you find what works with your users.

Challenge your writing skills

Take the Daily UX Writing Challenge to practice writing better microcopy.

Learn more tips on improving your user experience with UX Writing.

Switching to Utility-First CSS

Posted on by djbrensinger

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.

Switching to Utility-First CSS
Image by superdirk from Pixabay

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.

Where can you learn more about it?

Start by checking out these articles:

What CSS Methodologies can I use?

You can look at these couple popular methodologies:

  • Cube CSS – a CSS methodology that focuses on simplicity, consistency and works with whatever medium you are using.
  • Tailwind CSS – a CSS framework that helps you rapidly build modern websites.
  • Atomizer – a CSS utility library that integrates with the most popular web frameworks.

Software development consistently changes. A developer needs to experiment with new tools and new ideas. You need to pick the tools that best suit your project and users.

Why Write Technical Documentation

Posted on by djbrensinger

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.

Why Write Technical Documentation
Image by ha11ok from Pixabay

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

Why write?

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

Read more about writing better documentation

Making an Advice Generator

Posted on by djbrensinger

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.

Making an Advice Generator
Image by Dean Moriarty from Pixabay

You can pick coding challenges that ask you to build components or a simple app. Some of the challenges include working with an API.

Advice Generator

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.

Screenshot of Advice Generator with Advice #100: Everybody makes mistakes.

How I Built It

I created this app using HTML, CSS and JavaScript. For CSS, I started with Bootstrap to help structure the design. Then, I used FlexBox to manage the layout.

Fetching Data

I used the JavaScript Fetch API to fetch the data from the Advice Slip JSON API and display it on a web page. By default, it picks a piece of advice and displays it. If you want to get another piece of advice, you need to click the dice icon. This icon button retrieves a random piece of advice.

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.

Design Challenges

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.

Other Coding Challenges

Resilient Web Tips

Posted on by djbrensinger

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.

Resilient Web Tips
Image by 3D Animation Production Company from Pixabay

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.

Other programming tools like JavaScript don’t have built in fault or error tolerance. To make your code more resilient, you have to handle errors and missing 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

JavaScript can enhance the user experience. It can also slow the site performance down. JavaScript Frameworks allow you to build things that you can’t using HTML and CSS. Before you decide to use a framework, you need to ask if you really need it. Or can you use Vanilla JavaScript instead? Consider adding less to your next project.

3. Prevent errors and make them easy to fix

Lot of things can break on the web. Your network connection fails. You clicked on the wrong thing. Or something else breaks behind the scenes. Web developers can build their web apps to prevent errors and make them easy for the user to fix. When you use JavaScript, you need strategies for making a resilient UI. Callum Hart shows you how to build a resilient JavaScript UI.

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.