Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.


HTML-Head

Seitentitel und Beschreibung

Der <Title> einer Seite ist jeweils im Browserfenster sichtbar, entweder oben in der Mitte oder im Tab, und wird beim Speichern von Lesezeichen automatisch als Beschriftung verwendet. Er ist enorm wichtig für Suchmaschinen, sowohl für den Titel des Suchresultats (unten in blau) und sein Inhalt liefert hoch gewichtete Suchbegriffe.

<title>Atom</title>
<meta name="description" content="At GitHub, we’re building the text editor we’ve always wanted: 
hackable to the core, but approachable on the first day without ever touching a config file. 
We can’t wait to see what you build with it." />

Gleichzeitig mit dem Titel soll man auch gleich eine Description setzen. Dieser Text wird im Normalfall in Suchmaschinenresultaten sichtbar – hier gelb markiert. Es kann sein, dass Suchmaschinen mit irgendwelchen gutgemeinten Text-Snippets dazwischenfunken und die Description ignorieren. Dafür habe ich im Moment noch keine einfache Lösung. Die Relevanz der Description in Sachen Suchbegriffe ist nicht ganz klar.

Text-Codierung für Mitteleuropa

Textcodierung UTF-8 (Unicode Transformation Format 8 Bit) für die ganze Seite. Das ist zwingend nötig in unserem Sprachraum, um die ganzen Umlaute und Akzente anzuzeigen. Auch korrekte Anführungszeichen und Gedankenstriche sind nur so möglich.

<meta charset="UTF-8">

Stylesheet-Verknüpfung

Das gewöhnliche CSS hatten wir schon. Siehe CSS-Einbau. Soweit simpel:

<link rel="stylesheet" href="meins.css">

Die obenstehende Zeilen verknüpft ein Stylesheet für alle Ausgabemedien. Klingt seltsam, aber früher stand die Idee, für den Bildschirm, den Beamer, den Handheld (wer sich noch erinnern mag), Braille-Ausgabegeräte, teletextähnliche Systeme und natürlich für den Drucker ein anderes CSS anzubieten. Letzteres kann natürlich immer noch sinnvoll sein, wenns um Schriftgrösse, Schmuckfirlefanz und Farben geht. Es gilt beispielsweise als durchaus anständig, schwarzgründige Layouts mit weisser Schrift für den Drucker zu invertieren. Fügt einfach nach dem gewöhnlichen CSS einen zweiten Link-Meta-Tag für den Drucker nach folgendem Muster ein.

<link rel="stylesheet" media="print" href="print.css">

Viewport für Responsive Design

Folgender Meta-Tag verhindert, dass ein Layout auf Bildschirmen von mobilen Geräten verkleinert wird. Genau genommen wird festgelegt, dass das Layout eins-zu-eins pixelgenau abgebildet wird.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Fehlt diese Angabe, schrumpft das gesamte Layout proportional auf Bildschirmgrösse. Da helfen die ganzen CSS-Media-Queries nichts mehr, um die Bildschirmgrössen abzufangen. Das sieht man leider erst, wenn man das Layout wirklich auf einem Mobile Device lädt. Als Check nur das Browserfenster auf dem Desktop zu verkleinern, funktioniert leider auch ohne diese Angabe. Abhilfe leistet da responsinator.com oder halt eben das eigene Smartphone.

Ergänzt man diese Zeile um maximum-scale=1.0 blockiert man die Möglichkeit, dass der User den Inhalt zoomen kann. Mit maximum-scale=2.0 schränkt man das Zoomen auf 200 % ein.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Verantwortlich:
Jürgen Wössner
E-Mail

Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.

Aber mit so einem kleinen Bildschirm hier ist das ganze echt nutzlos. Geh mal rüber an einen grösseren Bildschirm.