Przejdź do głównej treści

Jak korzystać z mobilnego pierwszego projektu w przypadku WordPress

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Responsywne strony i responsywne motywy to coś więcej niż przelotna moda. Ponieważ coraz więcej osób korzysta z urządzeń mobilnych w celu uzyskania dostępu do Internetu, responsywność jest teraz niezbędną funkcją każdej dobrej strony internetowej lub motywu WordPress.

Jeśli zajrzysz do katalogu Motywy WordPressprzekonasz się, że większość lub najnowsze motywy są responsywne, co oznacza, że ​​wyświetlają się i działają świetnie na dowolnym urządzeniu.

Ale responsywny projekt ewoluował od 7 lat temu, gdy został opracowany przez Ethana Marcotte. Teraz projekt dla różnych rozmiarów ekranu to znacznie więcej niż identyfikacja punktów przerwania dla popularnych urządzeń, które należy dodać do arkusza stylów.

Należy upewnić się, że praca projektowa pasuje do każdego rodzaju ekranu, dlatego punkty przerwania są oparte na układzie, a nie na oczekiwanym rozmiarze ekranu. Jest to kwestia wydajności, która pozwoli ci upewnić się, że twoja strona działa szybko na wszystkich urządzeniach przez wszystkie połączenia. Co najważniejsze, dotyczy to również treści. Ponieważ Projekt twojego projektu powinien działać nie tylko na dowolnym typie urządzenia, ale także działać poprawnie z twoimi treściami, aby korzystanie z tej treści było jak najlepsze dla użytkownika.

Moją ulubioną metodą sprostania tym wyzwaniom jest przyjęcie pierwszego podejścia mobilnego, które przekształca tradycyjny projekt strony internetowej. Zamiast zaprojektować projekt, który pasuje do dużych ekranów i dostosować go do mniejszych ekranów, musisz zacząć od zaprojektowania najpierw dla małych ekranów, a następnie dostosuj go do dużych ekranów. Daje to szereg korzyści w zakresie planowania zawartości, projektowania i wydajności, a także zwiększa wydajność kodowania.

W tym samouczku opiszę niektóre zalety podejścia mobilnego i szczegółowo wyjaśnię, na czym to polega. Następnie pokażę Ci, jak przejść do konwertowania motywu WordPress na motyw mobilny.

Co to jest projekt z podejściem mobilnym?

« Najpierw mobilna Jest podejściem do projektowania i tworzenia stron internetowych opracowanym przez Łukasza Wróblewskiego w jego książce mobile-first ”. Ma dwa główne cele:

Przemyśl swoje podejście do projektowania i tworzenia stron internetowych, aby najpierw działać na urządzeniach mobilnych.

Umożliwiają pisanie zapytań o media, które działają najpierw na małych, a nie dużych, a nie na odwrót.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

Co to oznacza pod względem sposobu pracy? Cóż, przemyślenie sposobu projektowania stron internetowych, aby najpierw zainteresować się urządzeniami mobilnymi, obejmuje kilka rzeczy:

  • Skoncentruj się na treści i interakcjach, a nie na szczegółach, obrazach i elementach, które upiększają Twoją witrynę i wypełniają przestrzeń.
  • Pozbądź się elementów na ekranie, które są tam, ponieważ jest na nich miejsce, a nie dlatego, że mają cel.
  • Konstrukcja skoncentrowana na wrażeniach użytkownika. Projekt powinien uprościć nawigację dla użytkowników.
  • Zastanów się nad niezbędnymi treściami - teraz, kiedy masz mały ekran do pracy, co naprawdę chcesz umieścić w Internecie?
  • Struktura treści, z którą łatwo się komunikuje na małym ekranie.
  • Aby być skutecznym.

Nie twierdzę, że oznacza to, że Twoja witryna lub motyw powinien być piękny, nowoczesny i atrakcyjny design jest ważny dla UX i tworzy wrażenie. Ale mówię, że projekt musi najpierw skupić się na telefonie komórkowym, a nie tylko na wyglądzie.

Jak zmienić motyw w motyw „najpierw mobilny”

