How to make 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.

Structure Your Page

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>

Lay out your page with “display: flex;” and “flex-direction” or “display: grid;”. You can still have your navigation scroll with the screen in a static layout (which you should be using) by using “display: sticky; top: 0px;” instead of “display: fixed;”. Header and footer are entirely optional and you don't need a main either if your page doesn't contain other things.

Adjust the Page for Devices With Small Width

This is what I use to adjust my layout.

@media only screen and (max-width: 60rem){...}

Keep Your DOM Flat

Instead of nesting things, always look whether you can achieve the same with less tags. Deep DOMs are a horror for browsers. That's why CSS was invented to begin with!

CSS

The biggest hit on CSS performance is unused CSS. So do not use any CSS frameworks. Put CSS in an external file, so it will be cached.

Avoid Javascript

The best option is not to use JS at all because it is very slow. Compile pages serverside or statically. If you do use JS, you should define all scripts in the head and use the argument “defer” on them. If you don't, the page won't load until the script is processed. If you do, the page will be rendered and then the JS is run. The later is always the better option.

Do not use frameworks. The time where every browser had different functions is over. It only adds overhead.

Use Preview Images

Large images will take time and bandwith to load and having them all on the same page is a horror.

Don't Animate

Animation always means reflows every single frame which is very expensive in browsers.

Set Cookies Through HTTP

You probably knew that you can set cookies through Javascript but did you know you can do the same with HTTP itself? Yes, astonishing.

No Pixel Based Layout or Text

For sizing paddings, margins, widths, heights, and font-sizes you should 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.

Escape UTF-8 in CSS

While it seems tempting to put a character like “, ”, − (real minus), ▼, ▲, ➤ or ♡ into a content attribute of ::before or ::after, do not do that! I know you can specify the encoding of a CSS file but that is actually supposed to be the same as that of the document and Internet Explorer does not even know about it. However browsers tend to fuck up. If I reload the page 20 times in Chromium , some of these times it will show 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

It is in every CSS tutorial, taught right at the start. What they always forget to mention is that it does not come without its problems. There is no way to prevent sentences from being squashed by the image at certain monitor widths, so that only about one word fits in each line making it unpleasing to read. And you should never use float for layout! Use flexbox or grid instead. If you need float anyway, disable it for small screens or big pictures.

No All Caps

Use <b>old, <u>nderlined, <i>talic, spaced or <big>ger text instead. Furthermore consider whether styling is really needed. Often you can get your point across better through careful wording and phrasing.