Going Mobile: Überblick über Mobile Web

ÜGoing Mobile - ein Überblick

Reichweite Mobiles Web

Going Mobile – 3 Möglichkeiten

1. Native Apps

2. Hybride Apps

3. Responsive Websites

Gründe für native Apps

Offline-Nutzungsszenarien

Zugriff auf spezifische Gerätefunktionen und Daten (z.B. Kamera, Adressbuch)

Hohe Performance (wichtig z.B. für Spiele)

Distribution über App Stores

Direkte Monetarisierung möglich

Native Apps - Nachteile

Hauptproblem: Diverse Plattformen erfordern unterschiedliche Entwicklungsstränge

Programmierung in unterschiedlichen Sprachen notwendig: Java, C#, Objective C etc.

Hohe Kosten für die Erstellung und vor allem für die Pflege

Hybride Apps

Technologie: HTML5, CSS3, Javascript

Distribution über Stores - wie bei nativen Apps

Eine Codebasis - verschiedene Plattformen

Entwicklung mit Hilfe von Frameworks (z.B. Titanium oder PhoneGap)

Hybride Apps - Vorteile

Relativ kostengünstige Entwicklung im Vergleich zu nativen Apps

Schnellere Anpassung möglich

Unterstützung vieler Plattformen

Zugriff auf die wichtigsten Gerätefunktionen wie Geolocation, Kamera etc.

Hybride Apps - Nachteile

Schlechtere Performance im Vergleich zu nativen Apps

Zugriff auf spezielle Gerätefunktionen nicht oder nur eingeschränkt möglich (z B Adressbuch)(z.B. Adressbuch)

Kein natives Userinterface („fühlt sich anders an als eine echte App“‘)

Responsive Webdesign - Was ist das?

Responsive Design ermöglicht die Ausgabe von Webseiten auf Endgeräte mit unterschiedlichen Auflösungen.

Media Queries“Die mit CSS3 eingeführten „Media Queries erlauben dabei die Anpassung des Designs an verschiedene Endgeräteparameter.

Responsive Design - Beispiel

Responsive Design reagiert auf die Abmessungen der Endgeräte und passtResponsive Design reagiert auf die Abmessungen der Endgeräte und passt sich an diese an.

Usability

Responsive Design muss Rücksicht nehmen auf die speziellen Anforderungen von Mobilgeräten:

KleineBildschirmgröße Eingabe nur perKleine Bildschirmgröße, Eingabe nur per

Fingerbedienung

Nielsen: Visual continuity, feature continuity,data continuity, content continuity

Usability - Beispiel

Anpassung von Layoutelementen:Anpassung von Layoutelementen:

Dabei muss immer darauf geachtet werden dass die Elemente auch gut bedienbar bleiben undDabei muss immer darauf geachtet werden, dass die Elemente auch gut bedienbar bleiben und eine Mindestgröße behalten...

Responsive Website - Vorteile

Wesentlich geringerer Pflegeaufwand

Es werden gleich mehrere Bildschirmauflösungen bedient – auch Tablets

Zugriff auf bestimmte Funktionen wie z.B. Geolokalisierung möglich

Technologiestack: HTML5, CSS3, Javascript

Mit fast jedem CMS umsetzbar

Responsive Website - Nachteile

Keine Distribution über App-Stores möglich

Fühlt sich an wie eine Website – nicht wie eine App

Viele gerätespezifischen Funktionen können nicht genutzt werden

Offline-Nutzung nur bedingt möglich

Responsive Website – Umdenken im Designprozess

"Using photoshop for responsive design is like bringing a knife to a gunfight"

Andy Clarkestuffandnonsense.co.uk

Responsive Webdesign im Bund - Beispiele

Lebendige Traditionen: http://www.lebendigetraditionen.ch

Aktuelles Klickmodell ch.ch

Ab dem 4.12. online: http://www.literaturpreise.ch

Danke für ihre Aufmerksamkeit – Fragen?

Sebastian Roller

roller@seitenbau.com

+49 (0) 7531 36598 26