Responsywne strony internetowe – mobile first a użytkownik

Choć roboty Google malowały wiele francuskich dziewczyn, upodobały sobie te widoczne na ekranach smartfonów. Historia lubi się powtarzać: nie pozwól więc, by Twoja strona zatonęła. Rzecz jasna, w gąszczu konkurencji! Pomogą Ci w tym responsywne strony internetowe, zahaczające bezpośrednio o ideę mobile first.

Mobile first – o co tyle hałasu i co ma do tego Responsive Web Design?

Zdecydowana większość ruchu w Internecie w roku 2023 pochodziła z urządzeń mobilnych. Trudno się temu dziwić! Społeczeństwo nie rozstaje się ze smartfonami, przewijając rolki i posty w łóżku, na kanapie, a nawet: tam, gdzie król chodzi piechotą. Google zwróciło na to uwagę już dawno temu i podjęło decyzję o priorytetowym indeksowaniu wersji stron przeglądanych na urządzeniach mobilnych, takich jak smartfony. Nierzadko znajdują się na znacznie wyższej pozycji w wynikach wyszukiwania od ich desktopowych odpowiedników.

Niestety: gdzie mocniejsze preferencje, tam i wyższe wymagania. Google, podobnie jak Leonardio DiCaprio, nie rzuci się do zimnego Atlantyku za byle czym. Mobilna zawartość stron jest indeksowana lepiej wyłącznie wtedy, jeśli faktycznie jest ją za co indeksować.

Z pomocą przychodzi projektowanie responsywne strony – czyli inaczej RWD (Responsive Web Design). Idea jest banalnie prosta: sztuczki zawarte w kodzie przekształcają witrynę w zależności od rozdzielczości wyświetlacza. Dzięki temu, ta sama strona www może wyświetlać się w różny sposób na telefonie z 2015 roku, najnowszym iPhonie i panoramicznym monitorze 44.5" dla graczy CS-a.

Strony www mobilne a responsywne strony – na czym polega różnica?

No właśnie: mobilna wersja strony internetowej. To trochę słowo-wytrych – kalka z angielskiego, która w pożądanym przez nas kontekście powinna brzmieć raczej właśnie „wersje responsywne”. Ale właściwie czym jest responsywność i czym różni się od mobilnej wersji strony?

Klasyczna strona mobilna, pożądana jeszcze kilka lat temu, to całkowicie osobna witryna z odrębnym adresem URL, występująca nierzadko w wersji lite. Obecnie nie korzystamy już przecież z Javy, a słowo „klapka” uczestnikom Familiady skojarzy się prędzej z sedesem, niż ze starą Nokią. Responsywne strony – czyli właśnie te, które priorytezuje Google – to nic innego, jak całkowicie identyczne pod kątem zawartości wersje stron, osadzone na tym samym adresie. 

I tutaj pies pogrzebany. To, że treść jest identyczna, a elementy strony skalują się do sprzętów o różnych proporcjach i rozdzielczościach wyświetlacza nie wystarcza. Identyczna treść i identyczne obrazy muszą pasować jeszcze do stylu przyswajania treści nowoczesnych internautów. Tak, dokładnie tych, którzy przewijają filmik po zobaczeniu ułamka sekundy

Responsywne strony internetowe: czego oczy nie widzą, tego sercu nie żal

Smutna prawda: Twój klient najzwyczajniej Cię oleje, jeśli w pierwszych sekundach nie odnajdzie informacji, których pożąda. Ważne jest więc nie tylko ograniczanie ścian tekstu, ale również rozsądne priorytetyzowanie informacji. W ramach responsywności warto więc zastanowić się nad dopasowaniem treści strony do ścieżki sprzedażowej. Dokładnie tak, by scrollując, użytkownik przeszedł od pierwotnej myśli „a na ch… mi to”, poprzez zainteresowanie, aż do zakupu. Więcej informacji na ten temat znajdziesz w moim artykule: LANDING PAGE (STRONA SPRZEDAŻOWA) – JAK POWINNA WYGLĄDAĆ?

Pamiętaj, że użytkownik telefonu scrolluje nie tylko palcami, ale również: wzrokiem. Określane jest to mianem skanowania. Twój potencjalny klient nie czyta zdań od deski do deski. Zwraca uwagę wyłącznie na najbardziej atrakcyjne hasła i wypowiedzi odnoszące się bezpośrednio do jego realiów. Liczy się więc jakość, a nie ilość. 

Określenia „najlepszy”, „dostosowany do potrzeb” czy „spełniający oczekiwania nawet najbardziej wymagających klientów” nie pomogą. Użytkownik widział je już tysiąc razy. Jeśli chcesz przykuć jego uwagę, konieczne jest odniesienie się do jego realnych potrzeb, oczekiwań i problemów.

