HTML/Tutorials/Links richtig gestalten

Aus SELFHTML-Wiki
< HTML | Tutorials(Weitergeleitet von HTML/Links)
Wechseln zu: Navigation, Suche

Mit Hyperlinks oder Links (to link, engl. „verbinden“) werden Stellen in einem Dokument bezeichnet, die die Möglichkeit bieten, auf ein anderes Dokument oder zu einer anderen Stelle im selben Dokument zu verweisen und mit einem Klick oder Tap dort hin zu springen.

Inhaltsverzeichnis

[Bearbeiten] Wie sieht ein guter Verweis aus?

Wenn Sie Verweise mitten im Text notieren, sollten Sie als Verweistext inhaltlich beschreibende Wörter anbieten, keine Wörter ohne Inhalt[1]:

  • Schlecht ist: Für weitere Information klicken Sie hier (Worum geht es „hier“ eigentlich?)
  • Gut ist: Weitere Informationen können Sie ebenfalls aufrufen (ah ja!)

Sie können einem Link im title-Attribut weitere Informationen mitgeben, die beim Überfahren mit der Maus als Tooltip angezeigt werden. Da Touchgeräte keinen :hover-Zustand kennen, funktioniert dies dort nicht.

Bei komplexeren Projekten sollten Sie überlegen, wie Sie dem Anwender die Vielzahl der Verweise mit unterschiedlicher Bedeutung intuitiv zugänglich machen. Ein sinnvoller Weg ist, Verweise durch kleine Symbolgrafiken zu kennzeichnen. So können Sie dem Anwender sofort signalisieren, um welche Art von Verweis es sich handelt.

Zu wenige Verweise erschweren das Navigieren in einem Projekt und zeugen von wenig Kreativität beim Anbieter des Projekts. Zu viele Verweise verwirren den Anwender und können ein „Lost-in-Hyperspace-Gefühl“ erzeugen – auch das wirft kein gutes Licht auf den Projektanbieter. Setzen Sie deshalb alle Verweise, die zum bequemen Navigieren nötig sind, und denken Sie auch an Querverweise sowie an sinnvolle Verweise zu anderen WWW-Adressen. Übertreiben Sie die Querverweistechnik aber nicht.

[Bearbeiten] Warum funktionieren die Hover-Effekte bei Verweisen nicht wie gewünscht?

Oft ist es gewünscht, zwischen besuchten und unbesuchten Links unterscheiden zu können oder einen Link beim „Überfahren“ mit der Maus anders zu formatieren.

Bei den Hover-Effekten kommt es auf die richtige Reihenfolge an, in der die entsprechenden Pseudoklassen für Verweise notiert werden. Probieren Sie folgende Reihenfolge:

Beispiel: CSS - Reihenfolge bei a{}
a:link { /* Deklarationen */ } a:visited { /* Deklarationen */ } a:focus { /* Deklarationen */ } a:hover { /* Deklarationen */ } a:active { /* Deklarationen */ }

Siehe auch: CSS/Selektoren/Pseudoklasse/hover,_active,_focus

[Bearbeiten] Text-Links mit CSS gestalten

Verweise sollten die Aufmerksamkeit des Anwenders sofort auf sich lenken. Angesichts der immer weiter um sich greifenden Verwendung von Touch-Screens, die keinen :hover-Zustand kennen, ist die Verwendung von Hover-Effekten, bei denen Links erst durch Einblendungen, geänderte Mauszeiger, etc. erkennbar werden, nicht nur sinnlos, sondern geradezu kontraproduktiv. Trent Walton ruft in seinem Artikel „Non Hover“ zu einer Abkehr vom bisherigen Design mit Hover-Effekten auf.[2]

Beachten Sie: Wenn Sie bei Verweisen die Unterstreichung mit text-decoration: none; entfernen oder die Textfarbe an die Farbe des normalen Fließtexts anpassen, verlieren Sie damit ein wichtiges Erkennungsmerkmal von Links.

