Webdesign für Touch-Geräte

War vor zwei Jahren die dynamisch sich anpassende Website noch die Kür des Webdesign, so hat sich die Landschaft inzwischen gewandelt. Responsive Design ist eine Grundanforderung an große Websites geworden. Das liegt vor allem am Siegeszug der Tablets.

Während man Smartphones ohne Weiteres eine dezidierte Mobile-Variante mit abgespecktem Inhalt anbieten kann, so will der Tablet User selbst entscheiden dürfen, ob er zur mobilen oder originären Website geht und Letztere sollte sich an seinen Bildschirm anpassen. Mehr noch: Safari unter iOS 6 maskiert sich als Desktop-Browser. Man kann ihn aber über eine Device-Abfrage erkennen.

Christian Kuhn, App-Entwickler und Gründer der Agentur Nuisol, geht das aber nicht weit genug. "Responsive Design macht nicht beim Layout halt. Auch bei den Inhalten muss genau überlegt werden, was welcher Nutzer in welchem Kontext benötigt." Der Verzicht auf ein Flash-Element wenn das iPad anrückt, ist nur die banalste Form dieser Einsicht.

Apropos Single Page: War auf Websites das horizontale Scrollen lange Zeit verpönt, hat es innerhalb von Apps und auf mobil-optimierten Webseiten eine neue Rechtfertigung gefunden. Ein gutes Beispiel hierfür ist die gelungene Website vom ZDF .

Webdesign-Guru Vitaly Friedman lobt: "Das ist ein prima Beispiel für die Verhaltensänderung bei den Nutzern, die das Touchcomputing auslöst." Das ZDF arbeitet an vielen Stellen im klassischen App-Design. Die Seiten scrollen also auf horizontaler und vertikaler Achse. Horizontal dient zur Themenauswahl und dann geht es buchstäblich "hinunter", um ein Thema zu vertiefen. Würde man die Website aus der Vogelperspektive betrachten, sähe sie ein Stück weit aus wie ein Kreuzworträtsel.

Touch the web

Geht es nach den Machern von Windows 8 werden die Nutzer immer mehr Arbeitsprozesse durch Berührung des Bildschirms leisten. In Hybrid-Rechnern, die gleichzeitig Tablet und Notebook sind, werkeln heute bereits Prozessoren der neuesten Generation, sie verfügen über mehr als vier GByte Arbeitsspeicher und große Festplatten. Alles Leistungsmerkmale, die aktuellen Tablets fehlen.

Angesichts der Unsicherheit, ob User nun mit Notebooks oder Tablets auf Websites zugreifen, bleibt den Webdesignern derzeit wenig übrig, als die Seiten so zu optimieren, dass Sie für beides funktionieren. "Wir haben unser gesamtes Layout der Website vereinfacht", erläutert Martin Hellinger von der ING Diba, "Einfachheit ist für uns Usability."

Im Kern bedeutet das: große Abstände zwischen klickbaren Elementen, damit diese zur Fingerbedienung taugen. Außerdem gilt die vollständige Abkehr von Mouse Over, was es auf dem Touchscreen nicht gibt. Mausberührungseffekte haben nur noch einen ästhetischen, aber keinen Nutzungswert mehr.

Ratgeber - Nützliche Tools für Webdesigner

Wer für Touch designt, sollte sich verstärkt um den unteren Bildschirmrand kümmern, der für die Daumenbedienung reserviert ist. Diese Bereiche werden bislang vernachlässigt. Hingegen ist die obere Mitte zwar zur Darstellung von Informationen, aber nicht für die Interaktion geeignet. Wer mit dem Finger oben in der Mitte berühren will, verdeckt mit der Hand den Rest der Seite.

Der Trend zur Bildschirmberührung treibt aber auch ganz neue Blüten. Mit den kostenlosen Javascript-Klassen Zoomooz lassen sich Websites erstellen, die rein- und rauszoomen. Das ähnelt der Art, wie User mit Smartphones normale Websites benutzen. Sie zoomen heraus, um eine Übersicht zu sehen und für die Details hinein. Das ist vom Ansatz her ähnlich einer Präsentation mit dem populären Tool Prezi.

Im Grunde vermisst die Designerzunft ein Tool wie Flash, sie weiß es nur nicht. Natürlich müsste ein neues Flash auf offenen Standards aufsetzen und HTML5 exportieren, aber sollte ebenso einfach zu bedienen sein wie das alte, dann käme man wesentlich schneller zu neuen Interface-Experimenten.

