086 PAGE PROJEKTE Swiss.com-Relaunch

Transkript

1 086 PAGE PROJEKTE Swiss.com-Relaunch In der Erlebniswelt World of Swiss bewegt sich der User entweder scrollend von einer Navigationsebene zur anderen oder wechselt über die Punkte außen rechts direkt zu einzelnen Inhalten. Hinter dem Symbol oben rechts verbirgt sich ein ausführliches Navigationsmenü xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx PROJEKT Relaunch der Swiss-Website und Launch der Seite World of Swiss ( ) ZIEL Die Swiss-Markenwerte interaktiv erlebbar machen KUNDE Swiss International Air Lines AG, Basel ( ) AGENTUR Hinderling Volkart, Zürich ( ) VIDEOPRODUKTION Lauschsicht, Zürich ( ) ZEITRAUM Oktober 2012 bis April 2014 TECHNIK HTML5, Canvas und CSS, PHP mit Symfony2

2 PAGE Übr de Wölchlii Komplett responsiv kommt der Website-Relaunch für die schweizerische Traditionsairline Swiss daher. Neu an Bord: die integrierte Erlebniswelt World of Swiss. PAGE beschreibt, wie Hinderling Volkart in unzähligen Iterationen Detail um Detail optimierte und schließlich der Performance einen erstaunlichen Schub verlieh

3 088 PAGE PROJEKTE Swiss.com-Relaunch

4 PAGE Ein wenig in die Jahre gekommen war die alte Website der Fluglinie Swiss. Zwar hatte Hinderling Volkart als digitale Lead-Agentur bereits Hand an die Homepage gelegt, doch gerade in Bezug auf Inhalt, Form und Interaktion war die alte Website nicht mehr auf dem neuesten Stand. Also lud Swiss im Sep tember 2012 acht Agenturen aus der Schweiz und aus Deutschland zum Pitch, aus dem Hinderling Volkart als Gewinner hervorging.»mit dem Relaunch von wollten wir ganz klar ei ne Bench mark setzen«, sagt Creative Director und Part ner Michael Hinderling.»In der Verbindung von Technologie, Kreation und Innovation versuchen wir immer ganz neue Wege zu gehen.«das Ziel: eine responsive Website, über die sich Flüge verkaufen lassen und die die Besucher schnell und dabei übersichtlich informiert. Flüge checken über den Wolken Hinter dem Menüpunkt»Fliegen«der neuen Website verbirgt sich eine ganz eigene Welt. Die World of Swiss ist eine eigenständige interaktive Plattform, auf der User hinter die Kulissen der großen, traditionsreichen Schweizer Fluggesellschaft blicken können: Von einem beeindruckend realistisch animierten Wolkenritt aus gelangt man auf überraschenden Klickwegen in die unterschiedlichsten bildschirmfüllenden Videos, die Fragen beantworten wie: Wie bereitet sich die Crew auf den Flug vor? Was für Flugzeugtypen sind Teil der Flotte? Was macht den Service in der Business Class aus? Oder wo und wie Linke Seite: Projektleiter Sebastien Donzel, Kreativdirektor Michael Hinderling und Artdirektor Milo Peter (von links) bei der Konzep tionsarbeit in der Agentur. Darunter das Resultat, die responsive Website von Swiss. Oben: Scribble zum responsiven Konzept der Erlebniswelt entstehen eigentlich die Qualitätsprodukte für die typisch schweizerische Bordverpflegung?»Die Themen passten perfekt zu den Markenwerten von Swiss und boten zugleich genug Potenzial für eine interessante Umsetzung«, freut sich Michael Hinderling. So mühelos wirkt das Ergebnis, dass man gern vergisst, wie viel Arbeit insgesamt darin steckt: Über 70 potenzielle Videosujets recherchierten die Hinderling-Volkart-Konzepter gemeinsam mit ihrem Be wegtbildpartner Lauschsicht, der praktischerweise gleich im selben Haus sitzt. Für die Umsetzung der World of Swiss benötigte das Team dann rund zehn Monate parallel zu dem eigentlichen Website-Relaunch. Vier Navigationsebenen bietet die World of Swiss ihren Besuchern. Zunächst wäre da das Bergpanorama (von den UX Designern bei Hinderling Volkart Ground Layer genannt). Über klickbare Teaser gelangt man in den sogenannten Cloud Layer, wo der User alle erdenklichen Informationen in Filmen, Slideshows und verlinkten Karten sowie aufpoppenden Bildern und Texten erkunden kann. Die Videos enthalten beispielsweise eine ganze Reihe von Hotspots, die bei Roll-over die Bewegung einfrieren und punktuell spezifische Informationen frei ge ben. Die dritte Ebene über den Wolken, Fleet Layer genannt präsentiert sämtliche Flugzeugtypen der Flotte. Jeder ins Bild schwebende Flieger offenbart auf Klick seine Flugrouten inklusive der aktuellen Position auf der Echtzeitweltkarte der Webseite (Live Route Network).

