Responsywna strona internetowa – jak ją stworzyć bez kodowania? [3 proste sposoby]

Posiadanie responsywnej strony internetowej jest obecnie niezbędne dla firm, które działają w internecie. Dostosowanie layoutu witryny do urządzeń mobilnych to dbanie o doświadczenia użytkowników (UX). Dzięki temu zawartość strony wyświetli się poprawnie na telefonie, tablecie czy komputerze. W tym artykule zdradzę Ci kilka sposobów, na wykonanie responsywnej strony internetowej.

Co istotne skupię się na metodach, które nie wymagają znajomości html i cssa, chociaż oczywiście można zakodować całą stronę od zera i dostosować ją do urządzeń mobilnych.

Czym jest responsywna strona internetowa?

Responsywna strona internetowa to strona, która jest dostosowana do urządzeń mobilnych. Nazwa pochodzi z angielskiego Responsive Web Design (w skrócie RWD) i odnosi się do sposobu, w jaki witryna wyświetla się na różnych nośnikach. O responsywności będziemy mówili wtedy, kiedy elementy i treści widoczne na stronie, będą się poprawnie wyświetlały zarówno na telefonie, tablecie, laptopie i komputerze.

Co to znaczy, że elementy na stronie poprawnie się wyświetlają?

Chodzi tutaj o to, aby użytkownicy, którzy przeglądają stronę internetową, korzystając z różnych urządzeń, mogli ją odczytać i bezproblemowo z niej korzystać. Jeżeli internauta wchodzi na witrynę z telefonu, to responsywna strona internetowa dopasuje elementy do wymiarów jego urządzenia – tekst nie będzie wychodził za ekran smartfonu, przyciski będą w pełni widoczne, nie ucięte, a co więcej, będą miały odpowiednie marginesy, by nie zlewać się z ramą telefonu.

Responsywna strona internetowa wiąże się dodatkowo ze zmianą funkcjonalności contentu. Elementy, które do tej pory były klikane za pomocą myszki komputerowej, teraz muszą reagować na ludzki dotyk. Jest to kluczowa sprawa szczególnie dla przycisku call to action, który ma wzywać do wykonania akcji i zwiększać konwersję strony.

Zazwyczaj mówiąc o responsywności strony www ma się na myśli dopasowanie jej do urządzeń o różnej rozdzielczości ekranu.

Dla przykładu możemy przeglądać stronę na telefonie o rozdzielczości ekranu 372 px na 634, albo na tablecie o wymiarach: 846 px na 721 px. Jak nie trudno się domyślić, wielkość widocznych na stronie elementów powinna być różna dla tych urządzeń.

Responsywność strony - różne urządzenia mobilne

Niemniej w kontekście responsywności strony internetowej można również mówić o dostosowaniu jej do różnych przeglądarek.

Tutaj sprawa może być trudniejsza, ponieważ różne przeglądarki mają inne algorytmy odpowiedzialne za wczytywanie stron www. Dlatego też Chrome, Safari, Firefox, Opera i Internet Explorer mogą odmiennie wyświetlać naszą stronę użytkownikom.

Raport przedstawiający liczbę internautów korzystających z różnych urządzeń
Na szczęście dostosowanie witryny do przeglądarek nie jest aż takie istotne, jak dopasowanie do urządzeń mobilnych, ponieważ ponad 77% użytkowników w Polsce korzysta z przeglądarki Google Chrome (źródło). Zupełnie inaczej jest w przypadku statystyk dotyczących przeglądania stron na różnych urządzeniach. Badania już od dłuższego czasu pokazują, że większość użytkowników korzysta z urządzeń mobilnych przy surfowaniu po sieci. Raport Polskiego Badania Internetu ze września 2020 r. wskazuje, że 22,4 mln internautów wykorzystało komputery lub laptopy do połączenia się z siecią. W przypadku telefonów i tabletów liczba ta wyniosła 24,4 mln, a więc 2 mln więcej. Możesz to zobaczyć na wykresie obok. Dlatego warto zadbać o responsywność strony internetowej. Niemniej nie jest to jedyna korzyść – te szerzej opiszemy dalej.

Po co tworzyć strony dostosowane do urządzeń mobilnych?

Wskazywałem już wcześniej, że większość internautów przegląda strony z urządzeń mobilnych – a trend coraz bardziej wzrasta. Nie ma co się temu dziwić. Korzystanie z telefonu jest wygodne, szybkie, a sprzęt ma się zawsze pod ręką.

