Fundacje

Solidny fundament

Solidne podstawy to podstawa tworzenia świetnych aplikacji PWA. Aby wdrożyć tę podstawę, musisz zaprojektować i zakodować środowisko zgodnie z ograniczeniami internetu, stosując kilka zasad:

  • Skupienie się na telefonie komórkowym. Upewnij się, że każdy widok projektu skupia się tylko na najważniejszych treściach i interakcjach.
  • Podkreśl zawartość i główne funkcje w procesie projektowania.
  • Stopniowo ulepszaj, gdy to konieczne. Zacznij od utworzenia podstawowej treści i funkcji komponentu za pomocą najprostszych i najpopularniejszych narzędzi. Zadbaj o dostępność. Następnie przetestuj zaawansowane funkcje, które chcesz wykorzystać, i ulepsz swój komponent.
  • Zapewnij szybkie i wygodne działanie, skupione na danych dotyczących wydajności witryn nastawionych na użytkowników. Uzyskaj dostęp do rzeczywistych danych o użytkownikach i zwiększ wydajność dla wszystkich użytkowników, niezależnie od ich połączenia sieciowego, typu danych wejściowych, mocy procesora czy GPU.

Postępując zgodnie z tymi zasadami oraz wzbogacając go o nowoczesne wzorce i funkcje internetowe, możesz tworzyć świetne i szybkie projekty, korzystając z prawdziwie wrodzonych wzorów. Projekty, które nie opierają się na ograniczeniach, a nie pikselach, dzięki czemu pozwalają każdemu użytkownikowi na dostęp do treści i głównych funkcji w sposób najlepiej dostosowany do danego kontekstu przeglądania.

Elastyczne projektowanie witryn

Od czasu, gdy Ethan Marcotte opublikował w 2010 r. artykuł A List Apart, elastyczny projektowanie witryn, projektantów i programistów zachęcamy do tworzenia treści, które są elastyczne, dzięki czemu interfejs użytkownika działa na ekranach o różnych rozmiarach i urządzeniach.

Jednak zawężono ją do rozmiarów telefonów komórkowych, tabletów i komputerów, a jej szerokość zależy w dużym stopniu od rozmiaru ekranu systemu iOS. Dzięki nowoczesnemu kodowi CSS i odnowionemu koncentrowaniu się na pierwotnym założeniu elastycznego projektowania strony możemy przywrócić stonowany wygląd z powrotem w ciekawych witrynach.

Elastyczne projektowanie witryn obejmuje 3 elementy techniczne:

  • Siatki elastyczne
  • Elastyczne multimedia
  • Zapytania o multimedia

Ethan dochodzi do wniosku, że te wymagania techniczne to za mało, bo przyszły rozwój wymaga też innego sposobu myślenia.

Mit dotyczący użytkowników urządzeń mobilnych

W początkowej fazie projektowania stron responsywnych założeniem było ułatwienie projektowania stron. Na przykład małe reklamy były przeznaczone na telefony – szerokość 320 pikseli, średnia – na tablety, szerokość 1024 pikseli i większe niż na komputery. Małe ekrany miały możliwości dotykowe, a duże – nie. Użytkownicy telefonów byli w pośpiechu i rozproszeni, dlatego potrzebowali „łatwego” korzystania z urządzenia.

Nic z tego nie jest prawda. Są to mity związane z urządzeniami mobilnymi ugruntowane przy założeniu, że potrzeby użytkownika różnią się zasadniczo wyłącznie od rozmiaru ekranu lub typu urządzenia. Nie wymaga to kontroli.

Weźmy na przykład progresywną aplikację internetową PWA sieci społecznościowej, którą możesz już dziś zainstalować na urządzeniach mobilnych i komputerach. Na komputerach wielu użytkowników może w trakcie pracy wyświetlać wąskie okno z kanałem po jednej stronie ekranu. Zakłada, że korzysta z urządzenia mobilnego z powodu dostępnej szerokości.

