Robimy strony www

Strona responsywna na WordPress

Strona responsywna na WordPress

Strona responsywna

Strona responsywna na WordPress to już dzisiaj konieczność. Brzmi nieco strasznie, ale połączenie instalacji WordPress’a i edytora stron Elementor eliminuje stres do minimum.

Przy korzystaniu z edytora Elementor budowa strony responsywnej nie zajmuje dużo czasu. Dodatkowo nie wymaga od nas obszernej wiedzy w tym temacie. My chcemy tylko wbić gwóźdź, a nie zastanawiać się jakiego użyć młotka. Odpowiednie narzędzia zapewniają nam ten komfort.

Rozdzielczość ekranu a strona responsywna

W dzisiejszych czasach zagadnienie responsywności (RWD) jest już na stałe w głównym menu tworzenia stron internetowych. Ilość urządzeń mobilnych, na których korzystamy z internetu w Polsce, stale rośnie, co pokazują statystyki.

Na stronie Gemius Ranking możemy sprawdzić rozkład procentowy udziału poszczególnych urządzeń na rynku. Urządzenia mobilne już od dłuższego czasu zajmują pierwsze miejsce i ten trend już raczej się nie zmieni.

Zagadnienie rozdzielczości ekranu jest tematem dosyć obszernym.

Zwłaszcza, że w dzisiejszych czasach ten parametr dotyczący rozdzielczości obrazu na ekranie jest mocno zróżnicowany, ponieważ mamy na rynku wiele rodzajów ekranów.

Dodatkowo, mamy spore różnice w wyglądzie grafiki na ekranie o standardowej rozdzielczości 1920×1200 pikseli, a np. ekranem typu Retina (urządzenia Apple iPhone) gdzie zagęszczenie pikseli na cal jest o wiele większe.

Większość motywów (szablonów) posiada ustawienia grafiki właśnie pod wyświetlacze typu Retina. W panelu DOSTOSUJ możemy oddzielnie wgrać np. logo dla rozdzielczości standardowych i oddzielnie dla wyświetlaczy o wysokich rozdzielczościach.

Motyw Astra. Ustawienia dla Retina

Edycja trybu responsywnego w Elementorze

Jeśli projektujesz swoją stronę na WordPress w edytorze Elementor, masz możliwość dostosowania wyglądu strony pod desktop, tablet i mobile.

Ustawienia dla trybu responsywnego witryny w Elementorze są łatwe w obsłudze. Wystarczy wybrać odpowiedni rodzaj urządzenia i nieco zmienić ustawienia dla poszczególnych elementów witryny.

Najczęściej ogranicza się to do użycia ustawień w polu WIDOCZNOŚĆ i ukrywania tych elementów, które na małym ekranie będą wyglądały niekorzystnie i mało czytelnie.

Elementor pozwala nam na szybki podgląd treści witryny na różnych urządzeniach wyjściowych. Wystarczy wybrać jeden z typu urządzenia (desktop, tablet i mobile) i pochwili zobaczyć jak będzie wyglądać nasza strona właśnie na jednym z tych urządzeń.

Ogólna zasada polega na stopniowym odejmowaniu niektórych elementów, np. panel boczny, gdy chcemy wyświetlić stronę na telefonie czy tablecie. Wygląd strony na komputerze (desktop) daje największe możliwości do ulokowania na niej wielu elementów.

Im bardziej idziemy w stronę urządzeń mobilnych, ta zasada zmienia się na rzecz im mniej tym lepiej. Po za tym, użytkownik musi mieć zapewnioną dobrą widoczność poszczególnych elementów, zwłaszcza tekstu i przycisków, które nie mogą być zbyt blisko siebie.

Na ekranie komputera użytkownik ma najczęściej do dyspozycji mysz, którą porusza się po ekranie. Na urządzeniach mobilnych ten rozmach ogranicza się do tapania palcem, a więc pole wyboru znacznie się zmniejsza. Dlatego musimy o tym pamiętać przy projektowaniu naszej witryny.

Projektując stronę powinniśmy zrobić ukłon w stronę odbiorców smatfonów i zapewnić im przynajmniej minimum komfortu. Chodzi również o to, żeby nie wzrastała nam ilość odrzuceń, co z kolei ujemnie wpływa na SEO naszej strony internetowej.

Test strony responsywnej na WordPress

Ważnym krokiem w procesie budowy strony responsywnej jest jej testowanie. Jako twórcy strony chcemy zobaczyć jej efekt końcowy, gdy jej odbiorca zobaczy ją na swoim urządzeniu.

Naszą stronę najczęściej edytujemy na większym ekranie, przynajmniej na laptopie. Wtedy jednak powinniśmy wziąć pod uwagę, że nawet większa część odbiorców pozna naszą witrynę korzystając właśnie z telefonu. Dlatego przy projektowaniu naszej witryny dobrze jest od razu o tym pamiętać i zadbać o jej czytelny wygląd na urządzeniach mobilnych.

W kodzie pisanym rolę „czujników” zmiany wyglądu witryny w zależności od rozdzielczości urządzenia wyjściowego pełnią tzw. breakpointy.

Breakpointy oreślają zachowanie strony internetowej dla danej szerokości ekranu w przeglądarce. Edytor Elementor całą tą robotę wykonuje za nas. Wystarczy tylko w sposób wizualny i dobór odpowiednich opcji ustawić wygląd witryny dla poszczególnych typów urządzeń.

Czy Twoja strona internetowa jest dostosowana do urządzeń mobilnych możesz sprawdzić korzystając z usługi od Google.

Po wpisaniu adresu strony Google przeprowadzi test optymalizacji mobilnej. W wynikach testu program określi czy strona jest dostosowana do komórek i czy są jakieś problemy z jej wczytywaniem.

Test optymalizacji mobilnej od Google

Nie lekceważmy takich testów, ponieważ w przypadku poważnych błędów na stronie w widoku mobilnym możemy szybko stracić potencjalnych odbiorców.

Istnieją narzędzia dostępne w internecie, za pomocą których możemy przetestować stronę na dowolnych rozdzielczościach.

Jednym z nich jest dodatek do przeglądarki Google Chrome Simple RWD Resizer lub jego brat Viewport Resizer

Dzięki takim narzędziom możemy zobaczyć jak zaprezentuje się nasza witryna na konkretnych urządzeniach w praktyce. Możemy wybrać urządzenie, rozdzielczość czy widok horyzontalny lub wertykalny.

Najczęściej motywy, które wybieramy do budowy naszej witryny są już responsywne. Są zbudowane w taki sposób żeby twórca strony nie musiał się już o to martwić. Pozostaje tylko zadbać o wspomnaine wcześniej ustawienia wyglądu strony w oparciu o edycję responsywności w edytorze Elementor.