Ważne jest również dopasowanie treści strony do tego, co chce osiągnąć osoba, która odwiedza Cię z poziomu smartfona. W przypadku stron sprzedających online sprawa wydaje się prosta - dobry język sprzedażowy potrafi zdziałać cuda.

Dodatkowa wersja strony internetowej: dla kogo?

Co, jeśli wykonujesz swoją pracę na miejscu, osobiście przyjmując klienta? Na landing page powinieneś skupić się przede wszystkim na informacjach dotyczących lokalizacji (wraz z odnośnikiem do nawigacji), godzin otwarcia i skróconej oferty. Tego typu witryny odwiedzane są bowiem najczęściej przez osoby, które planują trasę… Lub już są w drodze (przecież nic nie umila stania w korku tak, jak googlowanie!). Musisz sprawić, by podróż w Twoją stronę zakończyła się… zarobkiem!

Co z firmami, które działają zarówno na zasadach sprzedaży internetowej, jak i na miejscu? W tym przypadku najskuteczniejsze okaże się przygotowanie dwóch odrębnych landing page, dostosowanych do poszczególnych segmentów klientów.

RWD jest jak sąsiadka, która obserwuje cię z okienka

Jak już wiesz, responsywność wiążę się bezpośrednio z przystępnością treści. Wydaje Ci się to zapewne prostą sprawą: SEOwiec, słowa kluczowe, trochę klepanki w klawiaturę i gotowe. W rzeczywistości to przeżytek. Sprawa pozycjonowania SEO w tym rozumieniu może stanowić wyłącznie dodatek do angażujących, merytorycznych treści i doskonałego marketingu dopasowanego do persony bądź segmentu. Zdecydowanie bardziej korzystne jest w tym przypadku SXO, czyli połączenie SEO i user experience.

Strona nie będzie atrakcyjna, jeśli treści pobudzają roboty (czy raczej: ich stare, nieaktualne algorytmy), ale są zupełnie nieprzyjazne dla użytkowników urządzeń mobilnych. Google monitoruje obecnie precyzyjnie każdy ruch odnotowany na stronie. Jeśli potencjalny klient opuszcza stronę szybko, przewija mało angażujące treści i nie wykonuje konwersji, wynik strony zostaje stale obniżany.

Kolejna zasada potwierdza więc regułę: przyjemna w użytkowaniu strona to lepsze wyniki (i więcej klientów!). Doświadczenie użytkownika to najbardziej kluczowy element tworzenia stron internetowych. Podejdź do sprawy jak do starszej, wścibskiej pani, która działa precyzyjniej i szybciej, niż monitoring uliczny. Musisz sprawić, by widziała same dobre rzeczy i nie miała o czym plotkować!

Koszmar tworzenia responsywnych stron, czyli pop-upy i inne koszmarki

Twój klient ma zarówno mózg, jak i ręce, choć, co prawda, do scrollowania używa głównie kciuka prawej dłoni. Potrafi obsłużyć się sam. Nie znam ani jednej osoby, która ucieszyłaby się na widok nachalnych pop-upów, fejkowych informacji o kończącej się za 5 minut promocji czy powielającej się kilka razy na jednej stronie propozycji zapisu do newslettera. Jeśli chcesz, by użytkownik korzystał z przyjemnością z witryn internetowych, zadbaj o dopasowanie ich do ścieżki sprzedażowej. Zachowuj się jak przyjaciel, a nie akwizytor, przed którym sam zatrzaskujesz drzwi z hukiem.

Zaraz, zaraz: co z tym kciukiem? Prosta sprawa! Wizualne elementy powinny być rozmieszczone też tak, by pozostawały w ciągłym zasięgu prawej dłoni, a więc: po stronie lewej. W procesie tworzenia responsywnych stron internetowych warto zatem zasięgnąć rady UX designera.

Pod palce nie powinny też wchodzić żadne nieprzyjemne rzeczy. Długie opisy, Q&A czy informacje techniczne ukryć możesz w zwijanych blokach: Google traktuje je tak samo, jak widoczną od początku treść. Dzięki temu Twój potencjalny klient sam dotrze do informacji, których poszukuje, nie denerwując się brakiem przejrzystości i zakłócaniem chlipania porannej kawy.

Responsywne strony internetowe – jak wyglądają?

Dobra: responsywne strony to też treść, ale co z wyglądem? Celowo zostawiłem sprawy wizualne na potem. Choć stanowią fundamenty, na których budujesz całą resztę, sama wylewka z betonu jest raczej mało atrakcyjnym widokiem. Kwestie wizualne najlepiej dopieścić na sam koniec, tak, aby elewacja w postaci treści świeciła w słońcu, stojąc na gruncie, który nie grozi zapadnięciem.