Podczas podróży, spaceru, zwiedzania miasta, a także w innych czynnościach brakuje możliwości poszukiwania informacji przy użyciu komputera. A przecież informacje są potrzebne na już!

Trzeba znaleźć dobrą restaurację, cennik wjazdu na wieżę Eiffla lub zdjęcia niedźwiedzia, którego można spotkać podczas górskiej wędrówki. Dlatego tak ważne jest, aby dzielić się informacjami, które poprawnie wyświetlają się na urządzeniach mobilnych.

Responsywność strony a user experience

Nieresponsywna strona internetowa jest niedopuszczalna pod względem user experience.

UX to zbiór działań, które mają zadbać o dobre wrażenia użytkownika, który przegląda naszą stronę. Kwestią podstawową jest tutaj, aby strona była dostępna, tzn. widoczna dla odwiedzających. Użytkownik nie może mieć żadnych problemów z odbiorem jakiejkolwiek treści zamieszczonej na stronie www.

Dobry user experience wpływa na to, że internauci chętniej wracają na naszą stronę. Sam pomyśl – co myślisz o stronie, którą przeglądasz na telefonie, a ta totalnie się rozjeżdża, ukrywając połowę tekstu? Czy wybierasz tę firmę? Czy zamawiasz z niej produkty? Czy czytasz treści?

Jeżeli strona nie będzie responsywna, to użytkownicy szybciej opuszczą Twoją witrynę, a także nie zapoznają się z Twoją ofertą. Stracisz potencjalnych klientów lub partnerów.

Za mała czcionka na telefonie, brak przejrzystych marginesów i zoptymalizowanych zdjęć, niedziałające przyciski, to najczęstsze problemy techniczne związane z responsywnością stron internetowych.

Dobry user experience wpływa na to, że internauci chętniej wracają na naszą stronę. Sam pomyśl – co myślisz o stronie, którą przeglądasz na telefonie, a ta totalnie się rozjeżdża, ukrywając połowę tekstu? Czy wybierasz tę firmę? Czy zamawiasz z niej produkty? Czy czytasz treści?

Jeżeli strona nie będzie responsywna, to użytkownicy szybciej opuszczą Twoją witrynę, a także nie zapoznają się z Twoją ofertą. Stracisz potencjalnych klientów lub partnerów.

Za mała czcionka na telefonie, brak przejrzystych marginesów i zoptymalizowanych zdjęć, niedziałające przyciski, to najczęstsze problemy techniczne związane z responsywnością stron internetowych.

User experience a responsywność strony

Responsywność strony a SEO

Responsywność strony internetowej znacząco wpływa na pozycjonowanie platformy, co niejednokrotnie potwierdziło samo Google, a także z czym zgadzają się doświadczone osoby zajmujące się pozycjonowaniem stron.

Problematyka pozycjonowania jest szersza niż sama responsywność strony, ponieważ czynników, które wpływają na pozycję w wyszukiwarce jest znacznie więcej (wielu uważa, że ponad 200). W kontekście czynników związanych z mobile friendly można mówić o responsywności strony, a także o: czasie ładowania witryny na urządzeniach mobilnych; dopasowaniu treści (wyeliminowanie zbyt dużej ilości grafik i innych multimediów, a także ich kompresja); wyróżnienie treści kluczowych; poprawa nawigacji i architektury informacji.

Aby zmierzyć, czy dana strona jest mobile friendly, można skorzystać z narzędzia przygotowanego przez Google, które zostanie opisane w dalszej części artykułu.

Jak sprawdzić, czy moja strona internetowa jest responsywna?

Test mobile friendly a responsywność strony

Pierwszą metodą, którą opiszę, jest narzędzie stworzone przez Google. Jest bardzo proste w obsłudze i szybko generuje potrzebne informacje.

Wystarczy wejść na stronę: (kliknij tutaj) i wpisać adres URL swojej witryny, a następnie kliknąć przycisk „Sprawdź URL”.

Narzędzie zacznie analizować Twoją stronę. Będzie to wyglądać tak, jak na zdjęciu obok.

Responsywność strony a mobile friendly
Responsywność strony a mobile friendly
Raport dotyczący responsywności strony
Raport dotyczący responsywności strony