[Bearbeiten] Farben und Hintergrundfarben

Sie sollten schon vor der Festlegung der Linkfarbe ein Farbkonzept erstellen, damit die darin enthaltenen Farben gleich in das Stylesheet übertragen werden können.

Empfehlung: Achten Sie immer auf eine …
  • gute Unterscheidung zum normalen Fließtext, die standardmäßig vorhandene Unterstreichung sollten Sie beibehalten
  • gute Lesbarkeit mit hohen Kontrasten

[Bearbeiten] andere Unterstreichungen

Mit der text-decoration-style-Eigenschaft können Sie die Art der Unterstreichung verändern. Leider ist die Browserunterstützung dafür noch nicht ausreichend. Es gibt aber einen workaround, mit dem Sie den gleichen Effekt erzielen können.

Beispiel: andersfarbige Unterstreichung mit Pünktchen ansehen …
a.eins {
  text-decoration: none;
  border-bottom: .2em dotted blue;
}
 
a.zwei {
  text-decoration: none;
  border-bottom: .1em dashed green;	
}
 
a.drei {
  text-decoration: none;
  border-bottom: .4em double red;
}
In diesem Beispiel wird die Linkkennzeichnung mit text-decoration: none; entfernt und dafür mit border eine untere Randlinie festgelegt. Sie erhält über border-style und border-color unterschiedliche Zuweisungen.
Empfehlung: Eine Unterstreichung in rot wird wohl erst einmal als fehlerhaft und nicht als möglicher Link gesehen. Achten Sie auf eine klare, allgemeinverständliche Kennzeichnung von Links.

[Bearbeiten] Links mit Symbolen kennzeichnen

Sie können Links auch mit Symbolen und kleinen Grafiken kenntlich machen. Da Sie mit UTF-8 Zugriff auf eine Vielzahl von Zeichen haben (→ Unicode-Tabellen), können Sie im Allgemeinen auf das Einbinden von Hintergrundgrafiken verzichten.

Beispiel: Links mit Symbolen kennzeichnen ansehen …
a {
  display: inline-block;
  padding-left: .5em;
  text-decoration: none;  
}
 
a::before {
  content: '→ ';
}
 
a.backlink::before {
  content: '← ';
}
 
a.toplink::before {
  content: '↑  ';	
}
 
a[rev] {
  padding-left: 0;
} 
a[rev]::before {
  content: '';	
}
Allen Links wird ein linker Innenabstand gegeben. Hier wird über ein Pseudoelement ::before mit content: '→ '; erzeugt.

Danach werden zwei Klassen festgelegt:

  • Die Klasse toplink erhält einen Pfeil nach oben
  • Die klasse backlink einen Linkspfeil
Fußnoten benötigen keinen Pfeil, also wird hier mit dem Attributsselektor für a[rev] die Festlegung des linken Rands und des Pseudoelement wieder rückgängig gemacht.

[Bearbeiten] externe Links kennzeichnen

CSS erlaubt auch das Selektieren von Attributwerten. So können Sie externe und interne Links anhand der URL, bzw. des Fehlens derselben unterschiedlich kennzeichnen.

In früheren Beispielen wurde dies durch das Referenzieren mehrerer, verschiedenfarbiger Hintergrundgrafiken erreicht. [3] Allerdings lassen sich solche genau auf eine Schriftgröße und ein Farbkonzept abgestimmten Grafiken nur schwer nachträglich ändern.

Sinnvoller ist hier der Einsatz einer SVG-Grafik, der mit CSS die passenden Farben für die verschiedenen Zustände zugewiesen werden können.

Beispiel: Grafik für externe Links
<svg class="extern" width="16" height="16" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <polygon points="2,2 5,2 5,3 3,3 3,9 9,9 9,7 10,7 10,10 2,10"/>
  <polygon points="6.2,2 10,2 10,5.79 8.58,4.37 6.5,6.5 5.5,5.5 7.6,3.4"/>
