10 CSS Tricks to Greatly Improve User Experience

Author: Shadeed
Translator: Front-end Xiaozhi
Source: medium

If you have dreams and dry goods, search [Great Move to the World] attention to this Shawanzhi who is still washing dishes in the early morning.

This article has been included in GitHub https://github.com/qq449245884/xiaozhi . There are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.

A successful Web App must have a good user experience. When we talk about improving the user experience, what comes to your mind?

In fact, one thing that is easily overlooked by developers is CSS. We can use some CSS tricks to improve the presentation, interaction details, and accessibility of web pages.

And these tricks don't take much time and don't consume server resources. You only need to spend two hours learning, then you can apply it to all your projects and improve the user experience forever.

clickable area

Sometimes your buttons are small, which can lead to users not being able to click the button accurately. This phenomenon often occurs on the mobile side. If users click too many times, don't click the button they want, or click the wrong button, it can be very frustrating for them.

So, how to solve this problem? Some developers might say: make the button bigger.

But the size of elements in web pages is often fixed, and we cannot easily adjust the size of an element. And if the button is too big, it feels weird.

A better solution is to increase the clickable area of the button without changing its original size. Specifically: we can use pseudo-elements to increase the clickable area of an element.

For example, here is a button.

<button id="btn">btn</button>

Then we can add a pseudo-class to it.

#btn::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  bottom: -20px;
  left: -20px;
}

At this point, if we click on the area around the button, we can still trigger the button's click event.

Case address:

https://codepen.io/bytefishmedium/pen/rNYNoRX

smooth scrolling

When the page is scrolled by the # link, the default effect is like this.

This sudden jump can be uncomfortable. To fix this, we can use this CSS style: sroll-behavior: smooth .

Case address: https://codepen.io/bytefishmedium/pen/NWwWoKL

select all text

Our web pages often need to provide some content for users to choose, such as phone numbers, addresses, titles, etc. And these texts should be a whole, we hope that when the user clicks on part of the text, the rest of the text will be automatically selected.

To achieve this effect is very simple, just use this CSS style: user-select: all . The user-selected CSS property controls whether the user can select text. If its value is all , it means that all contents of an element will be selected atomically.

Case address: https://codepen.io/bytefishmedium/pen/xxPxMZO

If you want to add some extra styling after the text is selected, you can use ::selection . ::selection CSS pseudo-element applies styles to parts of the document that are highlighted by the user (such as clicking and dragging the mouse over text).

But remember. Only certain CSS properties can be used with ::selection .

• color
• background-color
• text-decoration and related attributes
• text-shadow
• stroke-color , fill-color and stroke-width

Case address: https://codepen.io/bytefishmedium/pen/gOXOqMz

Cursor

Using different mouse styles in different scenarios can help readers perceive the current state of the page, thereby improving the user's interactive experience.

cursor CSS property Sets the mouse pointer (if any) to display when the mouse pointer is over an element.

Cursor settings should inform the user of mouse actions available at the current location, including text selection, activating help or context menus, copying content, resizing tables, and more. You can specify the type of cursor with a keyword, or load a specific icon to use (with optional fallback image and mandatory keyword as final fallback).

For example:

Instance address: https://codepen.io/bytefishmedium/pen/bGYGzRz

There are many cursor styles, you can find them in the MDN documentation .

Text Overflow

Now let's look at the text-overflow problem. If the content of a text container is returned from the server, or entered by the user, it is difficult to predict how long the text will be.

Without any precautions, you might write code like this.

<head>
  <style>
    .container{
      border: 2px solid red;
      width: 200px;
      height: 60px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="username">bytefish</div>
    <p class="profile">FE, UX Designer</p>
  </div>
</body>

The container has a fixed width and height and wraps the name and introduction.

But if some users' bios are too long, it can cause the text to overflow the container and make the page look bad.

At this point, we can collapse the overflowing text. Doing this is as easy as adding three lines of CSS styles.

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

white-space: nowrap ; can make the text unwrapped. Then we use overflow: hidden to hide the overflowing text. Finally, we use text-overflow: ellipsis to add a dot at the end of the text to indicate to the user that there is some hidden text.

Instance address: https://codepen.io/bytefishmedium/pen/VwrwgdQ

Image

Now let's discuss the style of the picture. Images used in web applications are generally provided by the backend. You may have an agreement with your backend developer to keep your images at a fixed size. Then you write code like this.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .img-list {
      display: flex;
      flex-direction: row;
      list-style: none;
    }
  </style>