Immerhin: In Kerndisziplinen wie Animation holt HTML5 langsam auf. Die Scriptbibliothek Turn.js erstellt blätterbare Magazinseiten im Pageflip-Stil. Noch läuft das auf dem iPad recht hakelig, aber die Idee blättern statt swipen hat Charme. Da die User aber mit beiden Varianten noch nicht immer rechnen, sollten sie hinreichend erklärt werden. Für Pageflip eignet sich die eingerollte Ecke, für Swipe schneidet man einfach ein Objekt seitlich an, um zu zeigen, dass es dort weitergeht.

Eine spannende Frage für die Geschwindigkeit der Entwicklung ist, ob Touchcomputing auf Tablets beschränkt bleibt oder auch auf Desktops übergeht. Ein permanenter Wechsel zwischen Touch, Maus und Keyboard scheint ergonomisch weit hergeholt. Eventuell kann hier die berührungsfreie Gestensteuerung eine Brücke schlagen. Die Technologie dafür liegt vor.

Ratgeber - Webentwicklung auf dem iPad

Microsofts Raumkamerasystem Kinect verfügt über stabile Windows-Treiber und wird von Unternehmen bereits bei der Präsentationstechnik eingesetzt. Ein kleines Kästchen namens Leap bringt Gestensteuerung auf jeden PC und das für nur 70 Euro. Im Büro scheint eine Verwendung Zukunftsmusik, bei Systemen, die zum Beispiel zum Schutz gegen Vandalismus ohnehin berührungsfrei ausgelegt sind -  etwa hinter Schaufenstern - ist ein Einsatz denkbar.

Auch Googles digitale Brille arbeitet mit Gestenerkennung. Ein Problem hierbei könnte sein, dass der Nutzer nicht genau erkennt, wann er einen Button klickt, oder nicht. "Berührungsfreie Steuerung kann problematisch sein, wenn das taktile Feedback fehlt", meint Wolfgang Henseler, Usability-Experte und Interface-Designer.

Designing for Second Screen

Derzeit macht eine Tendenz von sich reden, die auch das Webdesign und vor allem die Inhaltestrategie nachhaltig beeinflussen könnte. Die Rede ist vom Second Screen, also der Nutzung eines Zweitbildschirms während des Fernsehens. Bereits rund 50 Prozent aller Nutzer zwischen 14 und 49 nutzen Second Screens regelmäßig.

Vordergründig wird diese Entwicklung gerne mit dem Phänomen SocialTV gleich gesetzt. User schauen fern und kommentieren gleichzeitig auf Facebook oder in entsprechenden Apps. Zur ersten Ausgabe von Wetten Dass mit Markus Lanz wurden rund 30.000 Tweets versendet.

SocialTV ist aber nur eine der möglichen Nutzungsvarianten und Implikationen von Second Screen. User werden auch die Websites von Herstellern flankierend zum Werbespot besuchen, sie werden entsprechende Begriffe bei Google suchen oder direkt im OnlineShop kaufen. Da all diese Tätigkeiten mit dem Tablet oder Smartphone geschehen, sollte man darauf achten, dass die korrespondierenden Inhalte entsprechend optimiert sind.

Apropos korrespondierend: Die Berliner Magix GmbH besitzt eine Tochter namens Mufin, die ein System entwickelt hat, das die User-Interaktion komplett obsolet macht. Mufin erkennt die laufende Fernsehsendung am Ton und kann - wenn der Nutzer es erlaubt - automatisch ergänzende Inhalte aufrufen.

Und das ist nur der Anfang. Digitale Assistenzdienste wie Siri nutzen schon heute die Sprache als Interface und umgehen Auswahlmenüs oder Konfiguratoren. Aufgabe des Designers wird dann sein, seine Angebote so zu gestalten, dass sie von diesen Diensten optimal widergegeben werden. Ein Webfrontend braucht dieser Ansatz nicht mehr.

Air Display

Wer regelmäßig für das iPad produziert und seine Seiten testen will, sollte sich Avatrons Air-Display anschauen, Es handelt sich um die Dreierkombination von iPad-App, installiertem Desktop-Programm und Chrome-Extension. Sind PC (Windows und MacOS) und iPad per WLan verbunden, dient das iPad als Zusatzbildschirm und die Inhalte lassen sich einfach rüberschieben. Die App kostet 9 US-Dollar. Eine etwas einfachere Alternative findet sich auch in der Creative Cloud von Adobe, sie heißt Edge Inspect .