Spis treści:
- Rys historii, czyli gdzie jest flash?
- Dlaczego Mobile First Design jest tak ważny?
- Mobile first vs Desktop first – czyli „najpierw mobile” jest lepsze
- Desktop first – stopniowa degradacja projektu
- Mobile first – progresywne ulepszanie projektu
- Jak projektować zgodnie z nowoczesnym Mobile Design?
- Jak uzyskać 100/100 w Google PageSpeed i web.dev?
Rys historii, czyli gdzie jest flash?
Pamiętam jak w Polsce jeszcze w połowie pierwszej dekady XXI wieku królowały pięknie zdobione strony, z zaawansowanymi animacjami flashowymi oraz pohukującymi sowami na paskach menu. W tym samym czasie na zachodzie oraz w USA prym wiodły lekkie, minimalistyczne strony, które w prosty i szybki sposób stawały się jakkolwiek skalowalne pod ówczesne urządzenia mobilne. Sama waga takiej strony oraz poziom skomplikowania pozwalał na to, że telefony sprzed 15 lat były w stanie takie witryny obsłużyć. Zaraz potem na dobre zapanowała ideologia RWD (Responsive Web Design, czyli elastyczne lub responsywne strony internetowe). Z kolei flash, który okazał się technologią mocno podatną na ataki, okryty w hańbie odszedł do lamusa. Osobiście go nie żałuję.
Dlaczego Mobile First Design jest tak ważny?
Niektórzy prawdopodobnie się zastanawiają, co miał na celu powyższy wstęp oraz co ma flash do idei mobile first design? Podobnie jak dobrych kilka lat temu tak teraz firmy tworzące aplikacje oraz strony internetowe mają dylemat. Mogą pozostać wiernym swoim nawykom i opanowanym czasami do perfekcji technologiom lub wywrócić wszystko do góry nogami z podejścia Desktop First na Mobile First. Z punktu widzenia biznesowego, krótkofalowego – naturalną opcją jest nr 1. Chciałbym tylko Wam uświadomić, co stało się z firmami, które dobrych kilka lat temu pozostały przy swoim ukochanym flashu, nie opanowując tego, co nowe. Tak, macie rację – już ich nie ma. Jest to naturalna kolej rzeczy, gdzie w myśl za nową technologią pojawiają się na rynku nowi gracze zastępując poprzednich, których oferta przestaje być aktualna i atrakcyjna.
W powyższym przykładzie nawiązałem do wszelkich agencji interaktywnych oraz mniejszych firm czy też freelancerów, którzy projektują strony internetowe. Tyczy się to jednak wszystkich innych działalności i organizacji, które mają swoje „wizytówki” w Internecie. Tak prędko, jak strony we flashu przestały być sprzedażowe (o ile kiedykolwiek były), tak szybko Wasze strony stworzone z myślą o użytkownikach stacjonarnych przestaną realizować swój cel. Zamiast do 100% odbiorców, będziemy trafiać jedynie do max. 30% (a w niektórych branżach od kilku do kilkunastu procent). Prawdopodobnie nikt nie może pozwolić sobie na takie straty.
Mobile first vs Desktop first – czyli „najpierw mobile” jest lepsze
W powyższym nagłówku ogłosiłem od razu wynik naszego starcia, mimo to zachęcam jednak do nieuwierzenia mi na słowo, a zapoznania się konkretnymi argumentami potwierdzającymi to stwierdzenie.
Desktop first – stopniowa degradacja projektu
Technika Desktop first (Graceful degradation) polega na stworzeniu idealnej wersji projektu dla urządzenia stacjonarnego, najlepiej z rozdzielczością HD, ponieważ posiadając największy ekran wykorzystamy potencjał serwisu w 100%. Następnie „idąc w dół” po rozdzielczościach i urządzeniach pozbywamy się niemieszczących elementów oraz ciężkich skryptów. O ile jeszcze w jakiś sposób usuwamy je całkowicie, nie jest źle. Gorzej, jeśli tylko je ukrywamy, a dzieje się tak w większości przypadków.
W efekcie otwierając stronę na najmniejszym z urządzeń o najniższej rozdzielczości pobieramy stronę taką, jaka jest przewidziana dla komputera stacjonarnego z rozdzielczością HD oraz masę dodatkowych linijek kodu, które modyfikują jej wygląd, aby poprawnie wyświetlała się na naszych telefonach. Nie trudno się domyślić, że „coś tu jest nie tak”. W efekcie wersja mobilna naszej elastycznej strony WWW to swego rodzaju wypadkowa całości, która musi istnieć w obecnych czasach, ale nie zasługuje na specjalne traktowanie i dodatkową uwagę.
Mobile first – progresywne ulepszanie projektu
Podejście Mobile first (Progressive Enhancement) oznacza rozpoczęcie projektowania od najmniejszego urządzenia oraz najniższej rozdzielczości. Tam, zarówno designer jak i wdrożeniowcy, skupiają się na osiągnięciu idealnego projektu na telefon pod względem UX oraz specyfiki i możliwości urządzenia. Doświadczenia użytkownika muszą być tutaj w pełni zaspokojone. Musimy stale szukać jak najprostszych metod oraz rozwiązań, nie zapominając o pewnych ograniczeniach. Następnie, wraz ze wzrostem rozdzielczości oraz typów urządzeń (przez większe smartfony, tablety, laptopy czy też urządzenia stacjonarne) stale dokładamy nowe funkcjonalności oraz rozbudowujemy istniejące układy. Dzięki temu możemy skorzystać z bardziej zaawansowanych skryptów dla komputerów stacjonarnych bez szkody dla telefonów. Sam plik CSS posiada najmniejszą wagę dla telefonów, a największą dla desktopów, co jest teraz logiczne i zrozumiałe. W poprzednim przypadku to telefony pobierały największy plik CSS – sami przyznacie, że nieco to dziwne.
Podsumowując oba podejścia, Mobile First Design jest lepsze, ponieważ:
- Uzyskujemy bardziej dopracowaną wersję mobilną, z której korzysta większy procent klientów.
- Wciąż kreujemy w pełni funkcjonalną wersję desktop, z adekwatnymi skryptami i układami.
- Waga plików CSS jest większa dla urządzeń stacjonarnych, niż dla telefonów, co jest wskazane z punktu widzenia charakterystyki urządzeń.
- Na mobilnej wersji nie stosujemy ukrytych elementów, z których nie korzystamy zwiększając niepotrzebnie wagę strony.
- Wersja mobilna naszej strony jest znacznie szybsza, co ma przełożenie na większy wskaźnik konwersji.
Jak projektować zgodnie z nowoczesnym Mobile Design?
Przede wszystkim musimy rozpocząć nasz projekt od ekranu smartfonu, a nie urządzenia stacjonarnego. Wielu firmom wydaje się, że wystarczy stworzyć po prostu dwa projekty i dzięki temu mają już strony w duchu mobile first design. Powinniśmy podejść do projektu na telefon jak do całkowicie nowego, nie zwracając póki co uwagi na desktop.
Animowane elementy 3D
Coraz bardziej popularne na telefonach stają się elementy 3D, które są wprawione w ruch. Niektórzy stosują ruch dla niektórych części projektu jak karty czy kontenery, z kolei inni idą jeszcze dalej i umieszczają na stronach całe obiekty 3D.
Personalizacja
Każdy użytkownik smartfona posługując się nim czuje, że należy do niego. Większość elementów posiada spersonalizowanych pod siebie. Dlaczego więc wchodząc na stronę nie miałby się też tak czuć? Dajmy użytkownikowi możliwość ustawienia pewnych widoków oraz przywitajmy go – niech wie, że jest u siebie. Dodatkowym atutem jest opcja trybu nocnego (dark mode).
Interakcje bez przycisków
Standardowe przyciski powoli odchodzą do lamusa. Użytkownicy telefonów nauczeni są korzystać z ruchów (np. swipe) i jest to dla nich obecnie bardziej intuicyjne i szybsze, niż klikanie w przycisk. Zarówno w aplikacjach jak i w wersjach mobilnych strony stosuje się coraz więcej interakcji, które nie wymagają klikania w przyciski.
Wysoka czytelność
Projektując niezapomniany design dla jakiegokolwiek urządzenia nie możemy zapominać o tym, aby był czytelny i przejrzysty. Żadna strona nie będzie spełniała swojego założenia, jeśli użytkownicy będą się na niej gubić i ją opuszczać. Musimy zastosować odpowiedni kontrast kolorystyczny oraz proporcję nagłówków do treści.
Zabawa z orientacją urządzenia
O ile ekranu komputera (w większości) nie jesteśmy w stanie szybko obrócić, o tyle z telefonem czy tabletem nie ma takiego problemu. Nagle z rozdzielczości horyzontalnej tworzy nam się wertykalna, a co za tym idzie zmienia się układ projektu. Czemu nie wykorzystać tego ruchu dla dodania nieco animacji i interakcji?
Podzielony ekran
Często stosowany zabieg głównie w aplikacjach natywnych, powoli jednak przechodzi jako trend do stron na telefony. Podzielony ekran (ang. split screen) może posłużyć do prezentowania dwóch różnych danych lub do animacji zjazdu z headera (który zgrabnie chowa się pod nową kartą).
Wyraziste zdjęcia
Nic się nie zmieniło – klienci wciąż kupują wzrokiem. Na telefonie musimy zadbać o odpowiednią jakość zdjęć, które będą dodatkiem dla całej strony, a nie jej ciężarem. Nie mówimy tutaj tylko o jakości, która pozwoli uniknąć pikselozy, ale przede wszystkim o wartości merytorycznej tych zdjęć.
Jak uzyskać 100/100 w Google PageSpeed i web.dev?
Bez stworzenia strony w technice Mobile First możemy zapomnieć o wysokich wynikach w Google PageSpeed Insights, web.dev czy też na innych podobnych platformach. W pierwszej kolejności nasza strona sprawdzana jest na urządzeniu mobilnym. Jeśli nie jest ona odpowiednio stworzona i zoptymalizowana dostaniemy słabe wyniki przy:
- Pierwsze wyrenderowanie treści
- Czas do pełnej interaktywności
- Pierwsze wyrenderowanie elementu znaczącego
- Zminimalizuj aktywność głównego wątku
- Usunięcie nieużywanego CSS (Remove unused CSS)
Możemy próbować temu w jakiś sposób zaradzić, ale należy mieć świadomość, ze jeśli nasza strona została stworzona w technice Desktop First jej wersja mobilna nigdy nie będzie lekka i odpowiednio szybka.
Inaczej rzecz ma się z pozostałymi elementami, takimi jak:
- Wyświetlaj obrazy w formatach nowej generacji
- Użyj efektywnego kodowania obrazów
- Zapewnij widoczność tekstu podczas ładowania czcionek internetowych
- Wyświetlaj zasoby statyczne, stosując efektywne zasady pamięci podręcznej
Tutaj jesteśmy w stanie szybko pozbyć się problemu.
Nowy format grafik .webp
Dla wszelkich obrazków wystarczy stosować nowoczesny format grafik .webp. Przy wyświetleniu w kodzie należy zadbać o obsługę starszych przeglądarek:
<picture>
<source srcset="img/obrazek.webp" type="image/webp">
<source srcset="img/obrazek.jpg" type="image/jpeg">
<img src="img/obrazek.jpg" alt="tekst alternatywny">
</picture>
Widoczność czcionek internetowych font-display:swap
Wykorzystując wszelkie czcionki internetowe powinniśmy przy ich deklaracji zmienić domyślny sposób ich wyświetlania z auto na swap. Obecnie kopiując kod czcionki z Google Fonts mamy sprawę załatawioną:
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
</style>
Wyświetlanie zasobów statycznych i pamięć podręczną
Google chce, aby wszelkie zasoby statyczne były wyświetlane stosując efektywne zasady pamięci podręcznej. Sugerowany czas dla takich zasobów to 1 rok (60 sekund * 60 minut * 24 godzin * 365.25 dni = 31557600 sekund)
Cache-Control: max-age=31557600
Po poprawie powyższych elementów nasz wynik niewątpliwie powinien wzrosnąć. Aby jednak osiągnąć wynik 100%, wymagany jest szereg innych zabiegów, jak chociażby poprawa kontrastu dla elementów czy też stosowanie najnowszych bibliotek JavaScript. Szczegółami zajmiemy się w przyszłym artykule.
Jeśli jesteś zainteresowany budową strony internetowej w duchu Mobile First Design i chciałbyś uzyskać 100/100 w Google PageSpeed Insights i web.dev zapraszam do kontaktu z nami.
Sprawdź też, jak tworzyć nowoczesne strony internetowe.
