Tworzenie responsywnej witryny WordPress, którą pokochają użytkownicy mobilni

Ponieważ coraz więcej osób korzysta z Internetu za pomocą różnych urządzeń mobilnych i rozmiarów ekranu, ważne jest, aby witryna WordPress była responsywna i niezależna od urządzenia. Może nawet czytasz ten artykuł na telefonie. (Jak wygląda nasza strona? Dobrze? Dobrze.)

W tym poście omówię wszystko, co musisz wiedzieć, aby nadać witrynie responsywny układ, ale także zapewnić odwiedzającym najlepsze możliwe wrażenia na wszystkim, od 27-calowych wyświetlaczy UHD do 4-calowych ekranów iPhone 5s.

W szczególności przyjrzę się:

• Motyw responsywny, pobierając motyw responsywny lub dostosowując własny motyw.
• Ułatwianie użytkownikom korzystania z Treści Witryny na wszystkich urządzeniach.
• Elastyczna nawigacja i sposoby ułatwiania użytkownikom poruszania się po witrynie na różnych urządzeniach.
• Formularze responsywne, dzięki czemu są łatwe do wypełnienia na wszystkich urządzeniach.
• Responsywne obrazy: upewnij się, że obrazy nie są większe niż muszą być dla różnych rozmiarów ekranu.

W niektórych przypadkach podam Ci kod lub pomysły, których możesz użyć w swoim motywie, aby Twoja strona była responsywna, podczas gdy w innych przyjrzę się wtyczkom lub motywom, które pomogą Ci usprawnić działanie Witryny na różnych urządzeniach.

Ale najpierw zacznijmy od zrozumienia, czym jest responsive web design (RWD).

Czym jest responsywny projekt?

Najbardziej podstawowy, responsywny projekt polega na nadaniu witrynie responsywnego układu: takiego, który dostosowuje się do szerokości ekranu. Wykorzystuje CSS i zawiera dwa elementy:

• Używanie elastycznych szerokości dla elementów na stronie: zamiast na przykład nadawać witrynie szerokość 1200px, nadajesz jej Szerokość 96%. Daje to trochę przestrzeni do oddychania i zapewnia, że witryna zajmie 96% szerokości okna, niezależnie od jego rozmiaru.
• Dodawanie zapytań o media do arkusza stylów w celu zmiany CSS dla określonych szerokości ekranu. Na przykład, jeśli witryna ma pasek boczny po prawej stronie, możesz użyć zapytania o media, aby przenieść ją poniżej głównej treści na mniejszych ekranach, ponieważ w przeciwnym razie byłaby zbyt wąska.

Projektowanie responsywnych stron internetowych zostało po raz pierwszy szczegółowo opisane przez Ethana Marcotte w 2010 roku i od tego czasu nie jest dodatkiem dla witryn do fundamentalnej zmiany w sposobie projektowania układów.

Od tego czasu został opracowany w celu uwzględnienia responsywnych obrazów, interakcji i nawigacji, a także doświadczenia użytkownika (UX) na różnych urządzeniach. Zostało również wiele pracy w obszarze tego, co zostało ulepszone na mniejszych urządzeniach za pomocą CSS (np. layouts) i co można zrobić za pomocą języków po stronie serwera, takich jak PHP (np. responsywne obrazy). Dam ci kilka wskazówek na temat obu z nich w tym poście.

Najbardziej podstawowym elementem każdej responsywnej strony jest jej układ, który w WordPress jest dostarczany za pośrednictwem motywu. Rzućmy więc okiem na tworzenie responsywnych motywów.

Responsywny Theming i WordPress

Responsywny motyw to taki, który będzie (przynajmniej) zawierał dwa aspekty RWD, które opisałem powyżej:płynne szerokości i zapytania o media. Różni się to od motywu mobilnego, który może nie zawierać płynnych szerokości, ale po prostu używa zapytań o media, aby całkowicie zmienić układ na określonych szerokościach ekranu (lub punktach przerwania).

Wadą motywu mobilnego jest to, że zmienia on układ tylko przy bardzo określonych szerokościach ekranu.

