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.
Jeśli będziesz przestrzegać tych zasad i wzbogacać witrynę o nowoczesne wzorce i funkcje sieciowe, możesz tworzyć świetne i szybkie projekty, korzystając z naprawdę wrodzonych wzorów. Reklamy opierają się na ograniczeniach, a nie na pikselach, przez co każdy użytkownik ma dostęp do treści i głównych funkcji w sposób najlepiej dostosowany do jego 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ęcano do tworzenia rozwiązań, które są elastyczne, dzięki czemu interfejs użytkownika działa na ekranach o różnych rozmiarach i urządzeniach.
Jednak po skróceniu do rozmiarów komórek, tabletów i komputerów szerokość jego formatu zależy w dużym stopniu od rozmiaru ekranu 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, a dalsza droga wymaga 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, średnie wymiary – na tablety, szerokość 1024 pikseli i większe niż na komputerach. 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. To mity związane z urządzeniami mobilnymi, którym towarzyszy założenie, ż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. Załóżmy, że korzystają oni z komórki 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 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, 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 i perfekcyjne wrażenia użytkownika nie powinny być celem Twojej pracy. Jest to praktycznie niemożliwe.
Zamiast myśleć o korzystaniu z sieci jak o stałym rzeczie, potraktuj je jako zestaw rekomendacji, które urządzenie będzie stosować do stworzenia jak najlepszych treści w obecnym kontekście. 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 ma dostęp do witryny CSSSupportsRule
Większość nowych funkcji platformy internetowej jest dołączona do istniejących obiektów, więc wykrywanie stylu obiektu „feature” 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 modułu/nomodule, aby udostępnić bardziej zaawansowane funkcje przy mniejszym ładunku bardziej nowoczesnych przeglądarek i zastępczą obsługę 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 znajomości 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 blokowaniem 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 niezbędna, bo pozwoli na uzyskanie większej 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, jak szybko Twoje treści wyświetlają się na ekranie, ale także jak interaktywna jest Twoja witryna i jak użytkownicy postrzegają jej zawartość.
wskaźniki internetowe
W ciągu ostatniej dekady używaliśmy różnych danych do pomiaru skuteczności stron internetowych. Zestaw zalecanych danych jest obecnie grupowany w ramach projektu Wskaźniki internetowe. Wskaźniki internetowe koncentrują się na 3 kluczowych obszarach wpływających na wydajność i postrzeganie treści internetowych:
- Wczytuję
- Interaktywna
- Stabilność wizualna
Dzięki podstawowym wskaźnikom internetowym możesz szybko sprawdzić, jak dobrze lub źle oceniasz wydajność aplikacji PWA pod względem wydajności internetowej i wygody użytkowników.
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.