Embed Size (px)
Citation preview
Ü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
