Tips for your website

Posted on 11 June 2023

Hooray, you're making a website (hopefully)! before you start, here's some things that I think are always good to do when making a website.

Format your file correctly

Having stacked indents in the file makes it much easier to read and figure out how the elements relate. f.ex, which one is more readable here?

<main>
	<section>
		<h2>My favorite ant</h2>
		<p>This ant is absolutely awesome! Here's why:</p>
		<ul>
			<li>Small</li>
			<li>Cute</li>
			<li>Helpful</li>
		</ul>
		<p>That's why I love it.</p>
	</section>
</main>

<main><section><h2>My favorite ant</h2>
<p>This ant is absolutely awesome! Here's why:</p><ul><li>Small</li>
<li>Cute</li><li>Helpful</li></ul>
									<p>That's why I love it.</p>
	</section></main>

Obviously this is an extreme sample, but the former is much easier to read. Same goes with CSS and JS; proper formatting will save you a lot of brain work later.

Use semantic HTML

Corp web rarely uses semantic HTML, doesn't mean you don't have to. Semantic HTML visually looks no different, but when using a screenreader proper semantic HTML makes your site easy to browse. Don't use <div> or <span> for everything, try using <pre>, <aside>, <footer>, <nav>, and other semantic HTML. Plus it makes it super easy to identify what's doing what in the code, and you don't need to over-rely on classes.

This also applies for headers. Screenreaders can navigate by landmark elements (header, footer, main), and can also navigate by headers—with h1 being the title. (So don't add more than one h1 in your document!) If you nest headers correct, it makes navigation by sections in a long document with a screenreader very easy. In all, use semantic HTML, and your site becomes more stable and accessible.

Use CSS variables

One of the largest mistakes I see is people not using CSS variables upfront and then struggling to change everything when they want to change it. CSS variables are fairly easy, you can define them under :root like so:

:root {
	--fg: #222;
	--bg: #fcfcfc;
}

The two dashes before a variable name are required, but other than that you can name them whaever you want. To reference them, put var(--my-var) (replacing --my-var with your variable you want to use there) and the value will be loaded. CSS variables can be used for anything and are easily changeable, which leads us to...

Support both light and dark mode!

This is an accessibility must. Thankfully, it's very easy. Let's say you have foreground and background variables, as well as "special" foreground and background for links and infoboxes. Then you'd have this in total:

:root {
	--fg: #222222;
	--bg: #fcfcfc;
	--fga: #444444;
	--bga: #cfcfcf;
}

To make a simple dark mode switcher, swap the fg and bg (as well as the --a ones) and wrap it in a @media query:

@media only screen and (prefers-color-scheme: dark) {
	:root {
		--fg: #222222;
		--bg: #fcfcfc;
		--fga: #444444;
		--bga: #cfcfcf;
	}
}

Have both of these in your file, and when you use the CSS variables for colors, they'll all change for dark mode! How cool is that. If you want to take it a step further and change pictures for dark mode, you can do this:

<picture>
	<source srcset="dark.png" media="(prefers-color-scheme: dark)">
	<img src="light.png" alt="alt text here">
</picture>

Now you'll have a completely different image to see in dark mode! You can see this demonstrated in the following section.

Constrain and center your body text

Constraining body text makes your site drastically easier to read. Take this site, with unconstrained body text:

Then compare it to this one, which constains and centers the body:

To constrain the body and center this, you only need to add this to your CSS:

body {
	margin: 0 auto;
	max-width: 60rem;
}

You can stack this, so you can do, f.ex. 40rem on your <main> element.

Hopefully this guide has helped you improve your site just a little bit and cut the curb so that everyone can have a great experience. Keep resisting the corporate web and let's bring back web1, but accessible this time!