Guru 2.0 › 3.0

Verlinkung ist eine der besten Features des web. Dadurch ist die Anzeige von Hyperlinks auch eine der wichtigsten Dinge, die zu erledigen sind. Daher hier 8 Tipps um die Darstellung und die Usability zu verbessern. Aber nicht nur die Tipps gibt es, sondern auch gleich den Code dazu.

Beachte aber, dass diese Tipps nicht mit allen Browsern kompatibel sind. Besonders der IE6 macht manchmal eigenartige Dinge. Es ist so oder so schlau für die “besonderen” Browser eigene css-Dateien anzubieten und “css-Hacks” zu vermeiden.

1. Zeige Icons für den Dateityp an

Beispiele für css-Links

How-To für automatisierte Link-Icons

Alles beginnt mit dem Attribute-Selektor (dies sind die eckigen Klammern) beim A-Tag. Mit dieser Option kannst Du mit css genauer bestimmen welche Tags formatiert werden sollen. Damit sparst Du dir das rel-Attribut, das ansonsten oft verwendet wird.
Wenn Du alle externen Links in Deinem Dokument formatieren willst, benutze a[href^="http://"], wie es im folgenden Beispiel gezeigt wird. Natürlich geht das nur, wenn Du interne Links nicht mit der vollständigen URL adressierst. Pass hier besonders bei CMS und Blogs auf, da diese die Links oft mit der kompletten URL darstellen.

1
2
3
4
5

a[href^="http://"] {
  background:transparent url(../images/extern.png) center right no-repeat;
  display:inline-block;
  padding-right:15px;
}

Das Carret-Zeichen (^) bedeutet “beginnt mit”. Somit fügt der gezeigte Code allen A-Tags mit dem href-Attribut und einem http:// am Anfang ein Icon hinzu. Dies wird aber nur angezeigt, falls der Browser bereits css3 beherrscht. Ansonsten kann man ja auf das target-Attribut oder das rel-Attribut ausweichen.

1
2
3
4
5

a[target="_blank"], a[rel="external"] {
  background:transparent url(../images/extern.png) center right no-repeat;
  display:inline-block;
  padding-right:15px;
}

Im Gegensatz dazu steht der $-Operator, welcher als “endet mit” interpretiert wird. Damit kann man sehr schön die Dateiendungen (wie .doc, .pdf, .zip, …) filtern. Beispielsweise wird mit a[href$=".zip"] allen A-Tags welche auf eine zip-Datei verweisen, ein neues Format zuweisen.

1
2
3
4
5
6

a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'] {
  background:transparent url(../images/zip.png) center left no-repeat;
  display:inline-block;
  padding-left:20px;
  line-height:18px;
}

Falls Du Icons brauchst, kannst Du sie bei IconFinder herunterladen.

2. Zeige die Sprache der Zielseite an

Verlinkst Du oft auf Seiten die in einer anderen Sprache als Deine webSite geschrieben sind? Dann wäre es gut, wenn Du deinen Links ein lang-Attribut hinzufügst. Damit kannst Du entweder die Sprache in Klammern oder auch die Landesflagge anzeigen lassen. Wenn Du Fahnen verwendest sei vorsichtig, denn prinzipiell könntest Du den Nationalstolz des Lesers verletzen, denke nur an Englisch (USA, GB, AUS, …) oder Deutsch (BRD, AT, CH, …).

How-To für automatisierte Sprachen-Links

Das Pipe-Zeichen (|) im Attribut-Selektor bedeutet, dass alle Element welche am Beginn ein “en” enthalten ausgewählt werden, bspw. lang=”en”, lange=”en-US” oder lange=”en-australian

1
2
3
4

a[lang|='en'] {
  background: url('en.png') no-repeat 0 50%;
  text-indent: 20px;
}

3. Mikroformate sollen hervorgehoben werden

Microformate

4. Zeige Icons für externe Links an

Für den Benutzer ist es eine Erleichterung schon vorher zu wissen, wo der Link hinführt. Wird die webSite jetzt verlassen oder sieht man nur einen anderen Teil der webSite, wenn man auf den Link klickt? Das ist oft die Unsicherheit die ein Leser hat. Nimm sie ihm und er wird es Dir mit häufigeren Besuchen danken.

How-To einen externen Link darstellen

Man kann dies mit der Technik aus dem ersten Tipp erreichen oder auch mit folgendem css darstellen. Zur Sicherheit nochmals eine komplette Darstellung des css, damit Ihr nicht dauernd rauf unter runter scrollen müsst. Vergesst nicht das rel-Attribut beim A-Tag in HTML zu setzen.

1
2
3
4
5
6
7
8
9
10
11
12

