Fundacje

Solidne podstawy

Solidne podstawy to podstawa tworzenia świetnych aplikacji PWA. Aby wdrożyć tę podstawę, musisz zaprojektować i stworzyć kod, uwzględniając ograniczenia sieci, stosując kilka zasad:

  • Ograniczyć koncentrację na urządzeniach mobilnych. Upewnij się, że każdy widok projektu skupia się tylko na najważniejszych treściach i interakcjach.
  • Podkreślaj treści i główne funkcje w procesie projektowania.
  • Stopniowe ulepszanie w razie potrzeby. Zacznij od utworzenia głównej treści i funkcji komponentu za pomocą najprostszych i najbardziej dostępnych narzędzi. Ułatwia dostęp. Następnie przetestuj funkcje zaawansowane, których chcesz użyć, i ulepszaj komponent za ich pomocą.
  • Zapewnij użytkownikom szybkie i wygodne wrażenia związane z przeglądaniem, skupiając się na wskaźnikach wydajności witryny z perspektywy użytkownika, pozyskiwaniu danych o użytkownikach i zwiększaniu wydajności dla wszystkich użytkowników, niezależnie od ich połączenia z internetem, typu danych wejściowych, procesora czy karty graficznej.

Stosując te zasady i ulepszając je za pomocą nowoczesnych wzorów i funkcji internetowych, możesz tworzyć świetne i szybkie rozwiązania z naprawdę charakterystycznym designem. Projekty, które korzystają z ograniczeń, a nie pikseli, pozwalają każdemu użytkownikowi na dostęp do Twoich treści i podstawowych funkcji w sposób najlepiej dopasowany do jego konkretnego kontekstu przeglądania.

Elastyczne projektowanie witryn

Od czasu opublikowania w 2010 r. przez Ethana Marcotte'a artykułu Responsive Web Design (responsywny projekt stron internetowych) projektanci i programiści są zachęcani do tworzenia elastycznych rozwiązań, czyli interfejsów, które działają na różnych rozmiarach ekranów i urządzeniach.

Z czasem jednak rozmiar reklamy skrócił się do rozmiarów telefonów komórkowych, tabletów i komputerów, a szerokość znacznie wzrosła w zależności od rozmiaru ekranu z iOS. Dzięki nowoczesnemu stylowi CSS i ponownym koncentrowaniu się na oryginalnym intencjach projektowania responsywnego możemy przywrócić tradycyjnie „swobodne” witryny.

Elastyczne projektowanie witryn wprowadza 3 elementy techniczne:

  • Siatka płynna
  • Elastyczne reklamy w mediach
  • Zapytania multimedialne

Ethan dochodzi do wniosku, że te wymagania techniczne nie wystarczą; aby iść naprzód, trzeba też zmienić sposób myślenia.

Mit o użytkownikach urządzeń mobilnych

Na początku stosowania projektowania responsywnego zakładano, że ułatwi to projektowanie stron. Na przykład małe wersje były przeznaczone na telefony i miały szerokość 320 pikseli, średnie wersje były przeznaczone na tablety i miały szerokość 1024 pikseli, a wszystko większe było przeznaczone na komputery. Małe ekrany miały funkcję dotykowego sterowania, a duże nie. Użytkownicy telefonów byli pospieszeni i rozproszeni, potrzebowali więc „lekkiego” układu.

To nieprawda. To mity na temat urządzeń mobilnych, które są utrwalane przez założenie, że potrzeby użytkowników różnią się zasadniczo w zależności od rozmiaru ekranu lub typu urządzenia. Nie wymaga to szczegółowej kontroli.

Weźmy na przykład progresywną aplikację internetową sieci społecznościowej, którą można zainstalować na urządzeniach mobilnych i komputerach. Podczas pracy na komputerze wielu użytkowników może mieć otwarte wąskie okno z kanałem po jednej stronie ekranu, a założenie, że korzystają z urządzenia mobilnego, ze względu na dostępną szerokość, byłoby błędne.

Świat aplikacji PWA, który wykracza poza kartę przeglądarki, wprowadza nowe wyzwania dla stron responsywnych, takie jak tryb mini czy obsługa składanych urządzeń.

Tryb zminimalizowany

W przypadku aplikacji internetowej na komputerze okno może być naprawdę małe – mniejsze niż okno przeglądarki i mniejsze niż widok na urządzeniu mobilnym. To coś nowego w internecie: możemy obsługiwać tryb mini, czyli okno o wymiarach nawet 200 x 100 pikseli CSS.

Podczas tworzenia aplikacji PWA warto zastanowić się, co można znaleźć w trybie zminimalizowanym, dzięki elastycznym projektowaniu witryn, np. przyciskom sterowania odtwarzaczem, informacjami na panelu czy skrótom.

Na komputerze aplikacja PWA może być renderowana w mniejszym oknie niż najmniejsze okno, jakie kiedykolwiek zaprojektowano dla przeglądarki. Dodaje nowy punkt przełamania dla elastycznego projektowania witryn: tryb mini.

Urządzenia składane i hybrydowe

