When I am using a website, I sometimes encounter things that bug me as a web developer. What bugs me is that these are so easy to implement.
Here are some things that I see in a lot of websites:
1. Overflow causing layout shifts
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.
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. Not respecting 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.
3. Links not actually being 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. Not having link previews
When a user shares a link to your website, most chat apps and social media websites 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>
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>
);
}
5. Not using lables with 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.
SOCIAL SHARE CARD GENERATOR