Kilka tygodni temu zakończył się Chrome Dev Summit. Oto pierwszy z nich. Duży nacisk kładzie się na tworzenie aplikacji mobilnych i na różne urządzenia, więc zaczniemy od tego.
Najlepsze wzorce UX dla mobilnych aplikacji internetowych (Paul Kinlan)
Po przeanalizowaniu 1000 najlepszych witryn pod kątem ich dostosowania do urządzeń mobilnych stwierdziliśmy, że niektóre z nich są problematyczne. 53% witryn nadal wyświetla się tylko na komputerach, 82% ma problemy z interaktywnością na urządzeniach mobilnych, a 64% witryn zawiera tekst, który użytkownicy mają problemy z czytaniem.
Szybkie działania, które znacznie usprawnią korzystanie z internetu mobilnego
- Zawsze definiuj widoczny obszar
- Dopasowanie zawartości do widocznego obszaru
- Zadbaj o to, aby rozmiar czcionki był czytelny.
- Ograniczenie używania czcionek internetowych
- Zadbaj o odpowiedni rozmiar i odstępy między elementami dotykowymi
- Używanie typów semantycznych elementów wejściowych
Właśnie wprowadziliśmy analizę UX, która pozwoli Ci określić, czy Twoja witryna jest dostosowana do komórek. Pomoże Ci znaleźć częste problemy z wygodą użytkowników Twojej witryny na urządzeniach mobilnych. Spróbuj!
Prezentacje: najlepsze wzorce UX aplikacji mobilnych
Ułatwienia dostępu na wielu urządzeniach – Alice Boxhall
Użytkownicy będą korzystać z Twoich stron i usług na wielu urządzeniach spełniających szerokie spektrum wymagań dotyczących ułatwień dostępu. Właściwe elementy semantyczne i prawidłowe role ARIA pomagają przeglądarce i technologiom wspomagającym znacznie lepiej zrozumieć Twoją stronę.
Prezentacje: ułatwienia dostępu na wielu urządzeniach
Kluczowe sposoby analizowania i rozwiązywania problemów
- Dbanie o wygodę użytkowników korzystających tylko z klawiatury
- Wyraź semantykę swojego interfejsu za pomocą prawidłowej opcji wyboru elementów i parametru ARIA.
- Do testowania użyj ChromeVox na komputerze lub TalkBack na Androidzie.
- Wypróbuj rozszerzenie Narzędzia dla programistów ułatwień dostępu do Chrome
- W internecie rośnie zróżnicowana grupa odbiorców, co jeszcze bardziej zwiększa potrzebę udostępniania Twoich stron
Tworzenie aplikacji mobilnych za pomocą komponentu WebView Chrome – Matt Guant
Wszyscy wiemy, jakie problemy napotykali programiści w przeszłości przy tworzeniu komponentu WebView: ograniczone funkcje HTML5, brak narzędzi do debugowania i narzędzi do tworzenia. Dzięki wprowadzeniu komponentu WebView opartego na Chromium w Androidzie 4.4 (KitKat) deweloperzy mają teraz do dyspozycji ogromną gamę nowych narzędzi do tworzenia świetnych aplikacji natywnych za pomocą komponentu WebView.
WebView obsługuje pełne zdalne debugowanie za pomocą tych samych narzędzi, których używasz w Chrome. Możesz też wykorzystać Grunt w swoim narzędziu do tworzenia stron internetowych i zintegrować go z natywnymi narzędziami do stosów za pomocą Gradle. Oprócz scalania różnych światów możesz skorzystać z Narzędzi deweloperskich w Chrome, aby przetestować swój kod natywny z JavaScriptu.
Prezentacje: tworzenie aplikacji mobilnych za pomocą komponentu WebView Chrome
Wnioski dotyczące skutecznego tworzenia komponentu WebView
- To nie nowe funkcje są najważniejsze, tylko narzędzia, które możesz wykorzystać do przyspieszenia pracy
- Nie próbuj emulować natywnego interfejsu użytkownika. Pamiętaj jednak, aby usunąć część informacji, że są to treści internetowe.
- W razie potrzeby używaj natywnych implementacji funkcji. Na przykład w przypadku dużych plików używaj Menedżera pobierania zamiast XHR.
Optymalizacja przepływu pracy pod kątem działań na różnych urządzeniach (Matt Gaunt)
Tworzenie aplikacji z myślą o komputerach, telefonach, tabletach, urządzeniach do noszenia i innych urządzeniach do noszenia – jak możesz zoptymalizować przepływ pracy, aby Twoje życie było mniej stresujące? Użytkownicy mogą szybko uruchomić aplikację na wielu urządzeniach, korzystając z Live Następnie, Grunt, Yeoman oraz w Mini Mobile Device Lab. Jeśli nie masz fizycznego sprzętu, który chcesz przetestować, niektórzy dostawcy udostępniają go w chmurze.
Prezentacje: Optymalizacja przepływu pracy pod kątem działań użytkowników na różnych urządzeniach
Najważniejsze kwestie
- Liczba urządzeń, które będziemy obsługiwać, będzie rosnąć
- Odpowiednie zarządzanie przepływem pracy dzięki Grunt i Yeoman
- Uprość testowanie w różnych przeglądarkach i na różnych urządzeniach dzięki Mini Mobile Device Lab
- Dobrze skup się na emulacjach, korzystając z emulatorów Chrome DevTools, Stock Emulators, emulatorów działających w chmurze, takich jak Saucelabs, Browserstack i appexperience oraz emulatora innej firmy Genymotion.
- Testy na urządzeniach mobilnych to coś więcej niż tylko testowanie z użyciem połączenia Wi-Fi – korzystaj z serwera proxy, aby symulować wolniejsze szybkości sieci
Połączenie sieciowe: opcjonalnie (wykonane przez Jake'a Archibalda)
Z tej prezentacji dowiesz się wielu rzeczy: Jake nie nosi butów podczas prezentacji; wkrótce wyda nową książkę na kanale Business Kinlan. Dostawcy przeglądarek bardzo poważnie traktują tryb offline, dlatego wkrótce udostępnimy narzędzia, które pozwolą Ci tworzyć świetne funkcje i dobrze działać w trybie offline.
Pakiet ServiceWorker daje nam elastyczność, której potrzebujemy, aby łatwo tworzyć atrakcyjne funkcje offline bez konieczności odczuwania problemów z pamięci podręcznej aplikacji. Możesz nawet eksperymentować z interfejsem API, używając kodu Polyfill.
Prezentacje: połączenie sieciowe: opcjonalne
ServiceWorker na ratunek
- W nowej generacji progresywnego udoskonalania sieci możemy traktować ją jako
- Skrypt service worker zapewnia pełną kontrolę nad żądaniami sieciowymi, umożliwiając tworzenie skryptów i debugowania
- Jeśli korzystasz z trybu offline, nie czekaj, aż sieć ulegnie awarii, zanim ją zaprezentujesz, ponieważ może to potrwać długo.