Gestaltung der Links

Als ich dabei war, diese Seite zu entwerfen, wurde ich mit der Frage konfrontiert, wie ich die Links gestalten möchte. Zu erst habe ich mir klar gemacht, welche Möglichkeiten HTML und CSS bieten. Die Möglichkeiten, die sich mir boten, waren das Unterstreichen, fett oder kursiv hervorheben, farblich abheben, Schriftgröße ändern oder mit kleinen Bildchen arbeiten. Nachfolgend möchte ich meine Gedanken zu diesem Thema niederschreiben, damit jeder diese nachvollziehen kann und vielleicht dadurch Anregungen für seine eigene Webseite erhält.

Bilder

Es besteht die Möglichkeit bei Links ein Bildchen einzufügen, sodass dieser Teil anders aussieht, als normaler Fleißtext. Der Nachteil an dieser Geschichte ist, dass diese Bilder immer gleich groß bleiben, auch wenn man die Schriftgröße im Browser verwendet (Opera ist hier mal eine Ausnahme). Das schmeckte mir noch so ganz. Auch wären es bei zuvielen Links, eventuell zu viele Bilder im Text gewesen, welchen ihn dann eventuell unruhig gemacht hätte. Desweiteren wollte ich Links, die auf eine externe Webseite gehen, ebenfalls mit einem Bildchen versehen. Dadurch hätten sich interne Link schlechter von den externen abgehoben, auch wenn ich ein anderes Bild verwendet hätte. Daher habe ich diese Idee wieder ganz schnell fallen gelassen.

Schriftgröße

Man hätte auch die Schriftgröße der Links anpassen können, damit sie sich vom Fleißtext abheben können. Doch dadurch hat man keine einheitliche Zeilenhöhe mehr und sowas kann das Gesamtbild doch gehörig durcheinander bringen. Also habe ich auch diese Idee wieder ganz schnell nach Ablage P gepackt.

Farblich hervorheben

Um einen Link aus dem Text herausstechen zu lassen, kann man diesen Link farblich so gestalten, dass er sich optisch deutlich abhebt. Dadurch fällt der Link auf. Die Farbe hat auch keinen Einfluss auf die Zeilenhöhe und passt sich natürlich der Schriftgröße an. Also war Farbe schon mal kein schlechter Gedanke. Aber was ist mit normalen Text, denn man farblich hervorheben möchte? Kann es dort nicht zu einer optischen Kollision kommen und den Besucher der Webseite verwirren? Da Farbe allein also nicht perfekt ist, musste noch etwas weiteres her.

Fett oder kursiv hervorheben

Also habe ich mir überlegt, den Link kursiv oder fett darzustellen. Kursiv persönlich gefällt mir weniger und es wird auch oft für Zitate oder ähnliches verwendet. Daher fand ich das nicht so berauschend. Also blieb nur noch die Möglichkeit der fetten Darstellung. Allerdings benutzt man fett um etwas hervorzuheben. Also auch nur suboptimal, da dies auch bei einem anderem Wort aus dem Fließtext sein könnte. Also ging die fette Darstellung alleine auch nicht. Fett in Kombination könnte ebenfalls mit einen normalen hervorgehobenen Wort verwechselt werden. Also musste ich gucken, ob ich noch ein weiteres Merkmal einbauen könnte.

Unterstreichen

Als letzte Möglichkeit ist mir das Unterstreichen eingefallen. Allerdings könnte es auch hier wieder eine Verwechslung mit einem normalen unterstrichenen Wort kommen und so kann das Unterstreichen nicht alleine genutzt werden.

Schlussfolgerung

Jeder der oben genannten Möglichkeiten hat Vor- und Nachteile. Und daher empfiehlt es sich, mehrere Verfahren zu kombinieren, sodass eine Verwechslung mit anderem Text auf der Webseite ausgeschlossen werden kann.

Ich habe mich dafür entschieden, dass die Links im Fließtext sowohl farblich hervorgehoben als auch unterstrichen werden. Hat der Besucher einen Link noch nicht besucht, dann wird der Link zusätzlich noch fett dargestellt. Dadurch springen „unbenutzte“ Links sofort ins Auge. Für die Hauptnavigation an der Seite habe ich das farbliche hervorheben der Links nicht angewandt, da die Links in einem separatem Bereich sind und somit nicht noch mal optisch hervorgehoben werden müssen.