5 090 PAGE PROJEKTE Swiss.com-Relaunch Am Anfang der World of Swiss stand die Vision einer dreidimensional animierten, interaktiv erlebbaren Welt. Die Designer visualisierten dies so gut es ging auf Papier und starteten dann sehr schnell mit einem Prototyp in HTML. Danach folgten etliche Iterationen von Design, Konzeption und Programmierung, bevor endlich der Eindruck einer performanten Erlebniswelt entstand. Agile Platzrunden durch die Browsersysteme Nun sind die Iterationen ja eigentlich nichts Neues für ein agiles Projektteam. Doch im Falle von Swiss drehten die Interaction Designer und Entwickler jeweils zahlreiche Extrarunden, bis die Performance stimm te.»während der Entwicklung hatten wir viele Abstürze wegen Speicherüberlastung und Performanceprobleme«, erinnert sich Severin Klaus, Head of Development und Partner bei Hinderling Volkart.»Wir brauchten sehr viel Zeit, bis wir die Animationen und Grafiken so weit hatten, dass sie unserer Vorstellung entsprachen.«die Developer entwickelten zuerst sehr viel in Googles Chrome-Browser: Bei der ersten Iteration ging es sozusagen erst einmal nur um let the baby walk somehow.»im Hinterkopf hatten wir natürlich die Brow ser- Einschränkungen. Wir wussten also, dass wir weder WebGL noch durchgehend 3D-Transforma tionen einsetzen konnten«, so Klaus (siehe Seite 92 f.). Später weiteten die Developer das interne Testing auf die anderen Desktopbrowser und den ios-browser Safari aus. In einem letzten Schritt folgte daran anschließend eine ausgiebige Durchlaufprobe, in der erstmals auch Testkandidaten von Swiss mitmachten. Diese teilweise externen Sitzungen zogen sich über fünf Releases. Ein bewegender Moment: die Swiss-IT-Abteilung kurz nach der Live-Schaltung»Die gesamte Swiss-Website ist responsiv. Nur für die World of Swiss gibt es noch keine mobile Version. Leider fehlte uns die Zeit dafür«, bedauert Michael Hinderling. Die Seite würde zwar auf modernen mobilen Geräten laufen, doch die Darstellung und Bedienung lässt sich bisher nicht responsiv skalieren. Die Typo wäre zu klein und die Bedienung zu kraxelig geworden. Deswegen entschied sich die Agentur gegen die mobile Live-Schaltung.»Da die Erlebniswelt den User dazu bewegen soll, die Inhalte explorativ zu erkunden und das auf mobilen Endgeräten ohnehin nur beschränkt sinnvoll ist, erschien uns die mobile Variante hier am ehesten verzichtbar.«dennoch existiert jetzt ein Bruch für alle, die mobil auf Swiss.com surfen und von dort auf die World of Swiss gelangen wollen.»deshalb wird die Optimierung der mobilen Version das Erste sein, was wir in Phase zwei umsetzen«, so Hinderling. Ein weiterer Punkt, der noch auf seine Realisierung wartet, ist die Mög lichkeit nutzergenerierten Contents. Das Konzept von Hinderling Volkart enthielt die Vision, dass sich User auf dem Live Route Network einchecken, damit Freunde, Kollegen oder die Familie nachverfolgen können, wo sie sich gerade befinden. Rund anderthalb Jahre liegen hinter dem Team. Keine Frage, es hat einen beeindruckenden agilen Kunstflug hinter sich, auf dem ihm ein konsistenter Rundumblick auf die Welt von Swiss International Air Lines gelang.»wir sind sehr zufrieden und stolz mit dem, was wir erreicht haben«, erklärt Michael Hinderling.»Alle Beteiligten einte das Streben nach Perfektion, und das hat die gegenseitige Motivation zusätzlich befeuert.«so zuverlässig wie in einem Schweizer Uhrwerk folgte bei Hinderling Volkart die große Relaunchparty, bei der das gesamte Team auf die erfolgreiche Arbeit anstieß. ae

