16     Tipps, Tricks und Tools 

Am Ende dieses Buches erhalten Sie noch paar Anregungen, die man als eine Art »Qualitätsmanagement« bezeichnen könnte. Außerdem werden noch einige Aspekte erwähnt, die bei Webprojekten gerne vergessen werden.

 

16.1    Wichtiger »Kleinkram« 

»Kleinkram« klingt abwertend, gemeint sind aber durchaus wichtige Aspekte, die zu oft nicht umgesetzt werden – sei es aus Vergesslichkeit, Unwissenheit, Zeitmangel oder weil sie thematisch in kein anderes Kapitel passten.

 

16.1.1    Zum Ausdrucken – Print-Stylesheet 

Bei der ausführlichen und gründlichen Entwicklung der Stylesheets für alle Gestaltungs-, Browser- und Auflösungsfälle wird ein Medium gern übersehen: der Drucker. Nicht wenige Anwender drucken, aus welchen Gründen auch immer, eine Webseite aus. Meistens sind die Textinformationen der Grund, es können aber auch einmal Karten oder Bilder sein.

Ein Print-Stylesheet sorgt dafür, dass nicht die komplette Webseite samt Header, Navigationen, Seitenleisten und Footer ausgedruckt wird – unter Umständen noch großflächig farbig und mit vielen Schmuckgrafiken. Ein Print-Stylesheet ermöglicht eine für den Druck geeignete Formatierung.

Es gibt verschiedene Möglichkeiten, die Print-Anweisungen einzubinden. Die üblichste und empfehlenswerteste ist die Einbindung einer eigenen Print-CSS-Datei:

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

Listing 16.1    Einbindung eines externen Print-Stylesheets

Das Entscheidende ist hier die Angabe media="print", damit die Browser wissen, wann sie die CSS-Angaben einzusetzen haben.

Alternativ lassen sich die CSS-Anweisungen aber auch innerhalb einer schon vorhandenen CSS-Datei vornehmen. Mit Media Queries wird das Medium angegeben:

@media print {
/* Print-Anweisungen */
}

Listing 16.2    Media Queries für CSS-Print-Anweisungen

Abbildung 16.1    Ohne Print-Stylesheet wird aus der Webseite (oben) ein Druckerzeugnis (unten), das nicht schön aussieht und zu viel Papier verbraucht.

Spannend ist nun die Frage, was alles im Print-Stylesheet angepasst werden soll. Dazu müssen Sie sich überlegen, welche Elemente im Ausdruck erscheinen sollen, oder anders formuliert: Gibt es Elemente, die nicht mit ausgedruckt werden sollen? Dafür kämen beispielsweise die Navigationen, Seitenleisten, Header-Bilder und der Footer infrage. Sie können sich der Thematik auch nähern, indem Sie sich überlegen, warum der Anwender die Seite ausdrucken will. Welche Informationen/Inhalte will er ausgedruckt haben? Der Rest muss nicht gedruckt werden, weil er nur unnötig Papier und Druckertinte verbraucht.

Zusätzlich können noch Inhalte mit ausgedruckt werden, die für den Webseitenbetreiber wichtig sind, wie beispielsweise das Logo. Der Anwender braucht dieses nicht unbedingt. Aber welches Unternehmen möchte schon seine Webseiteninhalte ohne entsprechendes »Branding« ausgedruckt sehen?

Unerwünschte Inhalte auszublenden lässt sich ganz einfach realisieren, indem zwischen die Print-Media-Queries-Anweisung folgende Angaben gesetzt werden:

header, nav, sidebar, footer {
display: none;
}

Listing 16.3    Ausblendung beim Druck nicht benötigter Elemente/Inhalte

Wenn die Inhalte ausgewählt sind, geht es an die »Umformatierung« der Elemente. Werden keine speziellen Print-Anweisungen gegeben, wird die Seite samt Inhalten komplett ausgedruckt und die Formatierung beibehalten oder die Browserformatierung eingesetzt. Beides führt selten zum gewünschten Aussehen auf Papier. Schriftgröße, Schriftart und vor allem Schriftfarbe müssen angepasst werden. Gedrucktes liest sich schwarz auf weiß am besten. So müssen beispielsweise Headline oder Links auf Papier nicht zwingend farbig sein, auch dies verbraucht nur unnötig Tinte. Und bei Schwarz-Weiß-Druckern werden diese automatisch in Grau umgewandelt.

