De Chrome Dev Summit is een paar weken geleden afgelopen en hier is het eerste verslag in een reeks van verslagen van het evenement. Er lag een sterke nadruk op mobiele en cross-device ontwikkeling, dus daar beginnen we mee!
Beste UX-patronen voor mobiele web-apps door Paul Kinlan
Uit een analyse van de mobielevriendelijkheid van de top 1000-sites bleek dat er een aantal probleemgebieden zijn: 53% biedt nog steeds alleen een desktop-ervaring, 82% van de sites heeft problemen met de interactie op een mobiel apparaat en 64% van de sites bevat tekst die gebruikers moeilijk kunnen lezen.
Snelle hits om uw mobiele webervaring aanzienlijk te verbeteren
- Definieer altijd een viewport
- Inhoud in de viewport passen
- Houd de lettergrootte op een leesbaar niveau
- Beperk het gebruik van webfonts
- Zorg voor de juiste grootte en afstand tussen de tikdoelen
- Gebruik de semantische typen voor invoerelementen
PageSpeed Insights heeft zojuist een UX-analyse gelanceerd om te bepalen hoe mobielvriendelijk je site is. Deze analyse helpt je veelvoorkomende problemen met de mobiele UX van je site te ontdekken . Probeer het eens!
Dia's: Beste UX-patronen voor mobiele web-apps
Toegankelijkheid voor meerdere apparaten door Alice Boxhall
Gebruikers krijgen toegang tot uw sites en diensten vanaf een groot aantal apparaten met uiteenlopende toegankelijkheidsvereisten. Door de juiste semantische elementen en ARIA-rollen te gebruiken, zorgt u ervoor dat de browser en ondersteunende technologie uw pagina veel beter begrijpen.
Dia's: Toegankelijkheid op meerdere apparaten
Belangrijke manieren om a11y-problemen te begrijpen en aan te pakken
- Zorg ervoor dat u een goede gebruikerservaring heeft met alleen het toetsenbord
- Geef de semantiek van uw interface weer 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 steeds meer divers publiek online, waardoor de noodzaak om uw sites toegankelijk te maken nog groter wordt.
Bouw mobiele apps met Chrome WebView door Matt Guant
We kennen allemaal de problemen die ontwikkelaars in het verleden ondervonden bij het bouwen voor WebView: beperkte HTML5-functies, geen debugtools, geen buildtools. Met de introductie van een door Chromium aangestuurde WebView in Android 4.4 (KitKat) hebben ontwikkelaars nu een enorm scala aan nieuwe tools tot hun beschikking om fantastische native apps te bouwen met WebView.
De WebView ondersteunt volledige remote debugging met dezelfde tools die je voor Chrome gebruikt. Je kunt je vertrouwde webontwikkelingsworkflow met Grunt ook integreren in je native stacktools via Gradle. Om de werelden nog verder te verenigen, is er een slimme truc om de Chrome DevTools te gebruiken om je native code vanuit JavaScript te testen.
Dia's: Mobiele apps bouwen met Chrome WebView
Effectieve WebView-ontwikkelingstips
- Het zijn niet de nieuwe functies die belangrijk zijn, maar de tools die u nu kunt gebruiken om uw workflow te versnellen
- Probeer niet de native gebruikersinterface na te bootsen. Zorg er wel voor dat je een aantal signalen verwijdert die aangeven dat het om webcontent gaat.
- Gebruik waar nodig native implementaties van functies. Gebruik bijvoorbeeld DownloadManager in plaats van XHR voor grote bestanden.
Optimaliseren van uw workflow voor een wereld met meerdere apparaten door Matt Gaunt
Als we moeten ontwikkelen voor desktop, mobiel, tablet, wearables en andere form factors, hoe kun je je workflow dan optimaliseren om je leven minder stressvol te maken? Er is een solide multi-device aanpak voor snelle iteratie met LiveReload, Grunt, Yeoman en het onlangs gelanceerde Mini Mobile Device Lab . Tot slot, als je niet over de fysieke hardware beschikt die je wilt testen, maken sommige providers deze beschikbaar via de cloud.
Dia's: Uw workflow optimaliseren voor een wereld met meerdere apparaten
Belangrijkste punten
- Het aantal apparaten dat we nodig zullen hebben, zal alleen maar toenemen
- Uw workflow op de juiste manier vormgeven met Grunt en Yeoman
- Vereenvoudig testen op meerdere browsers en apparaten met Mini Mobile Device Lab
- Wees slim met uw emulatiekeuze met behulp van Chrome DevTools-emulatie, standaard emulators, op de cloud gebaseerde emulators zoals Saucelabs , Browserstack en appexperience en de externe emulator 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 geleerd van deze presentatie: Jake draagt geen schoenen tijdens het presenteren; Business Kinlan komt binnenkort met een nieuw boek; browserleveranciers nemen offline serieus en binnenkort heb je de tools in handen waarmee je geweldige ervaringen kunt creëren die ook offline goed werken.
ServiceWorker biedt ons de flexibiliteit die we nodig hebben om eenvoudig aantrekkelijke offline first-ervaringen te creëren, zonder de problemen die AppCache met zich meebrengt. Je kunt zelfs experimenteren met de API met behulp van een Polyfill .
Dia's: Netwerkconnectiviteit: optioneel
ServiceWorker schiet te hulp
- In de volgende generatie van progressieve verbeteringen behandelen we het netwerk als een potentiële verbetering
- Met ServiceWorker krijgt u volledige, scriptbare en debugbare controle over netwerkverzoeken
- Als u een offline ervaring hebt, wacht dan niet tot het netwerk uitvalt voordat u deze weergeeft, aangezien dit eeuwen kan duren