Z różnorodnością urządzeń stale rośnie, każdy układ o stałej szerokości zawsze zepsuje się na niektórych urządzeniach, dlatego zdecydowanie polecam używanie responsywnych motywów zamiast motywów mobilnych (lub wtyczek do układu mobilnego, które kiedyś były wściekłe). Zapewni to również większe prawdopodobieństwo, że Twoja witryna będzie działać na przyszłych urządzeniach.

Motywy lub wtyczki mobilne mają czasami inną funkcję, która jest bardzo frustrująca i szkodliwa dla UX: dotyczą tylko określonych stron lub typów treści w Twojej witrynie.

Teraz staje się to coraz mniej powszechne, ale są strony, których Wersja mobilna blokuje odwiedzającym mobilną przeglądanie i interakcję z dużą ilością treści na stronie. Biorąc pod uwagę, że ponad połowa przeglądania stron internetowych odbywa się teraz za pośrednictwem urządzeń mobilnych, na pewno nie chcesz, aby tak się stało w Twojej witrynie!

Przekonasz się, że zdecydowana większość najlepszych i najnowszych motywów w repozytorium motywów WordPress jest responsywna, ale istnieją między nimi różnice i opłaca się wiedzieć, czego szukać.

Znalezienie dobrego responsywnego motywu

Niektóre motywy zawierają niewielką liczbę punktów przerwania zapytań o media w oparciu o najczęstsze szerokości ekranu, ale może to powodować problemy, jeśli ktoś wyświetli Twoją witrynę na urządzeniu, które nie zostało dostosowane (lub może nawet nie istniało, gdy Temat został napisany).

Kiedy wybierasz motyw dla swojej witryny, przetestuj go na wielu różnych szerokościach ekranu.

Otwórz witrynę w przeglądarce komputerowej z włączonym motywem i ręcznie Zmień rozmiar okna przeglądarki. Zobacz, co się dzieje, gdy okno staje się węższe.

Czy Twoja strona stale zmienia rozmiar, aby zmieścić się w oknie, czy są elementy, których nie widzisz?

Może pojawiają się paski przewijania, których musisz użyć, aby zobaczyć wszystko, co nie jest zbyt przyjazne dla użytkownika na komputerze stacjonarnym i może złamać układ na urządzeniu mobilnym.

Teraz spróbuj otworzyć witrynę z włączonym motywem na urządzeniu mobilnym. Jeśli możesz, użyj różnych rozmiarów ekranu, w tym tabletów i telefonów. Zapytaj znajomych, czy możesz pożyczyć swój telefon, aby przetestować swoją witrynę (kiedy po raz pierwszy zrobiłem responsywną witrynę, cały czas chwytałem telefony ludzi, aby móc je przetestować). Sprawdź, czy układ działa na wielu urządzeniach i czy nic nie zniknęło z widoku.

Oto moje kryteria dobrego responsywnego motywu:

• Szerokość witryny zmienia się stale, gdy szerokość ekranu zmienia się przy użyciu elastycznych, opartych na procentach szerokości.
• W punktach przerwania, w których zmienia się układ, nic nie znika ani nie kończy się ukryte za innym elementem.
• Punkty przerwania są ustawiane w punkcie, w którym projekt nie pasuje do szerokości ekranu, a nie na podstawie dowolnego zestawu szerokości ekranu, które nie mają nic wspólnego z projektem, ale są oparte na szerokości iPhone ’ a lub iPada. (Określane jako design-based media queries).
• Układ responsywny dotyczy wszystkich typów treści w witrynie, a nie tylko stron, postów lub archiwów.
• W przypadku wyświetlania na urządzeniu z małym ekranem stylizacja ułatwia użytkownikom stukanie w linki i poruszanie się po witrynie za pomocą przycisków wielkości palca i responsywnych menu nawigacyjnych. (Możesz dodać responsywne menu za pomocą wtyczki, do której przyjdę później).
• Łatwo jest odczytać zawartość na wszystkich typach urządzeń: tekst nie jest mały ani Ogromny na małych ekranach.
• Obszary widżetów są uwzględniane w zapytaniach o media, dzięki czemu ich układ ułatwia czytanie i interakcję z nimi na małych ekranach. Na przykład motyw z czterema obszarami widżetów może mieć je wszystkie obok siebie na dużym ekranie, zmienić na dwa po dwa na średnim ekranie, a następnie mieć je jeden nad drugim na małym ekranie.

