1. Prevent layout shifts on overflow
If you have an element with overflow: auto then it will have a scrollbar only when the element is overflowing. The problem is that once the element is overflowing and the scrollbar appears, the content has shrunk to accommodate the width of the scrollbar.
To avoid the unnecessary layout shift, add:
scrollbar-gutter: stable
It will reserve space for the scrollbar even if it is not visible.
At the time of writing this, only 74% of users have this feature. But it is a nice progressive enhancement. Meaning those on newer browser can enjoy a better user experience while those that are on older browsers are not affected.
2. respect the device's preference for dark mode
If you already implemented dark mode in your website, you can spare the user from selecting dark mode manually by checking it's device's preference for light or dark mode
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// dark mode
}
So if the user already selected dark mode in it's settings, then you can have the default value be dark mode in your website as well.
Some websites even choose to not have a dark mode toggle at all and rely solely on the device's preference.
3. Links should be real links
When you have a button that should redirect to a different part of your website, the obvious way to do it is to have an event listener for click and to redirect the user using JavaScript.
This is wrong, whenever you can use a browser primitive (eg: link, form) then you should almost always use that instead.
using <a> tag instead has a lot of benefits.
- Being able to Ctrl click (or long press on mobile) to open the link in a different tab
- Hovering over the link shows you where you will be redirected to
- Other programs like screen readers and search engine crawlers will work a lot better
If you are using react-router or Next.js than you should use that framework's Link component to prevent full page reloads.
4. Link previews
When a user shares a link to your website, all chat and social media apps have a preview feature to see some of the content of that website before the user clicks it. By simply adding a couple of meta tags to your <head> object you will allow other apps to show previews to your website.
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
And in react 19 it is easier than ever to edit your <head> object. You previously had to use third party libraries like react-helmet but now it is built in to react.
function BlogPost({ post }) {
return (
<article>
<h1>{post.title}</h1>
<p>{post.content}</p>
<title>{post.title}</title>
<meta name="description" content={post.excerpt} />
<meta property="og:title" content={post.title} />
<meta property="og:description" content={post.excerpt} />
<meta property="og:image" content={post.image} />
<meta property="og:url" content={post.url} />
<meta property="og:type" content="article" />
</article>
);
}
This is called the Open Graph Protocol.
A very useful tool is social share preview which lets you test how your preview will look in different websites and give you advice on how to make it better.
5. Use lables with your inputs
I often see checkboxes and when I try to click the checkbox's label nothing happens. Aside from poor accessibility, this means the user has to click the tiny checkbox to select it.
To solve this use the <label> tag.
<label>
<input type="checkbox"> Click me to select the checkbox
</label>
This works for all input types. Clicking the label of a text input for example will focus into the textbox.
Top comments (0)