Webseiten werden mobil Planung geht vor

Transkript

1 Webseiten werden mobil Planung geht vor Mobiles Web Aspekte der Planung 20. April 2012

2 Inhaltliche Schwerpunkte Einordnung mobiler Technologien Besonderheiten mobiler Touchscreen-Geräte Best Practices für mobile Konzepte Seite 2

3 Einordnung mobiler Technologien Mobile Websites Web-Apps Native Apps Hybride Apps Seite 3

4 Mobile Websites normale Websites werden im Browser angezeigt jede Seite wird einzeln vom Server geladen Layout auf Displaygröße angepasst Interaktion: Klicken, Scrollen Zugriff auf Gerätefunktionalität eingeschränkt keine Installation, Updates auf Server Seite 4

5 Web-Apps mobile Websites, die sich wie Apps verhalten werden im Browser angezeigt Seiten werden per AJAX vom Server geladen Layout ähnelt einer App (inkl. Animation) Interaktionen: Klicken, Scrollen, Swipe Zugriff auf Gerätefunktionalität eingeschränkt keine Installation, Updates auf Server Seite 5

6 Native Apps spezifisch programmierte Apps eine App pro Betriebssystem auf Gerät laufendes Programm Serververbindung bei Bedarf Layout und Animationen uneingeschränkt Interaktionen: alles, was System unterstützt Gerätefunktionalität voll nutzbar Installation notwendig, Updates auf jedem Gerät Seite 6

7 Hybride Apps aus Web-Apps kompilierte Apps programmiert in HTML, CSS, JavaScript läuft aber als eigenständiges Programm Layout und Animation eingeschränkt Interaktion und Animationen reichhaltiger als Web-App mehr Gerätefunktionalitäten nutzbar als Web-App Installation notwendig, Updates auf jedem Gerät Seite 7

8 Welche Technologie? mobile Version von Google Voice Seite 8

9 Inhaltliche Schwerpunkte Einordnung mobiler Technologien Besonderheiten mobiler Touchscreen-Geräte Best Practices für mobile Konzepte Seite 9

10 geringe Displaygröße Besonderheiten mobiler Touchscreen-Geräte instabile Internet-Anbindung eigene Eingabekonzepte zusätzliche Funktionalitäten System- und Gerätevielfalt Seite 10

11 Inhaltliche Schwerpunkte Einordnung mobiler Technologien Besonderheiten mobiler Touchscreen-Geräte Best Practices für mobile Konzepte Seite 11

12 Best Practices für mobile Konzepte Informationsstruktur überdenken Navigationskonzept entwickeln Eingabemöglichkeiten reduzieren Layout bewusst anpassen Ladezeit reduzieren Seite 12

13 Informationsstruktur und -menge Informationen müssen auf kleine Displays passen lieber mehr kleine Seiten als wenige große möglichst nur vertikal scrollen erlauben Inhalte linearisieren klare und kurze Seitentitel Seite 13

14

15 Navigationskonzept komplexe Navigationsbäume sind zu groß es gibt keine mouseover -Event! Multitouch kann mehr als click & scroll Mechanismen müssen konsistent sein Seite 15

16

17

18 Eingabemöglichkeiten bei Eingaben wird Tastatur eingeblendet Formulare bedienbar machen: Felder gut beschriften Tab-Index sinnvoll setzen Vorbelegung erwägen Seite 18

19

20

21 Layout-Tipps nicht alle Schriftarten sind überall verwendbar weniger ist mehr (Inhalt, Bilder) Kontrast groß genug wählen Größe ist relativ (versch. Geräte) flächige Buttons vs. Textlinks alles muss selbsterklärend sein (Metaphern, Icons) keine PopUps Seite 21

22

23

24 Ladezeit reduzieren kompakte Inhalte (Markup, Bilder, CSS, JavaScript) Caching nutzen lazy load und prefetch einsetzen AJAX nutzen Seite 24

25 Fazit das mobile Web bleibt spannend immer mehr Apps werden Web-Apps es wird noch viele neue Konzepte geben unterstützende Frameworks entwickeln sich der Phantasie sind keine Grenzen gesetzt :-) Seite 25

26 Hilfreiche Links Seite 26

27 Vielen Dank für eure Aufmerksamkeit! Seite 27