To są podstawy. Znajdziesz również responsywne motywy z innymi opcjami, takimi jak możliwość samodzielnego definiowania punktów przerwania, konfigurowania responsywnych obrazów i nie tylko.

Jeśli będziesz edytować i administrować swoją witryną na urządzeniu mobilnym, sprawdź, czy ekrany opcji dołączone do motywu również są responsywne (chociaż stanie się to mniej problemem, ponieważ motywy w większym stopniu korzystają z dostosowywania motywu).

Mobile First Themes

Motyw mobile-first idzie o krok dalej w kwestii responsywności. Zamiast zaczynać od układu pulpitu i używać zapytań o media do zmiany go na mniejszych ekranach, działa na odwrót. Zaczyna się od wąskiego, małego układu ekranu, a następnie używa zapytań o media, aby dostosować rzeczy, gdy ekran staje się większy.

Projektowanie mobile first może prowadzić do mniejszego nadęcia kodu, ponieważ potrzeba mniej CSS, aby kodować mały układ ekranu (na przykład wszystko ma domyślnie 100% szerokości).

Dodawanie dodatkowych stylów układu, takich jak pływy i szerokości procentowe dla pasków bocznych i obszarów widżetów, odbywa się tylko raz, a nie jest wykonywane najpierw dla układu pulpitu, a następnie ręcznie w zapytaniach o media dla mniejszych ekranów.

Pierwszy projekt mobilny może również pomóc w bardziej skoncentrowaniu procesu projektowania. Zamiast myśleć o wszystkich dostępnych nieruchomościach ekranowych, mobile first designer uwzględni tylko to, co jest absolutnie potrzebne w układzie, aby użytkownicy mogli łatwo znaleźć rzeczy na małym ekranie. Następnie, gdy ekran staje się większy, nie skupiamy się na dodawaniu większej ilości treści, ale na dostosowywaniu układu, aby wyglądał tak samo dobrze na pulpicie, jak na urządzeniach mobilnych.

W praktyce możesz zidentyfikować pierwszy motyw mobilny, ponieważ jego zapytania dotyczące mediów będą obejmować min-szerokość zamiast max-szerokość. Zamiast więc dodawać stylizacje o maksymalnej szerokości ekranu mniejszego niż domyślny, motyw dodaje stylizację dla większego ekranu, który jest większy niż domyślny, czyli zero. (Wyjaśnię kod w zapytaniach o media w dalszej części tego postu).

Trend w projektowaniu stron internetowych w ciągu ostatniego roku lub dwóch polegał na projektowaniu wokół treści i interakcji, a nie na projektowaniu witryn, które są niepotrzebnie piękne lub fantazyjne, a pierwszy projekt mobilny pozwala zabłysnąć treści.

Domyślny motyw WordPress (obecnie dwadzieścia szesnaście) jest najpierw mobilny, podobnie jak motywy dostarczane dla niektórych z najpopularniejszych RAM motywów WordPress, chociaż większość z nich jest bardziej tradycyjnie responsywna. Nasz własny motyw z góry i motywy startowe, które są z nim związane, również są mobilne.

Tworzenie Własnego Responsywnego Motywu

Oczywiście nie musisz pobierać responsywnego lub mobilnego pierwszego motywu: zawsze możesz stworzyć lub dostosować swój własny. Można to zrobić na dwa sposoby:

• Weź istniejący motyw i spraw, aby był responsywny, co zazwyczaj wiąże się z dodawaniem zapytań o media dla mniejszych ekranów.
• Podczas kodowania własnego motywu spraw, aby był responsywny, co powinno idealnie obejmować zapytania o media dla większych ekranów, a więc być najpierw mobilnym.

Rzućmy okiem na każdą z nich.

Sprawienie, aby istniejący motyw był responsywny

Jeśli w Twojej witrynie działa istniejący motyw WordPress, z którego jesteś całkowicie zadowolony, ale który nie jest responsywny, możesz dodać do niego responsywność. Są szanse, że układ motywu zostanie zaprojektowany dla dużych ekranów, więc będziesz pisał zapytania o media, które kierują się stopniowo na mniejsze ekrany.

Istnieje wiele dostępnych zasobów, które mogą Ci pomóc, w tym ten samouczek wykorzystujący Stary domyślny motyw twenty ten jako przykład, oraz szereg odpowiednich rozdziałów w mojej książce, Mobile WordPress Development.

Jeśli pracujesz z motywem innej firmy, który będziesz aktualizować w przyszłości, nie edytuj samego motywu: Utwórz motyw podrzędny i dodaj stylizację responsywną do arkusza stylów motywu podrzędnego.

Musisz zrobić dwie rzeczy, aby Twój motyw był responsywny:

1. Edytuj stylizację szerokości elementów w witrynie, aby używały one szerokości procentowych zamiast pikseli.

Jeśli więc Twoja witryna ma szerokość 1200px, obszar treści ma szerokość 900px, a pasek boczny ma szerokość 300px, musisz zmienić je odpowiednio na 100%, 75% i 25%. W rzeczywistości nie jest to takie proste, ponieważ musisz uwzględnić wypełnienia i marginesy, ale musisz zmienić wszystko dla układu szerokości na procenty zamiast pikseli.

Procentowa Szerokość elementu jest względna do elementu zawierającego, a nie do całego ekranu, więc jeśli masz dwa elementy wewnątrz innego, który nie ma pełnej szerokości, rozmiar będzie wynosił 50% każdy, niezależnie od szerokości elementu zawierającego. Kiedy się do tego przyzwyczaisz, życie staje się o wiele łatwiejsze!

2. Dodaj zapytania o media, aby dostosować układ dla mniejszych ekranów.

Jeśli układ jest zbyt zajęty na przykład szerokością 600px, możesz użyć zapytania o media o tej szerokości, aby zmienić styl zawartości i paska bocznego, dając zarówno 100% szerokości, jak i pozbywając się wszelkich pływów. Następnie możesz wziąć to dalej dla mniejszych ekranów, zmieniając układ ponownie na przykład na szerokość 350px.

Te szerokości nie muszą odnosić się do żadnego konkretnego urządzenia, ale powinny być oparte na tym, jak działa układ na różnych szerokościach ekranu, które można przetestować, zmieniając rozmiar okna przeglądarki.

Poniższy kod ustawia 96% szerokości dla witryny na dużych ekranach, z maksymalną szerokością ustawioną dla bardzo dużych ekranów. Umieszcza zawartość i pasek boczny obok siebie za pomocą szerokości procentowych, z obszarami widżetów w stopce ułożonymi obok siebie (są cztery).

Następnie zawiera Zapytanie o media dla mniejszych ekranów, które umieszcza pasek boczny poniżej zawartości i umieszcza obszary widżetu stopki w siatce 2×2. Ostatnie Zapytanie o media dla mniejszych ekranów umieszcza obszary widżetu stopki jeden nad drugim na 100% szerokości.

Wszystko to robisz w arkuszu stylów, edytując istniejący arkusz stylów lub dodając nowe style w arkuszu stylów motywu podrzędnego. Sposób działania motywów nadrzędnych i podrzędnych oznacza, że wszelkie style w motywie podrzędnym kierowane na określony element będą nadpisywać style w motywie nadrzędnym.

Tworzenie nowego responsywnego, mobilnego motywu

Jeśli opracowujesz nowy motyw, zawsze powinieneś włączyć responsywność i najlepiej użyć podejścia mobile first.

Będzie to obejmować trzy kroki:

1. Projektowanie witryny przy użyciu podejścia mobile first, najpierw identyfikowanie elementów projektu dla mniejszych ekranów, a następnie dodawanie innych, nieistotnych elementów dla większych ekranów, jeśli to konieczne.
2. Stylizacja witryny na małe ekrany z układem 100% dla wszystkich głównych elementów, takich jak nagłówek, zawartość, pasek boczny, stopka i obszary widżetów.
3. Dodawanie zapytań o media skierowanych na większe szerokości ekranu, stopniowo zwiększając liczbę punktów przerwania zdefiniowanych przez projekt. W tym przypadku nie będziesz dodawać punktu przerwania, gdy projekt się zepsuje i stanie się zbyt zgnieciony, ale zamiast tego, gdy jest zbyt dużo miejsca, a zmiana układu poprawiłaby projekt lub UX.

Poniższy kod osiąga taki sam układ jak wcześniejszy fragment kodu, ale przy użyciu podejścia mobilnego. Ponieważ nie muszę definiować szerokości na 100% dla małych ekranów, jestem w stanie osiągnąć ten sam wynik z 41 liniami kodu (w tym odstępami między wierszami) zamiast 49.

Stworzenie pierwszego motywu mobilnego może wymagać znacznie mniej pracy niż dostosowanie istniejącego motywu. Jest mniej kodu do napisania i utrzymania, a także sprawi, że Twoja witryna będzie nieco szybsza.

Możesz więc zdecydować się na utworzenie nowego motywu zamiast adaptowania istniejącego, być może biorąc część stylizacji bez układu ze starego motywu.

Aby uzyskać bardziej szczegółowe instrukcje dotyczące tworzenia pierwszego motywu mobilnego, skorzystaj z tego samouczka.

Ale tworzenie responsywnej strony nie polega tylko na tym, aby Twój motyw był responsywny lub korzystał z takiego, który już jest. Aby Twoja witryna była tak skuteczna, jak to możliwe na wielu urządzeniach, musisz wziąć pod uwagę różne aspekty UX. Zacznijmy od treści.

Zawartość Działająca Na Różnych Urządzeniach

Witryna, która działa dobrze na różnych rozmiarach ekranu i urządzeniach, nie tylko ma układ, który działa dobrze na tych urządzeniach: ułatwi również użytkownikom korzystanie z treści bez względu na to, w jaki sposób uzyskują dostęp do witryny.

Istnieją różne aspekty, aby zapewnić, że treści są przyjazne dla urządzeń mobilnych, w tym:

• Nie ukrywanie treści przed użytkownikami na urządzeniach mobilnych.
• Zapewnienie czytelności treści na wszystkich rozmiarach ekranu.
• Ułatwianie ludziom znajdowania nowych i powiązanych treści na wszystkich typach urządzeń.
• Unikanie technologii dostarczania treści, które nie działają na wszystkich urządzeniach.

Zacznijmy od najważniejszego: nie ukrywanie treści.

Nie ukrywaj treści przed użytkownikami mobilnymi

Był czas, kiedy domyślną pozycją dla właścicieli witryn WordPress, którzy chcieli, aby ich witryna działała na urządzeniach mobilnych, było zainstalowanie wtyczki, która po prostu umieściła wszystkie swoje posty w szablonie mobilnym i wyświetliła je odwiedzającym na urządzeniach mobilnych zamiast pokazywać im pełną witrynę. Miało to kilka poważnych wad, w tym fakt, że użytkownicy mobilni nigdy nie widzieli pięknego wyglądu Twojej witryny, a także to, że wiele treści po prostu zniknęło na urządzeniach mobilnych.

Istniała również tendencja do tego, aby duże witryny miały osobną wersję mobilną, która wyświetlałaby pewne typy treści w zupełnie innym układzie lub szablonie. Obejmowało to witryny WordPress, które używałyby innego motywu na mniejszych ekranach lub po wykryciu przeglądarki mobilnej. Często tylko niektóre obszary witryny korzystały z tego szablonu: czasami inne obszary witryny korzystały z układu pulpitu na urządzeniach mobilnych, a czasami (i co gorsza) inne sekcje witryny były całkowicie niedostępne dla użytkowników mobilnych.

Nie jest to oczywiście najlepszy sposób na zadowolenie użytkowników. Ktoś przeglądający Twoją witrynę na małym ekranie jest nie mniej skłonny do konsumowania danej strony niż ktoś na komputerze.

Nie jest już tak, że użytkownicy mobilni używają internetu do konkretnych zadań „w podróży”, ponieważ wielu z nas siedzi wieczorem na sofach i czyta ulubione blogi na telefonie lub tablecie – ręce do góry, jeśli czytasz to na telefonie komórkowym!

Nie wolno więc ograniczać treści, które mogą przeglądać użytkownicy mobilni. Obejmuje to nie tylko Strony lub obszary witryny, ale także elementy strony, takie jak widżety, nawigacja, przyciski i formularze.

Przetestuj motyw, którego używasz i upewnij się, że nic nie jest ukryte przed użytkownikami mobilnymi!

Zapewnij Czytelność Na Wszystkich Urządzeniach

Czasami otwierasz witrynę na urządzeniu mobilnym tylko po to, aby stwierdzić, że tekst jest mały lub ogromny. Może rozmiar czcionki został ustawiony na pulpicie, a Ustawienia po prostu nie działają na Twoim urządzeniu, lub projektant dostosował czcionki dla urządzeń mobilnych i okazały się ogromne. Jeśli najpierw pracujesz na urządzeniach mobilnych, może się okazać, że czcionki są zbyt duże lub małe na komputerach stacjonarnych.

Możesz też zauważyć, że czcionki wyświetlane na różnych urządzeniach są niespójne, ładowanie trwa wieki lub po prostu nie czytają się zbyt dobrze.

Oba te problemy utrudnią użytkownikom konsumowanie treści w Twojej witrynie i oznaczają, że opuszczą ją przed przeczytaniem czegokolwiek lub nie wrócą.

Rozmiary Czcionek

W większości przypadków na urządzeniach mobilnych czcionki będą wyświetlane w odpowiednim rozmiarze w układzie responsywnym bez konieczności wprowadzania jakichkolwiek zmian. Ale czasami może się okazać, że niektóre urządzenia nie są spójne. Warto również pamiętać, że rozmiary czcionek będą wyglądać inaczej w przeglądarce ze zmienionym rozmiarem niż na rzeczywistym urządzeniu.

Przetestuj swoją witrynę na niektórych urządzeniach o różnych rozmiarach, a jeśli okaże się, że czcionki są zbyt duże lub zbyt małe, Dodaj styl w odpowiednim zapytaniu o media.

Czcionki

Istnieje kilka potencjalnych problemów, jeśli chodzi o czcionki, których używasz:

• Czcionki mogą być przechowywane na jednym urządzeniu, ale nie na innym, więc witryna wygląda inaczej na różnych urządzeniach.
• Czcionki są trudne do odczytania na mniejszym ekranie.
• Ładowanie czcionek niestandardowych spowalnia witrynę lub oznacza, że inne czcionki wyświetlają się podczas ładowania i powodują zmianę rozmiaru lub przesunięcie elementów po załadowaniu prawidłowych czcionek.

Zawsze polecam używanie prostych, czytelnych czcionek, które zostały zaprojektowane do wyświetlania na ekranie (takich jak Georgia i Verdana) dla treści tekstu i linków nawigacyjnych.

Zdecydowanie używaj bardziej ryzykownych czcionek do nagłówków, ale upewnij się, że są łatwe do odczytania i nie powodują radykalnej zmiany rozmiaru ich elementu na różnych urządzeniach lub w trakcie ładowania.

Pamiętaj, że na urządzeniach mobilnych będą przechowywane różne czcionki i upewnij się, że definiujesz czcionki zastępcze, które są ogólne dla różnych urządzeń.

