Überschriften als Grafik - Teil1
Überschriften als Grafik unter Berücksichtigung von semantisch korrektem (X)HTML durch Ersetzen von (X)HTML-Elementen.
Beim Gestalten von Internetseiten kann es vorkommen, dass man Überschriften in Schriftarten gestalten möchte, die standardmäßig nicht für jeden Besucher verfügbar sind.
Da bleibt oftmals nur die Möglichkeit die ästhetisch gestalteten Überschriften als Grafik einzubinden.
Grafiken haben jedoch entscheidende Nachteile. Suchmaschinen, in deren Ranking- Algorithmus die Überschriften große Relevanz besitzen, können derzeit noch keine Grafiken lesen bzw. indizieren. Den Überschriften kommt bei der Suchmaschinenoptimierung besondere Relevanz zu und aus dem Aspekt der Barrierefreiheit sollten ebenfalls keine Grafiken als Text dargestellt werden.
Doch es gibt Möglichkeiten korrekte Semantik und Struktur von (X)HTML-Elementen unter Einsatz von Text-Grafiken beizubehalten.
Der Einsatz von Image-Replacement-Techniken ermöglicht das Ersetzen von (X)HTML-Elementen durch Grafiken.
Eine bewährte Methode möchte ich nun vorstellen.
Die „Phark-Methode“ ist eine einfache Methode, in der eine Überschrift einen Hintergrund zugewiesen wird.
Der Text wird dabei über die CSS-Eigenschaft „text-ident“ versteckt.
Die Eigenschaft „text-ident“ definiert die Einrückung der ersten Zeile eines Elementes.
So kann eine Überschrift 1. Ordnung einfach verwendet werden:
<h1>Das ist eine Überschrift, die von einer Grafik ersetzt wird</h1>
Das dazugehörige CSS sieht so aus:
h1 {
background-image: url (urlzurgrafik/h1-ueberschrift.gif)
height: 30px;
width:400px;
text-ident: -999em;
}
Bei abgeschaltenem CSS wird in diesem Fall einfach der Text h1 angezeigt.
Bei verschiedenen Überschriften nutzt man einfach Klassen oder IDs und kann dabei noch aus Suchmaschinenoptimierungssicht das Keyword verwenden.
Überschriftsgrafik:
<h1 id="keyword">Eine besondere Überschrift</h1>
Vorteile der Phark-Methode
- funktioniert zuverlässig
- einfach zu realisieren
- unterschiedliche Texte möglich (anderer Text in der Grafik als im h1-Element)
Nachteile der Phark-Methode
- Zeitaufwändig, da jede Überschrift zusätzlich als Grafik erstellt werden muss
Im nächsten Teil der Serie über Schriften im Webdesign gehe ich auf die Replacement-Methode Sifr 3 ein, welche auf Javascript und Flash basiert.
Ähnliche Artikel
- sIFR 3 - Image-Replacement - Teil 2
- Suchmaschinenoptimierung: Sinkende Relevanz des Anchor-Textes?
- Webdesign: Download kostenloser Schriften
- Nofollow-Links im Firefox direkt sichtbar machen
- Abstand im IE größer wegen margin-Verdoppelung im float-Element
Lob, Kritik, oder Anmerkungen? Schreibe einen Kommentar oder speichere diesen Feed und erhalte zukünftig neue Berichte im Feed-Reader.
[...] ich im 1. Teil über die Phark-Methode berichtet habe, welche eine Grafik als Überschrift verwendet, möchte ich nun eine weitere Image-Replacement-Technik [...]