Marketingowe Wsparcie Biznesu RIKONA

Responsywne strony internetowe – mobile first a użytkownik

11 lutego 2024

Podsumowanie

Stoisz przy kasie w Biedrze, kiedy Twój mózg doświadcza nagłej potrzeby WIEDZY: czy pingwiny mają kolana? Masz przed sobą dwie opcje. Wyciągnąć z jeansów smartfona lub czekać, aż wrócisz do domu i odpalisz blaszaka, który akurat musi zaktualizować Windowsa do wersji 11-93237-7F. Twój wybór raczej nie pozostawia żadnych wątpliwości. Na podobnej zasadzie Google priorytetyzuje treści, które użytkownik mobilny konsumuje niczym zupkę chińską. Strony wyświetlane na smartfonach nie będą jednak oceniane lepiej tak po prostu. Wymagana jest pełna responsywność, która, wbrew powszechnemu przekonaniu, polega NIE TYLKO na dostosowaniu aspektów wizualnych. Równie mocno liczą się treść, zaangażowanie użytkownika i user experience. Gotowy na poznanie wszystkich tajników responsywności?

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.

Responsywne strony co to

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.

Czym są responsywne strony

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ć!

Mobile first w praktyce

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. 

Strony RWD mobile first

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.

Responsywne strony internetowe

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.

Autor:

RikonaMarketingowe Wsparcie Biznesu RIKONA
Pomagamy ambitnym przedsiębiorcom w budowaniu silnego wizerunku marki i rozkręceniu sprzedaży.

Poprzednie artykuły

Zadania zarządzania marketingowego. Najważniejsze informacje dla przedsiębiorców

Marketing holistyczny pomaga zidentyfikować zestaw zadań, które należy zrealizować, aby odnieść sukces w zarządzaniu marketingowym i przywództwie marketingowym. Oznacza to, że wszystkie działania powinny być starannie planowane i przemyślane.  W artykule przybliżymy m.in. czym jest zarządzanie marketingowe i jakimi funkcjami się wyróżnia. Co to jest zarządzanie marketingowe? Zarządzanie marketingowe to sposób, w jaki firma ustala […]

Czytaj dalej
Strategia marketingowa: Orientacja firmy na rynek w procesie budowania marki

Działania marketingowe w konkurencyjnym świecie biznesowym wymagają zrozumienia i reagowania na potrzeby oraz oczekiwania klientów. Jednym z kluczowych i skutecznych narzędzi, które pomagają w realizacji tych celów, są strategia marketingowa i orientacja firmy na rynek. Jest to element strategii biznesowej, który skupia się na trzech elementach: analizie, zrozumieniu i dostosowaniu działań firmy do oczekiwań konsumentów […]

Czytaj dalej
Na czym polega depozycjonowanie? Jak zabobiec negatywnemu SEO?

Ech, depozycjonowanie. Pewnie nie byłbyś zadowolony, gdybyś znalazł link do swojej strony w anonsie Gorącej Małgorzaty. A co, gdyby Twój konkurent rozpowiadał naokoło, że nie warto z Tobą współpracować, przekazując te uwagi… bezpośrednio wyszukiwarce? Brzmi jak Matrix: bo właśnie nim jest. Na szczęście wiem, co zrobić, byś mógł sięgnąć po czerwoną pigułkę i uratować… rzecz […]

Czytaj dalej
Human-first content - piszemy dla ludzi, czy dla robotów? 10 zasad

Wyniki wyszukiwania to dziś nie słup z naklejonymi ogłoszeniami: tu stolarz, tam informatyk, tutaj klepsydra wujka Stasia od strony kuzynki matki zięcia...  Algorytm służy obecnie zdecydowanie bardziej przyjaźni i budowaniu więzi. Nie wyróżnia tego, co pasuje do wytycznych Google, lecz to, co podoba się człowiekowi: to właśnie human-first. Optymalizacja w dzisiejszym rozumieniu prowadzi więc do […]

Czytaj dalej
Indeksowanie stron internetowych – co to i jak sprawdzić status indeksacji?

Przedsiębiorcy doskonale wiedzą, że obecność w Internecie jest dla nich korzystna, a strona internetowa firmy to absolutne „must have”. Bez niej trudno budować wiarygodność, rozpoznawalność i docierać do potencjalnych klientów. Niemniej, aby witryna spełniała te funkcje, powinna być prawidłowo indeksowana w Google. Dlaczego? Indeksowanie strony internetowej sprawia, że staje się ona widoczna dla milionów użytkowników, […]

Czytaj dalej
Rolki na Instagramie a skuteczny marketing: udoskonal Instagram Reels

Dziewczyny w bikini, recenzje kosmetyków, fragmenty sponsorowanych wakacji i nachalne reklamy. Gdzie w to wszystko wepchnąć strategię marketingową, która faktycznie zadziała? Wystarczy dotrzeć do różnych segmentów klientów, wykorzystując Instagram Reels do zaspokojenia ukrytych pragnień każdego z nich.  Pssss... Rzecz jasna, nie chodzi o pragnienie dotyczące obserwowania wspomnianych dziewczyn. 😉 Gotowy na tutorial tworzenia rolek z […]

Czytaj dalej
Czym jest content marketing? Co możesz zyskać na wartościowych treściach?

W cyfrowym świecie rywalizacja o klienta staje się coraz bardziej wymagająca. Firmy nie skupiają się tylko na doraźnych działaniach, ale tworzą strategie marketingowe. Jednym z jej kluczowym elementów jest content marketing. W artykule przybliżymy, czym jest content marketing, dlaczego warto inwestować swój czas i zasoby na tworzenie wartościowych treści, a także, z czego wynika skuteczność […]

Czytaj dalej
Czym jest współczynnik konwersji na stronie internetowej? Zobacz, jak można zmierzyć efekty kampanii marketingowych!

Rynek e-commerce dynamicznie rośnie, co to stwarza okazję do rozwoju biznesu. Firmy działające w sieci napędzają ruch klientów i wynikająca z niego sprzedaż. Do pomiaru efektywności działań służy wskaźnik konwersji na stronie. Jego wartość informuje o tym, ilu gości Twojego sklepu zamieniło się w klientów. Czym jest dobry CR i jak go osiągnąć? Co to […]

Czytaj dalej
1 2 3 7
Marketingowe Wsparcie Biznesu RIKONA

RIKONA sp. z o.o.
ul. Adama Mickiewicza 37/58
01-625 Warszawa
NIP: 525-286-81-14
REG: 389326473

Polityka prywatności

KONTAKT

2022 Rikona sp. z o.o. | Wszelkie prawa zastrzeżone
crossmenu