praegnanz.de büro für intervernetzte medien

Gerrit, 09.10.2010

Werden Touch-Tablets das Webdesign verändern?

Ich weiß, so langsam wird das hier zum monothematischen iPad-Blog. Sei’s drum, ist ja mein eigenes, da kann ich glücklicherweise sowieso machen, was ich will.

Dass das iPad zum Surfen ein echter Hit ist, stellt niemand ernsthaft in Frage. Erst neulich im gemeinsamen Ferienhaus-Urlaub mit Freunden habe ich das Gerät am ersten Abend kommentarlos mal locker auf den Wohnzimmertisch gelegt und kam dann die folgenden Tage nur noch sehr schwer dran, weil alle ständig ihre GMX-Mails checken oder die FAZ lesen wollten. Jaja, so Freunde habe ich ;-)

Doch ein paar Webdesign-Pattern, die bisher auf mausbasierten Systemen gut funktionierten, sind mit Touchbedienung einfach unkomfortabel. Und hier stellt sich die Frage, ob iPad und Co. (und die Liebe vieler Webdesigner zu diesen Geräten) eventuell dazu beitragen, dass sich gewisse Webdesign-Pattern verändern, und dass sich diese Veränderungen natürlich auch auf den regulären Desktop zurück-auswirken, denn nicht jeder Website-Betreiber hat Geld und Muße für eine getrennte, individuelle Touchversion seiner Website.

Um was für Techniken geht es nun? Da wäre zu allererst (natürlich) mal Flash für Videos. Hier ist man sich relativ einig, dass bereits viel passiert ist, und auch in Zukunft noch viel passieren wird. Aber da die HTML5-basierten Videoplayer inzwischen oftmals ganz gut mit den flashbasierten mithalten können (siehe Showcase-Vergleich), ist diese vom iPad angestoßene Entwicklung als fast ausschließlich positiv zu werten. Ich kenne jedenfalls niemanden, der es schade fände, wenn die ZDF-Mediathek ab morgen statt Flash den Sublime-Videoplayer verwenden würde.

Ein anderes Ding sind Lightbox-Galerien, die zwar von manchen schon wieder als out angesehen werden, aber immer noch sehr verbreitet sind. Auf dem iPad machen die Dinger nicht so richtig viel Spaß, weil meist der Platz nach unten nicht so richtig ausreicht und das Herumklicken träge ist. Reicht das schon aus, um sich im Zweifelsfall gegen eine Lightbox zu entscheiden, und sich eine andere Galerie-Technik auszudenken? Ich bin nicht sicher. Aber spätestens wenn die ersten Kunden sich ihre Website am Weihnachtstage mal privat auf dem neuen iPad angucken und vom Gefummel mit der Lightbox genervt sind, könnte das spannend werden.

Ebenso könnte es mit zunehmender Touch-Bedienung einen Trend hin zu größeren Schaltflächen und Links geben. Weil der Finger nur grob auf der Touchscheibe platziert werden kann, müssen alle Bedienelemente ein bisschen größer und deutlicher werden, um eine optimale Nutzung zu gewährleisten. Eingefleischte Printdesigner rennen wahrscheinlich spätestens jetzt weinend aus dem Zimmer, weil sie die ganze Fisher-Price-Ästhetik nicht länger ertragen können, aber aus Usability-Sicht ist das natürlich eine feine Sache, denn größere aktive Flächen kommen auch den Mausbenutzern und Sehbehinderten zugute.

Oder ganz speziell: Das Drag&Drop von Elementen. Vor einigen Jahren beeindruckte uns der Shop von Panic Software mit der Möglichkeit, Artikel direkt auf den Warenkorb zu draggen. Auf dem iPad geht das derzeit leider gar nicht. Würde Panic ihren Shop heutzutage noch genauso umsetzen? Oder muss sich der iPad-Safari hier anpassen?

Wahrscheinlich gibt es noch ein paar andere Aspekte, aber ich denke, die Richtung wird deutlich: Auch wenn moderne webkitbasierte Touchbrowser sehr gut mit existierenden Websites umgehen können – ein paar Details würde man für eine explizit optimierte Website doch anders machen. Die Frage ist, ob eine solche Rücksichtnahme gut oder schlecht für die allgemeine Qualität des Webdesigns ist.

