Jak wynika z raportu „Digital 2021” opracowanego przez We Are Social i Hootsuite, w 2020 roku najczęściej korzystaliśmy z internetu przez smartfony (55,7%). Na drugim miejscu stały komputery i laptopy (41,4%). Na trzecim – tablety (2,8%). Na czwartym zaś pozostałe urządzenia (0,07%). Nic dziwnego, że przy takim zróżnicowaniu responsywna strona internetowa to obecnie standard. Czym dokładnie jest? Na czym polega jej siła? Przeczytaj!
Strona internetowa kiedyś i dziś
Z roku na rok coraz więcej osób do przeglądania internetu używa urządzeń mobilnych, zwłaszcza smartfonów. We wspomnianym we wstępie raporcie „Digital 20201” widnieje informacja, iż od grudnia 2019 do grudnia 2020 roku odnotowano przyrost internautów smartfonowych o 4,6% i spadek laptopowych/komputerowych o 5,8%. Dla porównania rok wcześniej w tych samych kategoriach osiągnięto kolejno +8,6% i -6,8%.
Opisana wyżej tendencja sprawia, że o ile dawniej strona internetowa miała się poprawnie wyświetlać na komputerach i laptopach, co znaczną większość odbiorców zadowalało, o tyle dziś statyczne strony www nie wystarczają. Nie przystają do współczesności, jej wymogów i preferencji internautów.
Czym jest responsywność? (Responsive Web Design)
Rozwiązaniem bolączki starych stron internetowych niedostosowanych do sprzętów innego typu – przede wszystkim urządzeń mobilnych, ale dodatkowo telewizorów czy ekranów zewnętrznych – są strony responsywne. Określenie „responsywność” bierze się od Responsive Web Design (RWD).
Poprzez stronę responsywną rozumie się taką, która dostosowuje się do ekranu o dowolnej rozdzielczości. Owa „elastyczność” sprawia, że wygląda estetycznie i odznacza się wysoką funkcjonalnością na każdym urządzeniu. Treści w witrynie prezentują się atrakcyjnie, mimo iż nierzadko zmieniają układ względem treści widocznych na stronach wyświetlanych na laptopie czy komputerze.
Rozpoznawanie rozdzielczości ekranu
Za responsywność strony www odpowiada Media Queries. Dzięki funkcjonalności witryna potrafi błyskawicznie rozpoznać rozdzielczość ekranu i dostosować do niej widok. Szablon wyświetlany na tradycyjnych urządzeniach ulega przeskalowaniu tak, by żaden element nowej responsywnej strony internetowej nie wymagał powiększania ani przesuwania.
Oto, czym jest responsywność strony www. Zdecydowanie warto ją wdrożyć, zwłaszcza w 2021 roku. I prawdopodobnie każdym kolejnym.
Dostosowanie strony internetowej do urządzeń mobilnych
Jako że z sieci na urządzeniach mobilnych współcześnie korzysta ok. 60% internautów, dopasowanie strony internetowej do zróżnicowanych ekranów jest absolutnym wymogiem.
Dlaczego jest to ułatwienie dla użytkowników stron internetowych? Ponieważ kiedy szablon i inne elementy witryny dostosowują się do małego – bądź niestandardowego – ekranu, odbiorca nie musi powiększać widoku, żeby cokolwiek odczytać, kliknąć właściwy przycisk czy zobaczyć produkt w sklepie internetowym. A to i tak zakładając, że jest bardzo zdeterminowany i zależy mu na dokonaniu zakupu czy zrealizowaniu usługi właśnie na tej stronie internetowej. Przeciętny internauta opuści nieresponsywną stronę i poszuka innej.
Twoi klienci zamawiają produkty i usługi także poza domem
Brak strony responsywnej oznacza utratę klienta. Nawet jeśli nie oferujesz sprzedaży bezpośrednio w witrynie, brak właściwie przygotowanej strony „mobilnej” pozbawi Cię nowych użytkowników. Twoi klienci są bowiem wszędzie. Czasem poszukują fryzjera, jadąc tramwajem. Innym razem podczas spaceru z psem przeczesują internet w poszukiwaniu nowych rolek dla siostrzeńca. Mogą też chcieć poczytać artykuły na blogu w przerwie od pracy lub wykładów. Mają wtedy przy sobie urządzenia mobilne, zwłaszcza smartfony. Dostarcz im wysoką jakość, której oczekują!
Responsywna strona internetowa a pozycjonowanie
Responsywne strony internetowe są ukłonem w stronę użytkownika, a w efekcie sprzyjają pozycjonowaniu. W końcu zadowolenie odbiorcy (good user experience) stanowi czynnik rankingowy SEO. By Twoja strona internetowa pięła się w wynikach wyszukiwania, musi sprzyjać doświadczeniu internautów i być dobrze wyświetlana na każdym urządzeniu. Google zwraca na to szczególną uwagę zwłaszcza od 2016 roku, gdy pojawiły się informacje o zmianie algorytmicznej Mobile First Index.
W 2021 roku czeka nas finał akcji. Do końca marca algorytm ma objąć wszystkie strony www, jako że do tej pory objął tylko część. By nie być stratnym na zmianie, upewnij się, że Twoja witryna jest dostosowana do urządzeń mobilnych.
Strona responsywna w świetle SEO – przykłady
Responsywna strona internetowa jest ważna dla pozycji w wynikach wyszukiwania, ponieważ roboty Google i innych wyszukiwarek biorą pod uwagę czynniki takie jak:
- szybkość ładowania – małe i lekkie strony responsywne są cenione przez użytkowników i roboty,
- funkcjonalność – responsywny design strony (Responsive Web Design) wygrywa z tradycyjnym, przez który witryna wygląda tak samo na każdym urządzeniu,
- klikalność – istotą responsywnej strony jest poprawność działania wszystkich przycisków, możliwość wpisywania danych do formularzy, łatwość trafiania w linki,
- porządek w kodzie HTML – im prostsza strona, tym szybsza analiza kodu,
- widgety, pop-upy i dodatkowe elementy – zazwyczaj strona responsywna nie zawiera ich wiele, bo utrudniają korzystanie z witryny i spowalniają wczytywanie podstron,
- obrazki – na urządzeniach mobilnych powinny wyświetlać się skompresowane, mniejsze, lżejsze. Możesz wykorzystać grafiki wektorowe. Ponadto lepiej wskazywać szerokość i wysokość w procentach niż pikselach.
Stworzenie strony „mobilnej” wcześniejsze od tworzenia wersji na komputery?
Rosnąca popularność urządzeń mobilnych sprawia, że zmienia się myślenie o projektowaniu stron internetowych. Obecnie często zaczyna się od tworzenia wersji „mobilnych”, co oznacza branie pod uwagę przede wszystkim danych dotyczących sposobów korzystania ze stron poprzez smartfony. Innymi słowy: ważniejsze są przyzwyczajenia użytkownika mobilnego niż stacjonarnego.
Nie bez znaczenia pozostaje fakt, iż skrócona „responsywność” to w rozwinięciu Responsive Web Design, czyli responsywny projekt strony. Kluczem do sukcesu marketingowego w sieci jest dopasowanie się do odbiorcy-internauty. Podążanie za jego preferencjami zarówno zakupowymi, jak i behawioralnymi.
Tworzenie stron www RWD – szczegóły pod lupą
Stworzenie dobrej responsywnej strony internetowej wymaga większej dbałości o elementy. Należy zwrócić szczególną uwagę na rozmiar przycisków i ich ułożenie. O ile łatwo trafić kursorem w mały link wyświetlany na ekranie komputera, o tyle z urządzeń mobilnych najczęściej korzystamy za pomocą palca. Ponadto istotne są grafiki. Responsywność wymaga obrazków skompresowanych, wczytywanych szybko, dodawanych na serwer we właściwym formacie.
Inne wyznaczniki projektowania Responsive Web Design to chociażby dopracowanie menu i stopki strony www, zastosowanie nagłówków i ustanowienie właściwej struktury treści, formatowanie i optymalizacja tekstów. W RWD szczególnie ważne jest wdrożenie szybkich płatności na stronie internetowej, np. kiedy serwis umożliwia opłacenie usług bądź jest e-sklepem.
Przemiana statycznych stron internetowych w responsywne
Podczas tworzenia responsywnej strony internetowej na podstawie starej wersji klasycznej (statycznej) nie powinno się diametralnie dywersyfikować wyglądu. RWD ma poprawić funkcjonalność strony internetowej na urządzeniach mobilnych i innych, nie zaś sprawić, że użytkownik pomyśli, iż znalazł się w innej witrynie.
Dzięki temu, że Twoi klienci są przyzwyczajeni do pewnego układu szablonu i struktury treści, łatwo i szybko odnajdują kategorie, produkty, artykuły na blogu czy inne elementy. Z kolei nowych użytkowników niepotrzebnie zdezorientujesz, jeśli swoją stronę będziesz wyświetlał zupełnie inaczej w zależności od urządzenia.
Jak przemienić klasyczną witrynę w RWD?
Jeżeli na stronie internetowej wyświetlanej na komputerze i laptopie masz dwie lub trzy kolumny, stronę responsywną ogranicz do jednej. Treści umieszczone po bokach możesz zaprezentować niżej bądź wyżej. Na górze strony responsywnej warto zastosować zwinięte menu, które rozwija się dopiero po wykonaniu przez użytkowników odpowiedniej akcji, zazwyczaj kliknięciu.
Podobnie potraktować (zwinąć) możesz mniej ważne elementy. Długie opisy ukryj w akordeonach. Zbędne treści – np. zdjęcia będące niewiele wnoszącymi ozdobnikami – po prostu usuń. Skup się na prezentacji produktów i usług. Dla użytkowników urządzeń mobilnych przygotuj większe zdjęcia, a mniejsze opisy.
Responsywna strona www a struktura linków – to ważne!
Być może zauważyłeś, że niektóre strony internetowe wyświetlane na urządzeniach mobilnych mają inny adres, niż kiedy wchodzi się na nie na komputerze. Najczęściej różnica polega na dodaniu litery „m” w adresie URL, którą ma strona mobilna przeglądana np. na smartfonie. Doskonałego przykładu dostarcza korzystanie z serwisu Facebook. Na komputerze wchodzi się na portal poprzez adres https://www.facebook.com/, telefon zaś samoistnie przekształca URL w: https://www.m.facebook.com/.
Niepozorna litera „m” to oznaka dostosowania do urządzeń mobilnych, na którym oczywiście powinno Ci zależeć. Uwaga jednak, bo kryje się tu pewien ważny szczegół. Otóż nie każda strona internetowa wyświetlana na telefonie to responsywna strona internetowa. Jej poprzedniczka – prostsza strona mobilna – przygotowywana była jako odrębna względem komputerowej/laptopowej. Istotne stawało się dopilnowanie, by linki z serwisu mobilnego odsyłały do podstron mobilnych, a desktopowe – do desktopowych.
Czym jest strona mobilna?
W świetle powyższych informacji warto omówić rozróżnienie trzech sposobów wyświetlania stron internetowych na urządzeniach mobilnych:
- tradycyjna statyczna strona internetowa niedostosowana do telefonu, tabletu ani urządzenia innego niż komputera/laptop – istnieje tylko jedna wersja strony www. Nawet jeśli wyświetlasz ją na telefonie, widzisz stały układ. Musisz powiększać elementy, by cokolwiek odczytać,
- strona mobilna – ta strona została przygotowana na urządzenia mobilne, jednak znajduje się pod odrębnym adresem URL (rozpoznasz ją np. po „m” przed domeną). Uwaga: po skopiowaniu linku do strony mobilnej i wyświetleniu go na desktopie otrzymasz nieatrakcyjny i niefunkcjonalny widok. Wszystko dlatego, że została ona przygotowana wyłącznie na sprzęt mobilny,
- responsywna strona internetowa – wersja nowoczesna. Responsywność dopasowuje szablony do ekranów bez zmiany adresu URL stron www.
W przypadku trzeciej wersji strony nie musisz martwić się o spójność struktury linków. W przypadku połączenia pierwszej i drugiej – przeciwnie. Upewnij się, że na stronie mobilnej i desktopowej przekierowania działają poprawnie, inaczej kliknięcie linku przeniesie użytkowników do witryny niedostosowanej do niestandardowego ekranu.
Wybrać stronę internetową RWD, mobilną czy tradycyjną?
A gdyby tak nie przygotowywać witryny na telefon wcale? Może pozostawienie wersji statycznej jest lepsze od wdrażania mobilnej i ryzykowania niepoprawnymi przekierowaniami? Albo inaczej: może wystarczy sam serwis mobilny, skoro to właśnie smartfony generują coraz większy ruch w internecie? Na chwilę obecną właściwa odpowiedź jest tylko jedna: brak responsywności działa na niekorzyść. To responsywna strona www jest właściwym wyborem w XXI wieku.
Współczesne strony internetowe muszą być funkcjonalne na każdym urządzeniu, inaczej przepadną w wynikach wyszukiwania Google. Teoretycznie masz do dyspozycji warianty pierwszy i drugi, ale jedynie w połączeniu, bądź trzeci. Praktycznie zaś najlepiej wybrać stronę responsywną. Dzięki niej posiadasz tylko jedną spójną stronę, a nie dwie osobne.
Przewagę zalet stron responsywnych nad mobilnymi przedstawiliśmy w artykule: Responsywna strona vs. mobilna strona internetowa – różnice.
Zalety strony responsywnej
Łatwość pozycjonowania to jedna z największych zalet responsywnych stron internetowych, ale wcale nie jedyna. Bez względu na to, czy wyświetla się je na telefonach bądź tabletach, czy na komputerze albo laptopie, tego typu witryny są:
- przejrzyste, czytelne, dobrze zorganizowane,
- nowoczesne i atrakcyjne wizualnie,
- tańsze w utrzymaniu, ponieważ dysponuje się tylko jedną stroną internetową. Warto jednak zaznaczyć, że sam koszt stworzenia może być wyższy niż w przypadku tradycyjnej strony statycznej dostosowanej wyłącznie do widoku desktopowego,
- łatwiejsze w zarządzeniu, gdyż wszystkie dane dostępne są w jednym wspólnym CMS-ie,
- wygodne do udostępniania i linkowania, bo mają spójną strukturę linków (wymagają posiadania tylko jednej domeny).
Tworzenie strony responsywnej czy wykorzystanie widgetu?
Dopiero przygotowujesz się do wdrożenia responsywności na stronie? Masz zatem do dyspozycji dwa rozwiązania. Pierwsze to nowy projekt RWD, czyli stworzenie strony od zera. Jest lepszym wyborem z uwagi na pełne dostosowanie designu do klientów i uwzględnienie ich zadowolenia z korzystania z serwisu. Poprzedź projekt wykonaniem serii testów A/B i przeanalizuj statystyki z Google Analytics pod kątem różnych danych, np. popularności treści. W rezultacie zostawisz dla klientów tylko to, co najbardziej ich angażuje.
Ułatwienie: widget dostosowujący strony do rozdzielczości
Nie musisz jednak wiedzieć, czym jest responsywność od strony webmasterskiej, by przystosować stronę internetową do poprawnego wyświetlania niezależnie od rozdzielczości danego urządzenia. W przypadku drugiego rozwiązania wystarczy, że zainstalujesz odpowiedni widget. Samoistnie nadaje stronie responsywności i dostosowuje ją do rozmiaru sprzętu, na którym jest wyświetlana. Plusami są łatwość i szybkość osiągnięcia efektu. Minusem – znacznie mniejszy wpływ na prezentację treści.
Responsywna strona internetowa FunkyMedia – sprawdź nasze podstrony i blog
Poszukujesz responsywnych stron w ramach przykładu? Możesz zrobić przystanek – właśnie znalazłeś się na jednej z nich. 🙂 Responsywna strona internetowa FunkyMedia korzysta z tych samych elementów wizualnych, które otrzymujesz w wersji desktopowej. Różnica polega na tym, że odpowiednio je skaluje. W efekcie kiedy wyświetlasz witrynę na telefonie, tablecie bądź dużym telewizorze, szablon jest automatycznie dostosowywany do nowego urządzenia. Tak oto strona prezentuje się estetycznie i jest funkcjonalna.
Zachęcamy do przejrzenia zakładek i zobaczenia, jak wygląda responsywna strona internetowa. W czasie podróżowania po serwisie koniecznie zajrzyj na blog. Publikujemy na nim wartościowe porady dotyczące pozycjonowania, tworzenia tekstów, przygotowywania kampanii reklamowych i innych form marketingu w sieci.
Polecamy na blogu
Jeżeli dopiero zaczynasz pozycjonowanie strony internetowej, zobacz te artykuły:
- Na ile słów kluczowych pozycjonować stronę internetową?
- Linki nofollow, dofollow – różnice i zastosowanie
- Zaplecze SEO – co to jest i jakie daje korzyści?
Udowodnimy Ci, czym jest responsywność strony w świetle SEO!
Jak wspomnieliśmy w podpunkcie poświęconym SEO, responsywna strona internetowa jest znacząco lepsza pod kątem pozycjonowania niż strona mobilna, a tym bardziej tradycyjna, niedostosowana do zmian rozmiaru na odmiennych urządzeniach.
Z roku na rok Google przywiązuje coraz większą wagę do responsywności i coraz bardziej dba o zadowolenie użytkowników z korzystania z wyszukiwarki przez telefon. Jeśli masz responsywną stronę www, wygrywasz w walce o klientów.
Choć pozycjonujemy wszystkie strony internetowe, zawsze podkreślamy, jak ważne jest wdrożenie RWD. Już dziś pozwala robotom Google lepiej ocenić funkcjonalność witryny i niewątpliwie będzie to robiło nadal.
Skorzystaj z audytu w FunkyMedia, by dowiedzieć się, jak wdrożyć bądź poprawić responsywność swojej strony. Zoptymalizujemy ją dla Ciebie i poprowadzimy proces pozycjonowania, dzięki któremu uzyskasz lepszą konwersję. Czekamy na Twoją wiadomość!