Świat PWA, który nie jest dostępny w przeglądarce, nakłada też nowe wyzwania w świecie elastycznego projektowania stron, takie jak tryb mini i praca na składanych urządzeniach.

Tryb mini

Okno PWA zainstalowanej na komputerze może być bardzo małe, czyli mniejsze niż okno przeglądarki, a mniej niż widoczne na urządzeniu mobilnym. To nowość w internecie: obsługujemy tryb mini, okno o wielkości nawet 200 x 100 pikseli CSS.

Tworząc PWA, warto zastanowić się, co możesz zaoferować w trybie mini. Jest to możliwe dzięki responsywnemu projektowaniu witryn, np. przycisku sterowania odtwarzaczem, informacji na pulpicie lub szybkich działań.

Na komputerach PWA można wyświetlać w oknie mniejszym niż najmniejsze okno, jakie kiedykolwiek powstały dla tej przeglądarki. To nowy punkt przerwania dla elastycznego projektowania witryn: tryb mini.

Urządzenia składane i hybrydowe

Urządzenia składane i hybrydowe są też popularne w tych dniach:

  • Małe telefony z tradycyjną obudową.
  • Urządzenia składane, które mogą działać jako telefony i tablety.
  • Laptopy, które można przekształcić w tablety.
  • Tablety, które mogą działać jako laptopy z klawiaturą i trackpadem.
  • Następnie telefon można przekonwertować na komputer stacjonarny za pomocą koncentratora.

Chociaż wyzwanie dotyczy każdej witryny, dzięki progresywnej aplikacji internetowej to Ty kontrolujesz okno, w którym instaluje się aplikacja. Dlatego Twój projekt powinien reagować na zdarzenia i zapewniać najlepsze wrażenia w każdym kontekście.

Wszystko najpierw

Od czego jednak zacząć? Najpierw treści na urządzeniach mobilnych, a najważniejsze treści offline? Co stanowi projekt z myślą o elastyczności internetu? Tak, wszystko najpierw. Termin najpierw mobilność jest interpretowany na wiele sposobów od czasu, gdy Luke Wroblewski stworzył go w 2009 roku: od emulacji UI i wzorców UX w internecie po tworzenie aplikacji mobilnych, a następnie tworzenie aplikacji internetowych po to, by używać zapytań o multimedia o małej szerokości i wykonywać codzienne czynności. Jej pierwotny cel jest jednak następujący: urządzenia mobilne zmuszają do koncentracji. Jak powiedział Łukasz:

W przypadku urządzeń mobilnych zespoły programistów muszą skupiać się tylko na najważniejszych danych i działaniach w aplikacji. Na ekranie o rozdzielczości 320 x 480 pikseli po prostu nie ma miejsca na zbędne elementy. Trzeba określić priorytety. Projektowanie Mobile First tworzy więc środowisko skupiające się na najważniejszych zadaniach, które użytkownicy chcą wykonać, bez zbędnych elementów interfejsu i bałaganu, które zaśmiecają współczesne strony internetowe dostępne na komputerach. Zapewni to wygodę użytkownikom i korzystne dla firmy.

Łukasz Wroblewski

Skup się w każdym widoku witryny tylko na najważniejszych zadaniach, które użytkownik chce tam wykonać, i nie dodawaj więcej szczegółów do pomysłu tylko dlatego, że ma on więcej miejsca na ekranie.

Druga zasada jest związana z elastycznym projektowaniem witryn, czyli „gradient różnych doświadczeń”. Pojedyncze, identyczne wrażenia i perfekcyjne wrażenia użytkownika nie powinny być celem Twojej pracy. W każdym przypadku jest to niemożliwe.

Zamiast myśleć o korzystaniu z sieci jak o stałym rzeczie, potraktuj je jako zestaw rekomendacji, które urządzenie użytkownika będzie wykorzystać, aby jak najlepiej dostosować go do bieżącego kontekstu. Aby było to możliwe, należy przyjąć stopniowe ulepszanie.