6 PAGE Responsiv auf HTML5-Basis Für den neuen Airline-Auftritt hatte Swiss ursprünglich ein Budget für native Apps vorgesehen. Doch schreckte man vor der langfristigen Entwicklung und vor allem vor der Pflege verschiedener Lösungen zurück. Mit dem responsiven Ansatz auf HTML5-Basis bedient Hinderling Volkart auch Android und ios, und der Code muss übergreifend nur einmal gepflegt werden. Die Apps funktionieren mit der sogenannten Hybridtechnologie, die responsive Webinhalte mit wenigem nativem Content (zum Beispiel dem nativen Menü) kombiniert. Zudem deckt die responsive Lösung noch diverse weitere Zwischengrößen ab und ist damit optimal für die Zukunft ausgerichtet. Um die wichtigsten Größen und Hersteller einzubeziehen, definierten Hinderling Volkart und Swiss vorab eine Liste der priorisierten Geräte-/Betriebssystemkombinationen. Ganz zuoberst standen etwa die ios-geräte, danach diverse Androids (etwa Version auf Samsung S4), dann Windows Mobile 8 und eher am Schluss das BlackBerry Z10. Technische Umsetzung Zunächst begann die Agentur mit dem wohl wichtigsten Schritt, dem Aufbau des responsiven Layouts auf Basis eines eigenen Gridsystems. Dabei verankerten die Developer einen Teil des Designs direkt in HTML und nicht in CSS nur so ließ sich die Umsetzung in dieser Größenordnung und Qualität überhaupt ermöglichen. In CSS wäre die schiere Anzahl der Seiten nicht praktikabel gewesen. Eine solche Klasse sieht etwa so aus: "l-one-third l-mobile-two-thirds l-mobile-portrait-one-whole" Damit beispielsweise das Navigationsmenü und andere Features auf die definierten Breakpoints reagieren, entwickelten die Developer ein JavaScript-Modul, das die Breakpoints über CSS-Pseudoelemente ausliest und über ein einfaches Eventsystem verteilt, was dann so aussieht: MediaTrigger.isOrBelow('tablet').then(function(){... }); Die größte Herausforderung beim Responsive Design ist die Vielfalt an Browsern mit ihren unterschiedlichen»eigenheiten«. Zum Beispiel verhielt sich der Browser auf dem Smartphone Samsung S4 in Android in kritischen Punkten erstaunlich anders als in der gleichen Android-Version auf Samsung S3. Das Samsung S4 wiederum wollte den Bor der radius, der runde Ecken beschreibt, partout nicht erkennen und stellte sie mit schöner Hartnäckigkeit eckig dar. Microsoft wiederum hat die Touch-Events nicht oder anders implementiert (PointerEvents) als andere Geräte. Die Liste geht unendlich weiter: Die Anzahl der Browser ist um ein Vielfaches gewachsen, und für Developer wird es immer schwieriger, eine vernünftige Breite abzudecken. Testen im Device Lab Um die Lauffähigkeit kontinuierlich zu prüfen, hat Hinderling Volkart ein kleines Device Lab eingerichtet, in dem rund 15 der gebräuchlichsten Geräte für Testzwecke bereitstehen. Außerdem checkte ein von Swiss bereitgestelltes Testteam jede Seite sehr genau auf jedem Gerät und in allen Browsern. Die Testphase war sehr ergiebig und intensiv.»auch Simulatoren sind in der Entwicklungsphase äußerst praktisch«, sagt Chefentwickler Severin Klaus.»Hier hat Apple mit dem ios Simulator die Nase klar vorn. Verbesserungen im Bereich Debugging wünschen wir uns allerdings von allen Herstellern.«ae