W ostatnim czasie popularne stały się też składane i hybrydowe urządzenia:

  • Małe telefony w tradycyjnej obudowie.
  • składane urządzenia, które można używać jako telefony lub tablety;
  • laptopy, które można przekształcić w tablety;
  • Tablety, które mogą działać jak laptopy z klawiaturą i trackpadem.
  • Telefony można następnie przekonwertować na komputer przy użyciu centrali.

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

Wszystko na początku

Od czego jednak zacząć? Najpierw urządzenia mobilne, najpierw treści, najpierw offline? Która z nich jest najbardziej elastyczna? Odpowiedź brzmi: tak, najpierw wszystko. Pojęcie najważniejsze na urządzeniach mobilnych było interpretowane na wiele sposobów od czasu, gdy ukuł je Luke Wroblewski w 2009 roku: od emulacji wzorców UX i interfejsu użytkownika na poszczególnych platformach po tworzenie aplikacji mobilnych przed stworzeniem aplikacji internetowych, po po prostu zapytania o media o minimalnej szerokości i wywoływanie ich w ciągu dnia. Pierwotna intencja jest jednak taka: urządzenia mobilne zmuszają Cię do skupienia się na nich. Jak powiedział Luke:

Ze względu na specyfikę urządzeń mobilnych zespoły programistów muszą skupiać się tylko na najważniejszych danych i czynnościach w aplikacji. Na ekranie o wymiarach 320 x 480 pikseli po prostu nie ma miejsca na dodatkowe, niepotrzebne elementy. Musisz ustalić priorytety. Gdy zespół projektantów stosuje podejście „najpierw na urządzenia mobilne”, efektem jest interfejs skupiony na kluczowych zadaniach, które użytkownicy chcą wykonać, bez zbędnych elementów i elementów interfejsu, które zaśmiecają dzisiejsze witryny dostępne na komputerach. To dobre wrażenia użytkowników i korzystne dla firmy.

Luke Wroblewski

Skoncentruj się w każdym widoku witryny na podstawowych zadaniach, jakie chce wykonać użytkownik, i nie dodawaj do koncepcji dodatkowych elementów tylko dlatego, że użytkownik ma więcej miejsca na ekranie.

Druga zasada jest wskazana w elastycznym projektowaniu witryn, czyli „gradient różnych doświadczeń”. Nie stawiaj sobie za cel stworzenia identycznych, idealnych w każdym pikselu stron dla wszystkich użytkowników. Jest to niemożliwe.

Zamiast traktować przeglądanie stron jako coś stałego, pomyśl o nim jako o zestawie rekomendacji, których urządzenie użytkownika będzie używać do tworzenia najlepszego wrażenia w danym kontekście. Aby to osiągnąć, należy przyjąć stopniowe ulepszenie.

Stopniowe ulepszanie

Metoda stopniowego ulepszania to wzór, który pozwala nam pisać kod, który działa wszędzie, począwszy od standardowego kodu HTML, CSS i JavaScript, a skończywszy na dodawaniu warstw funkcji z odpowiednimi rozwiązaniami zastępczymi, gdy interfejs API jest niedostępny.

Jak poprawić? Wykrywanie funkcji to wzór, w którym przeprowadzasz test na obecność funkcji i działasz na podstawie wyników tego testu. Istnieje kilka wbudowanych narzędzi i metod na platformie internetowej, które pozwalają to robić.

Za pomocą funkcji @supports sprawdź, czy przeglądarka obsługuje daną funkcję CSS, i zastosuj reguły na podstawie wyniku. Dotyczy to zarówno właściwości, jak i wartości CSS. Jeśli właściwość jest obsługiwana, a wartość nie, tak samo jak nieobsługiwana właściwość zakończy się niepowodzeniem. Aby uzyskać do nich dostęp, kod JavaScript musi wejść na stronę CSSSupportsRule.

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

Aby wysyłać nowoczesny kod JavaScript, możesz skorzystać z wzorca module/nomodule, aby zapewnić bardziej zaawansowane funkcje z mniejszym ładunkiem dla nowszych przeglądarek i zastępczą obsługę starszych przeglądarek. Dodatkowo gwarantuje to nowy podstawowy zestaw funkcji JavaScript, takich jak obietnice, klasy, funkcje strzałki oraz const i let, które są dostępne w przeglądarkach obsługujących moduły ES.

Możesz nawet łączyć różne formy wykrywania funkcji, aby utworzyć ulepszony punkt odniesienia. Ta metoda, nazwana przez zespół BBC News „Cutting the Mustard”, umożliwia udostępnienie wszystkim podstawowej wersji funkcji i rozpoczęcie jej ulepszania dopiero po osiągnięciu określonego progu wykrywania funkcji.

Unikanie wykrywania urządzenia

Zamiast opierać się na ciągu znaków User-Agent, lepiej przeprowadzać testy pod kątem obsługi tej funkcji.

