„If you don’t have a mobile website, you don’t have a website.“
Februar 13, 2014
Aus dem Unterricht des CAS Mobile Business zum Thema „Mobile Web“ mit Frank Lang berichtet Mohamed Ben Hajla:
Schaut man heute die Zahlen aus den verschiedenen Marktstudien, wird deutlich dass die Mobile Web Nutzung rasant zulegt. Bereits 20% des Internet-Traffic ist mobile, 1/3 der Such-Anfragen stammt aus Mobile Devices und 75% der User nutzen Mobile Web.
Viel aussagekräftiger als die Statistiken und Umfrageergebnisse sind jedoch die detaillierten Messdaten, zum Beispiel aus den Google Analytics Tools. Diese Analytics Daten haben zu einem Umdenken bei Google geführt. Die “Mobile First” Strategie ist eine Folge dieses Umdenkens.
Für die Firmen wird es immer dringender nicht nur auf Mobile präsent zu sein, sondern auch für die neue “MultiScreen” Welt eine klare Strategie zu haben. Dabei gibt es so einige Herausforderungen: Der Inhalt muss für verschiedene Endgeräte kompatibel sein, gerade für die Smartphones mit den kleinen Displays, mit den TouchScreens und den tieferen Bandbreiten, muss der Webauftritt optimiert sein. Hinzu kommt, dass die Relevanz der Inhalte je nach Device und Kontext des Users eine immer grössere Rolle spielen wird.
Themen wie Suchmaschinen Marketing (SEO), Emails , Mobile Ads, POS, Social Media, NFC müssen in der Mobile Strategie berücksichtigt werden.
Technologien
Durch neue und die Weiterentwicklung bestehender Web-Technologien ist es heute möglich mit HTML5, JavaScript sowie CSS3 flexible und anpassbare Mobile und Multiscreen fähige Web-Sites umzusetzen.
Durch HTML5 Funktionen ist es möglich, Video, Audio, Offline Fähigkeit und Grafiken einzubauen. CSS3 hingegen, ermöglicht ein einfachere Umsetzung des Design auf die verschiedenen Screens.
Bei der Umsetzung des neuen Web Design gibt es zwei verschiedene Lösungsansätze:
Adaptive Design
Starre Layouts (Templates) für definierte Device Kategorien (in der Regel drei Layouts: SmartPhone, Tablet, Desktop) Beispiel : Google Website
Responsive Design
Flexible Layouts (Grid), welche sich der Browser-Auflösung und an jeder Displaygrösse anpasst. Beispiel: Naturaplan Website
Jeder Ansatz hat Vor- und Nachteile. Welche Ansatz der richtige ist, hängt von der Struktur, der Inhalt und die Funktionalität der WebSite ab.
Die Vorteile des Adpative Design sind die optimale Lade-Geschwindigkeit (Code kann pro Device minimiert werden), die Möglichkeit der Funktionen an dem Use Case des Device anzupassen und die Möglichkeit die bestehende Code Basis und ältere CMS weiter zu nutzen. Die Nachteile sind die aufwendigere Administration der verschiedenen Contents, die Link-Problematik (verschiedene URLs), die SEO-Konflikte.
Die Vorteile des Responsive Design sind die Device-unabhängige URL-Struktur, eine einzige Web-Infrastruktur/CMS und dadurch Keine eigens verursachten SEO-Konflikte, und die Konsistente UX. Die Nachteile sind die Zeitintensive Entwicklung (Konzept, Frontend-Entwicklung und Testing), die beschränkte Berücksichtigung von unterschiedlichen Use Cases je nach Device und die grossen Downloadmengen da die Optimierung auf dem Device statt findet.
Aspekte der Konzeption, Design & Technologie
Folgende Aspekte sollten bei der Entwicklung des Auftritts berücksichtigt werden:
1. Wichtig ist die Sicht von Aussen und nicht nur die von Innen. Die Sicht von Aussen kann über Analytics Tool eruiert werden.
2. Die heutige Welt ist eine Multi-Screen Welt und nicht nur Mobile, eine gesamthafte Zukunftsstrategie sollte berücksichtigt werden.
3. Das Testing in der neuen Multi-Screen/Device Welt ist sehr aufwendig: Jede Woche kommen neue Device und Formate dazu. Es muss genau definiert werden, was getestet werden soll.
4. Konzepter, Designer und Entwickler müssen über alle Phasen eng zusammen arbeiten – Teamwork ist gefragt.
Für ein erfolgreiches Vorgehen, gehören viele Bausteine über alle Phasen des Projektes hinweg:
