Wolfgang Pavel: Die Responsive-Lüge

??? Responsive Design ??? ⇒ ? Mobile first ? ⇒ !!! Mobile only !!!
Wenn Sie Internetseiten nur mit einem Kleinstgerät anschauen, brauchen Sie nicht weiter zu lesen.
Ich benutze für ausführliche Informationen meist einen meiner normalen Monitore – bei mir 17" oder 24" oder 28" – und stoße derzeit auf immer mehr Internetseiten, die ich auf diesen Bildschirmen als unerträglich empfinde.
Sie auch? Dann ist dieser Text vielleicht etwas für Sie:

In Sachen Gestaltung von Internetseiten wird alle paar Monate eine neue alte Sau durch's Dorf getrieben, und viele Leute rennen johlend hinterher. ► Das gab es schon immer.
Jetzt also „Responsive Design“.

Angepasste Gestaltung von Internetseiten war ► schon immer möglich, wurde aber kaum gemacht.

Wunsch eines Internet-Nutzers mit Normalbildschirm.

Ein Bildschirm mit einer Diagonale von um die 25" hat eine 25 mal so große Fläche wie das 5"-Display eines Händis. Also müsste der Bildschirm 25 mal soviel Information zeigen wie das Klein-Display. Gebe ich am Bildschirm noch einen bequemen Betrachtungsabstand 2- bis 3-mal so weit wie beim Klein-Display hinzu, kann ich auf jeden Fall erwarten, auf dem Bildschirm mindestens 3- bis 6-mal soviel Information zu sehen wie auf dem Klein-Display – und zwar auf dem Bildschirm / Browserfenster, nicht auf der Internetseite mit Rollen quer und hoch.

  • Ich möchte keine ins Überdimensionale vergrößertes Händi-Display-Inhalte sehen.
  • Ich möchte Schrift in der bisher üblichen und bewährten Größe und nicht vielfach so groß sehen (Wenn jemand aus Sehschwäche große Schrift braucht, kann er das für sich mit der Zoom-Funktion der Browser einstellen).
  • Ich möchte auch nicht nur wenige riesige Klick-Kästen sehen mit "...weiter...".
  • Ich müchte nicht gleich beim Seitenstart ein Bildschirm füllendes, nichtssagendes Bild sehen, das mir schon als Hintergrundbild zu mies wäre. (Mit diesen Bildern feiern die in Urzeiten üblichen und schon seit langem verpönten Willkommen-Seiten hässliche Urständ'.)

Wenn ich einen Termin, einen Preis, eine Kurzinformation brauche, ist das Mini-Display eines Händis ausreichend. Aber zum Beispiel Vergleiche der Produkte eines Herstellers, oder ausführliche Informationen aus Technik, Wissenschaft, Gesellschaft, ... möchte ich so umfangreich wie möglich auf einen Blick erfassen können; dazu habe ich einen großen Bildschirm.

Ich möchte auch nicht die Misserfolge, teils urigen Effekte haben, wenn ich versuche, platzraubende Internetseiten mit Hilfe der Größenfunktion des Browsers auf vernünftige Schrift- und damit vielleicht Gesamtansicht zu verkleinern.

Jene Internetseiten haben kein „Responsive Design“, wenn man darunter die gleichberechtigte Behandlung der Ausgabegeräte und die entsprechende Anpassung verstehen soll. Internetseiten, die derzeit das Modewort "Responsive" wie einen Orden vor sich tragen, sind angepasst an nur eins: an die Geräte mit der derzeit größten Nutzeranzahl: die Händis mit Mini-Displays. Alles andere wird notdürftig irgendwie ein bisschen, aber nicht wirklich, passend gemacht.

Ich halte solche Internetseiten nicht für angepasst / responsive, die für Klein-Displays gemacht sind, und auf Monitoren den Inhalt lediglich auf Vollbildgröße zoomen. Auch das Attribut „mobile first“ ist für diese Seiten gelogen; richtig wäre „mobile only“.

Ganz schrecklich sind solche Internetseiten auf einem Smart-TV anzusehen.

Immer mal 'was „Neues“

In Sachen Gestaltung von Internetseiten wird alle paar Monate eine neue alte Sau durch's Dorf getrieben, und viele Leute rennen johlend hinterher. Das gab es schon immer.

Mal waren es die Frames, die plötzlich angeblich als das Nonplusultra jedes fähigen Machers von Internetseiten galten. Mit ihrem Heimatbrowser Netscape starben sie erst mal aus. Erst spät kamen sie doch noch als W3C-Norm wieder und fristen seitdem ein ungeliebtes umstrittenes Dasein.

Dann gab es da die Browserweichen, deren perfektes Beherrschen angeblich allen Machern von Internetseiten zu eigen sein sollte, und zu denen Tipps und Tricks ganze Bände von Zeitschriften und Internetbeiträgen füllten. Dabei bügelten die Weichen nur die Schwäche und/oder Ignoranz des marktführenden Browsers Microsoft-Internet-Explorer aus, der sich an viele W3C-Konventionen nicht hielt, und das dazu noch von Version zu Version variierte. Anstatt korrekt programmierte Internetseiten bei Benutzern des MSIE einfach Sch... aussehen zu lassen, und denen dadurch klar zu machen, woran es liegt, mühten sich viel zu viele Seitenmacher mit viel Kleinarbeit ab, alle Unzulänglichkeiten der Browser trickreich zu umgehen - bis heute.

Da gab es zum Beispiel mit viel Medien- und Internetaufmerksamkeit AJAX, den Javascript-Baukasten für Leute, die noch nicht gemerkt hatten, was man mit Javascript alles machen kann, seit es DOM gibt.

Apropos Javascript (nebst ActiveX, Flash und Ähnlichem). Wirklich notwendig nur für multimediale Seiten. Rein informative Seiten, oft nur mit Text und einigen festen Bildern, verwenden meist völlig unnötig Javascript. Viele Internetauftritte zeigen schon ihre Startseite nicht oder fehlerhaft an, wenn der Benutzer kein Javascript in seinem Browser aktiviert hat. Diese aktiven Techniken waren nicht nur, sondern sind bis heute Einfallstore für Unerwünschtes und Gefährliches. Zum Beispiel funktionieren die meisten Spionagewerkzeuge („Analytictools“) wie Googleanalytics usw., nicht oder nur mit gewollter Zusatzenergie der Seitenmacher, wenn Javascript deaktiviert ist. Leider funktionieren dann viele Internetseiten unnötigerweise gar nicht. Seltenheitswert haben Internetauftritte, die Javascript nur bei wenigen ihrer Seiten einsetzen, wo es unverzichtbar ist.

Jetzt also »Responsive Design«. Viele, die es sich offensichtlich leisten können, haben sich ganz neue Internetauftritte gemacht und mit diesem Etikett versehen. Vielleicht ist es mein Irrtum, dass ich von responsive Seiten erwarte, dass sie sich an alle Arten und Größen von Ausgabegeräten anpassen. Vielleicht soll es ja so sein, dass sich responsive Seiten nur an die derzeitige Mehrheit von Mini-Displays anpassen.

Angepasste Gestaltung („Responsive Design“) schon immer möglich, aber kaum verwirklicht.

Dass sich Internetseiten automatisch an die Ausgabegeräte des Benutzers/Users/Besuchers anpassen können, gibt es schon lange; mindestens seit der Trennung von Inhalt und Aussehen und der Etablierung von CSS vor 2 Jahrzehnten. Da benutzte man zwar noch Monitore auf Röhrenbasis; tragbare Internet-Kleinstgeräte gab es nicht. Aber auch die Monitore hatten sehr unterschiedliche Größen, damals meist aus finanziellen Gründen.

Deshalb war es auch damals – vor 2 Jahrzehnten – bereits sinnvoll, Internetseiten so zu gestalten, dass sie sich automatisch an die Größe des verwendeten Bildschirms anpassten. Insbesondere sollte der zur Verfügung stehende Platz ausgenutzt, dabei aber ein waagrechtes Rollen möglichst vermieden werden. Konsequenterweise sollte die Anpassung gar nicht an den Bildschirm, sondern an das Browserfenster erfolgen und dabei nutzerseitige Änderungen an der Schriftgröße automatisch einbeziehen.

Das war anfangs mit HTML und CSS gar nicht so einfach; besonders, wenn man Javascript meiden wollte. Als Hilfsmittel standen gerade mal float , blinde Tabellen und die Maßeinheiten em und % zur Verfügung. Erschwerend setzten die Browser – ganz besonders die MS-Internet-Explorer – die CSS-Vorgaben unterschiedlich bis falsch um.

Dennoch: Anpassung, also „Responsivity“ war schon immer möglich. Aber die meisten Internetseiten, gerade die von professionellen Seitenmachern, machten viele Jahre ihre Homepage-Fenster mit fester Größe (Breite) in Pixeln. Unangenehm spürbar war für die User besonders die feste Breite: War der Bildschirm / das Browserfenster schmäler, musste man dauernd waagrecht rollen; war Bildschirm / Browserfenster kleiner, entstanden neben der Internetseite leere Flächen; manche füllten diese Flächen dann mit irgendwelchen Farben oder Mustern per background-repeat. Bei Seiten mit wenig Inhalt ist letzteres nicht zu vermeiden. (Ein Zoomen von Schrift und Bildern auf Vollbildgröße ist eine unbrauchbare Alternative, wenn auch von etlichen derzeitigen Responsive-Machern als ihr Allheilmittel entdeckt.) Bei viel Inhalt aber zwingen feste Breiten nur zu unbequemen und teilweise vermeidbaren senkrechten Rollen.

Heute, mit Media-Queries, CSS-Flex, usw. ist Anpassung gegenüber früher traumhaft einfach. Was aber heute meist gemacht wird, ist nur die Angabe / Angeberei mit dem Modewort „Responsive“.

Derselbe bequeme Unfug wie bisher die festen Pixelbreiten ist es jetzt, die auf Klein-Displays fixierten Internetseiten auf größeren Bildschirmen einfach hoch zu zoomen.

Eine Alternative: Responsive Content

Möbel transportiert man normalerweise nicht mit einem Fahrradanhänger. Zum Brötchenholen fährt man normalerweise nicht mit einem 7-Tonner.

Zum Abrufen eines Termins genügt ein Händi. Für ausführliche Dokumentationen nimmt man große Bildschirme.

Inhalt ist wichtiger als Design; sollte es wenigstens sein.

Daraus folgt zwangsläufig: Nicht nur das Aussehen / Design / Layout von Internetseiten sollte im Hinblick auf die Ausgabegeräte gemacht werden, sondern auch, oder erst recht die Inhalte der Internetseiten. Das lässt sich nur mit getrennten Sites machen, wie es vielfach schon länger von echten Fachleuten empfohlen wird.

Ob unterschiedliche Domains, ob Weiterleitungsweichen, ob Templates kombiniert mit Inhaltsdatenbanken, oder ... – die Methode ist für den Nutzer egal. Hauptsache, man bietet dem Händinutzer die von ihm meistens gewünschten knappen Informationen ohne allzu viel Navigation und man bietet dem Monitornutzer ein Maximum an Information, ebenfalls mit höchstmöglicher Bequemlichkeit.

Für Amateure in Sachen Internet, für Privatpersonen, für Vereine, für kleine Organisationen ist das sicher vom Aufwand her nicht machbar. Sie müssen mit Kompromissen zurecht kommen; egal ob selbstgemacht oder über ein CMS vorgegeben. Von Profis, insbesondere IT-nahen Unternehmen erwarte ich allerdings erheblich mehr, als derzeit meist geboten wird.

Für widersinnig halte ich die derzeit vielerorts zu hörende/lesende Lehrmeinung, Internetseiten zurerst für Kleingeräte anzufertigen und dann irgendwie auf andere Geräte zu bringen. Gelten sollte, was sich nach den frühen euphorischen Experimenten in Sachen Internet inzwischen seit Jahren durchgesetzt hat: Erst der Inhalt; dann die Form. Dann wird sich zeigen, dass mancher Inhalt gar nicht für Kleingeräte geeignet ist.

Meine Internetseiten mache ich als Amateur und allein. Deshalb muss ich Kompromisse zwischen wünschenswerten Produkten und erträglichem Zeitaufwand schließen. So gern ich getrennte Internetauftritte für unterschiedliche Geräte(-gruppen) machen würde, und so sehr ich das als einzige Möglichkeit für wirkliche Responsivity ansehe, schließt der Aufwand dies für mich als »Einzelkämpfer« aus. Dass meine Anpassungen deshalb unvollkommen sind, ist mir bewusst. Deshalb habe ich mich hier auch nicht als Fachmann in Sachen Internetdesign geäußert – der ich nicht bin – , sondern einfach als Benutzer/User/Besucher von Internetseiten; und zwar vorwiegend derjenigen Seiten, die von IT-affinen Unternehmen angeboten werden und deshalb wohl von ganzen Teams von Fachleuten gemacht sein müssten.

  • Ich entwerfe meine Internetseiten zuerst nur nach Inhalt, ohne Rücksicht auf irgendwelche Geräte; ich strukturiere und gliedere den Inhalt nach Sinn, Wichtigkeit und (Benutzer-)Zielgruppen.
  • Erst dann packe ich den Inhalt in entsprechend einzelne HTML-Seiten;
  • dann forme ich das Aussehen mit Stylesheets (CSS). Erst in diesem letzten Schritt versuche ich, möglichst vielen Geräten gerecht zu werden. Mit vorwiegend CSS-Flex und einigen Mediaqueries gelingt dies einigermaßen, wenn auch nicht perfekt.

Bevorzugt stelle ich Inhalte auf großen Bildschirmen in mehreren Spalten, auf kleineren automatisch in weniger Spalten oder einspaltig dar. Die Breiten der Spalten werden in bestimmten Grenzen automatisch bestimmt. Wo es vertretbar ist, werden grafische Inhalte auf kleinen Geräten verkleinert, aber ohne die Inhalte auf großen Geräten ins Beliebige zu vergrößern (wie es bei vielen derzeit angeblich responsive Seiten der Fall ist).

Wo mein Seiteninhalt gar nicht für kleine Geräten geeignet ist, wird der Benutzer automatisch auf die erforderliche Mindestgröße hingewiesen; zum Beispiel bei meiner interaktiven Simulation des historischen Rechners Zuse Z22 (wobei die Simulation, nebenbei bemerkt, trotz der Interaktivität mit Tastenbedienungen, animierten Befehlsabläufen, ..., ohne Javascript funktioniert).


geschrieben: April 2016