Telefonversion und Website ver�ffentlichen

Ralf Turtschi Zuerst einmal vorweg: Seit mobile Geräte immer populärer werden, mit grösseren und schärferen Displays, wird vonseiten der Anbieter und der Web-Community behauptet, dass dieser Trend zwingend zur Folge haben muss, alle Websites heute auch auf mobilen Geräten responsive zugänglich zu machen. Ganz allgemein gesehen ist das auch richtig, es ist aber nicht verboten, solche Behauptungen pragmatisch zu hinterfragen.

Eine Desktop-Website auf einem Handy zu betrachten, zu navigieren und noch zu lesen, ist ohne hineinzuzoomen unmöglich. Beim Zoomen und ständigen Wischen verliert man im Nu den Überblick. Es kann aber nicht bloss darum gehen, eine Site durch einen geschickten Umbruch besser navigierbar und etwas übersichtlicher zu machen. Das ist eine sehr technische Sicht, die so nicht aufgehen kann. An erster Stelle steht die Analyse des Publikums. Längst nicht jede Website wird «mobile» aufgerufen. Wenn zum Beispiel Desktop-Anwendungen hinterlegt sind wie PDF-Seiten, Helpdesks, Lernmodule oder auch längere Texte, ist das Handy nicht ideal. Es gibt Inhalte, die werden lieber am Arbeitsplatz oder zuhause an einem Laptop- oder Desktopcomputer konsumiert. In solchen Anwendungen, ist Responsive Design wenig sinnvoll.

Dann gibt es Websites, die sind einfach nicht für Handys gebaut. Beispiel: Auf einem Handy wird wohl niemand ein Fotobuch produzieren und bestellen. Ein solcher Inhalt ist bei der Desktopanwendung sinnvoll, muss aber bei der Handyversion wegfallen. Nach diesen Ausführungen ist Responsive Design ohne Zielgruppen- und inhaltliche Analyse ein Rohrkrepierer. Selbst bei Inhalten, die auf Handys konsumiert werden könnten, sollte man zuerst einen Blick auf Analysetools werfen. Nicht repräsentativ, aber doch bemerkenswert: Im gleichen Zeitraum ist die Website www.zeichen-setzen.ch 2032-mal auf einem Desktop-Browser angeklickt worden, 239-mal von einem Tablet und 11-mal von einem Handy aus. Ausgedeutscht sind dies rund zehnmal weniger Tabletaufrufe und rund 200-mal weniger Handyaufrufe, obschon die Site mit Muse auf Handys ausgerichtet wurde. Die Frage, ob sich der technische und inhaltliche Aufwand für den mobilen Webseitenkonsum «lohnt», ist berechtigt.

«Responsive» bei Muse

Muse kennt drei lose verknüpfte Darstellungsoptionen: «Desktop», «Tablet» und «Telefon». Alle drei Versionen sind durch die Sitestruktur, deren Navigation und die Widgets verlinkt. Aber anstelle der Breaking Points, die beim Überschreiten den Seitenumbruch auf das kleinere Format auslösen, muss bei Muse jede einzelne Darstellungsform manuell angepasst werden. Da ist also viel Handarbeit im Spiel. Auf dem Handy wird die hochformatige Version bereitgestellt, die querformatige Version entsteht einfach durch das Skalieren auf die grössere Pixelzahl. Dies bedingt, dass man sich bei der Aufbereitung des Hochformates immer den kleineren Querformatausschnitt vor Augen halten muss.

Die Anpassungen an die besonderen Handyformate und Auflösungen geschehen in Muse automatisch durch Skalieren. In der Vorschau kann man die Designarbeit «live» sehen, zurzeit stehen als Vorschaugrössen iPhone 4 und 5, Samsung Galaxy und Nokia Lumia zur Verfügung.

Auf dem Desktop kann eine Navigation horizontal angelegt werden – beim hochformatigen Handy ist dies kaum mehr möglich. Das Navigieren über drei Hierarchiestufen hinweg ist nicht mehr praktikabel. Wenn gar noch eine Suchroutine eingebaut wird, ist der Platz äusserst knapp. Selbst bei Handys mit grösserer Bilddiagonale konkurrenzieren sich die attraktiven Bilder mit der notwendigen Navigation. In Muse kann man die Navigation unter einem Link verstecken, erst beim Fingertipp wird die Navigation aufgeklappt. Die Navigationsbuttons und Inhalte werden generell mit Fingertipp aufgeklappt und wieder geschlossen. Die eigentliche Inhaltsaufbereitung – man kann es nicht genug betonen – ist der Knackpunkt. Das minimale Platzangebot bedingt aus meiner Sicht zwingend eine inhaltliche Kurzfassung. Seitenweises Scrollen mit dem Daumen ist nicht benutzerfreundlich. Es ist vielleicht vergleichbar mit der seriösen Tageszeitung und dem Häppchenangebot von «20 Minuten». Es käme wohl keinem Zeitungsmacher in den Sinn, den umfangreicheren Inhalt der seriösen Tageszeitung in der Form von «20 Minuten» zu präsentieren. Genau solches passiert mit technischem Responsive Design, wenn der Inhalt nicht clever verkürzt wird.

Tabletversion

Auf Tablets sind normale Websites ohne grössere Probleme zu konsumieren. Es stellt sich bei Muse deshalb die Frage, ob man sich die Mühe machen soll, nebst Desktop- und Handyversion ein drittes Format manuell aufzubereiten. Es soll daran gedacht werden, dass spätere Mutationen im Inhalt immer dreifach ausgeführt werden müssen. Lediglich alles Verlinkte ist nur einmal zu ändern, es wird auf allen Versionen aktiviert. Mit anderen Worten: Wenn Bild und Text neu dazukommen, fügt man die Korrektur in der Desktopversion ein. Per Copy & Paste wird alles in die Tablet- und Handyversion eingepasst. Das ist sicher nicht sehr elegant gelöst. Muse ist eben ein Produkt für ein bestimmtes Marktsegment, es ist nicht der sparsame SUV-Cabrio-Ferrari mit 5 Tonnen Ladekapazität.

Vorschau und Veröffentlichung

Logisch aufgebaut ist die Menüleiste. Von der Planung gehts über den Entwurf zur Vorschau und schliesslich zur Veröffentlichung. Die Vorschau kann jederzeit aktiviert werden, die Arbeit wird eingerechnet und steht interaktiv zur Verfügung. Alle kleinen Zwischenschritte inklusive Zustände der Navigation, Roll-over, angeklickt, aktiv usw. können in der Vorschau getestet werden. Man braucht dazu keinen Browser.

Man kann also die ganze Site auf dem Desktop durchchecken und allfälligen Fehlern nachgehen. Das Hochladen auf einen Webserver funktioniert ebenfalls problemlos. Man braucht dazu einfach die URL der Website und die Serveradresse anzugeben. Der für die Browserdarstellung benötigte HTML-Code wird im Hintergrund geschrieben. Es ist tatsächlich so, dass Muse eine Website an der Oberfläche hält, die Technik läuft für Unbedarfte unsichtbar im Hintergrund ab. Selbstverständlich ist mit Muse nicht alles machbar, obschon auch HTML-Code eingefügt werden kann.