Web-Frameworks to go – was die neuen mobilen Helfer leisten

Geschrieben am von Daniel Koch

Das Mobile Web ist da!

Daran sollte denke ich keiner mehr einen Zweifel haben. Neben der Fülle von Web-Frameworks, die dem Frontend-Entwickler heute im Desktop-Bereich zur Verfügung stehen, beginnt es seit einiger Zeit auch im mobilen Bereich an zu Brodeln und Brennen.

Mobile Web-Frameworks unterstützen den Entwickler mobiler Web-Anwendungen – gemeint sind hier keine nativen, hybriden oder „Container-Applikationen“ sondern „Rich“ oder „Fat“ Websites, die für moderne Smartphones optimiert sind.

Das Prinzip

Die Basisbestandteile sind schnell aufgezählt: HTML-Markup, Cascading Style Sheets (CSS) und JavaScript reichen aus um, wenn gewünscht, eine fast vollwertige GUI-Oberfläche zu realisieren, die den Vergleich mit nativ implementierten Anwendungen nicht scheuen müssen.

Die Vorteile liegen auf der Hand: es ist keine Installation nötig, Updates müssen nicht installiert werden und für die Ausführung reicht ein mobiler Browser und eine Internetverbindung, natürlich. Im ganzen betrachtet eine überschaubare Anzahl an Technologien – beste Aussichten also um die eigene Webpräsenz zu „mobilisieren“ und den Inhalten eine gehörige Portion Zugänglichkeit zu verleihen.

Technisch nutzen die Frameworks meist die neuen Strukturierungs- und Auszeichnungs-Möglichkeiten von HTML5 und das teils verblüffende visuelle Potential von CSS3. Interessant und bezeichnend ist die exzsive Nutzung von clientseitig generiertem Zusatzmarkup. Steuerelemente (Navigationsleisten, Zusatzauszeichnug für Steuerelemente usw.) werden erst im mobilen Client zur fertigen Anwendung dynamisch generiert. Hierbei spielt der Ansatz von „Progressive Enhancement“ eine große Rolle. Gesucht wird nicht der kleinste gemeinsame Nenner für alle Browser, sondern das bestmögliche Ergebnis aus der jeweiligen Plattform heraus zu holen. Eine gute Entscheidung, den der teilweise im Desktop-Web-Umfeld anzutreffenden erste Fall hätte im mobilen Bereich durch die wesentlich größeren Unterschiede der Browserfähigkeiten fatale Ergebnisse zur Folge.

Das nachfolgende Schaubild illustriert die Funktionsweise mit der eine Anwendung aufgebaut wird.

Durch den Einsatz eines mobilen Web-Frameworks stehen neben den klassischen Events (click, doubleClick) auch die für „Touch“-Geräte üblichen mobilen Gesten wie beispielsweise tap, tap-and-hold, swipe oder orientation change zur Verfügung und können dediziert angesteuert und mit Funktionen belegt werden.

Zudem bringen die Frameworks meist ein Set von Standard-Elementen mit, die über Kontrollattribute im HTML-Markup (oder JavaScript) unterschiedlichste Funktionalitäten abbilden können. Dazu gehören neben Layout- und Strukturelementen (z.B. Bars) für den Aufbau mobiler Layouts auch Seiten- und Animationsübergänge (Transitions). Abgerundet wird dies durch ein oft sehr umfangreiches Sammelsurium für die „klassischen“ Anforderungen (Formulare, Buttons, Listen usw.).

Durch den Einsatz des oben erwähnten Progressiv Enhancement ist die Kompatibilität der Frameworks teils recht hoch, gemessen an dem fast schon undurchsichtigen und vielfältigem mobilen Browsermarkt. Bedenken sollte man jedoch, dass gerade durch den massiven Einsatz von teils komplexem JavaScript-Code der Fokus ganz klar auf die Leistungsfähigkeit moderne Smartphones wie iPhone & Co. ausgelegt ist.

Logos der von jQuery Mobile unterstützten Plattformen

Einschränkungen

Wer eine mobile Web-Anwendung realisieren möchte sollte sich nicht zu sehr auf ein Betriebssystem (OS) mit deren Steuerungsparadigmen versteifen. Vielmehr macht es Sinn ein eigenes, für das Unternehmen oder die Organisiation, passendes und optimiertes Design/Konzept zu entwicklen und dies auf allen OS gleichermassen umzusetzen. So individuell wie dies bei einer nativen App möglich ist funktioniert es mit einem mobilen Web-Framework ohnehin nicht plattformübergreifend. Die Nutzung von OS-eigenen GUI-Elementen (Buttons, Steuerleisten usw.) ist nicht möglich, auch die Nutzung von Hardware (Sensoren, Kamera, Adressbuch, …) ist ausgeschlossen.

Fazit:

Der Einsatz von mobilen Web-Frameworks ist sehr sinnvoll wenn man neben seiner Desktop-Website auch eine eigenständige mobile Variante anbieten möchte. Um das volle Potential ausschöpfen zu können sollte es jedoch auch tatsächlich eine separate Website sein. Wichtig ist an dieser Stelle die Möglichkeit spezielles Markup an den mobilen Browser liefern zu können, um die nötigen Steuerungs- und Strukturanweisungen setzen zu können.1 Ein charmanter Nebeneffekt dieser Konstellation ist zudem, dass es nun komfortabel möglich ist ein eigenes mobiles Konzept zu realisieren (Stichworte: mobiler Benutzer-Kontext, mobile Informationsarchitektur).
Spannend und technisch herausfordernd ist an dieser Stelle jedoch eher wie ein Redakteur Inhalte in Form und Struktur für die unterschiedlichen Plattformen in einem Content-Management-System erfasst und steuert.

Interessant wird sein, wie sich der Ansatz der dedizierten mobilen Website gegenüber dem immer mehr aufkommenden Trend des „Responsive Layout“ bzw. „Liquid Layout“ behauptet. Dort wird nämlich versucht eine einzige Website mit clientseiten Boardmitteln (CSS, JavaScript) für eine Vielzahl unterschiedlicher Endgeräten anzupassen. Womöglich etabliert sich hier ein kombinierter Ansatz, bei dem neben dem Markup für eine Desktop-Version, auch Steuerungselemente für die mobile Variante zusammen ausgeliefert wird. Lediglich die Frontend-Ressourcen (CSS, JavaScript) werden dann geräteabhängig ausgeliefert.

Egal welchen Weg man einschlägt, die Möglichkeiten im mobilen Umfeld sind vielfältig; die passenden Frameworks sie umzusetzen auch. Nutzen wir sie!

Weiterführende Informationen, Demos und Downloads:

Ergänzungen

1) Innerhalb eines Content-Management-System kann dies, je nach eingesetztem Produkt, über unterschiedliche Ausspielkanäle, separate Backend-Templates o.ä. umgesetzt werden. Die Identifizierung und Weiterleitung auf den passenden Kanal wird von einer vorgeschaltete Geräte-Erkennung (Device Detection) übernommen.