</svg>

Theoretisch ist es auch möglich, der Eigenschaft background-image den SVG-Code als Wert zuzuweisen. Die Daten in Data-URLs müssen laut Standard URL-encodiert sein. Viele Browser akzeptieren nicht URL-encodierte SVGs, im IE werden sie jedoch nicht ausgeführt.

Eine Alternative wäre die base64-Codierung der Grafik. Sie spart einen HTTP-Request, da die Grafikinformationen direkt im Stylesheet angegeben werden, ist aber ca. ein Drittel größer als die ursprüngliche Datei. Angesichts der größeren Dateigröße der URL-encodierten SVG-Grafik ist dies hier zu vernachlässigen.

Beispiel: Kennzeichnung externer Links ansehen …
a[href^="http://"], a[href^="https://"] {  
  padding-right: 1em;
  background: 
    url("data:image/svg+xml;base64,PHN2ZyB3aWR0... ") right no-repeat;	
}
In diesem Beispiel erhalten Links, deren URL mit http:// oder https:// beginnen, ein Hintergrundbild. Herfür wird die base64-codierte Version eines SVG verwendet. Es ist völlig responsiv, da es sich an alle denkbaren Größen anpasst. Leider ist es nicht möglich, Hintergrundbildern über fill spezielle Farbzuweisungen zu geben. Deshalb ändert sich die Farbe der Grafik nicht.

[Bearbeiten] grafische Links mit CSS gestalten

Bei verlinkten Bildern gelten die gleichen Voraussetzungen wie bei Textlinks. Die meisten Browser stellen per Tastatur ausgewählte Links mit einem gepunkteten Rahmen dar. Es ist eine weit verbreitete, aber dennoch schlechte Praxis, dies per CSS zu unterbinden, da auf diese Weise nicht mehr erkennbar ist, welcher Link nun gerade den Fokus hat.

Des Weiteren könnte eine Kennzeichnung des Links durch eine Änderung des Mauszeigers mit der cursor-Eigenschaft durchgeführt werden. Diese wäre dann aber bei Touch-Geräten nicht sichtbar.

Empfehlung: Kennzeichnen Sie verlinkte Grafiken so, dass Sie durch ein Klicken mit der Maus oder durch Tastaturnavigation klar als Links erkennbar sind, wenn sie den Fokus haben.

[Bearbeiten] (blauer) Schatten

Beim Überfahren einer Grafik mit der Maus können sie mit der Pseudoklasse :hover einen (hier blauen) Schatten definieren. Dies sollten Sie aber nur tun, wenn das Bild auf eine andere Seite verweist.

Beispiel: blauer Schatten bei :hover
a img:hover{
   box-shadow:0 0 10px rgba(0,191,255,0.9);
}


[Bearbeiten] Imagemaps

Es ist aber auch möglich, über eine Grafik mehrere Links zu legen, um etwa eine verweissensitive Landkarte zu erhalten. Allerdings sind diese aufgrund ihrer festen Koordinaten nicht responsiv und kamne daher in den letzten Jahren immer mehr aus der Mode.

Hier bieten sich responsive SVG-Grafiken an, bei denen aktive Flächen mit CSS gestaltet werden können, sodass neben der Änderung des Mauszeigers auf aktiven Verweisen auch Text- oder Hintergrundfarbe eines Overlays geändert werden kann.

Empfehlung: Verwenden Sie eine responsive SVG-Grafik, in der Sie das Aussehen der verlinkten Flächen mit CSS festlegen können.

[Bearbeiten] Siehe auch

[Bearbeiten] Quellen

  1. TU Chemnitz: Leitfaden für Linktexte
  2. Trent Walton: Non Hover
  3. apsel-mv.de: Externe und interne Verweise durch Grafiken kennzeichnen
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML