Na jakim urządzeniu obecnie czytasz tego bloga? Na komputerze, tablecie czy telefonie komórkowym? Często zdarza się, że osoby korzystające z Internetu codziennie częściej korzystają z tych urządzeń mobilnych. Nie ma znaczenia, czy czytasz artykuł na blogu o tym urządzeniu, robisz zakupy w e-sklepie, czy oglądasz ostatnią część popularnego serialu. Ważne jest, aby Twoja witryna była responsywna. Jak twój?
W poniższym artykule poznasz wszystkie niezbędne odpowiedzi. A jeśli nie przypadkiem, nie krępuj się pytać w komentarzach.
Zróbmy to stopniowo. Co oznacza wspomniane słowo „responsywny”?
Projekt responsywny to projekt, w którym Twoja witryna może łatwo dostosować się do szerokości dowolnego ekranu. Ta funkcja jest tworzona za pomocą CSS. W praktyce, jeśli Twoja witryna jest responsywna, będzie to oznaczać, że witryna będzie wyświetlać 96% swojej szerokości, niezależnie od urządzenia, na którym ją przeglądasz i wielkości witryny. Jeśli więc przeglądasz stronę na telefonie komórkowym i tablecie, zostanie ona automatycznie zorganizowana tak, aby była w pełni czytelna na obu urządzeniach. Tak samo będzie z drugiej strony, jeśli użyjesz na przykład dużego telewizora LCD do wyświetlania.
Na szczęście większość motywów WordPress jest już responsywna . Dlatego przy wyborze tematu weź pod uwagę ten aspekt i wybierz spośród tych, które są responsywne. Jeśli zakochasz się w nieresponsywnym motywie, jeśli jesteś bardziej zaawansowanym użytkownikiem WordPress , programistą, możesz użyć nieresponsywnego motywu, aby stworzyć responsywny motyw, używając odpowiedniego kodu.
Jeśli nie wiesz, że nie wiesz, nie masz ochoty programować, pobierz moduł WPTouch Mobile .
Temat responsywny ma kilka aspektów, dla których nazywamy go w ten sposób:
- Ludzie będą mogli łatwo przeglądać Twoje treści na dowolnym urządzeniu.
- Menu nawigacyjne dostosuje się do użytkownika podczas poruszania się po stronie.
- Po zmianie rozmiaru ekranu przeglądarka nadal wyświetla całą zawartość, którą chcemy widzieć, i nic nie pozostaje ukryte.
- Formularze na stronie zostaną również dostosowane, aby można je było łatwo wypełniać na dowolnym urządzeniu.
- Twoje obrazy i inne treści również zostaną dostosowane do rozmiaru ekranu. (Jednak upewnij się, że nie są one większe niż to konieczne podczas wklejania ich na stronę)
- W punktach granicznych, gdzie zmienia się układ elementów na stronie, wszystko jest również wyświetlane i nic nie pozostaje ukryte.
- Projektowanie responsywne dotyczy wszystkich rodzajów treści w sieci, nie tylko stron czy postów.
Być może słyszałeś o mobilnym temacie o responsywnym temacie. Był bardzo często używany kilka lat temu. Oprócz klasycznej wersji internetowej ostatnio potrzebowałeś wersji mobilnej lub aplikacji mobilnej. Dziś to (w większości) przeszłość, a dzięki responsywnemu projektowi otrzymujesz 3 w 1, a dodatkowo oszczędzasz znaczne koszty.
Dziś preferowany jest temat responsywny, ponieważ ma większe założenie, że strona będzie nadal działać na nowych urządzeniach bez żadnych problemów w przyszłości. Wadą motywu mobilnego nad responsywnym jest również to, że interfejs zmienia się tylko na bardzo określoną szerokość ekranu.
Motywy lub moduły mobilne mają kilka funkcji, które nie są zbyt pozytywne dla UX (User Experience): dotyczą tylko określonych stron lub określonego rodzaju treści na nich. Staje się to coraz mniej powszechne, ale nadal istnieją witryny blokowane przez wersję mobilną. Oznacza to, że odwiedzający Twoją witrynę nie będą mogli uzyskać dostępu do jej zawartości. A ponieważ ponad połowa przeglądania stron internetowych odbywa się za pomocą telefonu komórkowego, z pewnością nie spodoba ci się to zjawisko. Tak, większość tematów jest już responsywna, ale są też między nimi znaczące różnice. Warto więc wiedzieć, czego szukasz.
Znajdź naprawdę dobry responsywny temat. Jeśli masz już temat, wypróbuj go na różnych szerokościach ekranu. Otwórz swoją stronę w przeglądarce na komputerze z włączonym motywem i ręcznie zmień rozmiar przeglądarki. Obserwuj, co się dzieje. Czy widzisz wszystkie elementy na stronie? Czy zmieściły się w oknie przeglądarki, mimo że okno zostało zmniejszone? Teraz otwórz swoją stronę motywu na urządzeniu mobilnym. Jeśli to możliwe, używaj ekranów o różnych rozmiarach. Upewnij się, że widzisz wszystkie elementy na ekranie i niczego nie brakuje.
Ponadto od kwietnia 2015 r. Google nakłada kary na witryny, które nie mają responsywnego projektu i spycha je w dół w wynikach wyszukiwania. Powód jest prosty. Chce zapewnić użytkownikom najlepszą możliwą obsługę. Możesz na przykład sprawdzić, czy Twoja witryna jest responsywna, w sekcji Odbiorcy na koncie Google Analytics> Urządzenia mobilne> Przegląd.
Czuję, że responsywny design jest dziś określany jako trend. Wielu spodziewa się, że prędzej czy później odejdzie. Ale responsywny design to coś więcej niż tylko trend. To sposób myślenia.
Projekt responsywny powinien gwarantować, że wrażenie witryny nie zostanie zakłócone oraz że można płynnie i sprawnie poruszać się po dowolnym urządzeniu. Szybkość ładowania strony jest również związana z responsywnym projektem. Idealnie powinno to zająć około 2 sekund. Te dwa atrybuty odgrywają dziś ważną rolę w zapewnieniu, że odwiedzający pozostanie na naszej stronie, a jednocześnie jak najszybciej znajdzie to, czego szuka. Dzięki odpowiedniemu rozmieszczeniu wyświetlanych elementów, responsywny design może pomóc przyspieszyć ładowanie strony o kilkadziesiąt sekund.
Czy ten artykuł był dla Ciebie pomocny? Wesprzyj mnie jego udostępnianiem. 👍