Aus meiner Sicht ist die Antwort recht klar: Sie nützt eher, als dass sie schadet! Das iPad kann zu einem gewissen Teil dazu beitragen, dass das Netz nutzerfreundlicher und kompatibler wird. Die hohe Neigung zum Weglassen und Vereinfachen, welche man bei vielen nativen iPad-Apps beobachten kann, stünde auch vielen Websites gut zu Gesicht. (siehe dazu auch meinen Artikel über die ZEIT-App).

Man muss natürlich (wie immer im Leben) wissen, was man tut. Und darf nicht vergessen, dass es auch Dinge gibt, die die Usability auf Nicht-Touchgeräten erhöhen, aber auf dem iPad niemanden stören. Hover-Zustände zum Beispiel. Oder die Möglichkeit, Texte zu skalieren, ohne dass es das Layout zerschießt. Oder der Einsatz von Webfonts, für die es keine komische SVG-Variante für iOS gibt.

Das Web kann also, wenn es sinnvoll gestaltet ist, vielen Anwendungsfällen gerecht werden und erweist sich einmal mehr als Universalmedium für unterschiedlichste Geräte und Eingabemethoden. Prost!

18 Kommentare

  1. Jonas am 9. Oktober 2010 #

    Was ist denn mit Hover Menues und anderen durch das hover-Event erst sichtbar gemachten UI-Elementen?

  2. hangy am 10. Oktober 2010 #

    Irgendwie scheint mir diese iPad-Geschichte nach dem Lesen dieses Beitrags doch noch sehr unausgereift zu sein. Herausgelesen habe ich die fehlende Unterstützung von

    - Flash (nicht super, aber seit Jahren sehr weit verbreitet)

    - Drag & Drop (z. B. beim Mailanhang in Gmail?)

    - Textskalierung

    - Webfonts

    - SVG

    Wenn auf dem iPad tatsächlich Safari werkelt, dann könnte die Variante wohl aus einem schlechten Branch kommen, oder? Der normale Safari – sowohl auf Mac als auch unter Windows – unterstützt meines Wissens nach all diese Sachen gut bis sehr gut.

  3. tinkengil am 10. Oktober 2010 #

    Lange Websiten brauchen vor allem etwas »leeren« Raum, wo ich gefahrlos scrollen kann ohne ausversehen einen Link zu aktivieren. Wie oft ich schon bei Spiegel Online rechts auf die Werbefläche (z.B. Neuer Media Markt Prospekte oder ähnliches…) geklickt habe, obwohl ich eigentlich nur langsam nach unten scrollen wollte beim Lesen, ist schon nicht mehr feierlich. Oder einfach mal den Finger liegen gelassen, und dann wird nach kurzer Zeit die ganze Website blau markiert.

    Aber die Lösung muss hier wahrscheinlich nicht von den Webdesignern entwickelt werden, sondern liegt vielleicht eher auf Seiten der Hardwareentwickler. Etwa die Möglichkeit, im schwarzen Rand des iPads noch zusätzlich ne Scrollfläche zu integrieren.

  4. Martin am 10. Oktober 2010 #

    An Skripten wie Lightbox finde ich zwei Dinge besonders nervig:

    - Warten, bis das Bild vollständig geladen ist, statt zeilenweisem oder schärfer werdendem Aufbau

    - Animation

    Ich bin halt gerne schnell im Web unterwegs, da kann ich so etwas nicht haben. Der Verwender mag zwar denken, dass man sich für die Bilder Zeit nehmen soll, aber ich möchte mir da nicht so gern in mein Verhalten reinreden lassen.

    (Kann man hier eigentlich keine Listen erstellen?)

  5. Anselm Hannemann am 10. Oktober 2010 #

    Webfonts sind auf jeden Fall auf dem iPad mit ausgewählten Services (Webfonts by fonts.com z.B.) möglich.

    Den Rest der Probleme, Lightbox, ist auf den Grund zu gehen. Große Buttons etc würde ich am besten per CSS-Media-Query CSS Sheet regeln. Das geht am besten und user-freundlichsten.
    Schließlich ist es auf dem iPhone viel wichtiger große Buttons zu haben als auf dem iPad. Usw…

  6. Gerrit am 10. Oktober 2010 #

    @Jonas: Ein Touch mit dem iPad feuert zunächst ein hover, so dass die beliebten Hover-Menüs schon prinzipiell noch funktionieren, ab halt mit zusätzlichen Taps. Das wurde also halbwegs intelligent abgefangen.

    @hangy: Auf dem iPad kann man natürlich sehr komfortabel zoomen, ab man kann nicht den Schriftgrad unabhängig vom Restlayout einstellen, wie es bei Desktop-Browsern üblich ist. Webfonts gehen prinzipiell, aber nur mit dem völlig exotischen SVG-Fontformat. Das ist in der Tat schade, dass WOFF oder Rawfonts nicht unterstützt werden. Was Flash angeht: Solange Adobe keine vernünftige ARM-Version des Plugins anbieten kann, liegt die Bringschuld hier nicht bei Apple.

    @tinkengil: Das Scrolling-Problem kann ich hier bei mir nicht als störend empfinden. So wie ich das Gerät bediene, passt das ganz gut.

  7. domingos am 10. Oktober 2010 #

    Man kommt ja so richtig nicht mehr an verschiedenen Styles für Endgeräte vorbei. Ich denke nicht, dass man eine Website zugleich für ein Tablet und einen 22-Zöller optimieren kann. Stellen wir uns vor, die Leute werden irgendwann den 32-Zoll-Flachbild-Fernseher zum Surfen verwenden;-) Wobei man ja auch hier nicht mit großen Elementen sparen darf, schließlich sitzt man meistens vor dem PC, während man vom Fernseher meist weit entfernt sitzt. Ich hätte auf jeden Fall nichts gegen größere Icons und Links.

  8. hangy am 10. Oktober 2010 #

    @Gerrit: Die Bringschuld für Flash auf iPad/iPhone liegt natürlich bei Adobe. Allerdings ist die Herstellung der Portierung für Adobe natürlich nur dann sinnvoll, wenn es auch eine Chance gibt, dass die eingesetzt wird. Soweit ich das mitbekommen habe, schließt Apple den Einsatz von Flash im Moment einfach kategorisch aus. Hört sich ja fast nach einem Henne-Ei-Problem an. :)

    Ich bin nun wirklich kein Flash-Befürworter, aber angesichts der weiten Verbreitung der Technologie finde ich die Einstellung von Apple diesbezüglich doch etwas seltsam. Darüberhinaus sollte man auch festhalten, dass die Verfügbarkeit von Flash für vergleichbare ARM-basierte Plattformen (z. B. Snapdragon-CPUs) eigentlich gar nicht so schlecht auszusehen scheint.

    Dass nur SVG-Webfonts unterstützt werden, ist natürlich unschön – letztendlich dürfte damit aber weder Hopfen noch Malz verloren sein, da sich für Webfonts ja noch lange kein dauerhafter Standard etabliert zu haben scheint.

    @domingos: Ich habe mal touch.facebook.com auf meinem 1920×1080-Bildschirm ausprobiert. Man vermisst da schon einiges. Letztendlich muss man gerade bei »Webanwendungen« mit größerem Funktionsumfang wohl mehrere Design unterstützen, wenn man allen Benutzern die optimale Usability geben will … :)

  9. DAS_STROMKOPF am 11. Oktober 2010 #

    Generell mal schnell gesagt: Ich bin mir sicher, das Tablets und Touch Devices die Zukunft gehört und deshalb sich zwangsweise viel ändern wird an der Art wie wir Computer und ähnliche Geräte nutzen. Klar sind davon dann auch Websites betroffen und es wird nicht leicht in der Übergangszeit. Schon alleine Mouseover Geschichten wie ToolTips werde ich sehr vermissen, weil ich das für eine sehr geschickte Möglichkeit halte, bei Bedarf schnell und leicht zugängliche Zusatzinformation anbieten zu können. Glaube aber auf der anderen Seite, dass so etwas sicher auch anders geht, vielleicht sogar smarter und für mehr Menschen verständlich. Wir werden sehen, ich bin auf jeden Fall sehr gespannt was da kommt, denn ich liebe Touch Interfaces.

  10. Free the Pixel am 11. Oktober 2010 #

    @domingos: Auf einem grossen Fernsehgeraet wuerde man wohl am besten einfach den Zoom-Faktor (strg/cmd +) hochsetzen. Dann haben alle Elemente eine angemessene Groesse, und fuer den Webdesigner aendert sich nix ;-)

  11. Stefko am 11. Oktober 2010 #

    @Gerhard: Mit dem iPad habe ich es noch nicht ausprobiert, aber für das iPhone packe ich eigentlich immer »wptouch« in den Plugins Ordner. Das ersetzt das Standard-Theme mit einer iPhone Optik.

  12. Willi am 12. Oktober 2010 #

    Ich kenne die Lightbox-Galerien nicht weiter, aber was spricht denn dagegen, dass die um Touch-Unterstützung erweitert werden? Das ist doch gerade der Vorteil von diesen fertigen Webtechniken, die man nicht selbst entwickeln muss. Ein gutes Beispiel für eine Touch-angepasste Online-Galerie ist die kostenpflichtige Pics Engine http://www.picsengine.com/

  13. Bernd am 16. Oktober 2010 #

    Nachdem ich auch das iPad bei einem Bakannten mal ausprobieren konnte muss ich schon sagen, dass das Ding schon sehr faszinierend ist.
    Was mich eigentlich besonders überrascht hat, war, dass es Tablet-PC´s ja vorher schon mal gegeben hat und erst Apple es geschafft hat da einen Durchbruch damit hinzukriegen.
    Man sieht, dass Apple zeuerst versucht sich wirklich zu überlegen, wie man so ein Ding bedienen könnte – und dann mit einem wirklich brauchbaren Bedienungskonzept aufwartet. Natürlich gibts da noch einiges zu verbessern, (vom iPhone 1 bis zum 4er hat sich ja auch einiges getan) – aber auch ich glaube, dass Tabletts definitiv eine Zukunft haben. Sie werden »normale« PC’s nicht ersetzen – aber für Notebooks sind sie eine echte Konkurrenz und könnten bald wirklich ernstzunehmende Verkaufszahlen erreichen.
    Ich fürchte, wenn man Webdesign macht, wird man früher oder später sich auch so ein Ding zulegen müssen um die eigenen Seiten auch auf die Bedienbarkeit über Tabletts’s abtesten zu können.

  14. Gerhard Schröder c/o PadLive.de am 19. Oktober 2010 #

    Statt Trackback:

    http://padlive.de/2010/10/wordpress-darstellung-auf-dem-ipad/

    Viele Grüße aus Essen,

    Gerd

  15. David Hellmann am 26. Oktober 2010 #

    Also ich muss sagen auf dem iPad sind so ziemlich alle Webseiten (außer Flash natürlich) super nutzbar. Nur selten ist es der Fall das was nicht geht bzw. es unmöglich macht an die gewollte Information zu kommen.

    Was ich bei meinen Webseiten nun immer mitgebe ist ein Viewport. So wirken die Webseiten nicht so gequetscht an den Rändern. Wenn ich einen Viewport von 1100px oder 1200px mitgebe schaut die Webseite immer noch super aus und ich kann sie auch immer noch super lesen.

    Also meiner Meinung nach braucht man für normale Webseiten keine eigene iPad Version zu basteln. Große Seiten wie Facebook sollten aber vielleicht schon das Geld in die Hand nehmen um hier was zu machen.

    Bei iPhone sieht es wieder anders aus wobei ich von mir nur sagen kann, dass ich das iPhone nicht wirklich zum surfen nehme. Auch nicht als es noch kein iPad gab. Es ist einfach zu klein dafür.

  16. Schwendeman am 28. Oktober 2010 #

    Also ich habe bisher auch nciht feststellen können, dass man mit dem iPad viele Probleme hat. Anders als bei den restlichen mobilen Endgeräten, sprich Smartphones muss man hier das <a href=»http://www.w3-rauschen.de/«>Webdesign</a> in meinen Augen nciht wirklich anpassen. Sicherlich muss da noch das ein oder andere nachgereicht werden, ich halte das aber nciht für Design sondern eher für Technik-Probleme, die durchaus lösbar sind. Klar hat man durch die Bildschirmgröße gewisse Einschränkungen, doch die hat man auch durch die unterschiedlichen Auflösungen und Bildschirmgrößen.

  17. Wolfgang Abbas am 3. Februar 2011 #

    Ich muss dem Artikel zustimmen. Nicht das IPad stellt das Problem dar, sondern die optische design-verliebtheit zu Lasten der Benutzbarkeit. Kleine Schriften in blassem Grau auf weißem Grund…
    Auch eine Menge älterer User haben Probleme mit Webseiten, ohne ein Tablet zu nutzen. Ich denke für informations-lastige Webseiten sind einfache robuste Navigations-Designs sinnvoller. Was spricht gegen Buttons für Schriftgröße ±, wie sie viele Webseiten schon anbieten? Oder für das Ausblenden von Grafiken?
    Es ist doch deutlich zu unterscheiden zwischen einer Marketing- und einer Informationsseite.

Kommentar schreiben

Nutzt Textile zum Strukturieren eures Textes.
SEO-Beiträge werden gelöscht, auch bei thematisch passendem Spam.