Wie man eine gute Webſeite erſtellt

Da dies ein beliebtes Thema hier auf Neocities zu ſein ſcheint, dachte ich, daß ich auch eine Seite darüber machen ſollte.

Gliedere deine Seite

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 Abschnitte mit „display: flex;“ und „flex-direction“ oder „display: grid;“. Du kannſt deine Navigationsleiſte auch in einer ſtatiſchen Anordnung mitlaufen laſſen indem du „display: sticky; top: 0px;“ ſtatt „display: fixed;“ verwendeſt.

Paſſe die Seite für kleine Bildſchirmbreiten an

Das iſt was ich für meine Anordnung benutze:

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

Halte den DOM flach

Anſtatt Dinge zu verſchachteln, ſchaue immer, ob du das Selbe mit weniger Elementen erreichen kannſt. Tiefe DOMs ſind ein Horror für Browſer. Aus eben dieſem Grund wurde CSS erfunden!

Entferne ungenutztes CSS

Der größte Einfluß auf CSS-Geſchwindigkeit iſt ungenutztes CSS. Also entferne es und benutze ja keine CSS-Frameworks. Lerne CSS ſelber zu ſchreiben.

Halte CSS extern

Manches CSS wird über alle Seiten hinweg benutzt und es zu Cachen ſpart Zeit. Das bezieht ſich jedoch nicht auf CSS das nur auf einer Seite benutzt wird. Denn dieſes auf allen Seiten zu verwenden, fuhrt nur wieder zu ungenutztem CSS! Wenn du willſt kannſt du dein CSS ſelbſtverſtändlich immer noch in eine externe Datei, die nur auf dieſer Seite eingebunden iſt, ſpeichern.

Vermeide Javaſcript

Am beſten verwendeſt du gar kein JS, weil es ſehr langſam iſt. Kompiliere deine Seite auf dem Server oder ſtatiſch. Wenn du JS benutzt, dann ſetze alle Skripte in den Kopf 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.

Benutze keine Frameworks. Die Zeit in der Browſer verſchiedene Funktionen hatten ſind längſt vorbei. Sie verlangſamen deine Skripte nur.

Nutze Vorſchaubilder

Große Bilder brauchen Zeit und Bandbreite und ſie alle auf einmal auf der ſelben Seite zu laden iſt ein Grauen. Die Dateimanager und Bildbetrachtungsprogramme auf deinem Rechner tun das ebenfalls.

Animiation ohne Javaſcript oder CSS-Keyframes

Mit CSS-Transitions kannſt du meiſt das Selbe auf einem abwärtskompatiblen Weg erreichen. Sollte der Browſer CSS 3 nicht unterſtützen, iſt die Änderung ſtattdeſſen unmittelbar.

Setze Cookies mit HTTP

Du wußtest wahrſcheinlich ſchon, daß du mit Javaſcript Cookies ſetzen kannſt, aber weißt du auch, daß man das auch mit HTTP ſelbſt tun kann?

Keine pixelbaſierten Anordnungen oder Texte

Um die Größen von Innen- und Außenabſtänden, Breiten, Höhen, und Schriftgrößen feſtzulegen, ſollte man em oder rem benutzen. Für die, die es noch nicht wiſſen: em iſt nur m ausgeſprochen, weil es die Breite eines M iſt. Wenn du die Breite ſetzt, ſtelle immer ſicher auch max-width auf 100% zu ſetzen, um horizontale Bildlaufleiſten zu vermeiden. Em hängt von der Schriftgröße des Elements ab und verhält ſich wie Prozent, wenn es als Schriftgröße benutzt wird. (font-size:1em iſt font-size:100%) Rem auf der anderen Seite erbt von dem Wurzelelement, dem html-Element, und iſt deshalb nicht von der Schriftgröße des Elternelements abhängig, ſondern der Standardſchriftgröße. Indem man nichts anderes als em/% oder rem auf Schriftgrößen anwendet, wird die Schriftgrößeneinſtellung des Leſers geachtet. Und wer ſoll beſſer wiſſen, welche DPI und Sehkraft der Leſer hat, als er ſelbſt?

Kein UTF-8 in CSS

Es mag zwar verlockend erſcheinen Zeichen wie “, ”, −, ▼, ▲, ➤ oder ♡ in ein content-Attribut eines ::before oder ::after zu ſetzen, aber tu es nicht! Man kann zwar die Kodierung in CSS angeben, aber ſie ſollte eigentlich die Selbe wie die des Dokoments ſein und Internet Explorer weiß nicht mal davon. Allerdings ſcheinen ſich Browſer nicht daran zu halten. Wenn ich die Seite in Chromium 20 mal neulade, werden manchmal dann doch 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 Unicode-Table.com einzufügen und es in deinem CSS zu verwenden. z.B.: content: '\201EBeiſpiel\201C';

Vermeide CSS-Float

In jedem CSS-Anleitung, gleich am Anfang erklärt. Was immer vergeſſen wird zu erwähnen, ist daß es nicht problemlos iſt. 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. Des Weiteren ſollte man float nie für die Anordnung der Seitenelemente hernemen, ſondern flexbox oder grid.

Schreibe nicht in Großbuchſtaben

Ich weiß, daß es viel Aufmerkſamkeit erregt. All dieſe werbefinanzierten Videos auf YouTube mit „GOSSBUCHSTABEN KLICK MICH AN“-Titeln. Das liegt jedoch daran, das du länger brauchſt, um die Worte zu verſtehen. Du kannſt den Text ſtattdeſſen auch <b> fett, <u> unterſtrichen, <i> ſchräg, geſperrt oder <big> größer machen. Überlege auch, ob Formatierung wirklich nötig iſt. Oft kannſt du deinen Punkt beſſer vermitteln, indem du auf Wortwahl und Ausdrucksweiſe achteſt.

Sprachkodes

Die Sprachkodes für das lang-Attribut kannſt du hier nachſchlagen. Dabei kann man unterſchiedlich ſpezifiſch werden, wenn dies gewünſcht oder erforderlich iſt. Ich benutze hier „de-latf“, was für „Deutſch in Fraktur“ ſteht, aber ich könnte auch „de-Latf-DE-1901“ verwenden. Das bedeutet dann „Deutſch in Fraktur in Deutſchland mit den Rechtſchreibregeln von 1901“. Groß- und Kleinſchreibung darf hierbei vernachläſſigt werden. Lediglich, die Reihenfolge muß beachtet werden. Normalerweiſe reicht der Sprachkode aus, es ſei denn du benutzt ein anderes Schriftſyſtem oder möchtest Stellen in Dialekt oder Schreibvariante anders formatieren.

HTML-Aufklappmenüs

Microsoft verwendet auf ſeinen „Download Center“-Seiten immer noch Javaſcriptaufklappmenüs, obwohl es eine HTML-Entſprechung gibt, die in allen Browſern läuft.