Ruch w Internecie z roku na rok coraz bardziej przenosi się z komputerów stacjonarnych na smartfony i inne urządzenia mobilne. Z tego powodu niezbędne stało się znalezienie takiego standardu stron, który pozwoli na uzyskanie spójnego wyglądu, funkcjonalności i szybkiego przeglądania. Przez pewien czas te warunki spełniały w mniejszym lub większym stopniu strony mobilne, ale zastępuje je Responsive Web Design, czyli RWD. Z tego wpisu dowiesz się na czym polega RWD i jak stworzyć responsywną stronę internetową.
Czym jest RWD?
RWD to technika, którą stosuje się przy projektowaniu stron internetowych. Responsywna strona internetowa – czyli dostosowująca się do urządzenia, na którym jest wyświetlana. Ma te same funkcjonalności i podobny wygląd na każdym urządzeniu (laptopie, tablecie, smartfonie). Dzięki temu nie trzeba tworzyć osobnej wersji. Co więcej, wykorzystywanie RWD jest faworyzowane przez Google. I zasadniczo to RWD jest rozwijany i traktowany już dziś jako preferowane, domyślne rozwiązanie, które z czasem najprawdopodobniej stanie się standardem. Warto zresztą wiedzieć, że responsywność dotyczy już nie tylko stron internetowych, ale też na przykład newsletterów czy sklepów internetowych.
Masz w planach założenie strony internetowej dla Twojej firmy lub myślisz nad zmianą narzędzia do budowania stron? Dzięki Kreatorowi stron GetResponse samemu stworzysz responsywną stronę WWW!
Kreator stron GetResponse stworzy wersję strony internetowej dla urządzeń mobilnych automatycznie. Dzięki temu, Twoja strona internetowa będzie responsywna na różnych ekranach, zarówno w układzie pionowym, jak i poziomym.
Renderowanie treści na urządzeniach mobilnych
Czy wiesz, że większość ruchu pochodzi z mobile? 🤔
Aby pokazać Ci, dlaczego możliwość łatwego korzystania ze strony na urządzeniach mobilnych jest dziś kluczowa, przedstawię Ci pewien niezmiernie ciekawy wykres:
Obejmuje on ostatnią dekadę (od października 2011 do października 2021 r.) i pokazuje korzystanie z Internetu na komputerach stacjonarnych (niebieska linia), na urządzeniach mobilnych (zielona linia) oraz na tabletach (fioletowa linia). Wraz z szybkim rozwojem smartfonów linie niebieska i zielona coraz bardziej się do siebie zbliżały, aż spotkały się w listopadzie 2016 roku. To przełomowy moment, od którego liczba użytkowników Internetu na urządzeniach mobilnych jest już tylko coraz wyższa.
Jak więc widać, przyszłością Internetu jest możliwość łatwego, przyjemnego i szybkiego przeglądania go na urządzeniach mobilnych. A tego oczekują klienci.
W 2022 roku „mobilek” było o 10% więcej niż „desktopów”, czyli użytkowników Internetu na komputerach stacjonarnych (55,75% wobec 44,25%) i, jak zresztą widać na wykresie, dystans między nimi jest już tylko coraz większy. W Polsce jest ich odpowiednio 52,47% i 47,53% (dane pochodzą z StatCounter).
Warto zwrócić uwagę, że nawet jeśli szala przechyla się na korzyść urządzeń mobilnych, to cały czas jest jeszcze blisko środka; w związku z tym trzeba zastosować rozwiązanie, które zadowoli wszystkich użytkowników. Strony responsywne są właśnie tym rozwiązaniem. Przypieczętowaniem tego było wprowadzenie przez Google aktualizacji Core Web Vitals i Mobile First Index. Od tego czasu obecność stron responsywnych ma istotny wpływ na pozycję domeny w rankingu – strony RWD mają pierwszeństwo przed desktopowymi.
Ten artykuł może Ci się przydać: Jak pomóc SEO?
Wpływ na ranking (SEO)
Strony RWD stoją wyżej wynikach wyszukiwania również dlatego, że RWD pozytywnie wpływa na jakość korzystania ze strony i wydłuża czas spędzony przez użytkownika na jej przeglądaniu. Mówiąc wprost – im atrakcyjniejsza wizerunkowa i bardziej funkcjonalna strona, tym dłużej użytkownik ją przegląda. RWD eliminuje też sytuacje, w których użytkownik wchodzi na stronę, by po kilkunastu sekundach z niej wyjść bez wykonania jakiejkolwiek interakcji (mierzy się to współczynnikiem odrzuceń, ang. bounce rate).
Wspomniany już Mobile First Index polega z kolei na tym, że strony RWD mają pierwszeństwo w rankingu na stronie z wynikami. Jeśli więc zestawimy dwie strony internetowe z tej samej branży, o podobnej liczbie odwiedzin i wypozycjonowane tak samo dobrze, to pierwszeństwo będzie miała ta z RWD. Warto zadbać o to, aby była to właśnie Twoja strona.
Jak stworzyć stronę internetową krok po kroku? – przewodnik
SPRAWDŹGdzie stworzyć stronę responsywną?
Napisanie strony RWD można oczywiście zlecić programiście, ale można skorzystać ze znacznie prostszych i tańszych metod, takich jak na przykład wspomniany wcześniej Kreator stron GetResponse. Nie wspominałabym o nim, gdyby nie fakt, że pracuje on w technologii RWD i oferuje szablony stron, które są przystosowane do wyświetlania na urządzeniach mobilnych.
Ponadto, GetResponse oferuje integracje z narzędziami marketingowymi, potrzebnymi do tego, aby skutecznie wypromować stworzoną dzięki niemu stronę i docierać do klientów. Takim narzędziem jest np. kreator newsletterów GetResponse.
Zacznij od najmniejszego ekranu
Podczas projektowania strony należy się kierować jej wyglądem na najmniejszym ekranie, zgodnie z zasadą, że jeśli na małym smartfonie strona będzie wyglądać dobrze, to będzie dobrze wyglądać również na większych smartfonach, tabletach, laptopach i w końcu dużych monitorach.
Jest jednak jeszcze drugi powód takiego postawienia sprawy – jak wspomniałam w początkowej części artykułu, coraz więcej i więcej użytkowników używa smartfonów jako głównych urządzeń do Internetu. I jest to zdecydowanie trend wzrostowy – dziś już komputer stacjonarny kupuje się zazwyczaj wtedy, gdy rzeczywiście jest potrzebny duży monitor i moc przerobowa (np. do gamingu, montowania filmów lub innych profesjonalnych zastosowań).
To podejście ma dodatkową zaletę: mocno zyska na tym UX, czyli user experience. Na ekranie smartfona siłą rzeczy nie da się umieścić zbyt wielu treści, więc strona będzie prosta i przejrzysta, a przystosowanie do wersji laptopowej lub desktopowej będzie ograniczone głównie do rozsunięcia poszczególnych elementów. Stworzenie strony z dużą ilością treści, którą następnie trzeba by było upchać na małym ekraniku byłoby zdecydowanie trudniejsze.
Above the fold
Choć cały czas mówimy o tworzeniu strony na smartfony i inne urządzenia, to warto wiedzieć, że w projektowaniu jako takim niektóre zasady są ponadczasowe i nie zmieniły się od XVII wieku (wow!) – chodzi m.in. o zasadę above the fold, polegającą na tym, że najważniejsze informacje znajdują na pierwszej stronie, widocznej od razu po załadowaniu strony. Ta reguła jest stosowana od zarania wydawnictw informacyjnych i prasowych, które do dziś umieszczają na pierwszej stronie najważniejsze informacje i nagłówki, widoczne powyżej linii złamania gazety wpół (fold). W kontekście stron internetowych czy newsletterów można się czasem spotkać z określeniem above the scroll, czyli wszystko to, co widać bez scrollowania strony.
Jest to skądinąd bardzo słuszna wskazówka, która w dobie smartfonów i responsywnych stron nabiera jeszcze większego znaczenia, ponieważ o ile na desktopie zmieścimy więcej treści w obszarze wielkości monitora czy laptopa, o tyle na tablecie i telefonie pierwsza „strona” musi być już znacznie bardziej przemyślana.
Co zatem powinno się tam znaleźć?
Treści w części above the fold powinny w gruncie rzeczy odpowiadać użytkownikowi na pytanie, czy znalazł to, czego szukał; dlatego też z reguły umieszcza się tam logo i nazwę firmy, nagłówek informujący o jej działalności i przycisk z wezwaniem do wykonania określonej akcji (Call to Action), np. do sprawdzenia oferty czy do wysłania zapytania.
Te artykuły mogą Ci się przydać:
Formularze pop-up
Jednym z najbardziej irytujących błędów popełnianych podczas tworzenia stron internetowych jest zaniedbanie pop-upów, czyli wyskakujących okienek. Nadal można spotkać się z tym, że w wersji laptopowej i desktopowej strony pop-upy wyglądają doskonale, a na smartfonie są zupełnie nieprzeskalowane na mniejszy rozmiar. Wskutek tego nie dość, że zasłaniają cały ekran i nie da się ich nawet odczytać, to w dodatku nie da się też ich zamknąć, bo krzyżyk jest poza wyświetlaczem.
Jak temu zaradzić?
Rozwiązanie jest tyleż proste, co oczywiste: trzeba zaprojektować osobne pop-upy dla różnych ekranów, a jeśli korzystasz z naszego Kreatora stron – to pop-upy dostosują się automatycznie.
Najważniejsze jednak, żeby o tym nie zapomnieć i nie zostawić użytkownika z wyskakującym okienkiem, które skutecznie uniemożliwi mu korzystanie ze strony i niepotrzebnymi nerwami (przez które może kojarzyć Twoją markę i stronę negatywnie).
Jak poprawić szybkość ładowania strony? Optymalizacja
Optymalizacja strony pod kątem poprawienia pozycji w wyszukiwarce jest jedną z najważniejszych czynności, które powinniśmy zrobić. Chodzi tu o podstawowe działania SEO dla stron RWD, czyli m.in. zrobienia porządku ze zdjęciami i optymalizacja ich ładowania.
Usuwanie niepotrzebnych zdjęć i plików
Aby więc przyspieszyć ładowanie stron i grafik, należy przede wszystkim zwrócić uwagę na to, aby na stronie były umieszczone jedynie te grafiki, które są rzeczywiście niezbędne. To samo tyczy się dużych plików – jeżeli nie potrafimy racjonalnie uargumentować ich obecności, to należy albo je usunąć, albo przynajmniej je zmniejszyć za pomocą kompresji.
Lazy load
Warto też włączyć lazy load, czyli ładowanie się tylko tych zdjęć, które są aktualnie widoczne na ekranie (pozostałe załadują się dopiero po przescrollowaniu ekranu do miejsca, w którym są umieszczone). Często pozwala to znacząco przyspieszyć ładowanie strony.
Jaki rozmiar powinny mieć grafiki i zdjęcia na stronie RWD?
Skoro strona będzie wyświetlana na urządzeniach o różnych wielkościach, to jaki rozmiar powinny mieć grafiki? Przyjmuje się, że powinien być to docelowy rozmiar na największym wyświetlaczu (co do zasady to ta wielkość jest domyślnym rozmiarem). W praktyce oznacza to, że największa możliwa rozdzielczość będzie wynosić 1920 × 1080 pikseli, a i to jedynie w przypadku, gdy zdjęcie lub grafika stanowi tło strony. Pamiętaj, że zdjęcie zesk
Jak sprawdzić szybkość strony i zgodność z urządzeniami mobilnymi?
Skąd jednak wiedzieć, czy po wprowadzeniu tych wszystkich sposobów strona rzeczywiście ładuje się szybciej? Nawet jeśli już „na oko” widać, że ładuje się szybciej, to warto jednak się upewnić i to sprawdzić. Służą do tego specjalne narzędzia od Google – Mobile Friendly test i Page Speed Insights.
Mobile Friendly Test – za pomocą tego testu można sprawdzić, jak Google ocenia Twoją stronę pod kątem przystosowania do urządzeń mobilnych. Jest to dość prosty test – pokazuje komunikaty dopiero, gdy strona nie jest dostosowana.
Page Speed Insights – sprawdza szybkość ładowania strony i wiele innych czynników wpływających na jej działanie. Jest znacznie bardziej zaawansowanym i dokładniejszym narzędziem – podaje dokładne wartości załadowywania różnych elementów stron, takich jak stopień optymalizacji kodu, składowe Core Web Vitals czy zasoby blokujące renderowanie. Co ważne, pokazuje wyniki zarówno dla wersji mobilnej jak i desktopowej, ponadto można tam przeczytać wskazówki o tym, jak poprawić najniżej ocenione elementy strony.
Podsumowanie
Pamiętaj, że pierwsze wrażenie robi się raz, dlatego bierz pod uwagę, że pierwszym miejscem spotkania potencjalnego klienta z Twoją firmą może być właśnie strona internetowa.
Odwróćmy sytuację – na telefonie przeglądasz stronę www firmy, która oferuje usługi, których chwilę wcześniej wyszukiwałeś w Google. Strona nie otwiera się tak jak powinna, co robisz? Oczywiście, odświeżasz stronę lub denerwujesz się, że nie możesz sprawdzić informacji, których szukasz. Wystarczy moment, abyś stracił zainteresowanie i poszukał takich usług u konkurencji. Dlatego, tworząc stronę internetową należy pamiętać dla kogo ją przygotowujemy. To potencjalni klienci są naszymi odbiorcami.
Responsywne strony www pod względem wizualnym zachowują stylistykę strony desktopowej, dzięki czemu użytkownik nie czuje różnicy przeglądając stronę na różnych urządzeniach. RWD pozwala na wygodne korzystanie ze strony zawsze i wszędzie, jednocześnie poprawiając jej wyniki w wyszukiwarce.