Der Chrome Dev Summit wurde vor ein paar Wochen beendet. Hier ist der erste von einer Reihe von Berichten zu dieser Veranstaltung. Der Schwerpunkt lag auf der mobilen und der geräteübergreifenden Entwicklung, also beginnen wir damit!
Beste UX-Muster für mobile Web-Apps von Paul Kinlan
Bei einer Analyse der Eignung der 1.000 Top-Websites für Mobilgeräte haben wir einige Problembereiche gefunden: 53% sind nach wie vor nur auf Desktop-Computern verfügbar, 82% der Websites haben Probleme mit der Interaktivität auf Mobilgeräten und 64% der Websites enthalten Text, den Nutzer nur schwer lesen können.
Schnelle Treffer für eine deutliche Optimierung Ihrer mobilen Website
- Immer einen Darstellungsbereich definieren
- Inhalte an den Darstellungsbereich anpassen
- Schriftgröße gut lesbar halten
- Verwendung von Web-Schriftarten einschränken
- Optimale Größe und Abstände zwischen Tippzielen
- Semantische Typen für Eingabeelemente verwenden
PageSpeed Insights hat vor Kurzem eine UX-Analyse zur Ermittlung der Optimierung für Mobilgeräte Ihrer Website eingeführt. Damit können Sie häufige Probleme im Zusammenhang mit der Nutzererfahrung auf Mobilgeräten erkennen. Probier es gleich aus!
Google Präsentationen: Die besten UX-Muster für mobile Web-Apps
Bedienungshilfen für verschiedene Geräte von Alice Boxhall
Nutzer greifen über eine Vielzahl von Geräten mit ganz unterschiedlichen Anforderungen an die Barrierefreiheit auf Ihre Websites und Dienste zu. Durch die Verwendung der richtigen semantischen Elemente und der richtigen ARIA-Rollen tragen Sie dazu bei, dass Browser und Hilfstechnologien Ihre Seite besser verstehen.
Google Präsentationen: Barrierefreiheit auf verschiedenen Geräten
Wichtige Möglichkeiten, A11y-Probleme zu verstehen und zu beheben
- Nur mit Tastatur arbeiten
- Drücken Sie die Semantik Ihrer Benutzeroberfläche mit der richtigen Elementauswahl und ARIA aus
- Verwenden Sie zum Testen ChromeVox auf dem Computer und TalkBack auf Android.
- Testen Sie die Chrome-Erweiterung für Barrierefreiheit im Internet.
- Im Internet wird eine vielfältigere Zielgruppe genutzt, wodurch es immer wichtiger wird, Ihre Websites barrierefrei zu gestalten.
Mobile Apps mit Chrome WebView von Matt Guant erstellen
Wir alle kennen die Probleme, die Entwickler in der Vergangenheit hatten, um WebView zu entwickeln: eingeschränkte HTML5-Funktionen, keine Debugging-Tools, keine Build-Tools. Mit der Einführung eines Chromium-basierten WebView in Android 4.4 (KitKat) stehen Entwicklern nun eine riesige Auswahl an neuen Tools zur Verfügung, mit denen sie großartige native Apps mit WebView erstellen können.
WebView unterstützt das vollständige Remote-Debugging mit denselben Tools, die Sie auch für Chrome verwenden. Ihr vertrauenswürdiger Webentwicklungs-Workflow lässt sich auch mit Grunt über Gradle in Ihre nativen Stack-Tools einbinden. Es gibt auch einen raffinierten Trick, um den nativen Code von JavaScript mithilfe der Chrome-Entwicklertools zu testen.
Google Präsentationen: Mobile Apps mit Chrome WebView erstellen
Effektive Erkenntnisse zur WebView-Entwicklung
- Es sind nicht die neuen Funktionen, die wichtig sind, sondern die Tools, mit denen Sie Ihren Workflow jetzt beschleunigen können.
- Versuchen Sie nicht, die native Benutzeroberfläche zu emulieren. Entfernen Sie jedoch alle Hinweise darauf, dass es sich um Webinhalte handelt.
- Gegebenenfalls native Implementierungen von Funktionen verwenden Verwenden Sie also für große Dateien den DownloadManager statt XHR.
„Optimiere deinen Workflow für eine geräteübergreifende Welt“ von Matt Gaunt
Angenommen, wir entwickeln für Desktop-Computer, Mobilgeräte, Tablets, Wearables und andere Formfaktoren. Wie können Sie Ihren Workflow optimieren, damit Sie weniger stressig sind? Mit LiveRefresh, Grunt, Yeoman und dem neu veröffentlichten Mini Mobile Device Lab ist eine solide Multi-Device-Strategie für eine schnelle Iteration möglich. Und schließlich: Wenn Sie nicht über die physische Hardware verfügen, die Sie testen möchten, stellen einige Anbieter sie über die Cloud zur Verfügung.
Google Präsentationen: Workflows für eine geräteübergreifende Welt optimieren
Wichtig
- Die Anzahl der Geräte, die wir betreuen müssen, wird weiter zunehmen.
- Mit Grunt und Yeoman den richtigen Workflow optimieren
- Browser- und geräteübergreifende Tests mit dem Mini Mobile Device Lab vereinfachen
- Mit Chrome DevTools-Emulation, Stock-Emulatoren, cloudbasierten Emulatoren wie Saucelabs, Browserstack und appexperience sowie dem Emulator von Drittanbieter Genymotion können Sie mit Bedacht vorgehen.
- Mobile Tests bedeuten mehr als nur Tests an deiner WLAN-Verbindung – nutze einen Proxy, um langsamere Netzwerkgeschwindigkeiten zu simulieren
Netzwerkverbindung: optional von Jake Archibald
Aus diesem Gespräch haben wir vieles gelernt: Jake trägt bei der Präsentation keine Schuhe, Business Kinlan veröffentlicht bald ein neues Buch. Der Offline-Einsatz wird von Browser-Anbietern ernst genommen und Sie haben bald die Tools, mit denen Sie tolle Angebote erstellen können, die auch offline funktionieren.
ServiceWorker bietet uns die Flexibilität, die wir benötigen, um überzeugende Offline-Erlebnisse ganz einfach zu erstellen, ohne die Probleme durch AppCache zu verursachen. Sie können sogar mit der API mit Polyfill experimentieren.
Präsentationen: Netzwerkverbindung: optional
Die Hilfe von ServiceWorker
- Bei der nächsten Generation der Progressive-Optimierungen wird das Werbenetzwerk von Google als potenzielle Optimierungsmöglichkeit betrachtet.
- ServiceWorker gibt Ihnen vollständige, skriptfähige, debugfähige Kontrolle über Netzwerkanfragen
- Wenn Sie offline sind, sollten Sie nicht warten, bis das Netzwerk ausgefallen ist, bevor Sie es anzeigen. Das kann einige Zeit dauern.