Weißt Du, was Web 2.0-Glossy-Buttons sind? Oder Eine klitzekleine Geschichte der Webseiten-Buttons.

Kannst Du Dich noch an Deinen ersten Computer erinnern? Weißt Du, in welchem Jahr Du das erste Mal im Internet warst? Ich kann mich noch gut daran erinnern, dass ich Anfang der 1990-er Jahre meinen ersten Computer, genauer gesagt, einen Commodore 64 bekommen habe. Das war so cool. Er war zwar nicht so krass, wie der Mac meines Vaters, aber dafür hatte er viel mehr Spiele. Und das war mir im Alter von 7 oder 8 Jahren wichtiger als alles andere. Der Monitor des Gerätes war weder ein schwarz-weiß, noch ein Farbbildschirm, er stellte alles in grün da. 1995 schafften sich meine Eltern dann einen Windows-Rechner an, und ich hatte das erste Mal Kontakt mit dem Internet.

Seitdem hat sich eine Menge getan. Die Computer, die wir heute nutzen, sind kleiner und leistungsstärker als damals und schon lange nicht mehr die einzigen Geräte, mit deren Hilfe wir ins Internet abtauchen können. Die Art und Weise, wie wir das Internet nutzen, hat das Aussehen von Webseiten stark beeinflusst. Früher reichte eine einfache HTML-Webseite aus, um Webseitenbesucher glücklich zu machen. Heute erwarten wir, dass eine Webseite gut aussieht , schnell lädt und sich auf jedem Gerät optimal bedienen lässt. Unzählige Webdesigner arbeiten tagtäglich daran, unsere Wünsche zu erfüllen. Und regelmäßig aktualisierte Bücher wie

Martin Hahn: Webdesign. Das Handbuch zur Webgestaltung

helfen ihnen dabei.

Martin behandelt in seinem Buch alle möglichen Themen, die im Webdesign eine Rolle spielen. Eines dieser Themen sind Buttons, also die kleinen „Mehr erfahren“, „Weiterlesen“ und „Jetzt senden“ Knöpfe, die uns auf fast jeder Webseite begegnen. Obwohl ich in meinem Leben schon eine Menge solcher Buttons geklickt habe, habe ich mich noch nie intensiver mit Ihnen beschäftigt. Und daher habe ich keine Ahnung, wie ein Web 2.0-Glossy-Button aussehen könnte, den Martin auf Seite 23 seines Buches erwähnt. Obwohl Martin dem Thema Buttons ab Seite 602 ein eigenes Unterkapitel gönnt, erfahren wir auch hier nicht, wie ein Web 2.0-Glossy-Button aussieht.

Lass uns doch einmal schauen, ob wir diese Wissenslücke heute schließen können und neben dem Aussehen dieses Buttons mit Hilfe des Internets auch mehr über die Geschichte der Webseiten-Buttons erfahren können.

Wie sieht ein Web 2.0-Glossy-Button aus?

Für die Antwort auf diese Frage brauchen wir den Begriff nur in die Suchmaschine unserer Wahl werfen und dann auf die Bildergebnisse klicken. Der Web 2.0-Glossy-Button erinnert stark an den ersten iMac von 1998, der ganz am Anfang dieses YouTube Videos zu sehen ist. Vor dem iMac waren die meisten Computer mausgrau und eckig. Mit dem iMac revolutionierte Apple das Aussehen von Computern und machte deutlich, dass diese auch schön und praktisch sein können. In einer Welt, in der Menschen ihre Desktopcomputer samt Monitor regelmäßig durch die Gegend schleppten, um mit anderen Menschen Lan Partys zu feiern, gab es vor dem iMac keinen einzigen Computer, der hierfür wirklich praktisch war. Der iMac machte damit Schluss. Er verband nicht nur Monitor und Tower in einem schicken halbtransparenten bonbonfarbenen Gerät, er hatte auch einen praktischen Griff, mit dem er sich leicht von A nach B transportieren ließ. Die meisten Web 2.0-Glossy-Buttons, die ich gefunden habe, sind genau wie der iMac bonbonfarben, haben abgerundete Kanten und glänzen.

Wie haben sich Webseiten-Buttons im Verlauf der Zeit verändert?

Der Web 2.0-Glossy-Button greift das Design des iMacs auf. Doch das Internet gab es schon vor der Erfindung des iMac und daher vermute ich, dass die ersten Buttons im Internet anders aussahen.

Spannenderweise habe ich bei meiner Recherche keine Webseite gefunden, die sich intensiv mit der Geschichte des Webseiten-Buttons beschäftigt. Stattdessen bin ich auf zahlreiche Anleitungen zur Button-Erstellung gestoßen. Also habe ich einen Schritt zurück gemacht und nach der ersten Webseite im Internet gesucht, weil ich davon ausgegangen bin, dass darauf auch der erste Button zu finden sein würde. Zu meiner großen Überraschung gab es auf der ersten Webseite im Internet laut dieser Bildergalerie keinen einzigen Button. Es war eine reine Text-Seite.

Die Geschichte des CERN-Buttons

Die erste Webseite im Internet war also die des Kernforschungszentrum CERN in der Schweiz. Obwohl diese Webseite keinen Button hatte, können wir dieses Wissen nutzen, um eine kleine Geschichte des Buttons zu erstellen. Alles, was wir hierfür brauchen, ist die Hilfe des Webarchives, dass uns die Entwicklung der Webseite im Verlauf der Zeit zeigt, sobald wir die URL hier eingeben.

Die erste Archiv-Aufnahme der Webseite ist von 1996. Auch hier gibt es noch keinen einzigen Button, aber immerhin schon ein Bild. Im Jahr 2000 ist es endlich soweit, die Webseite hat einen Button. Dieser ist mausgrau, hat schwarze Schrift und einen schwarzen Rand. Ganz offensichtlich sind die Designer der CERN-Webseite bis heute keine großen Fans von Buttons. Trotz zahlreicher Klicks habe ich nur 5 Buttons auf der Webseite gefunden, und kein einziger davon sieht aus wie der andere. Hier 3 Beispiele:

• Der Cookie-Akzeptieren-Button ist weiß-blau und eckig.
• Der News Button ist blau-weiß und hat abgerundete Ecken.
• Der Kontakt-Button ist orange mit weißer Schrift, schwarzem Rand und abgerundeten Ecken.

Die Geschichte des Google-Buttons

Wie wir gesehen haben, ist die Webseite von CERN kein gutes Beispiel, um uns etwas über die Geschichte des Webseiten-Buttons zu verraten. Daher nehmen wir uns jetzt einmal Google zur Brust. Diese Webseite mag nicht die älteste Webseite der Welt sein, doch ich kann mich nicht daran erinnern, dass sie je keinen Button hatte.

Laut diesem Bericht von 2017, der das Google-Design der letzten 20 Jahre zum Thema hat, liege ich mit meiner Annahme richtig. Die Google- Webseite hatte schon immer einen Button:

• 1997 waren die 2 Buttons eckig und grau mit schwarzer Schrift, und sie hatten oben linke einen weißen Schatten und unten rechts einen schwarzen.
• 1998 prangen gleich 3 Web 2.0-Glossy-Buttons auf der Google-Webseite. Farblich blieb sich Google dabei treu und griff auf grau transparente Buttons zurück.
• Bereits 1999 sind diese Buttons wieder Geschichte. Nun erscheinen 2 hellgraue Buttons mit schwarzer Schrift, schwarzem Rand und leicht abgerundeten Ecken auf der Seite.
• Die Buttons des Jahres 2000 erinnern wieder stark an die 1997-Versionen.
• Der letzte Screenshot des Berichtes zeigt die Google-Webseite von 2010. Hier sind die gleichen schlichten Buttons wie 2023 zu sehen. 2 hellgraue eckige Buttons mit dunkelgrauer Schrift auf weißem Untergrund.

Dein erster eigener Button

Solltest Du nach all dem, was Du gerade über Buttons gelernt hast, Lust bekommen haben, einen eigenen Button zu erstellen, habe ich gute Nachrichten für Dich. Auf der Webseite meine erste Homepage befindet sich eine Liste mit Webseiten, auf denen Du Deinen eigenen Button erstellen kannst. Mir hat dieser etwas abgespeckte Button-Generator am besten gefallen, weil Du hier direkt sehen kannst, was Du erstellst.

Fazit

Ich glaube, dass ich bei meiner heutigen Recherche versagt habe. Wir wissen zwar nun, wie der Web 2.0-Glossy-Button aussieht, aber ich habe nicht das Gefühl, dass wir dank der Analyse der CERN- und Google-Buttons wirklich etwas über die Geschichte des Webseiten-Buttons erfahren haben. Ich kann mir schlichtweg nicht vorstellen, dass sich noch nie jemand mit der Geschichte des Webseiten-Buttondesigns beschäftigt hat. Doch wer weiß, vielleicht hast Du ja mehr Glück als ich und entdeckst irgendwo die Geschichte des Webseiten-Buttons und teilst diese mit mir.