7 092 PAGE PROJEKTE Swiss.com-Relaunch Erst als Hinderling Volkart die Weltkarte, die Kurven für die Echtzeitlokalisierung und die Marker für Flug - häfen und Flugzeuge auf unterschiedliche Ebenen gezeichnet hatte, war die Performance akzeptabel Markers Draw Connections: Draw & Scale Map: Scale Überschall auf jedem Device Die Performance- und Browserprobleme des Website-Specials World of Swiss lösten die Hinderling-Volkart-Entwickler mit dem virtuosen Zusammenspiel von CSS- Transforms und dem Canvas-Element Dass der Inhalt der Website auch auf dem ipad sowie im Internet Explorer ab Version 9 erlebbar sein soll te, war von Anfang an klar. Dies führte zwangsläufig zu Herausforderungen zum Beispiel in puncto Performan ce, denn ein ipad beispielsweise hat viel weniger Ressourcen zur Verfügung als ein aktueller PC. Oder auch bezüglich der Features, denn 3D-Transformationen funktionieren im In ternet Explo rer 9 gar nicht und selbst in Version 11 nicht einwandfrei. Darüber hinaus entfiel WebGL, obschon ios die 3D-Grafik-Programmierschnittstelle unterstützen würde (siehe iad), doch für Web seiten hat Apple sie deaktiviert. Der geringen Performance war nur mit einer intelligenten Auslagerung von Renderingprozessen auf den Grafikprozessor beizukommen. Zum Glück spielt Safari hier eine Vorreiterrolle und kann inzwischen nicht nur die 3D-Transformationen, sondern auch etwa Canvas-2D-Operationen beschleunigen. 3D oder 2D je nach Browser Obwohl wir uns in der World of Swiss die meiste Zeit in einer 3D-Welt bewegen, setzen wir die Elemente nicht in einen nativen 3D-Raum. Denn wir wollten ja auch Browser unterstützen, die das eben nicht können. Stattdessen berechnen wir die Skalie rung und die 2D-Position in einer eigenen einfa chen 3D-Engine und setzen dann je nach Browser die Transformationen in 2D oder 3D, also vereinfacht: function renderelement(el, x, y, z, scale){ var transform, zindex ="; if ( SUPPORTS_3D ) { transform = 'translate3d('+x+'px,'+y+'px,'+z+'px) scale3d('+sc } else { transform = 'translate('+x+'px,'+y+'px) scale('+scale+','+scal zindex = z; } } el.style.webkittransform = transform; el.style.transform = transform; el.style.zindex = zindex; Die z-position setzen wir hier nur, um sicherzustellen, dass die Elemente im Vordergrund nicht von Elementen dahinter überdeckt werden. Die von uns gesetzte z-position entspricht nicht zwingend der z- Position im 3D-Raum. Aus diesem Grund wollten wir ursprünglich auch keine Perspektive setzen, um Verzerrungen zu vermeiden. Üblicherweise zeichnet der Browser einen 3D-Layer einmal und lässt dann die Grafikkarte die Skalierung machen. Darum sieht der Text auch verpixelt aus, wenn man einen 3D-Layer stark vergrößert. Dafür gewinnt man einen enormen Geschwindigkeitsvorteil, denn das aufwendige Repaint fällt weg. Chrome allerdings zeichnet trotzdem neu, wenn auch nur sporadisch, vermutlich um die Qualität bei üblichen Websites zu erhöhen. Zum Glück konnten wir Chrome recht leicht zum schnelleren Verhalten zwingen, indem wir eine Perspektive mit einem sehr weit entfernten Fluchtpunkt setzten. Ohne gesetzte Perspektive zeichnet Chrome den Layer neu das Ergebnis ist eine hohe Auflösung auf Kosten der Geschwindigkeit. Mit gesetzter Perspektive übernimmt die GPU die Skalierung, und das war, was die Entwickler wollten, denn nur so erreichten sie einen ruckelfreien Flug. Flugrouten visualisieren Im Live Route Network stellen wir die aktuelle Flugposition der Swiss-Flüge dar. Dies schien anfangs eine vergleichsweise einfache Aufgabe zu sein: Die Karten skalierten wir, und für die Marker setzten wir die Position neu. Mithilfe des De-Casteljau-Algorith-

8 PAGE mus ( ) berechneten wir die Position und die Rotation der Flugzeuge auf der Kurve (die Skalierung ist abhängig von Flughöhe und Abstand vom Flughafen). Etwas unerwartet trafen uns jedoch die Peformanceprobleme mit den finalen Daten. Denn ursprünglich waren wir von weniger angeflogenen Flug häfen und Flügen ausgegangen erst später hat der Kunde entschieden, die Code-Sharing-Flüge, also nicht von der eigenen Fluggesellschaft betriebene Flüge, hinzuzunehmen. Urplötzlich schien das viele Grafikkarten zu überlasten (wir hatten die kleinen Marker alle auf 3D-Layern positioniert, um das Compositing auf die Grafikkarte auszulagern). Die Framerate ging deswegen vor allem auf dem ipad auf kaum akzeptable Werte zurück. Viele Marker, langsame Marker Die vielen Marker erwiesen sich als wahrer Flaschenhals. Vermutlich weil ein 3D-Layer, so klein er auch sein mag, eine bestimmte Mindesttexturgröße einnimmt (128 mal 128 oder 256 mal 256), und das schlägt dem Speicher auf den Magen. Sobald dieser überfüllt ist, haben nicht alle Texturen in der GPU Platz, und es kommt zum umständlichem Hin- und Hergeschiebe von Daten. Trotz Endspurtphase nahmen wir also nochmals Abstand und prüften verschiedene Szenarien in Prototypen: Wie kann man möglichst schnell möglichst viele Marker darstellen? Als äußerst performant entpuppte sich dabei das Zeichnen auf Canvas. Ganz so einfach lassen sich DOM-Elemente allerdings nicht durch Canvas-Zeichnungen ersetzen, weil man dabei Maus- und Touch-Listeners verliert. Diese muss ten wir nun also ebenfalls selbst übernehmen, das heißt wir mussten selbst bestimmen, welches Objekt sich unter dem Mauszeiger befindet (sonst erledigt dies der Browser), und zudem bei jeder Mausbewegung und jedem Klick oder Touch bestimmen, welcher Flughafen oder welches Flugzeug gemeint ist. Aber es hat sich gelohnt: Die Bestimmung, welches Objekt sich unter dem Mauszeiger befindet, bekamen wir besser hin als der Browser vorher, weil wir die Distanz maßen und nicht simpel das vorderste Objekt verwendeten. Wir erhielten auch eine deutlich bessere Framerate von jetzt circa 10 bis 15 Frames pro Sekunde auf dem ipad. Aber auch das war noch nicht wirklich zufriedenstellend. 15 Frames pro Sekunde nimmt man immer noch als langsam wahr. Und das trübte das Gesamtbild. Teure Bézierkurven Der zweite Flaschenhals versteckte sich in den Bézierkurven, die wir von Anfang an auf das Canvas zeichneten. Zwar konnten wir eine leichte Verbesserung erzielen, indem wir alles in einen stroke()- Befehl bündelten, aber Bézierkurven sind per se lang same Zeichenoperationen. Und Flüge weglassen war keine Option. Die Bézierkurven würden wir nicht mehr schneller hinbekommen, das war klar aber dann fanden wir eine Lösung, die das Problem sehr elegant umging: Statt die Bézierkurven jedes Mal neu zu zeichnen, skalierten wir nun einfach das gesamte Canvas solange, wie der daraus resultierende Qualitätsverlust nicht wahrnehmbar war. Dadurch mussten wir die Kurven nur noch alle 60 Frames neu zeichnen und konnten die Skalierung auf die Grafikkarte auslagern, die ohne die schweren Marker wieder genug Platz hatte: // only redraw curves for certain scaling var curvescale = Math.log(worldScale) / Math.LN2; curvescale = Math.floor(curveScale * 3) / 3; curvescale = Math.pow(2, curvescale); if ( curvescale!== this.currentcurvescale ) { this.currentcurvescale = curvescale; posdata = this.getbezierdata(curvescale); } this.cltx.clearrect(0, 0, width, height); // draw normal connections // (only one stroke for better performance) this.cltx.save(); this.cltx.beginpath(); this.cltx.linewidth= 0.4; this.cltx.strokestyle = 'rgba(0,0,0,.15)'; for( i=0; i<posdata.length; i++ ) { } pos = posdata[i]; this.cltx.moveto.apply(this.cltx, pos.start); this.cltx.beziercurveto.apply(this.cltx, pos.curve); this.cltx.stroke(); this.cltx.restore(); renderelement(this.cl, 0, 0, 0, worldscale / this.currentcurv Bisher hatten wir die Kurven zusammen mit den Markern der Flughäfen und Flugzeuge auf ein einziges Canvas gezeichnet. Die Marker mussten wir jedoch weiterhin für jedes Frame neu zeichnen, denn deren Skalierung wäre sofort als Qualitätsverlust wahrnehmbar gewesen. Also setzten wir die Kurven auf ein zusätzliches Canvas. Die daraus resultierende Performancesteigerung war massiv: Endlich konnten wir auch dieses coole Live-Feature auf dem ipad genießen. Selbst auf Desktoprechnern quer über alle Browser war die Verbesserung spürbar. Wo vorher vielleicht 30 FPS die Regel waren (was angenehm ist), waren es jetzt 60 FPS (also richtig flüssig). Solche Dinge spürt man, wenn auch in dieser Größenordnung meistens unbewusst. Nur wenn die Performance stimmt, überzeugt auch das Erlebnis! Severin Klaus (ae) Severin Klaus ist Partner bei Hinderling Volkart und leitet das Interaction Development. Er liebt es, gutes Design lebendig zu machen, und ist ein perfek tio nistischer Performance-Junkie.