Jest rok 2023, co oznacza, że ​​responsywne projektowanie stron internetowych nie jest już opcją, ale koniecznością.

Przy 92,3% użytkowników Internetu uzyskujących dostęp do sieci za pośrednictwem urządzeń mobilnych i blisko 60% całego globalnego ruchu internetowego pochodzącego z urządzeń mobilnych, motywy WordPress po prostu muszą być w pełni responsywne, jeśli mają zaspokoić potrzeby współczesnych użytkowników.

Czym dokładnie jest responsywny projekt motywu?

Jakie podstawowe komponenty zapewniają bezbłędne działanie motywu na każdym urządzeniu i jak dokładnie działają?

Odpowiedzi na wszystkie te pytania znajdziesz w tym przewodniku.

Niezależnie od tego, czy jesteś właścicielem witryny internetowej, który chce uzbroić się w całą wiedzę potrzebną do wyboru najlepiej responsywnego motywu WordPress, czy początkującym projektantem przygotowującym się do zbudowania pierwszego motywu, przedstawiliśmy wszystko, co musisz wiedzieć o kluczowych funkcjach responsywne motywy.

Co sprawia, że ​​motyw WordPress jest responsywny?

W najbardziej podstawowym sensie responsywny motyw WordPress to dowolny motyw, który zmienia swój projekt i ogólny układ, aby pasował do urządzenia, na którym użytkownik go przegląda.

Oznacza to, że jeśli załadujesz swoją witrynę na trzech różnych platformach (na przykład na komputerze stacjonarnym, iPadzie i telefonie z Androidem), może ona wyglądać inaczej na każdej z nich, ale zapewni użytkownikom najlepsze możliwe wrażenia na tym konkretnym urządzeniu.

Jakie są kluczowe cechy responsywnego motywu?

Istnieją trzy podstawowe funkcje, dzięki którym motyw WordPress działa w sposób responsywny.

Obejmują one:

Kontynuacja artykułu poniżej

1. Elastyczne systemy sieciowe

We wczesnych latach istnienia sieci projektanci stosowali te same zasady układu, co w publikacjach drukowanych, ustalając stałe, bezwzględne rozmiary układów stron w oparciu o piksele.

Kiedy większość z nas zaczęła odchodzić od komputerów stacjonarnych i uzyskiwać dostęp do sieci za pomocą tabletów i smartfonów, szybko stało się jasne, że to już nie działa.

Strony ze stałym układem zwykle nie wyglądały dobrze na tych urządzeniach, a nawet jeśli ogólna estetyka była bez zarzutu, funkcje nawigacji i witryny często były zbyt małe lub po prostu trudne w użyciu.

Z tego powodu projektanci pracujący nad responsywnymi motywami zaczęli zmieniać swoje podejście i stosować elastyczne systemy siatek.

Kamień węgielny każdego responsywnego motywu, elastyczne układy siatki zapewniają ramy, które umożliwiają motywom zmianę ich układu w celu dopasowania do typu urządzenia i rozmiaru ekranu.

W skrócie, systemy te składają się z szeregu siatek i kolumn, z językiem CSS (Cascading Style Sheets) używanym do kontrolowania sposobu ich dostosowywania na różnych urządzeniach.

Na przykład możliwe jest użycie CSS do ustalenia, że ​​witryna powinna być rozłożona na kilka kolumn na monitorze komputera stacjonarnego, ale uproszczona do jednej kolumny na mniejszym ekranie, takim jak iPhone.

Bez takiego systemu twórcy motywów nie mieliby możliwości zapewnienia, jak ich strony będą wyglądać na różnych urządzeniach, ale to nie wszystko, co robią.

Ponieważ użycie elastycznej siatki z CSS oznacza, że ​​wszystkie style i układy są trzymane razem, znacznie łatwiej jest zająć się aktualizacjami i bieżącą konserwacją, niż gdyby były one umieszczane w głównym kodzie motywu.

2. Punkty przerwania

Mówiąc prościej, punkt przerwania responsywnego motywu to punkt, w którym układ motywu powinien się zmienić.

Kontynuacja artykułu poniżej

Na przykład niektórzy projektanci mogą zdecydować się na ustawienie wielu punktów przerwania, które zmieniają układ strony internetowej, gdy użytkownik dokonuje minimalnych zmian w rozmiarze przeglądarki internetowej. Z kolei inni mogą zdecydować, że układ powinien się zmieniać tylko wtedy, gdy zmiana rozmiaru jest znacząca, na przykład z ekranu komputera stacjonarnego na smartfon.

Te punkty przerwania są określane przez zapytania o media CSS, określone polecenia, które mówią motywowi, kiedy wyświetlić inny układ.

@media (maksymalna szerokość: 480 pikseli) {

.pojemnik {

Szerokość: 100%;

}

}

Na przykład, korzystając z powyższego zapytania o media, twórca motywu może określić, że układ ogranicza się do jednej kolumny, gdy rozmiar ekranu wynosi 480 pikseli lub mniej.

Zgodnie z ogólną zasadą najlepszych praktyk, mądrze jest mieć co najmniej trzy lub cztery punkty przerwania dla każdej witryny, aby upewnić się, że odpowiada ona najczęściej używanym rozmiarom ekranu.

3. Płynne obrazy

Podczas gdy elastyczne systemy siatek decydują o tym, jak ogólny układ reaguje na różne rozmiary ekranu, płynne obrazy robią to samo z, jak się domyślacie, obrazami na stronie.

Kontynuacja artykułu poniżej

Podobnie jak systemy siatek, płynne obrazy są obsługiwane przez CSS, który w tym przypadku określa rozmiar obrazu na podstawie procentu jego kontenera, a nie stałej szerokości. W rezultacie obrazy te automatycznie dopasowują się do optymalnego rozmiaru i położenia dla ekranu, na którym są wyświetlane.

Takie podejście przynosi korzyści zarówno projektantom, jak i użytkownikom końcowym.

Dzięki płynnym obrazom twórcy motywów nie muszą przechodzić przez żmudny proces tworzenia obrazów o różnych rozmiarach dla różnych przeglądarek i ustalania reguł, które obrazy mają być używane na jakim rozmiarze ekranu. Zamiast tego mogą użyć jednego obrazu i kontrolować jego responsywność za pomocą CSS.

Tymczasem odwiedzający witrynę cieszą się lepszym ogólnym doświadczeniem, dzięki czemu zdjęcia nie przeszkadzają w dostępie do ważnych informacji lub funkcji strony, takich jak formularze kontaktowe i wezwania do działania.

4. Responsywna typografia

Oczywiście nie tylko obrazy muszą być dostosowane do różnych rozmiarów ekranu; Twój tekst też.

W końcu wyobraź sobie, że tworzysz najpierw dla urządzeń mobilnych i używasz rozmiaru czcionki odpowiedniego dla urządzeń z Androidem i iPhone’a. Gdy użytkownik próbuje odwiedzić Twoją witrynę na komputerze stacjonarnym lub laptopie, istnieje prawdopodobieństwo, że tekst będzie zbyt mały, aby można go było poprawnie przeczytać.

I odwrotnie, gdybyś użył stałego rozmiaru czcionki na pulpicie, byłby on zbyt duży dla urządzeń mobilnych i zepsułby wrażenia użytkownika.

Z tego powodu projektanci motywów muszą polegać na responsywnej typografii, ponownie wykorzystując moc kaskadowych arkuszy stylów, aby określić najbardziej odpowiedni krój i rozmiar czcionki dla każdego rozmiaru ekranu.

5. Nawigacja przyjazna dla urządzeń mobilnych

Przyjazna dla użytkownika nawigacja jest kwintesencją każdej witryny internetowej, umożliwiając odwiedzającym przeskakiwanie między stronami w celu znalezienia potrzebnych informacji lub usług.

Naturalnie jest to więc coś, na co projektanci responsywnych motywów naprawdę muszą zwracać uwagę.

