Witryna CDS, stworzona przez naszego własnego Paula Lewisa, pokazuje, jak zadbać o wygodę użytkowników korzystających z urządzeń mobilnych.
Sceny zza kulis
Wyróżnia się płynność działania witryny w różnych przeglądarkach mobilnych. Najlepiej wykorzystuje układ i cykle renderowania przeglądarki.
Używane nowe funkcje platformy internetowej
- Skrypt service worker
- Plik manifestu
- Kolor motywu
Wzory
- Wydawanie kart
- Elastyczna siatka
- Material Design
Kod źródłowy
Wywiad
Programowanie
Gdy Paweł rozpoczął tworzenie witryny, priorytetem było wdrożenie progresywnego ulepszania. Zamiast projektować ją z myślą o komputerach, zaprojektował ją najpierw z myślą o małych ekranach, a potem dostosował ją do większych ekranów. Stopniowo ją ulepsza, a nie pogarszając. Wymagało to dużej liczby zapytań o media, ale też sporej swobody w sprawdzaniu niewielkich zmian między kluczowymi punktami przerwania. Śledzenie różnych rozmiarów ekranu dało mu poczucie, w którym miejscu może dojść do awarii, dzięki czemu mógł szybko to naprawić.
Kolejnym ważnym aspektem działania EP jest maksymalna zgodność wsteczna. Paul zdecydował się na użycie elementów pływających zamiast Flexbox, ponieważ uważał, że zwiększy to liczbę przeglądarek, w których witryna będzie działać. Przy konkretnym układzie witryny nie było to problemem. Gdyby potrzebował Flexbox, wykorzystywałby do niego EP.
Największym wyzwaniem na stronie była funkcja rozwijania i zwijania kart, co wymagało wymyślenia zupełnie nowego sposobu animacji. Paweł wymyślił strategię, którą nazywa FLIP, która obejmuje ustawienie animowanych elementów do ich ostatecznego stanu. Następnie zastosuj właściwości przyjazne do kompozytorów, takie jak przekształcenia i nieprzezroczystość, aby odwrócić zmiany i przywrócić element do pozycji początkowej. Gdy to zrobisz, włącz przejścia między przekształceniami i przezroczystością oraz usuń te zmiany. Spowoduje to ponowne przesunięcie elementów do swoich końcowych pozycji. Paul przyznaje, że to trochę zaskakujące, ale działa świetnie i zwiększa wydajność.
Występy
Ponieważ Paul Lewis jest guru w zakresie skuteczności, nie zdziwiłam się, że podczas tworzenia witryny tak ważna jest wydajność. W dużym stopniu polegał na narzędziu WebPageTest, w którym wartość Speed Index była jak najniższa. Bez umieszczania filmu z YouTube na stronie Pawła udało mu się spędzić mniej niż 1000 filmów w połączeniu kablowym, co oznaczało, że większość użytkowników wyrenderowałaby ją po mniej niż sekundzie.
Większość pracochłonności w tym celu wykonywano w zadaniach Grunt, takich jak łączenie, minimalizowanie i kompresowanie obrazów. Witryna odkłada też mniej ważne obrazy po jej wczytaniu, dzięki czemu rzeczywiste treści są szybciej renderowane.
Aby wydłużyć czas wczytywania strony, Paweł użył skryptu service worker. Dzięki temu niezależnie od tego, czy jesteś online czy nie, wizyta na stronie może być realizowana z pamięci podręcznej, dzięki czemu możesz wyświetlić treść nawet przy słabym połączeniu z siecią (jest to niezwykle ważne w przypadku korzystania z sieci Wi-Fi konferencyjnej). Witryna CDS to jedna z pierwszych witryn produkcyjnych, w których wdrożyliśmy nową funkcję. Paweł napotkał w niej sporo „wczesnych problemów”, ale przekonał się, że ogromny wzrost wydajności zrobił mi się z tego powodu. Teraz umieszcza go też w każdej witrynie, którą tworzy!
Wydajność to nie tylko to, jak szybko strona się wczytuje, ale też jak dobrze się ona obsługuje. Paweł wiedział, że animacje będą wyzwaniem, dlatego zdecydował się wykorzystać FLIP. Poza tym zadbał o to, aby nic nie przeszkadzało w dotyku ani przewijaniu. Chociaż witryna nie jest zbyt złożona, zastosował w jej przypadku zmodyfikowaną metodologię algorytmu RAIL (nie potrzebował zbyt wiele czasu bezczynności), co bardzo mu pomogło.
Projektowanie
Ponieważ witrynę sfałszowała tylko jedna osoba, oznaczało to, że Paweł był zarówno projektantem, jak i deweloperem projektu, co spowodowało bezprecedensowy poziom zrozumienia dotyczących wzajemnych wątpliwości obu „zespołów”. Lubi projektować wersję na komputery (przeciwieństwo progresywnego ulepszania, z którego korzystał podczas tworzenia aplikacji), ponieważ dzięki temu widzi, co trzeba zrobić w projekcie. Następnie Paweł przełącza się na widok mobilny, gdzie może znacznie poprawić swoje wyniki i przyciągnąć uwagę najważniejszych rzeczy. To określa to wersję na komputery, ponieważ niezmiennie architektura informacji i priorytet będą wymagać aktualizacji.
Nie wszystko szło zgodnie z planem. W tamtych czasach wytyczne Material Design nie zawierały jasnego, jak utworzyć witrynę z treścią, dlatego zdarzały się obszary, w których miał on słabe wyniki. Projekt nie uwzględniał też powiązanych z nimi informacji o harmonogramie i sesjach. W końcu UX wiązało się z tym, że użytkownicy byli sfrustrowani, że nie mogli od razu uzyskać informacji o sesji.
Jednak mimo to uważam, że Paul wykonał świetną robotę w przeniesieniu specyfikacji Material Design na stronę z treściami. I jestem bardzo zadowolona z wizualizacji i ruchu. Wyróżnia go interfejs Material Design, a informacje i wygląd sprzyjają interakcji i hierarchii.
Gotowe
- Opublikowaliśmy całą witrynę w GitHubie (ponad 200 gwiazdek), aby pełniła rolę szablonu i inspiracji dla programistów stron internetowych.
- Zastosowanie najnowszej i najlepszej platformy internetowej: skrypt service worker, plik manifestu internetowego i kolory dynamicznych motywów. Efekt jest silnie zintegrowany z platformą, gdy działa na urządzeniach z Androidem. Dodanie do ekranu głównego użytkownika przypomina aplikację, z której korzysta. To świetna sprawa.
- ~73.7k wyświetleń strony, ~73.7k kliknięć prowadzących do podsekcji witryny oznacza, że użytkownicy faktycznie z niej korzystali i korzystali z niej znacznie bardziej, niż się spodziewaliśmy.
Można je wykorzystać jako inspirację dla współczesnych programistów i odnoszącą sukcesy stronę konferencyjną.