Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Mobile Web - 5 Musts und 3 Stolperfallen

No description
by

Oliver Müller

on 8 September 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Mobile Web - 5 Musts und 3 Stolperfallen

5 Musts
Herzlich willkommen
Mobile Web - 5 Musts und 3 Stolperfallen

Marc Jenzer
3 Stolperfallen
Ausblick
Wearables
Internet of Things
Force Touch
Spracherkennung
Augmented Reality
5G
Marketing Kanal
Payment Gerät
Health Check
Analyse
Je eine Gruppe analysiert je eine Webseite





Analyse-Raster:
5 Musts
3 Stolperfallen
Was bedeutet Mobile Web?
Zwischenfazit
Aber wir brauchen Technik, um den Kontext abzubilden.

Wo liegen die Schwierigkeiten?

Wieso ein Referat zu Mobile Web?
Die in vielen Responsive-Projekten im 2015 gesammelten Erfahrungen
weitergeben.
3. Sept
2015

Digicomp
Zürich


Geschäftsführer semabit

Mobile First
Zuerst
Konzept
für mobile Endgeräte
Fokus
auf die wesentlichen Elemente
Reduziert
entwickelt: mehr HTML5, weniger JavaScript
Kontext: Schnell auf den Punkt gebracht
Mobile ist Kontext, kein Gerät
Nutzung
Trends und Zahlen
Was bedeutet das für Webseiten-Betreiber?
Ist die eigene Seite mobil-optimiert?
Formen von Mobile-
Optimierung
Google-friendly
Mobiler Kontext bestimmt Anforderungen
Mobile ist Gegenwart
M-Commerce
Net-Metrix für Schweiz:
Mittlerweile stammen im Gesamtuniversum NET-Metrix-Audit rund 58 % der Visits von Smartphones und Tablets.
Quelle: http://www.net-metrix.ch/newsletter-2015-04/Turbulenter-Jahresauftakt-mit-Traffic-Boost
Quelle: http://de.statista.com/infografik/1092/anteil-mobiler-geraete-am-internet-traffic/
Quelle: http://shopify.onebyte.ch/die-mobile-nutzung-ueberholt-desktop/
Diskussion
Wer shoppt wann über Mobile?
Geo-Shopper, Couch Commerce, Showrooming...?
Damit sind wir beim Thema von heute:
Was sollten Sie unbedingt beachten?
Usability
Layout
Inhalt

Less is more
Super Usability
Content
Newsletter
Mobile ist Kontext, nicht Technologie
Fragen?
Weiter zu den Stolperfallen
Responsive, Mobile Web, App?
Ein paar Gedanken zu Aufwand, Benutzerfreundlichkeit und Funktion
Browser
Rückwärtskompatibilität
Flash, MathML
Formulare, oft übersteuert!
Neuerungen nicht unterstützt
Unterschiede in Multimedia (z.B. autoplay)
Technologie
HTML5, CSS, IOS, Android-Programmierung.
Was funktioniert auf Mobile?
http://mashable.com/2015/01/02/mobile-trends-2015/
Das war's! Fragen?
Vielen Dank für die Aufmerksamkeit
semabit GmbH
Marc Jenzer
marc.jenzer@semabit.ch
+41 44 435 30 00
Vor- und Nachteile
Vorteile
Ressourcen-schonend
Kurze Ladezeiten
Positiver Impact auf die Desktop Variante
Übersichtlichkeit
Mobiler Kontext und Nutzung mitgedacht
Reduktion schmerzhaft
Mut und Überwindung
Management Support
Schwierig und längere Auseinandersetzung
Nicht immer das geeignete Vorgehen
Flow (User Experience, das "wie") und Kontext (Umgebung, das "wo" und "wann") müssen klar sein

Was heisst Mobile First?