Po kilkudziesięciu sekundach oczekiwania pojawi się wynik. Tutaj możesz zobaczyć zielony komunikat „Strona jest dostosowana do komórek”. Oznacza to, że strona www.quickprest.pl jest responsywna.

Więcej szczegółowych danych można wyczytać, jeżeli podpina się swoją stronę pod Google Search Console. Tam znajdziesz informację na temat tego, które konkretnie podstrony są responsywne i mobile friendly.

Sprawdzanie responsywności strony poprzez funkcję „Zbadaj”

Wejdź na swoją stronę internetową i kliknij prawym przyciskiem myszy w jakiś element, np. tło. Pojawi Ci się pasek z różnymi opcjami. Wybierz opcję „Zbadaj”. Wtedy z prawej strony (domyślny widok) wyskoczy okno z kodem źródłowym strony. Możesz to zobaczyć na zdjęciu obok.

W górnym pasku znajduje się wiele funkcji. W kontekście sprawdzenia responsywności strony interesować nas będzie jedna komenda „Toggle device toolbar”. Jest ona dostępna z lewego brzegu.

Sprawdzanie responsywności strony przy pomocy komendy Zbadaj
Sprawdzanie responsywności strony przy pomocy komendy Zbadaj
Pogląd responsywności strony na różnych urządzeniach
Pogląd responsywności strony na różnych urządzeniach

Klikając sobie w tę opcję możesz zmieniać rozdzielczość widoku swojej strony internetowej, dzięki czemu sprawdzisz, czy poprawnie wyświetla się, kiedy przyjmuje dane rozmiary.

Co ciekawe, można nawet wybrać konkretne urządzenia, aby zobaczyć, jak strona będzie prezentować się użytkownikom, którzy z nich korzystają.

By lepiej pokazać Ci możliwości funkcji „Zbadaj” nagrałem krótki film, w którym prezentuję, jak uruchomić wyżej opisane sposobności. Dzięki temu szybko sprawdzisz responsywność strony internetowej.

Co powinna zawierać responsywna strona internetowa?

Oczywiście można po prostu powiedzieć, że responsywna strona internetowa powinna zawierać elementy, które automatycznie dopasowują się do urządzeń mobilnych. Niemniej takie zalecenie nie mówi zbyt dużo o tym, co ma się na responsywnej stronie znaleźć.

A nie jest to kwestia taka oczywista, jak może się wydawać, ponieważ często tworzy się wiele sekcji osobnych dla komputerów i dla urządzeń mobilnych.

Dla przykładu dobrą praktyką jest, aby nie zamieszczać na stronie w wersji mobilnej zbyt dużej ilości zdjęć i innych multimediów. Może to spowodować trudności w wyszukiwaniu treści, a także zbyt długie wczytywanie i przewijanie strony.

Najważniejszą kwestią jest natomiast to, aby strony na laptopy oraz strony na urządzenia mobilne prezentowały te same treści i zachowywały między sobą spójność. Unika się robienia dwóch zupełnie różnych witryn ze względu na doświadczenia użytkownika, a także pozycjonowanie strony.

Reasumując, zachowujemy ten sam content strony, ale odchudzamy go na urządzenia mobilne z efektownych i dużo ważących animacji, a także ograniczamy liczbę multimediów.

Sposób na stronę responsywną nr 1: wybór szablonu

Pierwsza, najprostsza metoda tworzenia responsywnej strony internetowej, to wybór szablonu, który jest dostosowany do urządzeń mobilnych.

Dla przykładu możesz skorzystać z banku motywów stron responsywnych: https://www.motywywordpress.pl/responsywne/.

Ewentualnie można wyszukać sobie poszczególne szablony w Google. Niektóre witryny mają nawet porównywarkę widoku motywu na różnych urządzeniach. Przykład znajdziesz chociażby tutaj.

Kiedy już znajdziesz responsywny szablon, który odpowiada Twoim potrzebom, możesz go wgrać na swój serwer za pomocą WordPressa.

W tym celu wykonaj następujące czynności:

  1. Przejdź do kokpitu.
  2. Z pasku bocznego menu znajdź opcję „Wygląd” i najedź na nią kursorem myszki.
  3. Następnie kliknij przycisk „Motywy” i „Dodaj nowy motyw”.

Jeżeli wcześniej pobrałeś sobie motyw zapakowany w pliku .zip, to kliknij opcję „Wyślij motyw na serwer” i wybierz odpowiedni dokument z komputera.

