Responsywna strona internetowa – jak ją stworzyć bez kodowania? [3 proste sposoby]
- Robert Jakubczak - Copywriter & UX Designer
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.
Spis treści:
- Czym jest responsywna strona internetowa?
- Po co tworzyć strony dostosowane do urządzeń mobilnych?
- Jak sprawdzić, czy moja strona internetowa jest responsywna?
- Co powinna zawierać responsywna strona internetowa?
- Sposób I: wybór szablonu.
- Sposób II: wybór page buildera.
- Sposób III: edycja z podglądem na telefonie.
- Przykłady stron responsywnych.
- Podsumowanie.
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ń.
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.
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.
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.
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.
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:
- Przejdź do kokpitu.
- Z pasku bocznego menu znajdź opcję „Wygląd” i najedź na nią kursorem myszki.
- 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.
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.
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:
Jak zwiększyć sprzedaż w sklepie internetowym o 60%? [5 psychologicznych wyzwalaczy sprzedaży]
Głównym celem każdego sklepu internetowego jest sprzedaż. Firmy wydają ogromne pieniądze na badania klientów, poprawę user experience czy działania marketingowe. A czasem wystarczy wdrożyć na
Live chat na stronie internetowej – jak zainstalować [tawk.to]
Live chat to wspaniałe narzędzie, które umożliwia użytkownikowi bezpośredni i szybki kontakt z właścicielem strony lub osobą, która zajmuje się obsługą klienta. W tym artykule
Wszystko o optymalizowaniu zdjęć na stronie internetowej – kompletny poradnik [SEO, user experience]
Zdjęcia i obrazy na stronie internetowej są bardzo ważne. Poprawiają user experience, pozycjonowanie strony SEO, a także przyciągają uwagę i zwiększają konwersję. Skąd brać zdjęcia
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
Thank you Pealed. I keep my fingers crossed for your development!
Pingback: Strona internetowa dla restauracji – co powinna zawierać? [poradnik 2021]
Hi to every , as I am genuinely eager of reading this webpage’s
post to be updated on a regular basis. It consists of good material.
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!
Pingback: Magazyn Suplement | Magia wirtualności - Magazyn Suplement