Aus dem Unterricht des CAS Mobile Business berichtet Andy Baldauf.

Was ist dann bloß Mobile Web Technology? Auf diese Reise hat uns Karin Christen, Interaktion Designerin und leidenschaftliche mobil Aktivistin mitgenommen.

Ein gemeinsames Grundverständnis bildet die erste wichtige Basis, um das Web besser zu verstehen. War es vor Jahren der Desktop PC, welcher für den Zugang ins www erforderlich war, sind es heute eine Vielzahl von verschiedenen Devices. Mit der Einführung des iPhones oder später mit dem iPad wurde unser Nutzungsverhalten grundlegend verändert. Wir sind nicht mehr nur an einen physischen Ort für den Zugang ins Internet gebunden, sondern können zu jeder Zeit, den Zugang ins Netz nutzen. Aber auch das wird sich in den nächsten Jahren grundlegend verändern. Die technologischen Entwicklungen ermöglichen es, die Vielzahl an Geräten miteinander kommunizieren zu lassen, dabei stehen derzeit Selfdrivingcars, IoT, SmartHome und viele weitere Themen im Fokus.

In dieser Schnelllebigkeit entstehen neben den technologischen Neuheiten auch neue Ausdrucksweisen, so gehören unzählige Buzzwords in das Fachjargon jedes Digital Experts. Aber um den Bogen nicht zu überspannen, behandeln wir nur ein paar relevante Buzzwords in Bezug auf Mobile Web, wie z.B. HTML5 (Hyper Text Markup Language) & CSS3 (Cascading Stylesheet). Für die meisten stand hier Wohl, äähhhhhh……Verständnis = Bahnhof!

Darum war es wichtig, das Grundverständnis für die verschiedenen Web Technologien Schritt für Schritt kennenzulernen.

Was Erklärung
HTML Ist die Sprache um die Struktur einer Web Page zu beschreiben
CSS Ist die Sprache um die Präsentation der Website zu beschreiben (Layout, Farben, Schriften)
JavaScript (JS) Ist die Sprache um das Verhalten gewisser Elemente der Website zu programmieren
Der Browser Spezielles Computerprogramm zum darstellen von Webseiten

Die verschiedenen Programme und Sprachen benötigen nicht nur eine gemeinsame Grundsprache, sondern müssen je nach Anbieter auch noch spezielles Fachwissen mitbringen. Um eine möglichst breite Usability zu gewährleisten, müssen für die Browser diverse Optimierungen vorgenommen werden. Was die Komplexität für die Programmierer enorm steigert! Anhand eines Border Radius Beispiels an der SBB Website, hat uns Karin einen Einblick in diese Komplexität und Herausforderung gegeben.

Mobile First?

Durch den Einzug der mobile Devices hat sich die Anforderung an Websites noch mal drastisch erhöht. Was früher durch Mobile Last zu bezeichnen war, muss heute Mobile First heissen. Weil sonst die User Experience des Nutzers in keiner Form gewährleistet werden kann. Aber was heisst das konkret?

  1. Alle Vorlagen werden zuerst auf das kleinste Geräte visualisiert (Konzeption, Mockups, Features)
  2. Erst danach findet die Visualisierung für Desktop statt
  3. Alle anderen Versionen werden im besten Fall danach im Browser definiert

Designing for mobile first forces you to embrace these contraints to develop an elegant mobile-appropriate solution. But the benefits go well beyond mobile. Small screen sizes force you to prioritize what really matters to your customers and business. – Luke Wroblewski, Mobile First

Um dem Verständnis Mobile näher zu kommen, konnten wir in der Gruppenarbeit #1 einen Geschäftsprozess aus dem Alltag digital bzw. mobile bringen. Aus den Präsentationen wurden die Besten fünf ausgewählt, welche später noch vertieft erarbeitet wurden.

3038367-inline-i-1-9-gifs-that-explain-responsive-design-brilliantly-01responsive-vs-adaptive-copy

https://www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly

Responsive Web Design (RWD)

Nun kommt dieses Modewort doch noch zum Vorschein. Viele reden davon, aber was ist darunter zu verstehen? Wenn man responsive übersetzt, heisst es reagieren. Genau das soll durch RWD ermöglicht werden. So können mit einer einzig entwickelten Code-Basis, der Website Zugriff auf verschiedenen Devices angepasst bedient werden. Dies ist dann unabhängig von der Aktualität der Geräte und muss für Neuerscheinungen nicht immer neu Programmiert werden. Was auf den ersten Blick erleichternd scheint, wird mit Bildern, Videos oder Third Party Elementen sehr herausfordernd.

Vorteile Nachteile
  • Eine Code-Basis
  • Unabhängige Device URL-Struktur
  • Inhalte können aus-/ eingeblendet werden (Keine SEO-Konflikte)
  • Konsistente UX
  • Zeitintensiv
  • Beschränkte Browser Kompatibilität
  • Optimierung läuft nicht Server- sondern Client-Side
  • Beschränkte Berücksichtigung von unterschiedlichen Use Cases nach Device

