Warum sind Hyperlinks blau?
Matthias Scharwies
- css
- html
- ux
Eines der hartnäckigsten Designmuster im Web ist, dass Links blau sind - zweifellos unterstützt durch die Standardeinstellungen der Browser. Aber warum blau? Was ist der Grund für diese Wahl?
Elise Blanchard machte sich auf die Spurensuche in die Anfänge des Netzes und UI-Designs, um die ersten blauen Links zu identifizieren. Ihre Ergebnisse stellt sie in diesem Artikel im Mozilla-Blog mit vielen Screenshots vor.
Machen Sie Ihre Links immer durch mehrere Merkmale erkennbar. Neben der blauen Linkfarbe ist eine Unterstreichung gesetzt. Hyperlinks in der normalen Textfarbe, wie sie im oben verlinkten Beitrag erwähnt werden, sind nicht erkennbar und benutzerunfreundlich!
Achten Sie auch auf einen verständlichen Linktext!
Wussten Sie schon, dass es in CSS3 für text-decoration neue Werte mit vielen Gestaltungsmöglichkeiten gibt?
a:hover,
a:focus {
box-shadow: 1px 1px 4px skyblue;
text-decoration: underline double darkblue;
}
Im SELF-Wiki:
Matthias Scharwies
Hello,
man sollte dabei auch nicht vergessen, dass die Clients zu Beginn auch nur eine sehr eingeschränkte Farbpalette zur Verfügung hatten.
Meine ersten "HTTP-Erfahrungen" habe ich noch auf einem erweiterten Textbildschirm gesammelt, der entweder nur Text rendern konnte, oder kleine Grafiken anzeigen konnte in einem Teilfenster. Da wurden die Sekundärlinks (IMG) noch separat aufgerufen mit maximal 256 Farben
Interessant wäre auch eine Anleitung für CSS3, wie man interne (Domain-relative) und externe (mit Scheme) Links automatisch kennzeichnen lassen kann...
Glück Auf
Tom vom Berg
Servus!
Interessant wäre auch eine Anleitung für CSS3, wie man interne (Domain-relative) und externe (mit Scheme) Links automatisch kennzeichnen lassen kann...
im SELF-Wiki:
Herzliche Grüße
Matthias Scharwies
Hello Matthias,
Interessant wäre auch eine Anleitung für CSS3, wie man interne (Domain-relative) und externe (mit Scheme) Links automatisch kennzeichnen lassen kann...
im SELF-Wiki:
Ich dachte dabei eher an ein bedingtes CSS, das die benötigte Sequenz dann automatisch anfügt, oder habe ich den Wiki.Artikel nur noch nicht verstanden?
Glück Auf
Tom vom Berg
Servus!
Hello Matthias,
Interessant wäre auch eine Anleitung für CSS3, wie man interne (Domain-relative) und externe (mit Scheme) Links automatisch kennzeichnen lassen kann...
im SELF-Wiki:
Ich dachte dabei eher an ein bedingtes CSS, das die benötigte Sequenz dann automatisch anfügt, oder habe ich den Wiki.Artikel nur noch nicht verstanden?
Ich klicke da immer auf's live-Beispiel und schau mir das Ergebnis an.
padding-right
einen rechten Innenrand, der ein background-image
für einen internen Link bekommt.a[href^="http"]
. Externe Links haben das http als Teil ihrer URL und erhalten so ein anderes Hintergrundbild. Interne Links haben ja die Raute am Anfang und behalten das interne-Link-Bild.Herzliche Grüße
Matthias Scharwies
Ji,
das könnte nach neuester Gerichtsentscheidung noch wichtiger werden.
Lknks, für die man Geld bekommt, müssen als "Werbung" oder "Anzeige" gekennzeichnet werden. Das gibt ne neue Abmahnwelle.
LG
Ralf
Hallo,
Machen Sie Ihre Links immer durch mehrere Merkmale erkennbar. Neben der blauen Linkfarbe ist eine Unterstreichung gesetzt. Hyperlinks in der normalen Textfarbe, wie sie im oben verlinkten Beitrag erwähnt werden, sind nicht erkennbar und benutzerunfreundlich!
Elise Blanchard stellt hier zwar sehr schön anhand der historischen Entwicklung dar, wie es zu der Konvention kam, dass Links blau gefärbt sind. Also ist mal wieder Microsoft schuld. 😉
Das erklärt aber noch lange nicht, warum es ausgerechnet blau sein sollte. Mir scheint, das war eine willkürliche Entscheidung, die man damals getroffen hat, und es hätte ebensogut grün oder violett sein können.
Ich finde nicht, dass Links unbedingt blau sein sollten, aber sie sollten durch irgendwelche visuellen Merkmale eindeutig als Links erkennbar sein (und nicht nur bei :hover).
Gab es damals schon so ausführliche Untersuchungen zur physiologischen und psychologischen Wirkung von Farben auf den Menschen? - Heute weiß man, dass eine leicht blaustichige Beleuchtung die Aufmerksamkeit fördern kann, während ein Rotstich eher beruhigend und einschläfernd wirkt. Daher auch die Empfehlung, ein eher abgedunkeltes, ins Rötliche tendierendes Theme zu verwenden, wenn man kurz vor dem Zubettgehen noch auf dem Handy daddelt.
Gleichzeitig gilt Rot aber auch als Warn- und Alarmfarbe: In der Industrie gibt es zum Beispiel die Empfehlung, rote Signalleuchten zu verwenden, wenn ein unerwünschter oder gefährlicher Zustand angezeigt werden soll, grün oder gelb (heute zunehmend auch blau) dagegen für normale Betriebszustände. Komisch, mein Fernseher signalisiert den Aus-Zustand (korrekt eigentlich Standby) mit einer roten LED.
Als in den 90er-Jahren blaue LEDs allmählich erschwinglich wurden (anfangs kosteten die noch über 10 Mark pro Stück!), war VW der erste Autohersteller, der diese als Instrumentenbeleuchtung verwendete und mit dem Slogan "Blau macht glücklich" bewarb.
Achten Sie auch auf einen verständlichen Linktext!
Das kann ich allerdings nur betonen. "Klicken Sie hier" ist als Linktext quasi aussagefrei.
Live long and pros healthy,
Martin
Hallo Martin,
Achten Sie auch auf einen verständlichen Linktext!
Das kann ich allerdings nur betonen. "Klicken Sie hier" ist als Linktext quasi aussagefrei.
wobei es mit "Für weitere Informationen klicken Sie hier" schon anders aussieht. Die Frage bleibt, wieviel davon verlinkt wird:
Gruß
Jürgen
Servus!
Hallo Martin,
Achten Sie auch auf einen verständlichen Linktext!
Das kann ich allerdings nur betonen. "Klicken Sie hier" ist als Linktext quasi aussagefrei.
wobei es mit "Für weitere Informationen klicken Sie hier" schon anders aussieht. Die Frage bleibt, wieviel davon verlinkt wird:
- Für weitere Informationen klicken Sie hier.
- Für weitere Informationen klicken Sie hier.
- Für weitere Informationen klicken Sie hier.
Ja, aber …
Und trotzdem sollte der Linktext auch ohne Kontext verständlich sein.
Besser: „Informationen für …“
Herzliche Grüße
Matthias Scharwies
@@JürgenB
wobei es mit "Für weitere Informationen klicken Sie hier" schon anders aussieht. Die Frage bleibt, wieviel davon verlinkt wird:
- Für weitere Informationen klicken Sie hier.
- Für weitere Informationen klicken Sie hier.
- Für weitere Informationen klicken Sie hier.
Für weitere Informationen klicken Sie hier.
Wobei „klicken Sie hier“ visueller Müll ist, also entsorgt werden sollte. Dass man den Link „weitere Informationen“ klicken sollte, wenn weitere Informationen gewünscht sind, sollten man Nutzern nicht sagen müssen.
Also: weitere Informationen.
Oder gar wie Matthias schon sagte „weitere“ durch eine genauere Beschreibung ersetzen.
😷 LLAP
Hallo Gunnar,
Für weitere Informationen klicken Sie hier.
Wobei „klicken Sie hier“ visueller Müll ist, also entsorgt werden sollte.
wobei das "hier" hier sogar noch irreführend ist.
Also: weitere Informationen.
also doch nur mehr
Gruß
Jürgen