Stopniowe ulepszanie

Progresywne ulepszanie to wzorzec, który pozwala nam pisać kod, który działa wszędzie, począwszy od standardowego kodu HTML, CSS i JavaScript, aż po dodanie do niego warstw możliwości z odpowiednimi działaniami zastępczymi, gdy interfejs API jest niedostępny.

Co robisz na swoim kanale? Wykrywanie cech to wzorzec, który polega na przeprowadzaniu testu, aby uzyskać pomoc, i reagowaniu na podstawie wyników testu. W tym celu można użyć kilku wbudowanych narzędzi i metod.

Korzystając z elementu @supports, sprawdź, czy przeglądarka obsługuje funkcję CSS, i na podstawie wyniku zastosuj reguły. Dotyczy to zarówno właściwości, jak i wartości CSS. Jeśli właściwość jest obsługiwana, a wartość nie, wystąpi błąd, podobnie jak nieobsługiwana właściwość. Kod JavaScript może uzyskać dostęp do tej strony w narzędziu CSSSupportsRule.

Większość nowych funkcji platformy internetowej jest dołączona do istniejących obiektów, więc „feature” w wykrywaniu stylu obiektu działa dobrze w języku JavaScript, podobnie jak inne podobne wyszukiwania, takie jak sprawdzanie właściwości lub metod elementów.

Aby przesłać nowoczesny kod JavaScript, możesz użyć wzorca module/nomodule, aby udostępnić bardziej zaawansowane funkcje przy mniejszym ładunku w bardziej nowoczesnych przeglądarkach i umożliwić korzystanie ze starszych przeglądarek. Tym plusem jest zapewnienie nowych podstawowych funkcji JavaScript, takich jak obietnice, klasy, funkcje strzałek oraz const i let, które są dostępne w przeglądarkach obsługujących moduły ES.

Możesz nawet połączyć różne formy wykrywania cech, aby stworzyć ulepszony punkt odniesienia. Ta wymyślona przez zespół BBC News aplikacja nazywa się Cutting the Mustard i umożliwia zapewnienie wszystkim użytkownikom podstawowego doświadczenia, a dopiero po osiągnięciu konkretnego poziomu wykrywanych funkcji.

Unikanie wykrywania urządzenia

Zalecamy bezpośrednie testowanie pod kątem obsługi funkcji, zamiast zakładać pomoc na podstawie ciągu znaków User-Agent.

Ciągi znaków klienta użytkownika nigdy nie były w pełni wiarygodne. Opierają się na niemal doskonałej wiedzy na temat każdej przeglądarki, systemu operacyjnego i urządzenia, co pozwala „zgadnąć”. Nawet wtedy są one narażone na podszywania się pod użytkowników (na przykład przekierowania do witryn na komputery w przeglądarkach mobilnych są często tak samo proste, jak podszywanie się pod ciąg znaków klienta użytkownika na komputerze).

Poza tym przeglądarki pracują nad zablokowaniem ciągów znaków klienta użytkownika, a ciągi znaków klienta użytkownika na potrzeby wykrywania funkcji są specjalnie wymieniane jako powód wycofania, przez co stają się one jeszcze bardziej zawodne niż wcześniej przy identyfikowaniu użytkownika i urządzenia.

Najpierw treść

Inna zasada projektowania witryn internetowych jest: zacznij od swojej treści. Na przykład pasek aktywności w czasie rzeczywistym z wykresem cen akcji jest zasadniczą tabelą przedstawiającą notowania giełdowe z ich cenami w danym okresie wraz z linkiem umożliwiającym odświeżenie strony.

Ten kod można następnie ulepszyć za pomocą JavaScriptu i pobierać żądania aktualizacji wartości tabeli w liczniku czasu lub wzbogacić go za pomocą gniazd, aby zapewnić aktualizacje push w czasie rzeczywistym. Można go ponownie ulepszyć, aby przedstawić na wykresie wyniki – na przykład przy użyciu CSS, SVG lub Canvas. Najważniejsze jest jednak od treści.