Dodawanie responsywnego szablonu strony
Dodawanie responsywnego szablonu strony

Teraz pozostało jedynie edytować stronę: podmienić teksty na nasze, przetłumaczyć, jeżeli jest taka konieczność, wstawić własne zdjęcia, regulaminy itp.

Sposób nr 2: wybór page buildera

Jednym z najbardziej popularnych page builderów na WordPressie jest Elementor. Pozawala on na tworzenie stron w technologii ‘drag and drop’ (przeciągnij i upuść).

Więcej o samym Elementorze, o jego instalacji oraz plusach i minusach pisaliśmy w tym artykule: https://quickprest.pl/elementor-pierwsze-kroki-plusy-i-minusy-korzystania-z-page-buildera/.

Elementor jest również wspaniałym narzędziem do tworzenia stron responsywnych. Funkcjonalność tej wtyczki umożliwia nam podgląd widoków strony na różnych urządzeniach na żywo przy edytowaniu strony – co możesz zobaczyć na zdjęciu pod spodem.

Tworzenie responsywnej strony w Elementorze
Tworzenie responsywnej strony w Elementorze

Wybierając tryb responsywny na górze strony pojawiają się dodatkowe opcje. Można wybrać widok dla telefonu, tabletu i komputera, a program automatycznie zmieni rozdzielczość wyświetlanej strony. W ten sposób zobaczysz, czy Twoja strona dobrze dopasowuje się do urządzeń mobilnych.

Można sobie również ustawić pożądaną wysokość i szerokość widoku wpisując konkretne liczby w polach w prawym górnym rogu (W i H).

Oczywiście nie wszyscy chcą korzystać z Elementora. Dobra wiadomość jest taka, że większość page builderów posiada już podobne funkcjonalności, dzięki czemu robienie stron responsywnych jest bajecznie proste.

Sposób III: edycja z podglądem na telefonie.

Jeżeli jednak okazałoby się, że używany przez Ciebie page builder nie posiada trybu responsywnego, to nic straconego!

Nic przecież nie stoi na przeszkodzie, abyś podglądał swoją stronę przy użyciu własnego telefonu.

Wystarczy, że opublikujesz stronę, którą właśnie tworzysz, a następnie wejdziesz na nią poprzez wpisanie adresu URL na telefonie.

Kontrola na własnych urządzeniach mobilnych, które posiadamy lub którymi możemy operować, bo np. mają je nasi bliscy, zalecana jest również wtedy, kiedy teoretycznie wybieramy motyw lub page builder z responsywną stroną. Należy pamiętać, że zawsze może się coś rozjechać i popsuć, a moje doświadczenie mówi, że jest tak dosyć często. Dlatego dobrym nawykiem jest sprawdzanie opublikowanej strony i ewentualna korekta błędów.

Przykłady stron responsywnych

Oczywiście można by mnożyć przykłady internetowych stron responsywnych, ponieważ obecnie bardzo rzadko zdarza się, żeby profesjonalne lub większe firmy miały witrynę niedostosowaną do urządzeń mobilnych.

Niemniej wskażę kilka, żebyś szybko zobaczył, jak responsywne strony wyglądają w praktyce.

Podsumowanie

Responsywne strony internetowe to w dzisiejszy czasach obowiązek. Witryna dostosowana do urządzeń mobilnych dba o doświadczenia użytkowników, lepiej sprzedaje i zachęca do ponownego wejścia. Ponadto responsywność wpływa na pozycjonowanie strony. By stworzyć responsywną stronę internetową możesz wykorzystać responsywny motyw, page builder lub edytować stronę z podglądem na telefonie.

Jeżeli chcesz, abyśmy wykonali dla Ciebie responsywną stronę internetową, to skontaktuj się z nami.

Przeczytaj również najnowsze artykuły:

5 komentarzy do “Responsywna strona internetowa – jak ją stworzyć bez kodowania? [3 proste sposoby]”

  1. I think thіs is among the most important information for me.
    And i’m glad гeading your article. But want to remark on few general things, The ѡeb site style iѕ ideal, the articles
    is really greаt : D. Gօod job, cheers

  2. Pingback: Strona internetowa dla restauracji – co powinna zawierać? [poradnik 2021]

  3. I was suggested this website by my cousin. I’m not sure whether this
    post is written by him as nobody else know such detailed about
    my trouble. You are amazing! Thanks!

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *