web/designs0(31) Sprache: Deutsch


Webseitendesignentscheidungen

Motivation

Damit die Entwicklung dieser Ma_Sys.ma Webseite ein möglichst gutes Ergebnis hervorbringt und um dem Nutzer zu erklären, wieso sich die Seite so und nicht anders verhält, wurden viele maßgebliche Designentscheidungen öffentlich zugänglich festgehalten.

Bei den Designentscheidungen waren insbesondere die folgenden Seiten hilfreich

Ein wesentliches Ziel der neuen Webseite ist, dem Principle of the least surprise gerecht zu werden und immer genau das zu tun, was der Nutzer normalerweise erwarten würde.

Layout und Farbgebung

Die Seite orientiert sich farblich lose an der Vorgängerversion mawebsite3/final(33). Sie wurde insbesondere an das Logo angepasst und soll damit enheitlich und leicht wiedererkennbar sein. Dass Rot als Hauptfarbe dabei nicht unproblematisch ist, wurde hingenommen, zumal Gelb und Violett noch weniger gepasst hätten. Wie alle anderen Ma_Sys.ma Webseiten zuvor, durchbricht auch die neuste Version das mittlerweile gängige Einheits-Weiß, welches heute fast alle großen Webseiten für die Darstellung ihrer Inhalte verwenden.

Layoutmäßig wurde das legendäre Layout der zweiten Ma_Sys.ma Webseite mawebsite2(33) wieder aufgegriffen. Die in vorherigen Webseiten zu bemängelnde Anordnung in deutlich abgegrenzten Kästen wurde aufgebrochen, um das Design moderner zu machen und Platzverschwendung zu verhindern.

Im Vergleich zu den Vorgängerversionen wurden mobile Endgeräte ebenfalls bedacht, weshalb die Buttons in der Navigationsleiste nicht nur größer sind, als bei den alten Webseiten, sondern auch dafür ausgelegt sind, in sehr schmalen und sehr breiten Darstellungen nicht zu hässlichen Layoutfehlern zu führen.

Bilder

Das Layout der Webseite verwendet Bilder äußerst sparsam: Dadurch wird nicht nur die kostbare Bandbreite von Mobilgeräten geschont, sondern auch der Inhalt in den Vordergrund gestellt. In alter Tradition ist das Logo per SVG eingebunden und als einzige Ungewohntheit traditionell animiert. Ebenfalls schon seit der ersten Ma_Sys.ma Webseite mawebsite1(33) gibt es am Seitenende einige Grafiken, die auf die verwendeten Standards und den vim(36) Texteditor hinweisen.

Browseroptimierung

Wie auch die Vorgängerversionen wird die Webseite zwar mit allen gängigen Browsern auf Funktionsfähigkeit getestet, es gelten darüber hinaus aber zwei Grundsätze:

  1. Die Seite verwehrt alten Browsern nicht absichtlich den Zugang, nimmt aber auch nicht gesondert Rücksicht. So kommt es, dass der Content-Type application/xhtml+xml in alten Internet Exploreren zu einer weißen Seite (ohne Möglichkeit den Inhalt zu lesen) führt, was (wie auch schon in der Vorversion) nicht durch Verwendung des weniger geeigneten Content-Type: text/html behoben wird. Mittlerweile wurde für diesen Sonderfall eine Ausnahme geschaffen, sodass MSIE-User-Agents immer text/html bekommen, wodurch alte Internet Explorer zumindest etwas anzeigen sollten.
  2. Die Seite muss nicht überall gleich aussehen. So werden die Buttons in Webkit-basierenden Browsern wesentlich hässlicher dargestellt, als z. B. im Firefox. Daran wird nicht durch umständliche Hacks etwas geändert, sondern das wird als unterschiedliches Verhalten von Browsern hingenommen.

Externe Verweise

Bei älteren Ma_Sys.ma Webseiten waren externe Links immer mit einer Zwischenseite vor der Weiterleitung auf eine andere Webseite ausgestattet.

Eine Weiterleitungsseite der Ma\_Website 3
Eine Weiterleitungsseite der Ma_Website 3

Diese Seite sollte die Sicherheit erhöhen, hatte aber mehrere negative Seiteneffekte, weshalb solche Weiterleitungen auf dieser Seite nicht mehr verwendet werden

  • Der Benutzer musste häufiger klicken
  • Unerwarteter Weise öffnete sich nicht der Link, sondern die Weiterleitung
  • Suchmaschinen bestraften die Seite aufgrund weniger externer Verweise
  • Vorausschauendes Öffnen von Links in einem neuen Tab produzierte unerwartete Ergebnisse.

Im Zusammenhang mit dem letzten Punkt steht auch eine weitere Änderung bei (insbesondere aber nicht ausschließlich) externen Links: Wurden früher Links manchmal automatisch in einem neuen Tab geöffnet, liegt es nun komplett beim Benutzer, einen Link in einem neuen Tab zu öffnen oder nicht. Dadurch verhält sich die Webseite weniger unerwartet.

Technischer Rückschritt

Vergleicht man die Funktionen älterer Ma_Sys.ma Webseiten, insbesondere der mawebsite3/first_try(33) mit der momentanen Version kommt leicht der Verdacht auf, diese Seite sei ein Rückschritt gegenüber den Vorversionen. Ähnlich wie auch bei der mawebsite3/final(33) ist aber zu beachten, dass viele Features der früheren Seiten absichtlich weggelassen wurden: So wurde die Anzahl der Screenshots reduziert, damit die wichtigen Screenshots in den Vordergrund gerückt werden. Außerdem fehlen die Onlinequelltexte in dieser Ausgabe der Ma_Sys.ma Webseite vollständig. Dies ist nicht nur dem Umstand zu verdanken, dass die Seite letztendlich nur ein D5Man-Export ist, sondern vor allem dem Fakt, dass es äußerst aufändig ist, eine große Funktionsvielfalt wie die vielen Stylesheets einiger Vorversionen oder die Online Quelltexte sinnvoll zu warten. Regelmäßig veralteteten sowohl einige weniger verwendete Stylesheets, als auch die Quelltexte der früheren Webseiten, weshalb nun ganz darauf verzichtet wird.

Ein weiterer Grund ist, dass dynamische Funktionen vom Server unterstützt werden müssen. Um möglichst unabhängig vom Anbieter zu bleiben, stellt die Ma_Website 4 nur sehr geringe Anforderungen an den Webserver, sodass sich die Seite nicht nur einfach spiegeln lässt, sondern auch einfach auf einen anderen Hoster migriert werden kann.

JavaScript

Obwohl JavaScript nützliche Funktionen bietet, die z. B. bei der Implementierung von Suchfunktionen Vorteile bieten, wird mittlerweile komplett auf den Einsatz von JavaScript für die Webseite verzichtet. Damit verhält sich die Seite komplett den Erwartungen entsprechend und spart Bandbreite, weil keine JavaScript Dateien geladen werden müssen.

Cookies

Frühere Ma_Sys.ma Webseiten setzten Cookies ein, um die Anzahl der Nutzersitzungen statistisch auszuwerten. Mittlerweile werden keine Cookies mehr von der Seite verwendet. Sollten dennoch welche gesetzt werden, so sind diese online-Modifkiationen der Seite durch den Freehoster zuzuschreiben.

Sprachmix

Um Inhalte möglichst authentisch abzubilden, sind die Sprachen der einzelnen Seiten jeweils genau wie bei der Erstellung. Für eine Verfügbarkeit von Seiten in beiden Sprachen stehen nicht die Zeitressourcen zur Verfügung, weshalb es auch keine Umschaltmöglichkeit für die Sprachen gibt – Seiten sind entweder auf Deutsch oder Englisch, aber niemals in beiden Sprachen verfügbar.

Unleserliche Links und Zahlen

Die meisten Links, denen man auf dieser Seite begegnet, muten auf den ersten Blick etwas seltsam an: Kleinbuchstaben und Zahlen in Klammern – das scheint unleserlich und schwer benutzbar, wirft vor Allem aber die Frage nach dem Warum auf und das ist genau der Grund, weshalb die Links in dieser Form belassen wurden: Der Benutzer soll sich fragen, was dahinter steckt und es dann auf der Seite d5man(32) erklärt zu bekommen.

Ausnamen

Von den hier beschriebenen Grundprinzipien sind nur web/experiments(31) und einige abzweigende Seiten ausgenommen.


Zum Seitenanfang