Wewnętrzny projekt

  • Komórki jako główny czynnik wpływający na wygodę użytkowników
  • Podkreślanie treści i podstawowych funkcji w procesie projektowania.
  • Stopniowo ulepszamy zaawansowane funkcje (tam, gdzie są dostępne).

Połączenie tych zasad tworzy coś nowego: wewnętrzny projekt. W wykładzie Projektowanie Intrinsic Układs Jen Simmons opowiada o korzystaniu z nowoczesnych narzędzi CSS, takich jak Siatka, Flexbox, układ przepływu i tryby pisania, do projektowania i tworzenia interfejsów użytkownika. Mówi:

Może się on okazać nieodłączną częścią naszych treści i projektu, który chcemy osiągnąć.

Jan Simmons

Ten nowy arkusz CSS pozwala projektantom odzyskać pewną kontrolę nad układem, zachowując przy tym zgodność z najnowszymi zasadami projektowania stron internetowych. Zamiast tworzyć stałe formularze na podstawie stałych rozmiarów ekranu, definiujesz reguły oparte na treści, według których działa układ. Aby to zrobić, możesz jednocześnie wykorzystać ich wrodzone właściwości, takie jak wielkość lub wielkość tekstu, rozmiar tekstu i dostępne miejsce. Pozwalają dostosować projekt do treści witryny, bez konieczności kontrolowania położenia poszczególnych pikseli.

Dzięki wbudowanym układom rozmowa o kontroli nad siecią tworzy koło, nadając jej definicję. Kontrola w internecie nie polega na wybieraniu urządzeń, rozmiarów, kolorów, czcionek czy układów ani możliwości poszczególnych użytkowników witryny. Kontrola w internecie polega na pisaniu reguł, których przeglądarka będzie używać do tworzenia treści wyświetlanych w przeglądarce i tworzenia ich unikalnych dla każdego użytkownika progresywnej aplikacji internetowej.

Wydajność sieci

Ostatnią, choć nie najmniej ważną podstawą dla naszej aplikacji PWA jest Wydajność w internecie. Wygoda użytkowników jest obowiązkowa, bo przyczyni się do zwiększenia liczby konwersji.

Wydajność witryny obejmuje kilka etapów:

  • Poznaj dostępne najważniejsze dane na temat użytkowników.
  • Wyznacz cele dla każdego rodzaju danych.
  • Monitoruj naszą progresywną aplikację internetową.
  • Ulepszaj nasze dane, stosując odpowiednie techniki i sprawdzone metody na stałe w kodzie lub na serwerze.
  • Mierz ponownie.
  • Zapewnij użytkownikom odpowiednie wrażenia podczas transmisji na żywo na podstawie kontekstu, w jakim się znajduje.

Obecnie mierzą one szybkość wyświetlania treści na ekranie, a także interaktywność witryny i wrażenia użytkowników.

Core Web Vitals

W ciągu ostatniej dekady używaliśmy różnych danych do pomiaru skuteczności stron internetowych. Obecnie zestaw zalecanych danych, zwanych podstawowymi wskaźnikami internetowymi, koncentruje się na 3 kluczowych obszarach wpływających na wydajność i wrażenia użytkowników:

Zestaw danych pochodzących z podstawowych wskaźników internetowych, które pokazują wyniki wydajności witryny.

Dzięki podstawowym wskaźnikom internetowym możesz szybko sprawdzić, jak dobrze lub źle oceniasz wydajność i wrażenia użytkowników Twojej aplikacji PWA.

Podstawy PWA

Ważne jest, aby Twoja aplikacja PWA miała solidne podstawy do responsywnego projektowania, projektowania w sposób mobilny i najważniejszego rozwiązania dla użytkowników oraz projektowania wewnętrznego i działania aplikacji.

Zasoby