Der Chrome Dev Summit ist vor einigen Wochen zu Ende gegangen. Hier ist der erste Bericht aus der Reihe zu diesem Event. Der Schwerpunkt lag auf der Entwicklung für Mobilgeräte und geräteübergreifend. Damit beginnen wir.
Best UX patterns for mobile web apps von Paul Kinlan
Bei der Analyse der Nutzerfreundlichkeit der 1.000 wichtigsten Websites haben wir einige Problembereiche festgestellt: 53% sind noch immer nur für Desktop-Computer optimiert, 82% der Websites haben Probleme mit der Interaktivität auf Mobilgeräten und 64% der Websites haben Text, den Nutzer nur schwer lesen können.
Schnelle Tipps zur Optimierung Ihrer mobilen Website
- Definieren Sie immer einen Darstellungsbereich.
- Inhalte in den Darstellungsbereich einpassen
- Schriftgröße so wählen, dass sie gut lesbar ist
- Verwendung von Webschriften einschränken
- Größe und Abstand von Tippzielen richtig einstellen
- Semantische Typen für Eingabeelemente verwenden
In PageSpeed Insights gibt es jetzt eine UX-Analyse, mit der Sie die Nutzerfreundlichkeit Ihrer Website für Mobilgeräte bewerten können. So können Sie häufige Probleme mit der mobilen Nutzerfreundlichkeit Ihrer Website erkennen. Jetzt ausprobieren!
Folien: Beste UX-Muster für mobile Web-Apps
Barrierefreiheit auf mehreren Geräten von Alice Boxhall
Nutzer greifen von einer 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.
Präsentationen: Barrierefreiheit auf mehreren Geräten
Wichtige Möglichkeiten, Probleme mit der Barrierefreiheit zu verstehen und zu beheben
- Sorgen Sie für eine gute Nutzerfreundlichkeit bei der Nutzung nur mit der Tastatur
- Die Semantik Ihrer Benutzeroberfläche mit der richtigen Elementauswahl und ARIA ausdrücken
- Verwenden Sie zum Testen ChromeVox auf dem Computer und TalkBack auf Android-Geräten.
- Chrome-Erweiterung „Entwicklertools für Barrierefreiheit“ ausprobieren
- Immer mehr Menschen nutzen das Internet. Das erhöht die Notwendigkeit, Ihre Websites barrierefrei zu gestalten.
Build Mobile Apps using the Chrome WebView von Matt Guant
Wir alle kennen die Probleme, die Entwickler in der Vergangenheit beim Erstellen von WebView-Anwendungen hatten: eingeschränkte HTML5-Funktionen, keine Debugging-Tools, keine Build-Tools. Mit der Einführung einer von Chromium unterstützten WebView in Android 4.4 (KitKat) stehen Entwicklern jetzt eine Vielzahl neuer Tools zur Verfügung, mit denen sie mithilfe der WebView hervorragende native Apps erstellen können.
WebView unterstützt die vollständige Remote-Fehlerbehebung mit denselben Tools, die Sie auch für Chrome verwenden. Sie können auch Ihren vertrauten Webentwicklungs-Workflow mit Grunt über Gradle in Ihr Native-Stack-Tooling einbinden. Und noch ein Tipp: Mit den Chrome-Entwicklertools können Sie Ihren nativen Code aus JavaScript testen.
Folien: Mobile Apps mit der Chrome WebView erstellen
Erfolgreiche WebView-Entwicklung
- Nicht die neuen Funktionen sind wichtig, sondern die Tools, mit denen Sie Ihren Workflow jetzt beschleunigen können.
- Versuchen Sie nicht, die native Benutzeroberfläche zu emulieren. Entfernen Sie jedoch einige der Merkmale, die darauf hinweisen, dass es sich um Webinhalte handelt.
- Verwenden Sie nach Bedarf native Implementierungen von Funktionen. Verwenden Sie also für große Dateien den DownloadManager anstelle von XHR.
Optimizing your Workflow for a Cross-device World von Matt Gaunt
Wenn wir für Computer, Smartphones, Tablets, Wearables und andere Formfaktoren entwickeln müssen, wie können wir unseren Workflow optimieren, um uns den Stress zu nehmen? Mit LiveReload, Grunt, Yeoman und dem kürzlich vorgestellten Mini Mobile Device Lab gibt es einen soliden Ansatz für die geräteübergreifende Entwicklung, der schnelle Iterationen ermöglicht. Wenn Sie die Hardware, die Sie testen möchten, nicht haben, stellen einige Anbieter sie über die Cloud zur Verfügung.
Folien: Workflow für die geräteübergreifende Nutzung optimieren
Wichtige Fakten
- Die Anzahl der Geräte, die wir unterstützen müssen, wird nur zunehmen.
- Den richtigen Workflow mit Grunt und Yeoman
- Browser- und geräteübergreifende Tests mit dem Mini Mobile Device Lab vereinfachen
- Wählen Sie die Emulation mit Bedacht aus. Sie haben die Wahl zwischen der Chrome DevTools-Emulation, Standard-Emulatoren, cloudbasierten Emulatoren wie Saucelabs, Browserstack und appexperience sowie dem Drittanbieteremulator Genymotion.
- Für mobile Tests ist nicht nur die WLAN-Verbindung wichtig. Verwenden Sie einen Proxy, um langsamere Netzwerkgeschwindigkeiten zu simulieren.
Netzwerkverbindung: optional von Jake Archibald
Wir haben viel von diesem Vortrag gelernt: Jake trägt bei Präsentationen keine Schuhe; Business Kinlan veröffentlicht demnächst ein neues Buch; Offline wird von Browseranbietern ernst genommen und Sie werden bald die Tools in der Hand haben, mit denen Sie großartige Funktionen entwickeln können, die auch offline gut funktionieren.
ServiceWorker bietet uns die Flexibilität, die wir benötigen, um ansprechende Offline-first-Funktionen ganz einfach zu entwickeln und nicht die Probleme zu ertragen, die AppCache mit sich bringt. Sie können sogar mit der API mithilfe eines Polyfills experimentieren.
Präsentationen: Netzwerkverbindung: optional
ServiceWorker als Retter in der Not
- Bei der nächsten Generation der progressiven Verbesserung betrachten wir das Netzwerk als eine potenzielle Verbesserung.
- Mit ServiceWorker haben Sie volle, scriptbare und debuggbare Kontrolle über Netzwerkanfragen
- Wenn Sie eine Offlineversion haben, warten Sie nicht, bis die Internetverbindung unterbrochen wird, bevor Sie sie präsentieren, da dies ewig dauern kann.