10 CSS tips to greatly improve the user experience

Author: Shadeed

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom.

In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.

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

One thing that developers tend to overlook is CSS. There are CSS tricks you can use to improve the presentation, interaction details, and accessibility of your web pages.

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

Clickable area

Sometimes your buttons are too small, which can cause the user to not hit the button accurately. This phenomenon often happens on mobile devices. If users click too many times, don’t click on the button they want, or click on the wrong button, they can get very frustrated.

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

But the size of elements in a web page is often fixed, we can not 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’s a button.

<button id="btn">btn</button>
Copy the code

Then we can add a pseudo-class to it.

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

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

Example address:

Codepen. IO/bytefishmed…

Smooth scrolling

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

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

IO/bytefishMed…

Select all text

Our web pages often need to provide some content for users to choose from, such as phone number, address, title, etc. The text should be a whole, and we want the rest of the text to be selected automatically when the user clicks on part of the text.

To achieve this effect, it is as simple as using this CSS style: user-select: all. The CSS properties selected by the user control whether the user can select text. If its value is all, it means that all contents of an element will be atomically selected.

IO/bytefishMed…

If you want to add some extra styles after the text is selected, you can use :: Selection. :: Selection CSS pseudo-elements apply styles to portions 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-decorationAnd related properties
text-shadow
stroke-color.fill-color 和 stroke-width

IO/bytefishMed…

Cursor

Using different mouse styles in different scenarios can help readers perceive the current state of the page, thus 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 that can be performed at the current location, including text selection, activating help or context menus, copying content, resizing tables, and so on. You can specify the cursor type with a keyword, or load a specific icon to use (there are optional fallback images and mandatory keywords for the final fallback).

Such as:

IO/bytefishMed…

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

Text Overflow

Now let’s look at the text-overflow problem. If the contents of a text container are 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>
Copy the code

The container has a fixed width and height and is wrapped with a name and description.

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

At this point, we can fold up the spilled text. Doing this is as simple as adding three lines of CSS styles.

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Copy the code

white-space: nowrap; You can make the text unwrapped. We then use overflow: Hidden to hide the spilled text. Finally, we use text-overflow: Ellipsis to add a dot to the end of the text to indicate to the user that there is some hidden text.

IO/bytefishMed…

Image

Now let’s talk about the style of the image. The images used in network applications are generally provided by the back end. You may have reached an agreement with the backend developer to keep images at a fixed size. And then you write code that looks like this.

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta <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>Copy the code

And the web page looks something like this.

The pictures were arranged as we expected.

Usually there is no problem. But when we write code, we can’t assume that everything will go as we expect. We need to be fully prepared. If the images returned from the back end are abnormal and do not fit the expected size, either large or small, the layout will be disrupted.

You can use this to replace links to one of the images.

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

You’ll 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 images returned from the back end.

img {
  width: 128px;
  height: 128px;
}
Copy the code

However, there is a drawback: if the aspect ratio of the image itself is not consistent with our aspect ratio, the image will be compressed or stretched.

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

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

The CSS property of object-fit sets how the content of a replaced element, such as or

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

There is no picture

All of the things we’ve been talking about are assuming that we can get a picture. However, in practical applications, our webpage may not be able to load pictures correctly due to the instability of the back-end service or the poor network signal of the user.

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

We can add an onError event to the IMG element. If there is an error while loading the image, we can style the element with an onError event and use a 404 image.

Img element:

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

Suppose this is our 404 image:

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

Here 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%;
    }
Copy the code

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 thing that needs to be optimized. In this case, if the original image is not loaded correctly, the user does not know what the image should be. To make it easier for users to understand, 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;
    }
Copy the code

Suppose img’s Alt property looks like this.

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

IO/bytefishMed…

Color contrast

When you design color combinations, do you think about color contrast on the page?

You need to know that there are many color blind and weak users in the world. If your page has low contrast, they may not be able to use your product properly. Get the contrast right, whether for the sake of humanity or customer retention.

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.

Webaim.org/resources/c…

Example:

We can also use Chrome DevTool to check the color contrast of an element. We can see, then, that Medium’s web site does the same thing.

conclusion

As the saying goes, the devil is in the details. If your project has many details that can improve the user experience, you can make the user feel comfortable and you have a higher probability of success.

~ finish, I am brush bowl wisdom, the New Year we brush brush brush together!

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: betterprogramming pub / 10 – CSS – tric…

communication

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom.

In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.

10 CSS tips to greatly improve the user experience

Clickable area

Smooth scrolling

Select all text

Cursor

Text Overflow

Image

There is no picture

Color contrast

conclusion

communication

Related Posts

Achieve “random signature” effect in target area

Two columns of the layout

Ant Financial’s 3D interactive exploration path