Corporate Workshop: flash–free & Responsive

Veröffentlicht am 10 Juli 2011 um 21:30

Vergangenen Freitag hielten NeoDesign und K_05 WERBEAGENTUR einen interdisziplinären Workshop über das Thema Facebook Design, flash-free Corporate Movie und Webdesign 4 Tablet & Smartphone ab. Unser Ziel war es, die Flash Problematik auf mobilen Endgeräten sowohl von der Designer- als auch von der Programmierer-Seite zu beleuchten und hier eine Vorgehensweise zu entwickeln, mit welcher wir unseren Kunden eine innovative Lösung an die Hand geben können, die funktioniert. Denn genau das ist das Problem: Es gibt eine Fülle an verschiedenen Plattformen, welche die Inhalte unterschiedlich interpretieren oder beispielsweise garnicht anzeigen können, weil ein Flash Plugin fehlt.

Da Steve Jobs Flash keineswegs nativ auf iPhone, iPad oder iPodTouch haben möchte (Quelle1, Quelle2), kann das Ziel nur dahingehend sein, einen einheitlichen Standard zu finden, welcher auf möglichst vielen Endgeräten funktioniert. Die „Einer für Alles“ Lösung gibt es leider nicht. Das ist Fakt. Durch konkrete Einhaltung eines definierten Web-Standards (z.B. XHTML 1.1, XHTML 1.0 Strict oder HTML5) konnten wir bereits in der Vergangenheit auf PC-Systemen eine hohe Kompatibilität zwischen Firefox, Internet Explorer, Opera und Safari erreichen. Solange keine Flash-Elemente oder Flash-Schrift-Ersetzungen verwendet wurden, galt dies ebenfalls für Safari auf dem iMac. Der nächste Schritt ist nun, die mobilen Endgeräte ebenso einzubinden. Nachfolgende Abbildung zeigt die Marktanteile der Smartphone Betriebssysteme bis 04/2011:

Smartphone Betriebssysteme 04/2011

Der höchste Marktanteil wird also von Android belegt, besonders bekannt durch die Mobiltelefone der Marke HTC, Google Phone, Samsung, Sony Ericsson oder auch Motorola. Relativ gleich rangieren Symbian (Nokia) und das Apple iOS (iPhone, iPad). Die Prognose für das Jahr 2012 lautet wiefolgt:

Smartphone Betriebssysteme Prognose 2012

Damit wird ersichtlich, dass es nach wie vor besonders wichtig wird, kompatibel für das Android Betriebssystem zu programmieren, gefolgt vom Apple iOS. Da nicht jeder ein Android Handy zur Verfügung hat, kann die Entwicklung durch Emulatoren, wie z.B. den Android Emulator begleitet werden.

 

So viel zu den Basics. Die Betriebssysteme, auf die man seine Entwicklung ausrichten sollte, sind also Windows, Android, iOS und wenn möglich noch RIM und Symbian. Die Herausforderung, die wir uns für 2011 gestellt haben ist, eine HTML5 Alternative für Flash zu entwickeln, mit der Animationen plattformübergreifend überall gleich aussehen und funktionieren. Die Problematik der Musikuntermalung habe ich in einem anderen Artikel bereits angesprochen. Um zu überprüfen, ob ein Endgerät überhaupt HTML5 kompatibel ist, gibt es den HTML5-Test.

Testergebnisse (werden erweitert):

Plattform und Ergebnis (insgesamt 450 Punkte möglich):

stationär:

Windows 7 Ultimate 64bit, Firefox 5.0                           || 286 Punkte (+9 Bonus)
Windows 7, Safari r55990                                            || 143 Punkte
Linux, Chrome 5                                                          || 142 Punkte
Windows 7 Ultimate 64bit, Internet Explorer 9               || 141 Punkte (+5 Bonus)
Windows 7, Safari r55603                                            || 138 Punkte
Windows 7 Ultimate 64bit, Firefox 3.6.3                        || 102 Punkte.
Windows 7, Opera 10.5                                                || 101 Punkte
mobil:

Nokia E7, Opera Mobile 11                                           || 234 Punkte
iPhone OS 4.0                                                             || 134 Punkte
HTC Desire, Android 2.1                                               || 118 Punkte
HTC Desire, Android 2.0                                               || 118 Punkte
Nexus One, Android 2.1                                               || 118 Punkte
iPad, iOS 3.2                                                              || 115 Punkte
iPhone, iOS 3.1                                                           || 113 Punkte
iPod Touch, iOS 3.1.3                                                  || 113 Punkte
HP Palm, WebOS 1.4                                                   || 107 Punkte
Nokia N900, Firefox 1.0 Mobile                                     || 101 Punkte

 

Wie man dieser Liste entnehmen kann, ist die Vielfalt an Systemen, welche in Zukunft auf einer Webseite auftreffen werden, enorm. Nachdem der HTML5 Standard noch nicht offiziell veröffentlicht wurde und sich hier jederzeit die Spezifikationen verändern können, ist dies eine zwar erstrebenswerte, aber noch nicht bis ins letzte Detail ausgereifte Unterkonstruktion. Die Grundfunktionen können selbstverständlich schon verwendet werden, auf die Detailfunktionen wie video H.264 Support, Audio MP3 und OGG Support oder diverse Typendeklarationen in Form-Elementen würde ich noch nicht auf allen Systemen setzen. Daher müssen für das Thema Animation im Web ohne Flash nun die von der breiten Masse an mobilen Systemen unterstützten Funktionen destilliert werden, und die Animationen (mit Ton?) darauf ausgelegt werden. So kann eine sinnhaft angesetzte Alternative zur Plattform Flash geschaffen werden, von der die Kunden auf möglichst vielen mobilen Endgeräten profitieren.

Ob man nun versucht, eine „auf allen Endgeräten funktionierende“ Lösung zu schaffen, oder komplett „mit Weichen arbeitet, sodass jedes System sein eigenes, passendes Skript erhält“ ist eine Frage der Philosophie. Für jedes System eine Weiche zu schaffen und dort kompatibel zu programmieren bedeutet, dass für jedes System ein passender Player gefunden werden muss – eine „auf allen Endgeräten funktionierende“ Lösung muss Abstriche in der Funktionalität hinnehmen. Ich vermute, es muss ein sinnvoller Kompromiss dieser beiden Herangehensweisen sein: Die Animation sollte weitestgehend plattformübergreifend funktionieren – und die paar wenigen, auch noch wichtigen Systeme, die damit einfach nicht wollen, werden via Weiche mit einer Alternativversion unterstützt. Darunter sollte es noch einen Default-Case geben, unter dem ein plattformübergreifend funktional gerendertes Video abgelegt wird – dabei gehen dann zwar jegliche Steuerungsmöglichkeiten verloren wie z.B. interaktives Puzzlen, etc., aber die Information gelangt trotzdem zum Betrachter.

Wir bleiben dran…

 

weitere Informationen

Stichwörter: , , , , , , , , , , ,