Standardowe menu nawigacyjne, które widzisz w witrynach przeglądanych na komputerze, często mogą być trudne w użyciu na mniejszych ekranach, często negatywnie wpływając na ogólny projekt i układ w całym procesie.

Dlatego projektanci zazwyczaj zwracają się do tak zwanego „menu hamburgerów”.

Bez wątpienia widziałeś już „menu hamburgerów” niezliczoną ilość razy, nawet jeśli nie wiedziałeś, jak się nazywają. Zasadniczo termin ten odnosi się do trzech myślników na stronie lub aplikacji mobilnej, które przypominają konstrukcję hamburgera i które po kliknięciu otwierają dostęp do menu nawigacyjnego.

Te menu są tworzone przy użyciu kombinacji HTML dla struktury, CSS dla stylu i pozycji oraz JavaScript, aby umożliwić niezbędną interakcję, więc menu otwiera się i zamyka po dotknięciu.

Podczas gdy właściciele witryn mogą korzystać z różnych najlepszych wtyczek menu mobilnego, takich jak WP Mega Menu lub WP Mobile Menu, aby poprawić styl i funkcjonalność menu swojego motywu, projektanci motywów na ogół stwierdzą, że osiągają większy sukces, wbudowując w swój motyw w pełni zoptymalizowaną nawigację mobilną na pierwszym miejscu.

6. Zoptymalizowany projekt przycisków

Przyciski są często pomijanym, ale fundamentalnie ważnym aspektem dobrej jakości responsywnego projektu motywu.

Na komputerze stacjonarnym z kursorem łatwo jest nacisnąć przycisk z dużą precyzją. Na urządzeniu mobilnym użytkownicy będą klikać palcami, co po prostu nie zapewnia tego samego poziomu dokładności.

W związku z tym elementy, które można kliknąć, takie jak przyciski i linki tekstowe, muszą być wystarczająco duże.

Wyczerpujące wytyczne firmy Apple dotyczące interfejsu ludzkiego dla programistów wskazują, że przeciętne dotknięcie palcem ma wymiary 44 x 44 piksele, co oznacza, że ​​twórcy motywów powinni tworzyć przyciski o co najmniej takim rozmiarze.

Wprowadzanie w życie kluczowych funkcji projektowania responsywnego: dlaczego podejście mobile-first ma znaczenie

W branży projektowej i programistycznej istnieje szeroko powtarzana maksyma, że ​​każdy nowy produkt, niezależnie od tego, czy jest to motyw WordPress, oprogramowanie czy niestandardowa strona internetowa, powinien być projektowany z myślą o urządzeniach mobilnych.

Innymi słowy, zamiast tworzyć i testować motyw dla większych ekranów komputerów stacjonarnych i dostrajać go w trakcie pracy, aby upewnić się, że działa na smartfonie, lepiej zacząć od elastycznego systemu siatki i punktów przerwania oraz sprawić, by użytkownik mobilny czuł się najlepiej priorytet.

Ponieważ 92% użytkowników uzyskuje dostęp do sieci za pośrednictwem inteligentnych urządzeń, to zdroworozsądkowe podejście zapewnia zaspokojenie potrzeb wielu odwiedzających od samego początku.

Nie jest to jedyny powód, dla którego należy nadać priorytet projektom mobilnym.

Nie jest tajemnicą, że projektowanie na mniejsze ekrany wiąże się z większymi wyzwaniami i problemami z użytecznością niż w przypadku większych. Koncentrując się na urządzeniach mobilnych, twórcy motywów dają sobie przewagę, zapobiegając większości tych problemów od samego początku, oszczędzając czas potrzebny na cofnięcie się i naprawienie ich później.

Biorąc to wszystko pod uwagę, responsywny motyw nie jest jedyną rzeczą, która może poprawić wrażenia użytkownika na mniejszych ekranach. Aby uzyskać więcej pomocnych narzędzi, zapoznaj się z naszym przewodnikiem po najlepszych wtyczkach WordPress dla witryny przyjaznej dla urządzeń mobilnych.