Text (z. B. Links) mit Bildern darstellen

Blue-Tiger

Moin Moin!
Eine Freundin von mir baut gerade eine neue Homepage. Damit ihre Links auch ansprechend aussehen, besteht ihr ganze Navigation aus Bildern (d.h. statt eines Textes "home" ist da ein Bild, wo "home" oben steht).
Die offensichtlichen Gruende, warum das schlecht ist, hab ich ihr genannt, naemlich

Schaut schlecht aus wenn man eine andere Zoomstufe eingestellt hat (z. B. bei Sehbehinderung, alte Menschen, ...)
Fuer Blinde, die mit Braile-Zeile surfen, unbrauchbar
Beim Surfen mit Handy unbrauchbar
Fuer Suchmaschinen schlecht

Die Seite dreht sich u. A. um Grafikdesign. Eben deswegen soll sie optisch ansprechend aussehen, und ebend deswegen sind Braile-Benutzer relativ unwichtig. Deshalb fallen mir grad keine Argumente ein, sie davon zu ueberzeugen, DOCH bei Text zu bleiben. Deswegen meine Frage: kennt ihr noch Argumente, die mir beim Ueberzeugen helfen koennten und/oder lieg ich falsch in meiner Ansicht, dass die Verwendung Bilder statt Text ein Erzverbechen ohnegleichen sind?

Knuddlbaer

Das einzige Argument was ich hier gelten lassen würde: Suchmaschinen.
Ansonsten will die Zielgruppe etwas fürs Auge haben, die Seite selbst wird sicherlich als Referenz angesehen.

Wenn sich also normaler Text Optisch nicht passt, kann die Grafik durchaus Sinvoll sein. Wenn nicht geplant ist die Seite in Suchmaschinen zu plazieren (und zwar so, das die Kunden über die Suchergebnisse kommen), würde ich der Grafik den Vorzug geben. (Die Ladezeiten dürfen dabei aber trotzdem nicht hoch sein).

Sollte sich in der Grafik jedoch "nur" ein Text befinden der, bis auf etwas Antialias, auch so als normaler Text eingesetzt werden kann, sollte dieser als Text eingesetzt werden.

Das lässt die Seite nicht nur schneller laden - es sorgt auch für Suchmaschinenorientierte Kunden dafür, das sich die eigene Seite im Design für diese zwecke hervorhebt.

Reyx

Oder man nimmt für die Links einfach CSS: leerer Linkstext ( z.B.) und Hintergrund- sowie Hovergraphiken.

Knuddlbaer

Bringt Dir in allen genannten Nachteilen keine abhilfe - die Suchmaschine hat keinen Text zum verfolgen und die Last der Grafik ist weiterhin vorhanden.

Reyx

Knuddlbaer schrieb:

Bringt Dir in allen genannten Nachteilen keine abhilfe - die Suchmaschine hat keinen Text zum verfolgen und die Last der Grafik ist weiterhin vorhanden.

Die "Last" der Graphik ist zweitrangig. Schau dir doch mal "moderne" Layouts an: Die sind so vollgestopft von Graphiken, dass sich an ein paar Links keiner aufregen wird. Und für die guten alten Modembenutzer kann man dann ohnehin nichts mehr tun; es sei denn, mann verzichtet auch auf 30-90% der anderen Graphiken.

Was den Text betrifft:
Entweder, man benutzt den title-Tag oder, wenn man befürchtet, die Suchmaschine würde ihn nicht nutzen, schreibt halt zusätzlich noch einen Text hinein. Und selbst wenn man keines von beidem tut: Die Suchmaschine erkennt Links nicht an dem Text, der zwischen <a> und </a> steht, sondern am href-Attribut (sie "verfolgt" keinen "Text"). In sofern ist es für die Indizierung völlig wurscht, ob da ein Text drin steht oder nicht. Und für die Keywörter: Nun, ich denke, die kommen auf der Seite auch anderweitig vor

Knuddlbaer

Da sind wir aber froh, das die Suchmaschine keinerlei Werte auf den Linktext legt und den Sinn des Links nur anhand des Inhaltes der restlichen Seite auswertet.

Reyx

Wie sollte die Suchmaschine den Link denn auswerten? Denkt sie sich: "Oh, kein Text, den Link verfolge ich nicht?". Ich sage ja nicht, dass es irrelevant ist, aber ob da nun ein Text steht oder nicht hat zumindest auf den Fakt, dass indiziert wird, meiner Erfahrung nach nicht wirklich viel Einfluss ...

Im Übrigen bin ich selbst kein Fan von Nur-Bild-Links; ich halte mich i.d.R. an einen Text mit einem Hintergrundbild als Hover. So ist man recht flexibel ...

mantiz

Folgendes hat sich für solche Zwecke etabliert:

<style type="text/css">
.head1 {
    background-image: ...
    text-indent: -5000px;
}
</style>
<h1 class="head1">Überschrift</h1>

Dies bewirkt, dass die erste Zeile des Elements (hier: h1) um 5000px nach links verschoben wird. Dürfte für jegliche Zoom-Stufe ausreichend sein. Ansonsten testen.
Funktioniert auch mit allen anderen Elementen. Vorsicht allerdings, wenn der Text zu lang ist und u.U. automatisch umgebrochen wird, dann noch ein white-space:nowrap einfügen, um den Umbruch zu verhindern.

So kannst Du für alles Text nehmen und per CSS schöne Grafiken verwenden. Dies bietet Dir die Möglichkeit z.B. per JS-Styleswitcher ein/mehrere Alternativ-Layout(s) anzubieten.

Ich hatte mal einen Link zu verschiedenen Techniken, jede Technik hat auch bestimmte Nachteile, aber die weiß ich nicht mehr.

Am besten Du suchst mal nach 'Image Replacement', da müsstest Du eigentlich etwas zu finden.

Entenwickler

Blue-Tiger schrieb:

Schaut schlecht aus wenn man eine andere Zoomstufe eingestellt hat (z. B. bei Sehbehinderung, alte Menschen, ...)

Fuer Blinde, die mit Braile-Zeile surfen, unbrauchbar

Beim Surfen mit Handy unbrauchbar

Die Seite dreht sich u. A. um Grafikdesign.

Selten so gelacht.

Zum Thema: Einfach ein alt-Tag definieren, wie es eh vorgeschrieben ist. Weiß nicht wie Suchemaschinen damit zurechtkommen, ansonsten:

a * span { display: none; }

<a href="..."><span>Linktext</span><img src="..." alt="" /></a>

Blue-Tiger

Entenwickler schrieb:

Blue-Tiger schrieb:

Schaut schlecht aus wenn man eine andere Zoomstufe eingestellt hat (z. B. bei Sehbehinderung, alte Menschen, ...)

Fuer Blinde, die mit Braile-Zeile surfen, unbrauchbar

Beim Surfen mit Handy unbrauchbar

Die Seite dreht sich u. A. um Grafikdesign.

Selten so gelacht.

Zum Thema: Einfach ein alt-Tag definieren, wie es eh vorgeschrieben ist. Weiß nicht wie Suchemaschinen damit zurechtkommen, ansonsten:
a * span { display: none; }

<a href="..."><span>Linktext</span><img src="..." alt="" /></a>

was ist dran so witzig? Besides wozu das span? Und wie loest das dann das Problem?