Otwierasz własną stronę na telefonie. Tekst jest czytelny, menu zwija się czysto, a obrazy zmieniają rozmiar i nic nie wypada poza ekran. Tak wygląda dobrze działające responsywne projektowanie stron. Gdy tak nie jest, odwiedzający wychodzą, zanim przeczytają choć słowo.
Twoja strona ma jeden zestaw treści i jeden zestaw kodu. Responsywne projektowanie to podejście, dzięki któremu ten jeden kod poprawnie obsługuje każdego odwiedzającego, niezależnie od tego, czy korzysta z szerokiego monitora, czy z telefonu trzymanego pionowo. Zamiast budować osobną wersję mobilną, responsywny projekt automatycznie dopasowuje układ, obrazy i nawigację do używanego ekranu.
Strona, która dobrze wygląda tylko na komputerze, zawodzi większość odwiedzających, zanim cokolwiek przeczytają. Dla większości właścicieli firm responsywność nie jest decyzją do rozważenia. To podstawowe oczekiwanie, które trzeba sprawdzić przed startem.
Jak działa responsywny projekt?
Responsywna strona używa reguł CSS zwanych zapytaniami o media (media queries), by wykryć rozmiar ekranu odwiedzającego. Na tej podstawie układ się dopasowuje. Trzykolumnowa sekcja na komputerze może stać się jedną kolumną na telefonie. Poziome menu nawigacyjne może zwinąć się w przycisk. Obrazy zmieniają rozmiar tak, by zmieścić się w dostępnej szerokości i nie wychodzić poza swoje kontenery.
Kluczowa zasada jest taka, że treść pozostaje ta sama. Zmienia się tylko sposób jej ułożenia i wyświetlania. Responsywna strona to nie inna strona dla użytkowników telefonów. To ta sama strona dopasowana do innego ekranu.
Bardziej techniczne wyjaśnienie znajdziesz w artykule czym jest responsywny projekt strony, który szczegółowo omawia mechanikę, w tym działanie płynnych siatek i elastycznych obrazów na różnych urządzeniach.
Czym różni się responsywny projekt od strony wyłącznie mobilnej?
Zanim responsywność stała się standardem, wiele firm budowało osobną wersję mobilną strony, często pod innym adresem URL. Odwiedzający na telefonie byli przekierowywani do wersji mobilnej. Odwiedzający na komputerze widzieli stronę główną.
Takie podejście tworzyło dwie osobne rzeczy do utrzymania. Zmiany w jednej nie przenosiły się automatycznie na drugą. Treści się rozjeżdżały. Wersja mobilna miała często mniej funkcji albo mniej treści. Obsługa dwóch zestawów kodu podwajała wysiłek, ale nie podwajała efektu.
Responsywność to zmieniła: jedna strona działa wszędzie. Jeden adres URL, jeden zestaw treści, jeden kod, dopasowany do wszystkich rozmiarów ekranu. Jest prostsza w budowie, prostsza w utrzymaniu i lepsza dla wyszukiwarek, które wolą jeden wiarygodny adres URL dla każdej treści.
Co zmienia się między komputerem a telefonem na responsywnej stronie?
Zmiany między komputerem a telefonem są szersze, niż większość ludzi na początku zakłada.
Kolumny układu zwijają się. Sekcja z czterema kartami produktów obok siebie na komputerze staje się przewijanym stosem na telefonie. Menu nawigacyjne zmienia formę. Poziome menu zamienia się w rozwijane panele lub wysuwane szuflady. Rozmiary czcionek dopasowują się tak, by tekst był czytelny bez powiększania. Przyciski robią się większe, by łatwiej było w nie trafić palcem niż klikać myszką.
Obrazy zmieniają rozmiar, by wypełnić swoje kontenery bez wychodzenia poza nie. Obrazy tła mogą być inaczej kadrowane, by pasowały do proporcji pionowych. Formularze dopasowują rozmiary pól i odstępy, by dało się z nich korzystać z klawiaturą telefonu.
Miarą dobrze wykonanego responsywnego projektu nie jest to, że po prostu nie psuje się na telefonie. Jest nią to, że doświadczenie na telefonie sprawia wrażenie przemyślanego, a nie ściśniętego.
Jak responsywność wiąże się z szybkością strony?
Responsywność i szybkość strony są ze sobą ściśle powiązane. Responsywna strona, która wysyła odwiedzającym z telefonów obrazy w pełnej rozdzielczości dla komputerów, jest technicznie responsywna, ale w praktyce wolna. Odwiedzający na łączach komórkowych pobierają obrazy znacznie większe, niż ich ekran potrafi wyświetlić.
Dobrze wdrożona responsywność rozwiązuje to, wysyłając każdemu urządzeniu obrazy odpowiedniego rozmiaru, kompresując zasoby dla połączeń mobilnych i odkładając ładowanie mniej ważnych elementów, które spowalniają pierwsze wczytanie. Celem nie jest tylko dopasowanie układu. To szybkie, płynne doświadczenie niezależnie od urządzenia i szybkości łącza.
Artykuł czym jest szybkość strony opisuje, jak wydajność ładowania wpływa na doświadczenie użytkownika i pozycje w wyszukiwarce oraz co sprawia, że strony działają wolniej, niż powinny.
Co sprawdzić, oceniając responsywność szablonu?
Nie każdy szablon opisany jako responsywny jest równie dobrze zaprojektowany pod telefony. Zanim się zdecydujesz, warto sprawdzić kilka konkretnych rzeczy.
Otwórz demo szablonu na telefonie, a nie tylko w podglądzie na komputerze. Przejdź przez każdą sekcję. Sprawdź, czy menu otwiera się czysto i czy wszystkie linki są osiągalne. Sprawdź, czy tekst da się czytać bez powiększania. Sprawdź, czy przyciski wezwania do działania są wystarczająco duże, by wygodnie w nie trafić. Sprawdź, czy obrazy wyświetlają się poprawnie i nie spychają treści poza ekran.
Zwróć uwagę na odstępy na telefonie. Sekcje, które na komputerze wyglądają przewiewnie, mogą wydawać się ciasne, gdy kolumny zwijają się na małym ekranie. Sprawdź, czy sekcje mają wystarczające marginesy, by tekst nie biegł od krawędzi do krawędzi. Artykuł jak wybrać szablon strony opisuje testowanie na telefonie jako część pełnej oceny szablonu.
Po czym poznać, że strona nie jest poprawnie responsywna?
Niektóre błędy responsywności są oczywiste. Inne są na tyle subtelne, że możesz ich nie zauważyć, dopóki nie wspomni o nich klient.
Typowe oznaki braku poprawnej responsywności to tekst, który trzeba przewijać w poziomie, by przeczytać go w całości, obrazy wychodzące poza kontenery i ucięte na krawędziach, menu nawigacyjne, z których nie da się korzystać bez kursora, zbyt małe przyciski, w które trudno trafić, oraz formularze, w których pola nie dopasowują się poprawnie do klawiatury telefonu.
Mniej oczywiste oznaki to układ, który technicznie mieści się na telefonie, ale wygląda jak strona na komputer wciśnięta w wąską kolumnę. Sekcje z zbyt wieloma kolumnami, które zwijają się w mylącej kolejności. Nagłówki i stopki, które na telefonie zachowują się inaczej, niż przewidział pierwotny projekt.
Standardowa kontrola polega na przejściu przez każdą podstronę na prawdziwym telefonie. Podgląd w przeglądarce jest przydatny podczas pracy, ale nie oddaje w pełni doświadczenia urządzenia dotykowego.
Jak responsywność wpływa na pozycje w wyszukiwarce?
Wyszukiwarki traktują wersję mobilną Twojej strony jako główną do indeksowania i oceny pozycji. Strona, która dobrze działa na telefonie i szybko się na nim ładuje, zwykle wypada w wynikach wyszukiwania lepiej niż taka zbudowana głównie z myślą o komputerze.
Poza preferencją indeksowania słabo responsywna strona wysyła negatywne sygnały. Wysoki współczynnik odrzuceń wśród odwiedzających z telefonów, wolne ładowanie na łączu komórkowym i treści trudne do czytania z czasem obniżają wyniki. Odwiedzający, którzy od razu wychodzą, bo strona nie działa na ich telefonie, mówią wyszukiwarkom, że podstrona im nie pomogła.
Pełny obraz tego, jak działa optymalizacja pod wyszukiwarki i które czynniki techniczne mają największe znaczenie, znajdziesz w artykule czym jest SEO.
Jak WEMASY podchodzi do responsywności
Każdy szablon w kreatorze stron WEMASY jest zbudowany tak, by był responsywny na komputerze, tablecie i telefonie. Edytor wizualny ma podgląd mobilny obok widoku na komputer, więc w trakcie budowania możesz sprawdzać, jak sekcje zachowują się przy różnych rozmiarach ekranu. Wydajnością i responsywnością zajmuje się platforma, bez ręcznej konfiguracji.
Zobacz, co jest w zestawie, na stronie kreatora stron WEMASY albo sprawdź plany na stronie z cennikiem.
Najczęściej zadawane pytania
Czy moja strona jest automatycznie responsywna, jeśli używam kreatora stron?
Większość nowoczesnych kreatorów stron standardowo używa responsywnych szablonów. Jeśli wybrałeś szablon z aktualnego kreatora, najpewniej jest responsywny. Ważne jest nie to, czy szablon jest tak opisany, ale czy dobrze działa na telefonie. Przejdź przez swoją stronę na prawdziwym urządzeniu mobilnym i sprawdź nawigację, obrazy, rozmiar tekstu i formularze, zanim uznasz, że wszystko działa poprawnie. W kreatorze stron WEMASY możesz to ustawić bezpośrednio na swojej stronie.
Czy starszą stronę można zrobić responsywną bez budowania jej od nowa?
To zależy od tego, jak zbudowano pierwotną stronę. W przypadku stron zbudowanych w nowoczesnych kreatorach często można poprawić wygląd na telefonie, zmieniając ustawienia szablonu lub przechodząc na lepszy szablon. Strony napisane od zera lub zbudowane na starszych platformach mogą wymagać poważnych przeróbek. Często odbudowanie na aktualnej platformie jest szybsze i daje lepszy wynik niż dorabianie responsywności do starego kodu.
Czy responsywność wpływa na szybkość ładowania mojej strony?
Sama responsywność nie spowalnia strony. Może ją spowolnić sposób wdrożenia. Strona, która wysyła pełnowymiarowe obrazy na komputery odwiedzającym z telefonów na łączu komórkowym, będzie się ładować wolno, nawet jeśli układ dopasowuje się poprawnie. Dobrze wdrożona responsywność obejmuje obrazy w rozmiarach odpowiednich dla telefonów, skompresowane zasoby i opóźnione ładowanie mniej ważnych elementów. Dopasowanie układu do ekranu to tylko część pełnego doświadczenia mobilnego.
Czym jest projektowanie mobile first?
Mobile first to podejście, w którym wersja mobilna strony jest projektowana i budowana przed wersją na komputer, a nie odwrotnie. Zaczyna się od najbardziej ograniczonego środowiska i rozszerza na zewnątrz. Projektowanie najpierw na telefon wymusza jaśniejsze priorytety. Gdy miejsca jest mało, przetrwają tylko najważniejsze treści i działania. Wersja na komputer ma potem miejsce, by rozwinąć ten fundament.
Jak sprawdzić, czy moja strona jest przyjazna dla telefonów?
Przejdź przez każdą podstronę na prawdziwym telefonie. Sprawdź nawigację, obrazy, rozmiar tekstu, formularze i przyciski. Wyszukiwarki udostępniają też bezpłatne narzędzia do testowania wersji mobilnej, w których wpisujesz adres URL, a one wskazują konkretne problemy, takie jak zbyt mały tekst lub elementy do kliknięcia ustawione zbyt blisko siebie. Połączenie ręcznego przejścia i kontroli narzędziem pokaże najważniejsze problemy.