Kilka tygodni temu zakończyło się Chrome Dev Summit. Oto pierwszy z cyklu raportów z tego wydarzenia. W tym roku duży nacisk kładziemy na rozwój aplikacji mobilnych i aplikacji na wiele urządzeń, więc od tego zaczniemy.
Najlepsze wzorce UX dla aplikacji internetowych na urządzenia mobilne (Paul Kinlan)
Po przeanalizowaniu 1000 najpopularniejszych witryn pod kątem ich przystosowania do urządzeń mobilnych znaleźliśmy kilka obszarów problemowych: 53% witryn nadal jest przeznaczonych tylko do korzystania na komputerach, 82% witryn ma problemy z interaktywnością na urządzeniach mobilnych, a 64% witryn zawiera tekst, który użytkownicy mają problemy z odczytaniem.
Szybkie wskazówki, które znacznie poprawią korzystanie z internetu na urządzeniach mobilnych
- Zawsze definiuj widoczny obszar
- Dopasowanie treści do widocznego obszaru
- Utrzymywanie rozmiaru czcionki na poziomie umożliwiającym czytelne czytanie
- Ograniczanie korzystania z czcionek internetowych
- Odpowiednio dobieraj rozmiar i odstępy między elementami dotykowymi.
- Używanie typów semantycznych dla elementów wejściowych
Narzędzie PageSpeed Insights udostępniło właśnie analizę UX, która pozwala określić, na ile witryna jest dostosowana do urządzeń mobilnych. Pomoże Ci ona znaleźć typowe problemy z wrażeniami użytkowników na urządzeniach mobilnych. Spróbuj!
Slajdy: najlepsze wzorce UX w przypadku aplikacji internetowych na urządzenia mobilne
Multi-device Accessibility by Alice Boxhall
Użytkownicy będą uzyskiwać dostęp do Twoich witryn i usług z wielu urządzeń o różnych wymaganiach dotyczących ułatwień dostępu. Używając odpowiednich elementów semantycznych i odpowiednich ról ARIA, pomagasz przeglądarce i technologii wspomagającej lepiej zrozumieć Twoją stronę.
Slajdy: ułatwienia dostępu na wielu urządzeniach
Najważniejsze sposoby analizowania i rozwiązywania problemów z a11y
- Zadbaj o to, aby użytkownicy mogli korzystać z klawiatury
- Wyraź semantykę interfejsu za pomocą odpowiedniego wyboru elementów i specyfikacji ARIA
- Do testowania użyj ChromeVox na komputerze i TalkBacka na urządzeniu z Androidem.
- Wypróbuj rozszerzenie do Chrome Accessibility Developer Tools
- W internecie pojawia się coraz bardziej zróżnicowana grupa odbiorców, co jeszcze bardziej zwiększa potrzebę zapewnienia dostępności witryn
Tworzenie aplikacji mobilnych przy użyciu WebView w Chrome (Matt Guant)
Wszyscy znamy problemy, które deweloperzy mieli w przeszłości podczas tworzenia komponentu WebView: ograniczone funkcje HTML5, brak narzędzi do debugowania i narzędzi do kompilowania. Dzięki wprowadzeniu komponentu WebView opartego na Chromium w Androidzie 4.4 (KitKat) deweloperzy mają teraz do dyspozycji ogromny wachlarz nowych narzędzi do tworzenia świetnych aplikacji natywnych za pomocą WebView.
WebView obsługuje pełne debugowanie zdalne przy użyciu tych samych narzędzi, których używasz w przypadku Chrome. Możesz też wykorzystać zaufany proces tworzenia stron internetowych z użyciem Grunta i zintegrować go z natywnymi narzędziami za pomocą Gradle. Aby jeszcze bardziej połączyć te światy, możesz użyć sprytnego triku, który polega na przetestowaniu kodu natywnego z JavaScriptu za pomocą narzędzi deweloperskich w Chrome.
Prezentacja: tworzenie aplikacji mobilnych za pomocą WebView w Chrome
Wnioski z tworzenia aplikacji WebView
- Ważne nie są nowe funkcje, ale narzędzia, których możesz teraz używać do przyspieszania pracy
- Nie próbuj emulować natywnego interfejsu użytkownika. Pamiętaj jednak, aby usunąć elementy wskazujące, że są to treści internetowe.
- W odpowiednich przypadkach używaj natywnych implementacji funkcji. W przypadku dużych plików używaj metody DownloadManager zamiast XHR.
Optimizing your Workflow for a Cross-device world by Matt Gaunt
Jeśli musimy tworzyć aplikacje na komputery, urządzenia mobilne, tablety, urządzenia noszące i inne formaty, jak można zoptymalizować proces pracy, aby praca była mniej stresująca? Dostępne jest solidne podejście do szybkiego testowania na wielu urządzeniach, które obejmuje LiveReload, Grunt, Yeoman i niedawno zaprezentowane Mini Mobile Device Lab. Jeśli nie masz fizycznego sprzętu, który chcesz przetestować, niektórzy dostawcy udostępniają go w chmurze.
Slajdy: optymalizacja przepływu pracy pod kątem urządzeń różnych marek
Najważniejsze kwestie
- Liczba urządzeń, które będziemy musieli obsługiwać, będzie tylko rosnąć.
- Tworzenie przepływu pracy za pomocą Grunt i Yeoman
- Uprość testowanie w różnych przeglądarkach i na różnych urządzeniach za pomocą Mini Mobile Device Lab
- Wybierz mądrze emulację za pomocą narzędzi dla deweloperów w Chrome, domyślnych emulatorów, emulatorów działających w chmurze, takich jak Saucelabs, Browserstack i appexperience, oraz emulatorów innych firm, np. Genymotion.
- Testowanie na urządzeniach mobilnych to coś więcej niż testowanie na połączeniu Wi-Fi. Aby symulować wolniejsze prędkości sieci, użyj serwera proxy.
Połączenia sieciowe: opcjonalnie (Jake Archibald)
Z tej prezentacji dowiedzieliśmy się wielu rzeczy: Jake nie nosi butów podczas prezentacji; Business Kinlan wkrótce wyda nową książkę; tryb offline jest traktowany poważnie przez dostawców przeglądarek, a wkrótce będziesz mieć do dyspozycji narzędzia, które pomogą Ci tworzyć świetne rozwiązania, które działają dobrze w trybie offline.
ServiceWorker zapewni nam elastyczność, której potrzebujemy do łatwego tworzenia atrakcyjnych aplikacji offline, bez konieczności znoszenia niedogodności związanych z AppCache. Możesz nawet eksperymentować z interfejsem API za pomocą rozszerzenia Polyfill.
Slajdy: połączenie z siecią (opcjonalnie)
Skrypt ServiceWorker na ratunek
- W przyszłej generacji stopniowego ulepszania traktujemy sieć jako potencjalne ulepszenie.
- ServiceWorker zapewnia pełną kontrolę nad żądaniami sieciowymi, która może być wykorzystywana do debugowania i programowania skryptów.
- Jeśli masz tryb offline, nie czekaj, aż sieć przestanie działać, zanim go włączysz, ponieważ może to zająć wieczność.