going mobile: Überblick über mobile web
TRANSCRIPT
![Page 1: Going Mobile: Überblick über Mobile Web](https://reader037.vdocuments.site/reader037/viewer/2022100309/5568af84d8b42a4c378b4fb2/html5/thumbnails/1.jpg)
ÜGoing Mobile - ein Überblick
![Page 2: Going Mobile: Überblick über Mobile Web](https://reader037.vdocuments.site/reader037/viewer/2022100309/5568af84d8b42a4c378b4fb2/html5/thumbnails/2.jpg)
Reichweite Mobiles Web
![Page 3: Going Mobile: Überblick über Mobile Web](https://reader037.vdocuments.site/reader037/viewer/2022100309/5568af84d8b42a4c378b4fb2/html5/thumbnails/3.jpg)
Going Mobile – 3 Möglichkeiten
1. Native Apps
2. Hybride Apps
3. Responsive Websites
![Page 4: Going Mobile: Überblick über Mobile Web](https://reader037.vdocuments.site/reader037/viewer/2022100309/5568af84d8b42a4c378b4fb2/html5/thumbnails/4.jpg)
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
![Page 5: Going Mobile: Überblick über Mobile Web](https://reader037.vdocuments.site/reader037/viewer/2022100309/5568af84d8b42a4c378b4fb2/html5/thumbnails/5.jpg)
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
![Page 6: Going Mobile: Überblick über Mobile Web](https://reader037.vdocuments.site/reader037/viewer/2022100309/5568af84d8b42a4c378b4fb2/html5/thumbnails/6.jpg)
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)
![Page 7: Going Mobile: Überblick über Mobile Web](https://reader037.vdocuments.site/reader037/viewer/2022100309/5568af84d8b42a4c378b4fb2/html5/thumbnails/7.jpg)
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.
![Page 8: Going Mobile: Überblick über Mobile Web](https://reader037.vdocuments.site/reader037/viewer/2022100309/5568af84d8b42a4c378b4fb2/html5/thumbnails/8.jpg)
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“‘)
![Page 9: Going Mobile: Überblick über Mobile Web](https://reader037.vdocuments.site/reader037/viewer/2022100309/5568af84d8b42a4c378b4fb2/html5/thumbnails/9.jpg)
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.
![Page 10: Going Mobile: Überblick über Mobile Web](https://reader037.vdocuments.site/reader037/viewer/2022100309/5568af84d8b42a4c378b4fb2/html5/thumbnails/10.jpg)
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.
![Page 11: Going Mobile: Überblick über Mobile Web](https://reader037.vdocuments.site/reader037/viewer/2022100309/5568af84d8b42a4c378b4fb2/html5/thumbnails/11.jpg)
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
![Page 12: Going Mobile: Überblick über Mobile Web](https://reader037.vdocuments.site/reader037/viewer/2022100309/5568af84d8b42a4c378b4fb2/html5/thumbnails/12.jpg)
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...
![Page 13: Going Mobile: Überblick über Mobile Web](https://reader037.vdocuments.site/reader037/viewer/2022100309/5568af84d8b42a4c378b4fb2/html5/thumbnails/13.jpg)
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
![Page 14: Going Mobile: Überblick über Mobile Web](https://reader037.vdocuments.site/reader037/viewer/2022100309/5568af84d8b42a4c378b4fb2/html5/thumbnails/14.jpg)
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
![Page 15: Going Mobile: Überblick über Mobile Web](https://reader037.vdocuments.site/reader037/viewer/2022100309/5568af84d8b42a4c378b4fb2/html5/thumbnails/15.jpg)
Responsive Website – Umdenken im Designprozess
"Using photoshop for responsive design is like bringing a knife to a gunfight"
Andy Clarkestuffandnonsense.co.uk
![Page 16: Going Mobile: Überblick über Mobile Web](https://reader037.vdocuments.site/reader037/viewer/2022100309/5568af84d8b42a4c378b4fb2/html5/thumbnails/16.jpg)
Responsive Webdesign im Bund - Beispiele
Lebendige Traditionen: http://www.lebendigetraditionen.ch
Aktuelles Klickmodell ch.ch
Ab dem 4.12. online: http://www.literaturpreise.ch