a[rel='external'], a[rel='external']:link, a[rel='external']:active {
  background:transparent url(../images/ext.png) center right no-repeat;
  display:inline-block;
  padding-right:20px;
  line-height:18px;
}
a[rel='external']:visited{
  background:transparent url(../images/extv.png) center right no-repeat;
}
a[rel='external']:hover{
  background:transparent url(../images/exth.png) center right no-repeat;
}

5. Tooltips bei den Links

Die übliche Variante eines Tooltips ist die Verwendung des title-Attributes beim A-Tag. Dies ist auch das Mindeste, das erledigt werden sollte, hat aber auch gewisse Einschränkungen. Das Verwenden des title-Attributes ist “Good Practice” und gibt dem Surfer eine erhöhte Usability Deiner webSite. Natürlich kennt Ihr die Versionen um dies mit JavaScript zu erstellen, aber es gibt auch eine einfache Methode, um diese Hilfsfenster nur (!) mit css darzustellen.

How-To einen Tooltip mit css darstellen

Zuerst brauchst Du die passenden css-Stile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

a:hover {
  /* Die Hintergrundfarbe ist nur fuer den IE6! */
  background:#ffffff;
  text-decoration:none;
}
a.tooltip span {
  /* Funktioniert nicht mit allen Screen-Readern ;( */
  display:none; 
  padding:2px 3px; 
  margin-left:8px; 
  width:130px;
}
a.tooltip:hover span {
  display:inline; 
  position:absolute; 
  background:#ffffff; 
  border:1px solid #CCCCCC; 
  color:#7F7F7F;
}

Danach musst Du nur mehr Deinen HTML-Code anpassen und schon klappt es.

1
2
3

Einfacher <a class="tooltip" href="#">Tooltip<span>Hier steht der Text 
f&uuml;r den Tooltip!</span></a>.
}

Beispiel für den ToolTip:

Einfacher TooltipHier steht der Text für den Tooltip!.

6. Stelle besuchte Links anders dar

Natürlich stellst Du die Farbe eines besuchten Links anders dar. Es ist für den Benutzer viel einfacher, wenn er erkennt, welche Links er bereits besucht hat und welche nicht. Aber zusätzlich kannst Du mit den oben genannten Tipps auch noch das Bild des Links verändern. Damit ist es noch leichter erkennbar, welche Hyperlinks bereits angeklickt wurden.

7. Zeit Links besser auf dem Ausdruck an

Hyperlink am Ausdruck

How-To Links auf Ausdrucken anzeigen

Dazu erstellst Du dir ein eigenes, externes Stylesheet und bindest es im HEAD-Bereich Deiner HTML-Datei mit dem Attribute media=”print” ein.

Im css selbst brauchst Du nur den Code wie gezeigt erstellen und schon klappt es.

1
2
3

a:link:after, a:visited:after {
  content:" [" attr(href) "] ";
}

Übrigens! Es ist sicherlich gut, wenn Du eigene css-Dateien für die verschiedenen Medien erstellt. Damit hast Du mehr Kontrolle über die Darstellung Deiner webSite auf diesen Medien und der Benutzer weniger Ärger mit abgeschnittenem Text, nicht sichtbaren Informationen oder unbenutzbarem Layout/Design.

8. Ersetze den Submit-Button durch Grafiken

Oft ist es für den Benutzer klarer auf ein Bild zu klicken, als auf das Wort “Suchen”, “Speichern” oder “senden”. Daher ist es auch gute Usability dies dem Benutzer anzubieten.

How-To Submit-Knopf ersetzen

Hier arbeitest Du im css mit ID’s da ja jeder Submit-Button nur einmal vorkommen darf und daher auch eine eindeutige ID im HTML-Code erhält.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

#button1 {
  width: 100px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(submitGraphic01.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer;
  /* nur fuer den IE5 */
  cursor: hand;
}
#button2 {
  width: 100px;
  height: 55px;
  padding: 55px 0 0;
  margin: 0;
  border: 0;
  background: transparent url(submitGraphic01.gif) no-repeat center top;
  overflow: hidden;
  cursor: pointer;
  /* nur fuer den IE5 */
  cursor: hand;
}
form>#button2 {
  /* fuer alle anderen als IE */
  height: 0px;
}

ähnliche Posts:

• Daily Code Poem #41
• Daily Code Poem #8
• Daily Code Poem #7
• Sprites mit CSS
• Sternenhimmel – 3D Hintergrund mit Parallax mit reinem CSS

Dieser Eintrag wurde

• am Dienstag, 17. März 2009 um 15:01 erstellt und wurde unter CSS, Tutorials zum mehr Wissen abgelegt.
• Der Post besitzt diese Tags: CSS, Links darstellen, Tutorial, Usability
• Du kannst alle Antworten darauf mit dem RSS 2.0 Feed verfolgen.
• Du kannst eine Antwort schreiben.
• Du kannst einen TrackBack von Deinem eigenen Blog setzen.
•  drucken

Der Artikel hat Dir geholfen?

Warum spendierst Du mir nicht einen Kaffee?