Ratſchläge für eine gute Webseite

Anpaſſungsfähige Anordnung

Beiſpiel

<!DOCTYPE html>
<html lang="en">
<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 screen 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ſcheinungsbild

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

Wenn beide ordnungsgemäß 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ſpruchsvoll, daß man ſtattdeſſen ein einfaches Videoſpiel ausfü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 ausgeführt wurde. So wird erſt die Seite geladen und dann das Skript ausgefü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 ausgelöſt, wenn man die Taſtatur oder andere Eingabemethoden verwendet.