Najlepszy sposób na podejście do pierwszego projektu i rozwoju mobilnego jest z pustej tablicy. Dzięki nowemu projektowi będziesz mieć przede wszystkim wszystkie zalety telefonu komórkowego, w tym nowe podejście do projektowania, a także zalety kodowania.

Ale czasami masz responsywny motyw, który chcesz zaktualizować i przekonwertować na motyw „najpierw mobilny”. Jak zamierzasz to zrobić?

Weźmy wyobrażony motyw i zastanówmy się, że ma on już układ. Oto jak wygląda nasz układ biura:

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

Główne elementy tego przepisu będą podobne do tego:

  • Nagłówek
  • nav.main (główna nawigacja)
  • section.main (główna sekcja)
  • section.content (sekcja treści)
  • aside.sidebar (sidebar)
  • stopka

Styl układu tego może wyglądać mniej więcej tak:

nagłówek, .main, stopka {szerokość: 96%; max-width: 1000px; margines: 10px auto; oba czyste; } .content {width: 60%; margin-right: 5%; float: left; } .sidebar {szerokość: 35%; float: right; }

Ponieważ motyw jest „responsywny”, będziesz potrzebować również zapytań o media dla mniejszej wersji ekranu. Może ich być kilka, ale skupmy się na jednym dla mniejszych ekranów. Prawdopodobnie będzie to coś podobnego do tego:

@ media screen and (max-width: 500px) {header, .main, footer, .content, .sidebar {width: 98%; } .content, .sidebar {float: none; margines: 0 auto; }}

Możesz wybrać inną strukturę swojego CSS (lub użyj preprocesora), ale zasadniczo to dostaniesz. Dwa bloki kodu: jeden dla biura i jeden dla telefonu komórkowego.

Teraz przyjrzyjmy się, jak przekonwertować to na pierwszy układ mobilny. Najpierw usuń oba bloki kodu.

Teraz u góry arkusza kalkulacyjnego możesz ustawić układ dla małych rozmiarów ekranu:

nagłówek, .main, stopka {margines: 10 pikseli 1%; }

Zauważysz, że jest krótszy niż oryginalny styl dla małych ekranów. Wynika to z faktu, że nie musisz powtarzać wszystkiego, co już utworzyłeś dla większych ekranów.

Teraz utwórz zapytanie o media, używając tego czasu o minimalnej szerokości zamiast maksymalnej szerokości:

Ekran @ media i (min-width: 500px) {nagłówek, .main, stopka {szerokość: 96%; max-width: 1000px; margines: 10px auto; oba czyste; } .content {width: 60%; margin-right: 5%; float: left; } .sidebar {szerokość: 35%; float: right; }}

Brzmi znajomo? Jest to ten sam styl, którego użyłeś jako domyślnego w responsywnym arkuszu stylów. Tak więc nie ma tu korzyści pod względem ilości kodu, ale jest jeden pod względem wydajności: urządzenia z mniejszymi ekranami zignorują to zamiast przejść przez cały arkusz stylów, aby go zastąpić przez elementy dodane w „ zapytanie o media Dla trybu responsywnego. Daje to niewielką poprawę wydajności na urządzeniach mobilnych.

Być może zauważyłeś, że wartość „ Maksymalna szerokość Jest znacznie wyższa dla elementów o pełnej szerokości niż wartość „ min Szerokość W przypadku zapytań o media, co powoduje, że ten wiersz kodu jest zbędny w przypadku ekranów o szerokości mniejszej niż 1000px. Oto wyzwanie: spróbuj usunąć tę część kodu i dodać drugie zapytanie medialne, które jest kierowane na duże ekrany.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

W ten sposób przekonwertujesz responsywny układ na „ mobile-first ”. Istnieją dwa kroki:

Napisz domyślny styl dla małych ekranów, który wymaga bardzo małej ilości kodu.

Dodaj zapytanie multimedialne, używając „ min Szerokość »Miejsce« Maksymalna szerokość I skopiuj do tego domyślny styl responsywnego motywu.

To wszystko w tym samouczku, jeśli masz jakieś pytania, nie wahaj się ich zadać.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
7 akcji
udział2
ćwierkanie2
Enregistrer3