Jeśli ładujesz czcionki, które nie są przechowywane na urządzeniu, dobrym pomysłem jest użycie Google Fonts, ponieważ daje to dostęp do wielu świetnych darmowych czcionek. Niektóre motywy mają nawet wbudowane czcionki Google. Ale upewnia się, że czcionki są czytelne na różnych rozmiarach ekranu.

Kuszące jest wypychanie łodzi za pomocą czcionek, ale zawsze pamiętaj, że tekst jest do czytania: jeśli ludzie nie mogą odczytać twojego, Twoja strona nie będzie komunikować się tak skutecznie, jak mogłaby.

Nawigacja Responsywna

Ważne jest, aby użytkownicy mogli łatwo poruszać się po witrynie bez względu na urządzenie, na którym się znajdują. Ale jeśli twoja nawigacja (niezależnie od tego, czy jest to menu nawigacyjne, czy nawigacja w innym miejscu za pomocą linków lub przycisków) jest zbyt duża lub uciążliwa dla małych ekranów, uniemożliwi ludziom dostęp do twojej witryny i stworzy bardzo złe wrażenie.

Oto kilka wskazówek, jak pomóc odwiedzającym znaleźć drogę bez względu na to, jakiego urządzenia używają.

Główna Nawigacja

Jeśli główne menu nawigacyjne jest duże, spraw, aby było responsywne. Ukryj go na małych ekranach, zastępując go rozwijanym łączem Menu lub zastąp go rozwijaną skrzynką przy użyciu natywnych funkcji urządzenia.

Możesz dostosować swoje menu za pomocą CSS lub alternatywnie użyć motywu zawierającego responsywne menu. Jeśli twój motyw nie zawiera tego i nie chcesz go samodzielnie kodować, istnieją pewne wtyczki, które zrobią to za Ciebie, w tym responsywne Menu (pokazane tutaj) lub wtyczki responsywnego Menu WP, które zapewniają ładne wysuwane menu, lub responsywna Wtyczka menu wyboru, która tworzy menu wyboru przy użyciu własnej funkcjonalności urządzenia.

Responsywne menu powstrzyma menu nawigacyjne przed zajmowaniem całego ekranu lub zasłanianiem treści i zapewni użytkownikom możliwość klikania linków nawigacyjnych za pomocą palca lub kciuka.

Nawigacja na miejscu

Oprócz korzystania z głównej nawigacji, będziesz także chciał ułatwić użytkownikom poruszanie się po witrynie podczas korzystania z treści.

Dodaj nawigację na końcu zawartości, aby użytkownicy nie musieli przewijać aż do góry ekranu, aby nawigować: trwa to dłużej na małym ekranie.

• Użyj widżetów stopki, aby wyświetlić menu główne lub menu najczęściej odwiedzanych stron w witrynie.
• Użyj wtyczki do wyświetlania powiązanych postów na końcu każdego postu w Twojej witrynie: sprawdziliśmy niektóre z najpopularniejszych, takich jak Yet Another Related Posts Plugin (YARPP) i moduł Jetpack Related Posts.
• Jeśli używasz wtyczki udostępniania społecznościowego, dodaj linki do udostępniania na górze i na dole swoich postów. Unikaj wtyczek udostępniania społecznościowego, które wyświetlają linki poza ekranem lub zaciemniają zawartość na mniejszych ekranach. Nasza pływająca wtyczka społecznościowa jest responsywna i sprawdziliśmy też kilka alternatyw.
• Jeśli wyświetlasz powiązane posty za pomocą polecanych obrazów, a nie tylko tekstu (powinieneś: Zwiększa to liczbę kliknięć), upewnij się, że obrazy zmieniają Rozmiar poprawnie na wszystkich szerokościach ekranu. Może być konieczne zastąpienie stylów dostarczonych przez wtyczkę w arkuszu stylów własnego motywu.
• Wyświetl listę kategorii, w których znajduje się post, po jego treści, aby ludzie mogli szybko znaleźć inne posty w tym samym temacie. Wiele motywów automatycznie zrobi to za Ciebie (w tym domyślny motyw).

Formularze Responsywne