https://www.post.ch
Beispiele
Nachteile
https://www.washingtonpost.com
https://www.zuerich.com
https://www.barackobama.com
http://www.microsoft.com/de-ch
Das macht Sinn
Fokus aufs Wesentliche
Single column layout (https://www.goodui.org/)
Kurze Wege
Wenig Infos abfragen
Hamburger Icon für Menu
Social Media, sharing Buttons
Videos
Kurze, knackige Texte
Das braucht es nicht
Erweiterte Suche
Umfangreiche Filter
Lange Formulare
Grosse, schwere Bilder
Bewusstsein für Kontext
Bedürfnisse des "Unterwegs-Sein"
Wenig Zeit
Wackelig
Hell, dunkel, nass
Finger- / Gestengesteuert
Kleiner Screen
Empfangsstärke
Aufgepasst
1. Kein Mouseover / Hover möglich
2. Achtung: scrollbare Flächen
3. Kein horizontales Scrollen
Konkret heisst das
Grosse Schriften
Grosse Buttons resp. genügend Innenabstände bei Links
Genügend grosser Zeilenzwischenraum (Durchschuss)
Bilder verlinken
Verankerter Hamburger
Autovervollständigung
Beispiele
http://www.helikopterrundflug.ch
Hohe Kontraste
geeignetes Farbklima
Gute Transitions (Übergänge)
Feedback für Benutzer
Endless scrolling
Inhalte nachladen
Back to top
Tipp:
Nutzen Sie die eingebauten Funktionalitäten des Geräts, z.B. GPS, Tel, etc. und passen Sie sie an Ihre Webseite an.
http://www.semabit.ch
http://www.20min.ch
(nicht responsive)
http://www.watson.ch/
Grosse Fonts = weniger Wörter
"Mehr anzeigen" einsetzen
Herausforderung
Lösungen
Verständliche Titel
Sinnvolle Bilder
Strukturierter Text
In 10 Wörtern alles sagen
Passende Medien
Beispiel:
20min.ch vs. nzz.ch
Spannungsfeld wenig Text vs. SEO:
Gute Keywords, H1 Tags

Tipps
Inhalte teilbar machen
Blaise-Pascal-Zitat:
Ich schreibe dir einen langen Brief, weil ich keine Zeit habe, einen kurzen zu schreiben.
Aber Google achtet mehr und mehr auf Kontext
Lesen Sie Ihre Mails auf dem Handy?
Sehr wichtiges Kommunikationsinstrument
Muss auch responsive sein
Technisch leider etwas anspruchsvoller
Regeln für Newsletter
Subject sehr wichtig
"wenn der Newsletter nicht richtig angezeigt wird..."
Bilder verlinken
Kurze Anrisstexte (max. 30 Wörter)
Call to action-Buttons
Erste Zeichen wichtig
(Preheader Text)
Mobile-Regeln gelten mehr und mehr für gesamte digitale Kommunikation
The good, the bad
and the ugly
Und schliesslich...
Zentrale Frage:
Brauche ich Zugriff auf OS / Hardware?
Falls ja, dann:
Native App
Vorteile
a. Direktere Verbindung zur Hardware
b. Massgeschneidertes Layout
c. Noch bessere Offline Möglichkeiten
d. Verbreitung über den App-Store, mit allen Pros
Nachteile
a. Eigene Software Versionen für jede Plattform (iOS, Android, Windows Phone etc.)
b. Eigene Software Versionen für jedes spezifische Gerät
c. Erfordert grösseres Software Engineering Know-how
d. höhere Kosten für breitere Reichweite
Responsive Web Design
1. bedeutet Aufwand (Frameworks helfen)
2. Viel einfacheres Deployment / Updates sofort live
3. unabhängiger von Plattform
4. unabhängiger von neuen Versionen (OS, Browser)

Häufig werden in Apps auch sog. WebViews verwendet, diese unterstützen zum Teil mehr als der eigentliche Browser (z.B. Safari vs. iOS WebViews), z.B. autofocus
http://www.caniuse.com
Browsersupport überprüfen auf
Nicht massgeschneidert in puncto look & feel, oder mit mehr Arbeit verbunden.
Performance: das Drücken eines Buttons ist nicht so reaktiv wie bei native apps
Die Qualität kann vermindert wirken
Letztlich bieten viele dann doch beides an:
Native Apps
Mobile optimierte Webapp
Verwenden Sie Responsive Webdesign für Ihre Website (Google Empfehlung)
Probleme
Fazit
Ausfälle Verbindung / Offline

Digitalisierung von mobilen Geschäftsprozessen
Ersatz von Papier

Generell zu bedenken
Ausfälle Strom / kein Akku
Nur etwas tun, weil man es tun "kann", heisst nicht, dass man es tun "sollte"
vs.
Social Media
Blog
Shop
Web
Newsletter
https://developers.google.com/webmasters/mobile-sites/get-started/key
www.swiss.com
www.manor.ch
Full transcript