Das Chrome Dev Summit ist vor einigen Wochen zu Ende gegangen. Hier ist der erste in einer Reihe von Berichten von der Veranstaltung. Der Schwerpunkt lag auf der Entwicklung für Mobilgeräte und geräteübergreifend. Damit fangen wir an.
Die besten UX-Muster für mobile Web-Apps von Paul Kinlan
Bei einer Analyse der Optimierung für Mobilgeräte der 1.000 wichtigsten Websites haben wir einige Problembereiche gefunden: 53% bieten immer noch nur eine Desktopversion, 82% der Websites haben Probleme mit der Interaktivität auf Mobilgeräten und 64% der Websites haben Text, der für Nutzer schwer zu lesen ist.
Schnelle Tipps zur drastischen Verbesserung der mobilen Weboberfläche
- Immer einen Darstellungsbereich definieren
- Inhalte an den Darstellungsbereich anpassen
- Schriftgrößen auf einem lesbaren Niveau halten
- Verwendung von Webschriftarten einschränken
- Tippziele richtig dimensionieren und anordnen
- Semantische Typen für Eingabeelemente verwenden
Mit PageSpeed Insights wurde gerade eine Analyse der Nutzerfreundlichkeit eingeführt, mit der Sie ermitteln können, wie für Mobilgeräte optimiert Ihre Website ist. So können Sie häufige Probleme mit der Nutzerfreundlichkeit Ihrer Website auf Mobilgeräten finden. Jetzt ausprobieren!
Folien: Die besten UX-Muster für mobile Web-Apps
Bedienungshilfen für mehrere Geräte von Alice Boxhall
Nutzer greifen über eine Vielzahl von Geräten mit unterschiedlichen Anforderungen an die Barrierefreiheit auf Ihre Websites und Dienste zu. Wenn Sie die richtigen semantischen Elemente und ARIA-Rollen verwenden, können Browser und Hilfstechnologien Ihre Seite viel besser verstehen.
Google Präsentationen: Barrierefreiheit auf mehreren Geräten
Wichtige Möglichkeiten, um Probleme mit der Barrierefreiheit zu verstehen und zu beheben
- Für eine gute Nutzererfahrung bei der reinen Tastaturbedienung sorgen
- Semantik der Benutzeroberfläche mit der richtigen Elementauswahl und ARIA ausdrücken
- Verwenden Sie ChromeVox auf dem Computer und TalkBack auf Android-Geräten, um Tests durchzuführen.
- Chrome-Erweiterung „Accessibility Developer Tools“ ausprobieren
- Immer mehr Menschen mit unterschiedlichen Hintergründen nutzen das Internet. Das macht es noch wichtiger, dass Ihre Websites barrierefrei sind.
Mobile Apps mit Chrome WebView erstellen von Matt Guant
Wir alle kennen die Probleme, die Entwickler in der Vergangenheit beim Erstellen von Apps für WebView hatten: begrenzte HTML5-Funktionen, keine Debugging-Tools, keine Build-Tools. Mit der Einführung von Chromium-basierten WebViews in Android 4.4 (KitKat) steht Entwicklern jetzt eine Vielzahl neuer Tools zur Verfügung, mit denen sie mit der WebView großartige native Apps entwickeln können.
Die WebView unterstützt das Remote-Debugging mit denselben Tools, die Sie für Chrome verwenden. Sie können auch Ihren vertrauten Webentwicklungs-Workflow mit Grunt verwenden und über Gradle in Ihre nativen Stack-Tools einbinden. Es gibt einen cleveren Trick, mit dem Sie Ihren nativen Code über JavaScript mit den Chrome-Entwicklertools testen können.
Folien: Mobile Apps mit Chrome WebView erstellen
Wichtige Informationen zur effektiven WebView-Entwicklung
- Nicht die neuen Funktionen sind wichtig, sondern die Tools, mit denen Sie Ihren Workflow beschleunigen können.
- Versuchen Sie nicht, die native Benutzeroberfläche nachzubilden. Entfernen Sie aber einige der Hinweise darauf, dass es sich um Webinhalte handelt.
- Verwenden Sie nach Möglichkeit native Implementierungen von Funktionen. Verwenden Sie für große Dateien den DownloadManager anstelle von XHR.
Workflow für eine geräteübergreifende Welt optimieren von Matt Gaunt
Wenn wir für Desktop, Mobilgeräte, Tablets, Wearables und andere Formfaktoren entwickeln müssen, wie können wir unseren Workflow optimieren, um weniger Stress zu haben? Es gibt einen soliden Ansatz für mehrere Geräte, der schnelle Iterationen mit LiveReload, Grunt, Yeoman und dem neu vorgestellten Mini Mobile Device Lab ermöglicht. Wenn Sie die physische Hardware, die Sie testen möchten, nicht haben, stellen einige Anbieter sie über die Cloud zur Verfügung.
Google-Präsentationen: Workflow für eine geräteübergreifende Welt optimieren
Wichtige Fakten
- Die Anzahl der Geräte, die wir unterstützen müssen, wird nur noch steigen.
- Workflows mit Grunt und Yeoman optimieren
- Mit dem Mini Mobile Device Lab können Sie Tests für verschiedene Browser und Geräte vereinfachen.
- Wählen Sie Emulatoren mit Bedacht aus. Nutzen Sie dazu die Emulation in den Chrome-Entwicklertools, Stock-Emulatoren, cloudbasierte Emulatoren wie Saucelabs, Browserstack und appexperience sowie den Drittanbieter-Emulator Genymotion.
- Mobile Tests umfassen mehr als nur Tests über Ihre WLAN-Verbindung. Verwenden Sie einen Proxy, um langsamere Netzwerkgeschwindigkeiten zu simulieren.
Netzwerkverbindung: optional von Jake Archibald
Wir haben viel gelernt: Jake trägt bei Präsentationen keine Schuhe; Business Kinlan bringt demnächst ein neues Buch heraus; Offline wird von Browseranbietern ernst genommen und Sie werden bald die Tools in der Hand haben, mit denen Sie großartige Erlebnisse schaffen können, die auch offline gut funktionieren.
ServiceWorker bietet uns die Flexibilität, die wir benötigen, um überzeugende Offline-First-Funktionen zu entwickeln, ohne die Probleme von AppCache in Kauf nehmen zu müssen. Sie können die API sogar mit einem Polyfill testen.
Google-Präsentationen: Netzwerkverbindung: optional
ServiceWorker als Retter in der Not
- Bei der nächsten Generation der progressiven Verbesserung wird das Netzwerk als potenzielle Verbesserung behandelt.
- Mit ServiceWorker haben Sie die vollständige, skriptfähige und debuggbare Kontrolle über Netzwerkanfragen.
- Wenn Sie eine Offline-Erfahrung haben, warten Sie nicht, bis das Netzwerk ausfällt, bevor Sie sie präsentieren, da dies sehr lange dauern kann.