Aus dem Unterricht des CAS Mobile Business mit Frank Lang berichtet Andreina Naef:

If you don’t have a mobile website, you don’t have a website

Am Anfang des Internets mussten sich die Technologie-Experten noch mit der Frage beschäftigen, für welchen Browser die Website optimiert werden musste.
Dann kamen plötzlich mobile Handys dazu und neue Fragen kamen auf: Welche Screens müssen ermöglicht werden? Welche Auflösung? Welches Device: Nokia, iPhone oder Samsung? Zum Smartphone kamen dann plötzlich Tablets in allen möglichen Grössen und eine Begrenzung auf einzelne Devices war und ist fast nicht mehr möglich.

Die Webtechnologie muss sich an möglichst alle Devices anpassen bzw. an sie adaptiert werden können. Sie muss also nach Bedarf reaktionsfähig, sprich responsive sein.

Typologie der Technologien

Folgende Technologien werden genutzt, um den neuen Anforderungen bezüglich Anpassungsfähigkeit und Reaktionsfähigkeit zu entsprechen:

HTML5

  • Funktioniert auf den meisten Smartphones, im Speziellen iOS und Android
  • Ersetzt die Flashfunktionalität mittels neuer Funktionen wie Video, Audio, lokalem Speicher und dynamischen Grafiken
  • Offlineverfügbarkeit

Javascript

  • Inhalte können animiert, generiert und nachgeladen werden
  • Einblendungen und Suchbegrifffunktionen wie Formulareingaben werden ermöglicht

CSS3 (Cascade Style Sheets)

  • Anwendbar auf iOS und Android
  • Ermöglicht responsives Verhalten
  • Definiert Farben, Layout, Schrifteigenschaften etc.

Im Normalfall werden alle drei Technologien kombiniert eingesetzt.

Adaptive vs. Responsive

Adaptive-vs-Responsive

Vorgehen

Wichtig ist, sich als erstes eine Strategie zu definieren. Was soll bedient werden und hat Priorität?

  • Mobile first
  • Tablet first
  • Mobile only
  • Mobile too
  • Inside out / Outside in

Nach der Strategie wird das übliche Projektvorgehen angestrebt, vom Konzept zur Umsetzung, Testing, Rollout, Maintenance.
Dabei darf die Maintenance nicht unterschätzt werden. Ein mobiler Webauftritt ist kein One-Time-Projekt, sondern muss laufend unterhalten und den neuen Technologien angepasst werden.

Vorgehen

Nachschlagewerk

  • CSS        Cascading Style Sheets
  • CMS       Content Management System
  • IA           Informationsarchitektur
  • Retina   Bilder mit hoher Pixeldichte
  • RWD     Responsive Web Design
  • UX         User Experience