Tips for a good website

Since this seems to be a popular topic here on Neocities. I thought I'd make a page on it as well.

Dynamic Layout

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Title</title>
<link href="/style.css" rel="stylesheet"/>
<link rel="icon" href="favicon.png">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<header></header>
<nav></nav>
<main>
<h1>Title</h1>
<p>...</p>
</main>
<footer></footer>
</body>
</html>

Instead of nesting things, lay out your main, nav, header, footer tags with “display: flex;” and “flex-direction” or “display: grid;”.

This is what I use to adjust my layout: @media only screen and (max-width: 60rem) {...}

Just take Firefox and resize the window to all possible sizes. Open the page with a terminal browser. Open the page with Javascript disabled. Open the page on your phone. Remember that you can always implement as many fallbacks as you want to in your CSS or with optional javascript. Remember to add <meta name="viewport" content="width=device-width,initial-scale=1"> to your <head>, so phones display it the same way.

Font Sized Based Layout

Forget about px, cm, pt, in, use em or rem. For those who do not know, em is just m spelled out because it is the width of an M. If you set width, always make sure to also set max-width to 100% to avoid the horizontal scroll bar. Em depends on the font-size of the element being sized and is the same as a percentage when applied to font-size. (font-size:1em=font-size:100%) Rem on the other hand inherits from the root element, the html tag, and is thus not dependant on the font-size of the parent but on the default font-size. By not using anything but em/% or rem on font, the readers font-size choice in his browser settings will be respected. And who knows better than the reader what DPI and eyesight he has? Not even the OS knows.

Light and Dark Themes

You can specify an additional light or dark theme with CSS: @media (prefers-color-scheme: light) {...}

If they are both working properly and you want the popular Dark Reader browser extension to stop overwriting some of your CSS, you can insert <meta name="darkreader-lock"> in <head>.

Don't Animate

Animation in browsers is quite demanding to the point you could run a simple video game instead. This is true for both JS and CSS animations. Absolutely don't let animations run forever on your page.

Escape UTF-8 in CSS

Sometimes Chromium will show UTF-8 from CSS-files as multiple ASCII characters instead. The best solution is to simply use backslash encoding for the characters in question. For that I recommend that you paste the character into Unicode-Table.com and use it in your CSS. Example: content: '\201CExample\201D';

Avoid CSS-Float

There is no way to prevent sentences from being squashed by the image at certain screen widths, so that only about one word fits in each line making it unpleasing to read.

Javascript

Avoid it. If you do use JS, you should define all scripts in the head and use the attribute “defer” on them. If you don't, the page won't load until the script is processed. You can't modify the page before the DOM is built anyway.

Use the <button> element for click events

Click events have a fatal flaw: They don't support keyboards. If you specify tabindex="0", you can focus on the element but it will do nothing if you press enter. Then you need to register an input event and create a function that checks whether the pressed key is enter or space. <Button>s save you that headache. You can focus them and click events will fire when you use the keyboard or other input methods.