Wypełnianie formularzy na małym ekranie może być prawdziwym bólem. Wpisywanie tekstu palcami i kciukami oraz przewijanie w dół opcji formularza może zniechęcić Wiele osób i oznacza, że Formularz nie zostanie wypełniony.

Przekonasz się, że jeśli zastosujesz najlepsze praktyki dla formularzy na małych ekranach, Twoje formularze będą łatwiejsze dla użytkowników również na większych ekranach: jest to jeden z wielu razy, gdy projektowanie dla urządzeń mobilnych poprawia projekt pulpitu (yay!).

Oto kilka wskazówek:

• Ogranicz liczbę pól w formularzu do tych, których absolutnie potrzebujesz. Czy naprawdę musisz zbierać adresy pocztowe subskrybentów, jeśli nie wysyłasz im niczego w poście?
• Upewnij się, że pola formularza są prawidłowo zakodowane, aby przeglądarka rozpoznała je jako pola tekstowe, liczbowe, e-mailowe lub inne i wyświetliła odpowiednią klawiaturę na urządzeniach mobilnych. Wtyczki formularzy, które mają to prawo, obejmują nasz własny Forminator.
• Pozwól użytkownikom automatycznie wypełniać dane, takie jak imię i nazwisko, adres e-mail i numer telefonu, kodując atrybut „nazwa” w polach wprowadzania. Ponownie, wtyczka formularza jakości (w tym dwa już wymienione) zrobi to za Ciebie.
• Zastanów się nad ergonomią swojej formy. Czy Twoje pola są wystarczająco duże, aby ktoś mógł dokładnie stuknąć właściwe palcem lub kciukiem na urządzeniach dotykowych? Czy przycisk przesyłania jest ładny i duży? Może być konieczne dodanie dodatkowej stylizacji w zapytaniach o media, aby formularz był łatwiejszy w użyciu na małych ekranach.

Responsywne Obrazy

Obszar responsywnych obrazów jest taki, który przyciąga uwagę ludzi pracujących nad responsywną siecią w ciągu ostatnich kilku lat i ma na celu zapewnienie, że Twoja witryna nie ładuje obrazów większych niż potrzebuje na danym ekranie.

Najbardziej podstawowe jest to, że responsywność obrazu polega na użyciu linii CSS, aby upewnić się, że nie zbłądzi poza elementem zawierającym:

Ale wszystko to powoduje zmianę rozmiaru obrazu w oknie przeglądarki. To nie robi nic, aby zmniejszyć sam plik obrazu, więc przekonasz się, że obraz o szerokości 1500px, który wysyłasz na ekrany pulpitu, jest również wysyłany do telefonów komórkowych i wyświetlany w szerokości 320px. Plik obrazu nadal będzie tego samego rozmiaru, co jak można sobie wyobrazić jest dużą stratą danych.

Zasugerowano, że responsywne obrazy ostatecznie trafią do rdzenia WordPress, ale w międzyczasie wtyczka RICG sprawi, że obrazy będą „odpowiednio” reagować na większości witryn.

Streszczenie

Nie możesz sobie pozwolić, aby Twoja witryna WordPress była responsywna. Ponad 50% odwiedzin witryny odbywa się teraz na urządzeniach mobilnych, a liczba ta będzie rosła.

Mam nadzieję, że ten post dostarczył Ci wiele inspiracji i wskazówek, które pomogą Ci stworzyć własną witrynę, jak najlepiej na wszystkich urządzeniach. Jeśli jeszcze tego nie zrobiłeś, upewnij się, że korzystasz z responsywnego (najlepiej mobilnego) motywu, że treść jest łatwa do odczytania i poruszania się po urządzeniach, formularze są zoptymalizowane pod kątem małych ekranów, a witryna nie jest spowalniana przez niepotrzebnie duże obrazy.

Jeśli to wszystko zrobisz, zwiększysz swoje rankingi Google, liczbę odwiedzających Twoją witrynę, a ostatecznie częstotliwość wizyt powrotnych i udziałów społecznościowych.

Powodzenia!

Tagi:

• projekt