Chrome Dev Summit - Mobiel overzicht

De Chrome Dev Summit is een paar weken geleden afgelopen en hier is de eerste in een reeks rapporten van het evenement. Er lag een sterke nadruk op de ontwikkeling van mobiele apparaten en apparaten, dus daar beginnen we mee!

Beste UX-patronen voor mobiele webapps door Paul Kinlan

Na een analyse van de mobielvriendelijkheid van de top 1000 sites hebben we enkele probleemgebieden ontdekt: 53% biedt nog steeds alleen een desktopervaring, 82% van de sites heeft problemen met interactiviteit op een mobiel apparaat en 64% van de sites bevat tekst die gebruikers zullen problemen hebben met lezen.

Snelle hits om uw mobiele internetervaring dramatisch te verbeteren

  • Definieer altijd een zichtvenster
  • Plaats inhoud binnen de viewport
  • Houd de lettergrootte op een leesbaar niveau
  • Beperk het gebruik van weblettertypen
  • Grootte en ruimte zorgen ervoor dat doelen op de juiste manier worden aangeboord
  • Gebruik de semantische typen voor invoerelementen

PageSpeed ​​Insights heeft zojuist een UX-analyse gelanceerd om te bepalen hoe mobielvriendelijk uw site is. Het helpt u bij het vinden van veelvoorkomende problemen met de mobiele UX van uw site. Probeer het!

Dia's: beste UX-patronen voor mobiele webapps

Toegankelijkheid voor meerdere apparaten door Alice Boxhall

Gebruikers hebben toegang tot uw sites en services vanaf een groot aantal apparaten met een breed scala aan verschillende toegankelijkheidsvereisten. Door de juiste semantische elementen en correcte ARIA-rollen te gebruiken, helpt u de browser en ondersteunende technologie een veel beter begrip van uw pagina te geven.

Dia's: toegankelijkheid voor meerdere apparaten

Belangrijke manieren om alle problemen te begrijpen en aan te pakken

  • Zorg ervoor dat u een goede gebruikerservaring heeft met alleen het toetsenbord
  • Geef uitdrukking aan de semantiek van uw interface met de juiste elementkeuze en ARIA
  • Gebruik ChromeVox op desktop en TalkBack op Android om te testen.
  • Probeer de Chrome-extensie Accessibility Developer Tools
  • Er komt een diverser publiek online, wat de noodzaak om uw sites toegankelijk te maken nog groter maakt

Bouw mobiele apps met behulp van de Chrome WebView van Matt Guant

We kennen allemaal de problemen die ontwikkelaars in het verleden hebben gehad bij het bouwen voor WebView: beperkte HTML5-functies, geen debugging-tools, geen build-tools. Met de introductie van een door Chromium aangedreven WebView in Android 4.4 (KitKat) hebben ontwikkelaars nu een enorm scala aan nieuwe tools tot hun beschikking om geweldige native apps te bouwen met behulp van de WebView.

De WebView ondersteunt volledige foutopsporing op afstand met dezelfde tools die u voor Chrome gebruikt. U kunt ook uw vertrouwde webontwikkelingsworkflow met Grunt gebruiken en die via Gradle integreren in uw native stack-tooling. Om werelden verder samen te voegen, is er een slimme truc om Chrome DevTools te gebruiken om je eigen code uit JavaScript te testen.

Dia's: Bouw mobiele apps met behulp van Chrome WebView

Effectieve WebView-ontwikkelingstips

  • Het zijn niet de nieuwe functies die belangrijk zijn, het zijn de tools die u nu kunt gebruiken om uw workflow te versnellen
  • Probeer niet de native gebruikersinterface te emuleren. Maar zorg ervoor dat u enkele aanwijzingen verwijdert dat het om webinhoud gaat.
  • Gebruik indien nodig native implementaties van functies. dwz gebruik de DownloadManager in plaats van XHR voor grote bestanden.

Uw workflow optimaliseren voor een wereld tussen verschillende apparaten door Matt Gaunt

Als we moeten ontwikkelen voor desktop, mobiel, tablet, wearables en andere vormfactoren, hoe kunt u dan uw workflow optimaliseren om uw leven minder stressvol te maken? Er is een solide aanpak voor meerdere apparaten voor snelle iteratie met LiveReload, Grunt, Yeoman en het onlangs onthulde Mini Mobile Device Lab . Als u ten slotte niet over de fysieke hardware beschikt die u wilt testen, stellen sommige providers deze beschikbaar via de cloud.

Dia's: uw workflow optimaliseren voor een wereld met meerdere apparaten

Belangrijkste punten

  • Het aantal apparaten waar we rekening mee moeten houden, zal alleen maar toenemen
  • Zorg voor de juiste workflow met Grunt en Yeoman
  • Vereenvoudig het testen via verschillende browsers en apparaten met Mini Mobile Device Lab
  • Wees slim met uw emulatiekeuze met behulp van Chrome DevTools-emulatie, Stock-emulators, cloudgebaseerde emulators zoals Saucelabs , Browserstack en appervaring en emulator van derden, Genymotion
  • Mobiel testen betekent meer dan alleen testen op uw wifi-verbinding, gebruik een proxy om lagere netwerksnelheden te simuleren

Netwerkconnectiviteit: optioneel door Jake Archibald

We hebben veel dingen uit deze lezing geleerd: Jake draagt ​​geen schoenen tijdens de presentatie; Business Kinlan heeft binnenkort een nieuw boek; Offline wordt serieus genomen door browserleveranciers en je zult binnenkort de tools in handen hebben waarmee je geweldige ervaringen kunt opbouwen die goed werken als je offline bent.

ServiceWorker geeft ons de flexibiliteit die we nodig hebben om met gemak boeiende offline eerste ervaringen op te bouwen en niet te lijden onder de pijn die AppCache veroorzaakt. Je kunt zelfs met de API experimenteren met behulp van een Polyfill .

Slides: Netwerkconnectiviteit: optioneel

Servicemedewerker schiet te hulp

  • In de volgende generatie van progressieve verbeteringen beschouwen we het netwerk als een potentiële verbetering
  • ServiceWorker geeft u volledige, scriptbare en debugbare controle over netwerkverzoeken
  • Als u een offline ervaring heeft, wacht dan niet tot het netwerk uitvalt voordat u het weergeeft, aangezien dit eeuwen kan duren