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

Marketing B2B - jakie strategie pozwalają dotrzeć do klienta biznesowego?

Współczesny świat biznesu jest bardzo dynamiczny, a marketing B2B odgrywa w nim kluczową rolę. Przede wszystkim w budowaniu trwałych relacji z klientami, zwiększaniu sprzedaży i generowaniu wartościowych leadów. Marketing B2B jest bardziej złożony od B2C (klienci indywidualni) i wymaga przemyślanych strategii i podejścia uwzględniającego specyficzne potrzeby odbiorców. Czego jeszcze dowiesz się z artykułu? Przyjrzymy się […]

Czytaj dalej
Doradztwo marketingowe – jak wdrażać skuteczne działania B2B i B2C?

Dynamicznie zmieniający się świat biznesu, skuteczne działania marketingowe są kluczem do sukcesu każdej firmy. Niezależnie od tego, czy koncentrujesz się na rynku B2B czy B2C, efektywna strategia marketingowa pomoże wpłynąć zarówno na wizerunek marki, jak i jej wyniki finansowe. Co zrobić, gdy działania marketingowe nie przynoszą oczekiwanych rezultatów? Odpowiedzią może być doradztwo marketingowe. Jest to […]

Czytaj dalej
Consumer insight – jak zrozumieć swoich klientów i skuteczniej sprzedawać?

„Czego pragną kobiety” to film z 2000 r., w którym główny bohater, specjalista od reklamy, ulega wypadkowi, po którym słyszy myśli kobiet. Dzięki temu jest w stanie idealnie dopasować swoje działania do potrzeb płci pięknej, czym zyskuje przewagę. Jak to ma się do sprzedaży w Twojej firmie? Choć też chcielibyśmy wiedzieć, czego pragną kobiety, to […]

Czytaj dalej
Jak strategia pozycjonowania Long Tail może poprawić Twoje SEO?

Rozwój internetu sprawił, że nasze zachowania w sieci także ewoluowały. Z każdym dniem lepiej rozumiemy, jak działają wyszukiwarki, jak z nich korzystać i jak dotrzeć do informacji, których potrzebujesz. Mało kto z nas szukając butów do biegania, wpisze w wyszukiwarce ogólne hasło „buty”. Bardziej prawdopodobne jest, że wpiszemy „buty do biegania Nike dla mężczyzn do […]

Czytaj dalej
Jak stworzyć Unique Value Proposition (UVP) i wyróżnić się na rynku?

We współczesnym konkurencyjnym biznesie kluczowym elementem sukcesu jest umiejętność wyróżnienia się na tle konkurencji, czyli Unique Value Proposition (UVP). Propozycja wartości, która przemawia do klientów i pomaga wyróźnić Twoją firmę od konkurencji, to niezbędny składnik silnej marki, która pozyskuje klientów i sprawia, że są oni lojalni. Odpowiedzi znajdziesz w dalszej części artykułu. Zapraszamy! Czym jest […]

Czytaj dalej
Recykling treści – na czym polega? EKO jest w modzie

Ponowne wykorzystywanie surowców naturalnych to nie tylko ukłon w stronę zielonych zmian. Jest to również szansa na efektywniejsze zarządzanie dostępnymi zasobami. Jednym z takich zasobów dla Twojej firmy są treści na stronie internetowej i w e-sklepie. Wiesz, że puszki aluminiowe można przetwarzać w nieskończoność? Materiał jest ciągle użyteczny. Twoje treści także mogą takie być i […]

Czytaj dalej
Przykładowy opis firm, czyli „O firmie” / „O nas”  – jak napisać, aby zachęcić klientów do współpracy?

Zróbmy mały test. Wyobraź sobie, że szukasz dostawcy usług lub produktów dla siebie, lub swojego przedsiębiorstwa. Wrzucasz nazwę firmy do wyszukiwarki i wchodzisz na jej stronę. Poza spojrzeniem na ofertę, klienci najczęściej sprawdzają na Twój tekst „O nas” / „O firmie”. Prawdopodobnie Ty też chcesz wykorzystać ten potencjał. Czy wiesz, jak napisać atrakcyjną dla odbiorców […]

Czytaj dalej
Tone of voice Twojej marki. Zbuduj solidny element strategii komunikacji marki

Jak stworzyć Tone of voice marki? Dobre pytanie, na które spróbujemy odpowiedzieć w tym artykule. Przedstawimy także, jak wygląda proces tworzenia jednego z kluczowych filarów strategii komunikacji marki. No to co? No to Frugo! Ekhm… zapraszamy. Przystawka: Amazon umie w komunikację W artykułach na naszym blogu przewijają się tematy związane ze strategią komunikacji. Dzisiaj skupimy […]

Czytaj dalej
1 2 3 9
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