</head>

<body>
  <ul class="img-list">
    <li>
      <img src="https://miro.medium.com/fit/c/128/128/1*TyRLQdZO7NdPATwSeut8gg.png">
    </li>
    <li>
      <img src="https://miro.medium.com/fit/c/128/128/1*pKOfOAOvx-fWzfITATgGRg.jpeg">
    </li>
    <li>
      <img src="https://miro.medium.com/fit/c/128/128/1*mXOVdfMwS0IEcjPXiikJkg.png">
    </li>
  </ul>

</body>

</html>

And the webpage looks like this.

The pictures are arranged as we would expect.

Usually there is no problem. But when we write code, we cannot assume that everything will work out as we expect. We need to be well prepared. If the image returned by the backend is not normal, does not meet the expected size, may be large or small, then the layout will be disrupted.

You can replace the link to one of the images with this.

https://miro.medium.com/max/1400/0*zQaS0awtSTOO-JYa.jpg

You will notice that the page suddenly becomes cluttered.

To prevent this problem and make our page more robust, we can set the width and height of the image. This way, we don't have to worry about the size of the image returned by the backend.

img {
  width: 128px;
  height: 128px;
}

But the above way of writing has a disadvantage: if the aspect ratio of the image itself is inconsistent with the aspect ratio we set, the image will be compressed or stretched.

To keep the original aspect ratio of the image, we can use object-fit: cover .

img {
  width: 128px;
  height: 128px;
  object-fit: cover;
}

The CSS property of object-fit sets how the content of a replaced element, such as <img> or <video> , should resize to fit its container.

If the value is cover , the size of the replaced content will maintain its aspect ratio while filling the entire content box of the element. If the aspect ratio of an object does not match the aspect ratio of its box, the object will be clipped to fit.

no picture

The situations we discussed earlier were all based on the premise that we could get a picture. However, in practical applications, our web pages may not be able to load images correctly due to unstable back-end services or poor network signals of users themselves.

The browser's default style is inelegant when images are missing, here we can optimize it.

We can add a onerror event to the img element. If there is an error loading the image, then we can add a style to the element with the onerro r event and use a 404 image.

img element:

<img src="https://miro.medium.com/xxx.jpg" alt='fireworks picture' onerror="this.classList.add('error');">

Let's say this is our 404 image:

https://cdn-images-1.medium.com/max/1600/1*we8wfyztsdo12e2Cww6oVA.jpeg

Below is the css code

img.error {
      display: inline-block;
      transform: scale(1);
      content: '';
      color: transparent;
    }
img.error::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #f5f5f5 url('https://cdn-images-1.medium.com/max/1600/1*we8wfyztsdo12e2Cww6oVA.jpeg') no-repeat center / 100% 100%;
    }

This way our 404 image will be used when the image link in the img element fails to load the image.

There is one more point to optimize here. In this case, if the original image is not loaded correctly, the user has no idea what the image should be. In order to facilitate the user's understanding, we can display the alt attribute of the img element on the page.

img.error::after {
      content: attr(alt);
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      line-height: 2;
      background-color: rgba(0, 0, 0, .5);
      color: white;
      font-size: 12px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

Suppose the alt attribute of img is like this.

<img src="https://miro.medium.com/xxx.jpg" alt='Log of Medium' >

Instance address: https://codepen.io/bytefishmedium/pen/vYWYMxG

color contrast

When you are designing color combinations, do you consider the color contrast of the page?

You need to know that there are many color blind and color weak users in the world. If your page has low contrast, it may prevent them from using your product properly. Whether it's out of humanistic concerns or customer retention, you should design for the right contrast.

The WCAG AA specification states that all important content needs to have a color contrast ratio of 4.5:1 or higher.

Here's a contrast checker tool.

https://webaim.org/resources/contrastchecker/

case:

We can also use the Chrome DevTool to inspect the color contrast of an element. Then we can find that Medium's web page is also practicing this principle.

Summarize

As the saying goes, details determine success or failure. If your project has a lot of details that can improve the user experience, you can make users feel comfortable and you have a higher probability of success.

~End, I'm Shawanzhi, let's brush together in the new year!

---

The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool Fundebug .

Original: https://betterprogramming.pub/10-css-tricks-that-greatly-improve-user-experience-5ee52886ca4b

comminicate

If you have dreams and dry goods, search [Moving the World] attention to this Shawanzhi who is still washing dishes in the early morning.

This article has been included in GitHub https://github.com/qq449245884/xiaozhi . There are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.