Startseite > Text statt Grafik?
Text statt Grafik verwenden, wo möglich
Ihre Besucher freuen sich immer, wenn Seiten mit allen dazugehörigen Elementen fix und flott vom Server geladen und schnell vom Browser angezeigt werden. Außerdem ist die Website-Geschwindigkeit (Pagespeed) mittlerweile eines der Ranking-Kriterien (zumindest) bei der Suchmaschine Google™. Es paßt also nicht mehr in die Zeit, jedes läppische Mini-Symbol als Grafik-Datei auf dem Server zu speichern (gelegentlich beanspruchen die HTTP-Kopfdaten beim Runterladen sogar mehr Platz als die eigentlichen Nutzdaten: das anzuzeigende Bild). Also verwendet man als schlauer Webmaster platz- und zeitsparende Ersatzlösungen: Symbole als Schriftzeichen anzeigen, Hamburger
-Symbol als Unicode-Zeichen darstellen, Hintergrundbilder mit attribut-bedingten CSS-Zuweisungen einblenden, Farbverlauf-Schaltflächen mit CSS-Eigenschaften gestalten ...
- ⇓ Symbole anzeigen: Schriftzeichen statt Grafik verwenden
- ⇓
Hamburger
-Symbol als Unicode-Zeichen anzeigen - ⇓ Hintergrundbilder mit attribut-bedingten CSS-Zuweisungen
- ⇓ Farbverlauf-Schaltflächen mit CSS-Eigenschaften gestalten
Symbole anzeigen: Schriftzeichen statt Grafik verwenden
Gelegentlich benötigt man zur optischen Kennzeichnung in Tabellen oder auch im Fließtext Symbole. Früher hätte man dafür Grafik-Dateien verwendet. Leichter und schneller geht es mit span-Elementen in gefärbter Schrift: für den grünen Haken
(Unicode-Nummer in HTML: ✔) und den grünen Pfeil nach oben
(HTML-Entität ⇑) wird die CSS-Klasse gut ergänzt, für das rote X
und den roten Pfeil nach unten
(HTML-Entität ⇓) die CSS-Klasse schlecht. Das graue Fragezeichen (CSS-Klasse fragez) gibt's kostenlos dazu ;-)
(Beispieltext:) Tabelle mit Speise- und Küchenchef-Bewertungen:
| ✔ | Gyros mit Zaziki | schmeckt echt lecker |
| ✔ | Lammkotelett | schmeckt auch lecker |
| X | Grießbrei | schmeckt grauenhaft |
| ? | vegane Schweinshaxe aus Algen | wer ißt denn sowas? |
| ⇓ | alter Küchenchef | Essen schlecht: o Graus |
| ⇑ | neuer Küchenchef | Essen jetzt besser: toll |
Hamburger
-Symbol als Unicode-Zeichen anzeigen
Vor allem mit CMS wie Wordpress
ist es groß in Mode gekommen, das Menü auf schmalen Endgeräten (manchmal leider sogar auch auf breiten Bildschirmen) mit dem sogenannten Hamburger
-Symbol zu unterlegen. Oft müssen die armen Seitenbesucher für diesen Button
extra eine Grafik-Datei oder gar eine ganze Symbol-Schriftart runterladen: das kostet Zeit und macht die Seiten langsamer. Es geht einfacher und sparsamer: Man kann das identisch mit
-Zeichen (3 waagerechte Striche, Unicode-Nummer in HTML: ≡) in ein span-Element einbetten und dieses mit CSS-Eigenschaften stylen
. Das erfordert nur ein paar Bytes: HTML: <span class="hamburg">≡</span> CSS: .hamburg {color:red; font-weight:bold; font-size:2.6em;}. Und so sieht's dann aus:
| ≡ | das identisch mit-Zeichen ... |
ist als Hamburgernutzbar |
Ich selbst habe gar kein Smartphone
: Erstens brauche ich keines, und zweitens verwende ich grundsätzlich keine Geräte, mit denen mich neu- oder geldgierige Fremde überwachen können: keine Kamera mit GPS-Funktion, kein Navi im Wagen, kein Auto, das nachhause telefoniert, kein Kühlschrank, der anderen mitteilt, wenn ich eine Flasche Bier trinke ... Wie meine Webseiten auf mobilen Endgeräten aussehen, schaue ich mir mit dem Bildschirmgrößen-Test in den Entwicklerwerkzeugen meiner Browser an.
Hintergrundbilder mit attribut-bedingten CSS-Zuweisungen
Die Symbole für externe Links (Klasse extern), PDF-, ZIP- und 7zip-Dateien (jeweils die Dateiendungen als letzte Stellen im href-Attribut) sowie für die deutsche Flagge (Klasse deutsch) werden mit attribut-bedingten CSS-Zuweisungen automatisch
angezeigt. Die fünf Hintergrundbilder sind als base64-kodierte Daten innerhalb der CSS-Datei gespeichert; hierdurch werden fünf Anfragen an den Server eingespart. Jeweils Beispiele:
Lesen Sie hier meine deutschsprachigen Testberichte über die beiden Quellcode-Editoren ...
- SynWrite (mit Hinweisen zu Zeichensätzen und Zeichenkodierung)
- Notepad++ (mit Hinweisen zu Zeichensätzen und Zeichenkodierung)
Hier können Sie sich ein Überraschungspaket runterladen als ...
- Zip-Archiv: Überraschungspaket im Zip-Format (7 KB, kostenlos)
- 7zip-Archiv: Überraschungspaket im 7zip-Format (7 KB, kostenlos)
Eine PDF-Datei habe ich aktuell nicht im Angebot, aber wenigstens kann ich Ihnen hier das attribut-bedingte PDF-Symbol zeigen: Datei nicht vorhanden (0 KB, kostenlos)
Farbverlauf-Schaltflächen mit CSS-Eigenschaften gestalten
Es gibt Anlässe, da möchte man seine Besucher mit einem echten Hingucker auf etwas besonders aufmerksam machen. Etwa auf den Download-Link zu einer Datei. Für solche Schaltflächen eignen sich hervorragend die Eigenschaften background: linear-gradient ... und box-shadow: ... der CSS Version 3, mit denen sich Farbverläufe und Schatten erstellen lassen. Sehen Sie sich als Beispiele die Schaltflächen auf der Download-Seite an. Für das Hintergrund-Bild
verwende ich einen div-Behälter. Natürlich ist die gesamte Schaltfläche link-sensitiv, nicht nur der Text.
Früher hätte man für solche Effekte ein teures Bildbearbeitungs-Programm benötigt und sich stundenlang mit der Erstellung der Grafikdatei abgequält. Heute ist mit wenigen Zeichen CSS-Code alles erledigt, und man erspart seinen Besuchern damit eine zusätzliche Anfrage an den Server.