Content matters – because content is like water!
Oktober 23, 2017
Aus dem Unterricht des CAS Mobile Business mit Karin Christen berichtet Ronny Gazik:
In diesem Blog-Beitrag geht es um das Thema “Mobile Technology Web”. Wir machen uns daran herauszufinden welche Strategie die “richtige” ist: Mobile Last oder First, AWD oder RWD, Native oder Hybrid? But always keep in mind, Content Matters! Denn:
Das Vorgehen: Desktop oder Mobile First?
Als erstes müssen wir uns die Frage stellen, wo ist unsere Zielgruppe zu finden? Denn es kann auch heute immer noch so sein, dass man im Mobile Zeitalter den Desktop First Ansatz wählt. Im ersten Moment liegt natürlich der Ansatz am nächsten, ein Webdesign in einem gewohnten Format (z.B. Desktop, mit einer Gesamtbreite von ca. 1000px) zu konzipieren und dieses Design dann anschließend mit Hilfe von CSS Media Queries für kleinere Formate anzupassen. Der Ansatz „Mobile First“ geht da allerdings noch etwas weiter. Hier dreht man die gewohnte Arbeitsweise einfach um und arbeitet von kleinsten Layout hin zum grössten.
In aller Kürze erklärt:
- Die ganze Konzeption, Mockups und Features werden zuerst auf dem kleinsten möglichen Gerät (ab Gerätebreite von 320px) visualisiert.
- Als 2. Schritt wird dann die Desktop Version konzipiert bzw. visualisiert.
- Alles dazwischen wird im besten Fall im Browser definiert (Designing in the Browser).
Egal welchen Ansatz man jetzt wählt, nimmt man z.B. Mobile First, muss man unbedingt Desktop in Mind haben (nie, wirklich nie vergessen!) Die Konzeption ist völlig unterschiedlich, da die Platzverhältnisse ganz anders sind. Dreht man den Spiess um, gilt die gleiche Regel “Desktop First, Mobile in Mind”. Man muss sich aber immer überlegen, welche Features man auf welchem Device macht (auch in der Arbeit). Nachbesserungen können evtl. noch auf dem Handy gemacht werden, da man z.B. etwas vergessen hat bzw. einen Einfall hat und man noch schnell etwas am Projekt bearbeiten möchte. In diesem Fall Desktop 1. Device und Handy 2. Device.
Wichtiger Einschub
Was immer bedeutender erscheint ist, dass die Startseite nicht mehr unbedingt die wichtigste Site ist. Viele User (evtl. auch die meisten) kommen direkt auf spezifische Anzeigen (= landing Page) via Links von anderen Seiten / Apps (z.B. Twitter, Google-News, Nuzzle usw.). Deshalb immer überlegen, wer ist der “Benutzer”, was hat er für Ziele, was möchte er genau. Dann entscheiden, wie man vorgehen muss. Was möchte man Erzählen und entscheidet so seine Strategie.
Frage: Was ist das Web?
Der aktuelle Web-Standard
Dieser wird von W3C als “HTML5” bezeichnet. Es handelt ich dabei um die fünfte Version der Hypertext Markup Language, sozusagen HTML 5.0. Das Dokument beschreibt alle offiziell gültigen HTML-Elemente sowie diverse Details rund um Browser-APIs. Es handelt sich hierbei aber nicht um die Gesamtheit des Technologie-Universums. Die Web-Plattform besteht mehr aus vielen Einzelteilen, wie CSS, JS, SVG, WOFF, Semantic Web stack, XML, und eine vielzahl an APIs.
Kurzüberblick zu den wichtigsten Bestandteilen
- HTML (Hypertext Markup Language) ist die Sprache, um die Struktur einer Web Page zu beschreiben.
- CSS (Cascading Style Sheets) ist die Sprache, um die Präsentation einer Web Page zu beschreiben: Layout, Farben und Schriften
- JS (JavaScript) ist die Sprache, um das Verhalten gewisser Elemente der Web Page zu programmieren (und p.s. es hat nichts mit JAVA zu tun ;-))
Was braucht es für die Reise durch das Web, richtig den “Browser“
Aber welcher ist der Richtige und was können diese verschiedenen Browser?
Bedenke, dass deine Zielgruppen vielleicht einen alten Browser haben und deswegen viele Sachen nicht klappen werden. Leute die einen IE 7, 8, 9 usw. benutzen, können fast gar nichts sehen, was heute eigentlich “State of the Art” wäre. Zudem auch aktuelle Browser können nicht immer alles. Eine Slideshow klappt vielleicht auf einem, aber auf dem anderen nicht.
Die Möglichkeiten und Grenzen der einzelnen Browser kann man hier nachschauen: caniuse.com
Auf zur nächsten wichtigen Entscheidung: Adaptive vs. Responsive
Vorteile AWD:
- Optimale Lade-Geschwindigkeit durch minimierten Code auf Smartphones (Server entscheidet welche Version geliefert wird).
- Möglichkeit die Struktur, Haptik und Funktionen den Use Cases der Devices anzupassen und evtl. eine komplett andere Strategie als auf dem Desktop zu verfolgen.
- Design für tiefe Aufmerksamkeit und schnelle Wege möglich.
Nachteile AWD:
- 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ücksichtigten Pages und somit mögliche Google-Penaltys
Vorteile RWD:
- Eine Web-Infrastruktur (Code-Basis)
- Eine Device-unabhängige URL-Struktur
- Keine eigens verursachten SEO-Konflikte; Inhalte können aus- und eingeblendet werden
- Konsistente UX
Nachteile RWD:
- Zeitintensiv (Konzept, Frontend-Entwicklung und Testing)
- Beschränkte Berücksichtigung von unterschiedlichen Use Cases je nach Device
- Beschränkte Browser Kompatibilität
- Optimierung läuft nicht Server- sondern Client-Side; Code-Overhead und Bild-Downloads beachten, um zu grosse Downloadmengen zu verhindern
Wie erläutert, haben beide Varianten ihre Vor- bzw. Nachteile. Wichtig, Google bevorzugt RWD. Nichtsdestotrotz ist keine der beiden Möglichkeiten per se die bessere Wahl. Die Entscheidung hängt stark von der geplanten Struktur, den Inhalten und der gewünschten Funktionalität ab. Auch eine Kombination von beiden Ansätzen erscheint durchaus als eine gute Lösung.
Mobile Web, in welcher App
- Native Apps sind spezifisch für eine bestimmte mobile Plattform (iOS oder Android) entwickelt. Dabei müssen Entwicklungswerkzeuge und -sprachen verwendet werden, die nur jeweilige Plattform unterstützt (z. B. Xcode und Objective-C mit iOS, Eclipse und Java mit Android). Dafür sehen Native Apps am besten aus und bieten die beste Performance.
- Browser Apps (= HTML5-Anwendung) verwenden Standard-Webtechnologien – typischerweise HTML5, JavaScript und CSS. Bei diesem Ansatz wird einmalig aufgesetzt und dieser ermöglicht eine plattformübergreifende mobile Anwendungen, welche auf mehreren Geräten funktioniert. Obwohl Entwickler mit HTML5 und JavaScript anspruchsvolle Anwendungen erstellen können, bleiben aber zum Zeitpunkt des Schreibens einige wichtige Einschränkungen bestehen, insbesondere bei der Sitzungsverwaltung, sichere Offline-Speicherung und Zugriff auf native Gerätefunktionen (Kamera, Kalender, Geolocation usw.).
- Hybride Apps ermöglichen es, HTML5-Anwendungen in einen dünnen nativen Container einzubetten und die besten (und schlechtesten) Elemente von nativen und Browser-Anwendungen zu kombinieren.
Fazit ⇒ Je breiter die Zielgruppe und geringer die Anforderungen an die Perfomance, desto sinnvoller ist es eine hybride oder Web App zu entwickeln.