Script Mobile Web Technology, CAS Mobile Business, Karin Christen, HWZ, 17.09.2016

Adaptive Web Design (AWD)

Hierbei wird das Websiten-Design Device abhängig ausgeliefert und angepasst. Dies erfolgt Server-Seitig und hierbei steht eine optimale UX im Vordergrund, kann aber aufgrund der Produktevielfalt sehr viel Aufwand bedeuten. Grundsätzlich basiert die Website-Auslieferung auf den am häufigsten auftretenden Displaygrössen. Kommt der User jedoch mit einem anderen Displayformat, kann es nicht optimal angezeigt werden.

Vorteile Nachteile
  • Optimale Ladengeschwindigkeit der Website (minimierter Code auf Smartphone – Server entscheidet über Versionsauslieferung)
  • Device spezifische Auslieferung
  • Design für tiefe Aufmerksamkeit und schnelle Wege möglich
  • Der Break-Point bzw. die Device-Kategorien müssen im Detail evaluiert werden
  • Linklogik und Routing für Cross-Device Bookmarks und Sharing
  • SEO-Konflikte, Umgang mit mobile nicht berücksichtigte Pages und somit mögliche Google Abstufung

Script Mobile Web Technology, CAS Mobile Business, Karin Christen, HWZ, 17.09.2016

Welches Design ist nun das Bessere?

Per Se kann keine der beiden Varianten als bessere Wahl betrachtet werden. Grundsätzlich hängt es von der strategischen Ausrichtung und dem Content ab. Dadurch wird in den meisten Fällen eine Kombination aus Responsive und Adaptive gewählt. Nebenbei bevorzugt Google RWD.

Adaptive Website vs. Responsive Website 

Wichtig: Think of the user, not the browser. – Aaron Gustafson

Und wie sieht das an einem best Practice aus?

Für die meisten muss es sichtbar sein. Deshalb hat uns Karin anhand eines Cases (The Boston Globe) gezeigt, wie eine erfolgreiche Responsive Umsetzung aussieht.

Wie sieht der Einsatz von Apps aus?

Es gibt drei Verschiedene Arten von Apps. Diese werden in Native, Hybrid und Web App aufgeteilt.

App Beschreibung
Native
  • Entwicklung mit Hilfe von Tools und Sprachen, die durch Plattformen unterstützt werden (XCode/Objective-C/Swift für iOS Apps, Eclipse/Android Studio/Java für Android, Visual Studio/C# für Windows)
  • Laufen nur auf Zielplattformen
Hybrid
  • Vermischung aus zwei Welten (Das Beste gehört zusammen)
  • Basis sind Web Technologien, laufen im Webview Container und werden als native App verpackt
  • Nutzung der native APIs und Funktionen des Betriebssystem
  • Werden über den App Store verteilt
Web
  • Plattformübergreifende Anwendungen welche im Browser laufen
  • Können auf allen Plattformen verwendet werden
  • Grenze zwischen Web Apps und Website sehr fliessend

Script Mobile Web Technology, CAS Mobile Business, Karin Christen, HWZ, 17.09.2016

Welche App muss ich nun setzen?

Je breiter die Zielgruppe und geringer die Anforderungen an die Performance, desto sinnvoller ist es eine hybride oder eine Web App zu entwickeln.

auswahl

Script Mobile Web Technology, CAS Mobile Business, Karin Christen, HWZ, 17.09.2016

Zum guten Schluss noch die Zusammenfassung der Gruppenarbeit #2 – Vorstellung der 5 Cases

  • Fussball Verein geht mobile (Vereins App)
  • Versicherungsprämienrechner (Native App)
  • Drive Recorder (Native+Web App)
  • Skischule (Responsive, Serivce über bestehende App)
  • ZKB (Infoscreens, Content/ Mobile First, create your own bank)

Man hat die Kreativität der Mobile Experts und den Fachwissentransfer des Tages in den 5 Präsentationen gespürt.

Trends

Ein derzeitiger Hype sind Bots. Deshalb wird 2016 auch als das Jahr der Chatbots benannt.

bot

Script Mobile Web Technology, CAS Mobile Business, Karin Christen, HWZ, 17.09.2016

Was ist ein Bot?

Ein Bot ist ein Computerprogramm, dass automatisch sich wiederholende/ regelmässige Aufgaben übernimmt. Bots werden zukünftig viele Tätigkeiten übernehmen können.

Mit dem Fach- und Erfahrungswissen von Karin konnten wir einen anspruchsvollen Tag zum Thema Mobile Web Technology meistern. Mit den vielen wertvollen Beispielen und Erklärungen können wir uns den Themen Website und App ohne Probleme stellen.