Jak zapewnić stronie responsywność? Przede wszystkim, ustal skalowanie dla poszczególnych proporcji wyświetlacza. Muszą dostosować się zarówno dla 5-calowych maluchów, jak i 7-calowych gigantów, wyświetlając się prawidłowo na różnych ekranach. Nie zapomnij przy tym o tabletach i różnych rodzajach monitorów desktopowych. Ich proporcje to nie tylko 16:9. Niektórzy adepci preferują ultraszerokie formaty 21:9, a inni: nigdy nie odstawili przestarzałego monitora 4:3 i komputera z 2010 roku. 

Pamiętaj również o wersji dla tabletów. Znajdzie ona swoje zastosowanie także w przypadku użytkowników zwężających okno przeglądarki, tak, by zajmowało np. połowę rozdzielczości ekranu.

Jak ogarnąć ten cały chaos? Od czego zacząć dostosowywać wygląd, by uzyskać responsywne strony? Warto rozważyć makietowanie stron. To nic innego, jak przedstawienie nieruchomej (czyli pozbawionej interaktywności) wersji wszystkich podstron w programie graficznym w chmurze. Znakomicie sprawdza się do tego np. Figma. Zaprojektować można w niej wszystkie warianty skalowania stron: normalne, jednokolumnowe czy dwukolumnowe, zoptymalizowane pod kątem różnych wielkości ekranu.

Makietowanie stron pomaga zarówno Tobie, jak i grafikowi, który za sprawą takiej opcji może lepiej się z Tobą porozumieć i wprowadzić niezbędne zmiany na podstawie pozostawionych na projekcie pinezek – odnośników do komentarzy. Zaakceptowanie takiego projektu ułatwia też ustalenie priorytetów na stronie i usprawnia pracę copywritera. Wreszcie, sam programista może szybciej i zwięźlej przygotować kod (a Google, podobnie jak starsza pani w oknie, jako pierwszy wypomni nieporządek!).

Co zagraża responsywności stron internetowych... i czego nie lubi wyszukiwarka?

Optymalizacja pod rozmiar ekranu to zadowolona wyszukiwarka... o ile nic nie spowalnia Twojego sukcesu. Design strony musi być bowiem nie tylko atrakcyjny, ale również: możliwy do ekspresowego załadowania. W Internecie znajdziesz sporo narzędzi umożliwiających określenie tempa ładowania całej zawartości strony: jednym z nich jest PageSpeed Insights. Witryna ładująca się ponad 2-3 sekundy to już czerwona lampka dla RWD. Użyteczność powinna stać na pierwszym miejscu.

Co zagraża responsywności i sprawia, że wyszukiwarka kręci nosem? Oto aspekty, które przykują największą uwagę sąsiadki z okienka:

• fonty pobierane z internetowych bibliotek – jeśli jest ich za dużo i zajmują większość objętości strony, tracisz cenne milisekundy.
• nieskompresowane obrazy – samo przeskalowanie nie wystarczy. Na niewielkim ekranie i tak nie dojrzysz wszystkich szczegółów. Zadbaj więc o to, by skompresować zdjęcia i inne multimedia w kodzie.
• układ wielokolumnowy – elementy strony widoczne na telefonie powinny być zawarte w jednej kolumnie. Potrzebne jest więc nie tyle zmniejszenie strony, co przemieszczenie i rozplanowanie poszczególnych elementów w osi pionowej.
• za dużo pożądanych rodzajów konwersji – jeśli np. celem landing page jest zakup, zrezygnuj z pól zachęcających do zapisu do newslettera i ogranicz odnośniki do social mediów. Nie da się osiągnąć wszystkiego na raz: użytkownika poprowadzić możesz ku innemu rodzaju konwersji na reszcie podstron. Tak, to kwestia marketingowa, ale nadmiar treści wpływa przecież bezpośrednio na czas ładowania strony!
• nieprzejrzysty, zagmatwany kod strony – pani Wiesia zza firanki lubi porządek, choć sama gromadzi w domu graty po dziadku, kwiatki podwinięte z klatki schodowej i zdjęcia kuzynki z siódmej wody po kisielu.
• gotowe szablony – może i ładują się krótko, ale powielone na setkach stron nie są już unikalne i wpływają negatywnie na Twój wynik. Podobną szybkość ładowania uzyskasz bez problemu na zaprojektowanej na wyłączność stronie: nie wybieraj między jedną a drugą zaletą.

Wiesz już, dlaczego responsywność jest tak ważna. Czas na Twój szachowy ruch – skontaktuj się z nami.