Texte, die auf farbigen Hintergründen oder Bildern liegen und dazu vielleicht noch weiß sind, müssen umformatiert werden. So könnte eine exemplarische Formatierung folgendermaßen aussehen:

h1 {
font: 12pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
color:#000;
}

Listing 16.4    Formatierung einer Überschrift für den Druck

Hier wird die Schriftgröße angepasst, als Einheit ist Point gewählt, wie man es auch aus dem Druckbereich kennt, denn es werden ja keine Pixel gedruckt, sondern Druckpunkte. 12 Punkt ist dabei eine übliche Größe für den Fließtext. Genau wie die anderen Schriftgrößen (für Überschriften etc.) muss diese im Einzelfall abgestimmt werden. Als Schriftart wird eine Serifenschrift angegeben, die bei Drucksachen (im Normalfall) einfacher zu lesen ist – also anders als auf dem Bildschirm, wo serifenlose Schriften, gerade bei kleineren Schriftgrößen, besser geeignet sind (siehe Kapitel 10, »Typografie«). Auch hier sollte eine zur Webseite und dem Unternehmensdesign passende Schriftart ausgewählt werden. Normalerweise wird die Schriftart so beibehalten, wie sie auch auf der Webseite eingesetzt wird, es sei denn, sie ist auf Papier schlecht lesbar. Die Anpassung des Zeilenabstands und der Textfarbe macht die Überschriftenformatierung rund.

Abbildung 16.2    Das smashingmagazine.com zeigt, wie es geht: Aus der bunten, mit vielen Inhalten geschmückten Webseite (oben) wird ein auf das Wesentliche reduzierter Ausdruck (unten).

Eine wichtige Anpassung der Print-Stylesheets betrifft die Links. Beim Ausdruck der Seite erscheinen diese normalerweise in der Linkformatierung (also z. B. unterstrichen oder andersfarbig). Das ist bei einer ausgedruckten Seite nicht sehr hilfreich. Mithilfe der CSS-Pseudoklasse :after lassen sich die Linkziele beim Ausdrucken anzeigen. Dazu muss folgender Code in der Print-Stylesheet-Definition ergänzt werden:

a:after {
content: " [" attr(href) "]";
}

Listing 16.5    Hyperlinks druckfreundlich ausgeben

Die Anweisung bewirkt, dass hinter jedem Link (:after) Inhalt hinzugefügt wird. Am Anfang und Ende stehen in Anführungszeichen eckige Klammern, um das Linkziel (attr(href)) optisch abzugrenzen.

Eventuell sollte der CSS-Selektor noch angepasst werden, damit beispielsweise nur Links im Inhaltsbereich so ausgegeben werden. Sie können natürlich auch noch weitere CSS-Formatierungen vornehmen. Manche verändern auch das Aussehen des Linkziels und machen die URL kleiner (font-size) oder passen die Farbe an (color).

 

16.1.2    Das Webseitensymbol – Favicon 

Das Favicon (Favoritensymbol) ist ein kleines Icon (16 × 16 oder 32 × 32 Pixel), das in der Adresszeile und den Tabs des Browsers und in der Lesezeichenliste neben dem Webseitentitel angezeigt wird. Damit hat es eine große optische Bedeutung, denn wir orientieren uns gerne an optischen Reizen, und Bilder (und dazu gehören Icons) nehmen wir schneller und einfacher wahr als Text (wie etwa den Seitentitel) (siehe Kapitel 11, »Bilder und Grafiken«).

Abbildung 16.3    Was wäre die Lesezeichenliste nur ohne die Favicons? Auf jeden Fall um einiges unübersichtlicher.

Es gibt unzählige Favicon-Generatoren im Internet wie z. B. xiconeditor.com, die Ihnen die Arbeit erleichtern. Ähnlich wie in Bildbearbeitungsprogrammen kann man mit einem Pinsel die Pixel einzeln füllen oder auch Grafiken/Bilder wie beispielsweise das Unternehmenslogo hochladen und automatisch auf die passende Größe herunterrechnen lassen.

