Projektowanie responsywne z myślą o treści – nowa generacja web designu
Od desktop-first do mobile-first
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ę.
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ć wiernymi 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.
Podejście desktop-first vs mobile-first
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.
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ę.
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ż:
- 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.
Nowe trendy w mobile-first design
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. 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.
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.
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.
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? 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ą.
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ęć.
Optymalizacja pod mobile
Bez stworzenia strony w technice Mobile First, możemy zapomnieć o wysokich wynikach w Google PageSpeed Insights, webdev 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. Możemy próbować temu w jakiś sposób zaradzić, ale należy mieć świadomość, że 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 obrazki, czcionki czy zasoby statyczne. Tutaj jesteśmy w stanie szybko pozbyć się problemu. Dla wszelkich obrazków wystarczy stosować nowoczesny format grafik webp. Przy wyświetleniu w kodzie należy zadbać o obsługę starszych przeglądarek. 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łatwioną. 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.
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 webdev, zapraszam do kontaktu z nami. Sprawdź też, jak tworzyć nowoczesne strony internetowe.
