Ratſchläge für eine gute Webſeite

Anpaſſungs­fähige Anordnung

Beiſpiel
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8"/>
<title>Titel</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>Titel</h1>
<p>...</p>
</main>
<footer></footer>
</body>
</html>

Ordne die Abſchnitte header nav main footer mit „display: flex;“ und „flex-direction“ oder „display: grid;“.

Das iſt, was ich für meine Anordnung benutze: @media only s­creen and (max-width: 60rem) {...}

Nimm einfach Firefox und ändere die Fenſtergröß­e auf alle möglichen Größ­en. Öffne die Seite mit einem Terminalbrowser. Öffne die Seite mit deaktiviertem Javaſkript. Öffne die Seite auf deinem Telefon. Denk daran, daß man in CSS oder mit optionalem Javaſkript immer ſo viele Fallbacks implementieren können, wie man möchte. Denk daran, <meta name="viewport" content="width=device-width,initial-scale=1"> to your <head> zum <head> hinzuzufügen, damit Telefone es auf die gleiche Weiſe anzeigen.

Schriftgröß­enbezogene Anordnung

Vergiß px, cm, pt, in, verwende em oder rem. 1 rem iſt die vom Nutzer eingeſtellte Textgröß­e. 1 em iſt die Schriftgröß­e des Elternelements. Wenn width geſetzt wird, ſetze max-width auf 100%, um horizontale Bildlaufleiſten zu vermeiden. Em hängt von der Schriftgröß­e des Elements ab, deſſen Größ­e geändert wird, und entſpricht einem Prozentſatz, wenn er auf die Schriftgröß­e angewendet wird. (font-size: 1em = font-size: 100%) Rem hingegen erbt von <html>, und iſt nicht von der Schriftgröß­e des Elternelements abhängig. Wenn nichts anderes als em /% oder rem für die Schriftart verwendet wird, wird die Einſtellung des Leſers gewürdigt.

Helles and dunkles Erſcheinungs­bild

Ein zuſätzliches helles oder dunkles Erſcheinungs­bild kann mit CSS angeben werden:
@media (prefers-color-scheme: light) {...}

Wenn beide ordnungs­gemäß funktionieren und man nicht möchte, daß die beliebte Dark Reader-Erweiterung einige deiner CSS-Dateien überſchreibt, kann man <meta name="darkreader-lock"> in <head> einfügen.

Nicht animieren

Animationen ſind ſo anſpruchs­voll, daß man ſtattdeſſen ein einfaches Videoſpiel aus­führen könnte. Dies gilt ſowohl für JS- als auch für CSS-Animationen. Laſſe Animationen auf deiner Seite auf keinen Fall ewig laufen.

Maſkiere UTF-8 in CSS

Manchmal wird UTF-8 aus CSS-Dateien in Chromium als mehrere ASCII-Zeichen angezeigt. Die beſte Löſung iſt einfach die Rückwärts­ſtrichnotation zu verwenden. Dazu empfehle ich das Zeichen einfach auf symbl.cc einzufügen und es in deinem CSS zu verwenden. z.B.: content: '\201EBeispiel\201C';

Vermeide CSS-Float

Es gibt keine Möglichkeit zu verhindern, daß Sätze von einem Bild am Bildſchirmrand zerquetſcht werden, ſo das z.B. nur ein Wort in jede Zeile paß­t, was ſehr unbequem zu leſen iſt.

Javaſkript

Wenn du JS benutzt, dann ſetze alle Skripte in <head> und füge die Eigenſchaft defer hinzu. Wenn du das nicht machſt, dann wird das Laden der Seite unterbrochen bis das Skript aus­geführt wurde. So wird erſt die Seite geladen und dann das Skript aus­geführt.

Verwende <button> für Klickereigniſſe

Klickereigniſſe haben einen ſchwerwiegenden Mangel: Sie unterſtützen Taſtaturen nicht. Wenn man tabindex="0" angibt, kann man das Element fokuſieren, aber es tut nichts, wenn man die Eingabetaſte drückt. Dann muß man ein Eingabeereignis regiſtrieren und eine Funktion erſtellen, die überprüft, ob die gedrückte Taſte die Eingabetaſte oder die Leertaſte iſt. <button> erſpart dir die Kopfſchmerzen. Sie ſind anwählbar und Klickereigniſſe werden aus­gelöſt, wenn man die Taſtatur oder andere Eingabemethoden verwendet.