Die klassische Einbindung eines Favicons sieht so aus:

<link rel="icon" type="image/x-icon" href="/favicon.ico">

Listing 16.6    Einbindung eines Favicons

Abbildung 16.4    Der X-Icon Editor bietet umfangreiche Bearbeitungsmöglichkeiten zur Favicon-Erstellung an (xiconeditor.com).

Touch-Icon | Wer damit rechnet, dass Smartphone-Benutzer die Webseite so gut finden, dass sie diese direkt auf ihrem Home-Screen speichern, kann dafür ein eigenes Icon anlegen. Denn ist kein Touch-Icon vorhanden, wird standardmäßig ein Screenshot der Webseite angezeigt.

Für die verschiedenen mobilen Betriebssysteme sollten eigene Icons definiert werden. Allein schon für Apple-iOS-Systeme gibt es unterschiedliche Größen.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png" />

Listing 16.7    Einbindung eines iOS-Favicons

Für Android-Systeme sieht es folgendermaßen aus:

<link rel="shortcut icon" href="android-icon.png" sizes="196x196">

Listing 16.8    Einbindung eines Android-Favicons

Einen guten Überblick über die mobilen Betriebssysteme und deren Größen liefert die Seite blog.nina-boecher.de/webdesign/touch-icons-apple-android-windows.

 

16.1.3    Webseite nicht gefunden – die 404-Meldung 

Es kann immer einmal passieren, dass der Anwender versucht, eine Seite aufzurufen, die es gar nicht gibt. Sei es, weil er sich vertippt hat oder weil die Seite inzwischen verschwunden bzw. unter einem anderen Dateinamen erreichbar ist.

Wer also statt https://www.rheinwerk-verlag.de/4271 versehentlich https://www.rheinwerk-verlag.de/44555 im Browser eingibt, landet nicht bei der Rheinwerk-Seite zu diesem Buch, sondern bekommt eine Fehlermeldung:

Abbildung 16.5    Anstelle einer irritierenden Fehlermeldung bietet der Rheinwerk Verlag Hilfe an, wenn die angeforderte Seite nicht gefunden werden kann.

Wird keine eigene Fehlerseite angelegt, gibt der Server eine Meldung aus, die wesentlich »unschöner« aussieht und den normalen Anwender eher irritieren dürfte (siehe Abbildung 16.6).

Abbildung 16.6    Das sieht nicht gut aus! Und mit dieser Meldung kann der normale Anwender nicht viel anfangen.

Es gibt die Möglichkeit, eigene Fehlerseiten zu erstellen. Der Fall, dass die aufgerufene Seite nicht gefunden werden kann, wird als 404-Error-Seite bezeichnet. Es gibt noch weitere Fehlermeldungen, wie beispielsweise nicht autorisierten Zugriff auf eine Seite (weil sie passwortgeschützt ist), aber die häufigste Meldung ist die 404-Seite. Content-Management-Systeme haben eine solche Seite meistens schon von Haus aus im Gepäck, bei allen anderen Webseiten lohnt es sich, eine eigene anzulegen. Dazu erstellen Sie eine eigene HTML-Datei (z. B. »fehler-404.html«).

Um diese zu aktivieren, sodass sie bei nicht gefundenen Dateien automatisch angezeigt wird, müssen Sie in der ».htaccess«-Datei (die Konfigurationsdatei für die Webseite auf dem Server) Folgendes eingeben:

ErrorDocument 404 /fehler-404.html

Listing 16.9    Definition der Fehlermeldungsdatei in der ».htaccess«

Eventuell müssen Sie den Pfad zur HTML-Datei entsprechend anpassen. Dass Fehlermeldungen nicht langweilig aussehen müssen, sondern unter Umständen sogar witzig, zeigen diese Beispiele:

Abbildung 16.7    Fehlermeldung mit einem Augenzwinkern bei lieferando.de und lego.com

Ergänzend und hilfreich (schließlich hat sich der Anwender verirrt und versucht, sich wieder neu zu orientieren) können neben einer netten Gestaltung samt eigener Fehlermeldung noch weitere Navigationsmöglichkeiten sein. Ein Suchformular, ein Link zur Startseite und das Anteasern von anderen interessanten Inhalten bieten dem Anwender gleich Surfoptionen an.