The so-called improving user experience is to bring convenience to users in the process of use, such as improving loading speed, bright color matching, adding animation effects, etc., then as a humble front end, what can you contribute to improving user experience?

An incomplete guide to improving user experience on the front end (JS articles)

Layout optimization

Use of css calculated attributes

In this way, with the left and right layout, the right side should naturally adapt to the remaining width.

	.left{
		width: 200px;
		height: 100%;
		border: red 5px solid;
	}

	.right{
		width: calc(100% - 200px);
		border: #55007f 5px solid;
	}

For another example, divide a certain width into n parts evenly

            .container{
				height: 100%;
				display: flex;
			}
			
			.container div{
				height: 100px;
				width: calc(100% / 7);
				border: #007AFF solid 4px;
			}

Rolling optimization

scroll-snap-type: The attribute defines how a snap point in the scroll container is strictly enforced.

It's a bit difficult to understand just by looking at the definition. Simply put, this attribute specifies whether a container captures the internal scrolling motion, and specifies how to handle the scrolling end state. After the scrolling operation is over, the element stops at a suitable position

	.scroll_box{
		overflow: auto;
		scroll-snap-type: x mandatory;
	}
	
	.scroll_box div{
		scroll-snap-align: center;
	}

Picture stretching problem

For example, if the product list and the product thumbnail have different width and height ratios, the following picture will appear, which is obviously not in line with the aesthetic effect.

At this time, if the width and height are specified for the picture, the preview picture will be distorted and unsightly.

Next, the focus is on, the code:

	.goods_item img{
		width: 100%;
		height: 2rem;
		object-fit: cover;
	}

The object-fit attribute specifies how the content of the element should adapt to the height and width of the specified container.

But the compatibility is a little bit worse

Button user experience

Appropriate mouse in and click effects can be added:

	.btn:hover{
		background: #088cff;
		cursor: pointer;
	}
	
	.btn:active{
		background: #000088;
	}

As shown in the figure above, when the button is clicked too frequently, the button text will be selected. We can do this

    .btn{
        user-select: none;
    }

In this way, no matter how you click, the text will not be selected, and the final exam questions of the online course cannot be selected and copied. This is how it is achieved.

Loading animation

Whenever you are waiting to load, you can use some good-looking animations. Below are a variety of animations written in css3, which are good-looking. Click here to download .

Border protection

Boundary protection is to support the appropriate padding value for the boundary of the element, as shown in the figure below, it is much better.

PC text selection optimization

Under normal circumstances, we choose text like this:

But sometimes the user may need to copy the entire text, or phone number or something, we can do this, put the content that needs to be copied together into an element, and add the following style to the element:

	{
		user-select: all;
	}

Dealing with the problem of excessively long dynamic text:

As shown in the figure below, it obviously does not meet the aesthetic vision

At this point we can write like this, the text does not wrap and overflow and display the ellipsis:

{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width:200px//宽度看具体情况而定，父级限定宽度也可以
}

The ellipsis is displayed when the text overflows in multiple lines:

{
    width:200px;
    overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

Image loading failure processing

<img src="jdkjk" onerror="this.src='https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1731029843,3592757081&fm=15&gp=0.jpg'" >

The picture on the left side of the picture above failed to load.

No data

I hope I can advise you more if it is inappropriate.

An incomplete guide to improving user experience on the front end (CSS articles)