Ciągi znaków klienta użytkownika nigdy nie były w pełni wiarygodne. Aby „odgadnąć” poprawną odpowiedź, muszą mieć niemal idealną wiedzę o każdej kombinacji przeglądarki, systemu operacyjnego i urządzenia. Nawet wtedy są podatne na podszywanie się pod innych użytkowników. Na przykład przekierowania na stronę na komputery w przeglądarkach mobilnych często sprowadzają się do podszywania ciągu znaków klienta użytkownika na komputerze.

Ponadto przeglądarki pracują nad zamrożeniem ciągów danych User-Agent, a ciągi danych klienta użytkownika służące do wykrywania funkcji są wymienione jako powód wycofania, co czyni je jeszcze mniej wiarygodnymi niż wcześniej w identyfikacji użytkownika i urządzenia.

Treści na pierwszym miejscu

Kolejną zasadą projektowania stron internetowych jest to, aby najpierw zadbać o treści. Na przykład ticker akcji w czasie rzeczywistym z wykresem cen akcji to w podstawie tabela akcji z ich ceną w danym czasie, niekiedy z linkiem do odświeżenia strony.

Można to następnie rozszerzyć o JavaScript i żądania pobierania, aby aktualizować wartości tabeli według harmonogramu lub z użyciem gniazd, aby zapewniać aktualizacje w czasie rzeczywistym. Można go jeszcze raz ulepszyć, aby przedstawić wyniki na wykresie, np. za pomocą CSS, SVG lub Canvas. Ale podstawą jest treść.

Projekt wewnętrzny

  • Urządzenia mobilne jako ograniczenie w zakresie wrażeń użytkowników.
  • W procesie projektowania należy zwracać uwagę na treści i podstawowe funkcje.
  • Stopniowe ulepszanie o zaawansowane funkcje (tam, gdzie są dostępne).

Połączenie tych zasad da nam coś nowego: projektowanie wbudowane. W swoim wystąpieniu Projektowanie układów wewnętrznych Jen Simmons opowiada o korzystaniu z nowoczesnych narzędzi CSS, takich jak Grid, Flexbox, układ przepływowy i tryby pisania, do projektowania i tworzenia interfejsów użytkownika. Mówi, że korzystając z tych narzędzi:

Możesz dostosować układ do naszych treści i wybranego przez nas projektu.

Jen Simmons

Nowy CSS pozwala projektantom odzyskać pewną kontrolę nad układem, ale w sposób zgodny z najnowszymi zasadami projektowania stron internetowych. Zamiast tworzyć stałe formularze oparte na stałych rozmiarach ekranu, definiujesz reguły oparte na treści, które określają układ, korzystając z właściwości treści, takich jak rozmiar tekstu i dostępna przestrzeń. Umożliwiają one realizację projektu, który będzie oddziaływać na treści bez konieczności kontrolowania położenia każdego piksela.

Właściwe układy prowadzą do pełnego sfinalizowania dyskusji na temat kontroli w internecie. Kontrola w internecie nie polega na dyktowaniu urządzeń, rozmiarów, kolorów, czcionek, układów i funkcji poszczególnych użytkowników witryny. Kontrola w internecie polega na tworzeniu reguł, których przeglądarka będzie używać do tworzenia interfejsu, tworząc go w wyjątkowy sposób dla każdego użytkownika w Twojej progresywnej aplikacji internetowej.

Wydajność w internecie

Ostatnim, ale nie mniej ważnym elementem naszych aplikacji webowych jest wydajność. Zapewnienie użytkownikom wrażeń na najwyższym poziomie jest obowiązkowe. Pomoże to zwiększyć liczbę konwersji na wszystkie możliwe sposoby.

Proces działania strony internetowej składa się z kilku etapów:

  • Poznaj kluczowe dane dotyczące użytkowników.
  • Ustaw cele dla każdego wskaźnika.
  • Zmierz skuteczność naszej aplikacji internetowej.
  • ulepszać nasze dane, stosując statycznie techniki i sprawdzone metody w kodzie lub na serwerze.
  • Pomiar ponownie.
  • Ulepszaj usługi na podstawie kontekstu każdego użytkownika.

Dane o wydajności witryny pozwalają obecnie mierzyć nie tylko szybkość wyświetlania treści na ekranie, ale też 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 rekomendowanych danych, czyli podstawowe wskaźniki internetowe, skupia się na 3 kluczowych obszarach wpływających na wydajność i wrażenia użytkownika:

Zestaw danych z podstawowych wskaźników internetowych, który pokazuje wyniki wydajności witryny.

Dzięki podstawowym wskaźnikom internetowym możesz na pierwszy rzut oka sprawdzić, jak dobra lub zła jest Twoja aplikacja PWA pod względem wydajności i wrażeń użytkownika.

Podstawy PWA

Ważne jest, aby Twoja PWA miała solidne podstawy w elastycznym projektowaniu, projektowaniu z uwzględnieniem urządzeń mobilnych i wszystkich innych aspektów, projektowaniu z uwzględnieniem specyfikicznego charakteru aplikacji oraz wydajności w internecie jako podstawy wrażeń wszystkich użytkowników.

Zasoby