10 Kommentare

Warum sind Hyperlinks blau?

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.

Tipps für die Praxis

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

eingeordnet unter:

veröffentlicht von Matthias Scharwies

Kommentieren ist für diesen Artikel deaktiviert.

  1. Warum sind Hyperlinks blau?

    TS Homepage des Autors (Versionen)
    – Informationen zu den Bewertungsregeln

    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

    --
    Es gibt nichts Gutes, außer man tut es!
    Das Leben selbst ist der Sinn.
    –
    Informationen zu den Bewertungsregeln

    1. Warum sind Hyperlinks blau?

      Matthias Scharwies
      – Informationen zu den Bewertungsregeln

      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

      --
      Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
      –
      Informationen zu den Bewertungsregeln

      1. Warum sind Hyperlinks blau?

        TS Homepage des Autors
        – Informationen zu den Bewertungsregeln

        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

        --
        Es gibt nichts Gutes, außer man tut es!
        Das Leben selbst ist der Sinn.
        –
        Informationen zu den Bewertungsregeln

        1. Warum sind Hyperlinks blau?

          Matthias Scharwies (Versionen)
          – Informationen zu den Bewertungsregeln

          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.

          1. Du selektierst alle Links und gibst ihnen mit padding-righteinen rechten Innenrand, der ein background-image für einen internen Link bekommt.
          2. Du selektierst nach dem Attributwert des href-Attributs und suchst nach einer Teilübereinstimmung 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.
          3. Andere Grafiken kennzeichnen:hover und :focus; bzw. mailto-Links.

          Herzliche Grüße

          Matthias Scharwies

          --
          Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
          –
          Informationen zu den Bewertungsregeln

          1. Wann müssen (Hyper-)Links besonders gekennzeichnet werden?

            Ralf
            +1 Informationen zu den Bewertungsregeln

            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

            +1
            Informationen zu den Bewertungsregeln

  2. Warum sind Hyperlinks blau?

    Der Martin
    – Informationen zu den Bewertungsregeln

    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

    --
    Klein φ macht auch Mist.
    –
    Informationen zu den Bewertungsregeln

    1. Warum sind Hyperlinks blau?

      JürgenB Homepage des Autors
      – Informationen zu den Bewertungsregeln

      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

      –
      Informationen zu den Bewertungsregeln

      1. Warum sind Hyperlinks blau?

        Matthias Scharwies
        – Informationen zu den Bewertungsregeln

        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:

        Ja, aber …

        Und trotzdem sollte der Linktext auch ohne Kontext verständlich sein.

        Besser: „Informationen für …“

        Herzliche Grüße

        Matthias Scharwies

        --
        Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
        –
        Informationen zu den Bewertungsregeln

      2. Warum sind Hyperlinks blau?

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@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.

        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

        --
        „Ohne die Meinungsfreiheit würde man die Idioten nicht erkennen.“
        — @MvSommerdune
        –
        Informationen zu den Bewertungsregeln

        1. Warum sind Hyperlinks blau?

          JürgenB Homepage des Autors
          – Informationen zu den Bewertungsregeln

          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

          –
          Informationen zu den Bewertungsregeln