Zużycie danych przez ruch mobilny wzrosło o 74% w 2015, w tym samym okresie sprzedano ponad miliard urządzeń, a trend wciąż się zmienia. Już samo to powinno wystarczyć, aby podkreślić znaczenie optymalizacji projektów pod kątem ruchu mobilnego.

kilka Motywy WordPress są lepiej zoptymalizowane do obsługi niższych rozdzielczości, ale to nie oznacza absolutnej kompatybilności, której można całkowicie zaufać. W rzeczywistości istnieje wiele poprawek do wdrożenia, które pozwolą lepiej zoptymalizować witrynę pod kątem urządzeń mobilnych.

W tym samouczku omówimy różne wskazówki dotyczące urządzeń mobilnych, optymalizacji obrazu, projektowania układu i nie tylko.

Wskazówka 1: Dodaj ikony iOS i ekrany powitalne

iOS ikony, ekran powitalny

Pomimo wielu postępów dokonanych przez Androida, urządzenia z systemem iOS pozostają bardzo popularny i skorzystaj ze wsparcia aktywnej społeczności programistów. Chodzi o to, że wielu odwiedzających prawdopodobnie będzie posiadało urządzenie Apple i jeśli prawdopodobnie będą chcieli jeszcze bardziej cieszyć się Twoją witryną, zapisując ikonę na ekranie głównym.

Aby przygotować Cię na taką ewentualność, pokażemy Ci, jak możesz dodać ikony iOS z blog WordPress.

Najpierw musisz znaleźć plik header.php Twojego motywu (lub motywu potomnego), ponieważ będziemy musieli dodać mały kod w tagu .

Oto kod, który musisz dodać:

 

Jak widać, kod wymienia określone ikony dla iPhone'ów, iPadów i urządzeń Retina, z których wszystkie muszą być poprzedzone atrybutem rel z wartością „call-touch-icon”.

W tym momencie możesz również zaprojektować zupełnie nowy ekran powitalny iOS dla swojej witryny za pomocą następującego kodu:


Uwaga: Ekran powitalny to ten, który pojawia się po uruchomieniu aplikacji. Przypomina ekran ładowania aplikacji.

Wskazówka 2: użyj kilku rozmiarów obrazów w połączeniu z „zapytaniami o media”

wielokrotne-image-rozmiary-media-queries

Oczywiście znasz już pojęcie „ media-queries”. Pomyśl o konkretnych zasadach projektowych włączonych do Twojego CSS, gdy pojawi się określony scenariusz. W przypadku projektowania mobilnego scenariusze te obejmują różne rozdzielczości, orientacje urządzeń i wymiary przeglądarki. Problem z „ media-queries Czy dzisiaj wielu projektantów i programistów tworzy strony internetowe z drugorzędnym podejściem mobilnym, ale powinno być na odwrót.

To drugie podejście mobilne można zauważyć media-queries Gdy widzisz wymiary popularnych urządzeń (np. 320px, 480px, 768px) służą jako wytyczne. Chociaż w teorii może się to wydawać dobrym podejściem, ponieważ aby być skutecznym, nie można twierdzić, że używa się wymiarów wszystkich urządzeń, które różnią się tak często, jak są tworzone.

Dlatego następnym razem, gdy będziesz pracować nad projektem, nadaj priorytet kompatybilności z urządzeniami mobilnymi:

  • Zaprojektuj swoje "Zapytania" więc pracujcie nad małymi rozdzielczościami.
  • Unikaj używania pikseli do deklarowania punktów przerwania. Zamiast tego spróbuj pracować z „Ems” i wartości procentowe tak często, jak to możliwe, aby projekty mogły dostosować się do powiększenia.
  • Pamiętaj, aby zapłacić „ media-queries Aby dostosowywały się do urządzeń Retina (minimalna rozdzielczość: 192 dpi).

Wskazówka # 3: Zoptymalizuj swoje zdjęcia

optymalizację-swój wizerunek

Nawet jeśli masz fantastyczny i responsywny projekt, potencjalni użytkownicy mogą wymknąć się, jeśli zdadzą sobie sprawę, że ładowanie Twojej witryny zajmuje dużo czasu, a obrazy odgrywają dużą rolę w tym aspekcie. Użytkownicy chcą oglądać piękne obrazy, które jednak ładują się bardzo szybko, stąd potrzeba ich optymalizacji.

Chociaż może się to wydawać zagadką, istnieje wiele narzędzi, które mogą pomóc w osiągnięciu takich wyników. Na samym szczycie listy mamy EWWW Image Optimizer et WP Meuch , który po zainstalowaniu automatycznie zastosuje techniki bezstratnej kompresji jakości dla każdego obrazu przesłanego do witryny WordPress, a witryna WordPress może nawet przejrzeć bibliotekę multimediów, aby zoptymalizować przesłane wcześniej obrazy.

Jeśli wolisz nie dodawać kolejnej wtyczki do swojej witryny, zawsze istnieją niezależne narzędzia, takie jak TinyJPG et TinyPNG, które zasadniczo wykonują to samo zadanie, co EWWW Image Optimizer, selektywnie redukując liczbę kolorów w obrazach, a także usuwając meta (usuwając niepotrzebne dane). Przekłada się to na znacznie mniejszy rozmiar pliku z wieloma prawie niewykrywalnymi zmianami, co jest idealnym kompromisem.

Wskazówka # 4: Pomyśl o użyciu SVG

Animowane-svg-logo-z-CSS-miniaturki

Scalable Vector Graphics (SVG) to sprytne narzędzie, które powinieneś rozważyć. Pomimo tego, co sugeruje nazwa, używają one jakiejś formy języka znaczników XML zamiast formatu obrazu i są szczególnie przydatne w przypadku prostych grafik, takich jak logo, ikony, infografiki i inne aplikacje.

« Dlaczego SVG jest tak przydatny?„, Możesz rozsądnie się zastanawiać. Cóż, na początek można je rozbudowywać, co oznacza, że ​​nie będziesz musiał się martwić o dostosowanie do różnych okien. Ponadto można je łatwo animować za pomocą CSS.

Powinieneś znać narzędzia takie jak Adobe Illustrator, Inkscape i Sketch, które obsługują ten format, więc wypróbuj je!

Wskazówka 5: Wybór dobrych czcionek

odbiór prawym robi

Projektowanie urządzeń mobilnych to nie tylko obrazy. Wybór czcionek, których chcesz użyć, może mieć taki sam (jeśli nie większy) wpływ na projekty, jak grafika, ponieważ w większości witryn tekst jest podstawowym sposobem przekazywania informacji.

Z punktu widzenia projektanta oznacza to wybór odpowiednich czcionek, co obejmuje:

  • Nie używaj czcionek, które są zbyt cienkie lub skomplikowane. Twoja czcionka powinna być dobrze widoczna na urządzeniach mobilnych, jeśli nie chcesz, aby użytkownicy dostosowywali powiększenie, aby lepiej Cię czytać.
  • Unikaj czcionek ze zbyt małą przestrzenią między literami dla lepszej czytelności.
  • Jeśli korzystasz z media-query W swoim tekście użyj ems dla rozmiarów zamiast pikseli.
  • Rozważ użycie czcionek bezszeryfowych, ponieważ pasują one lepiej w większości rozdzielczości.

Wskazówka 6: Traktuj tekst jako część interfejsu użytkownika

Część tekstu interfejs

Ponieważ zajmujemy się typografią, powinieneś wiedzieć, że czcionka nie jest jedyną rzeczą, którą należy wziąć pod uwagę, i sama nie dotyczy czytelności. Ponieważ będziemy pracować z wieloma różnymi oknami, chcesz, aby Twój projekt traktował tekst jako integralną część doświadczenia użytkownika, aby zmaksymalizować czytelność, co oznacza:

  • Sposób użycia " media-queries „Aby utrzymać możliwy do zarządzania limit znaków w linii (pamiętaj, aby używać ems zamiast pikseli!). Ogólnie przyjęta kwota jest ustawiana gdzieś pomiędzy znakami 45-75.
  • Pamiętaj, aby używać vw, vh i vhmin (wszystkie są związane z procentem rzutni) Wartości CSS3, aby zachować rozmiar czcionki w stosunku do rozmiaru przeglądarki lub w określonych oknach.

streszczenie

W tym artykule widzieliśmy, że ruch mobilny staje się coraz mniej znikomy, co powinno być priorytetem dla każdego programisty przy projektowaniu stron internetowych. Masz więc kilka wskazówek, do których możesz się zastosować Twój blog aby wejść na swoją obecną stronę internetową « mobile-friendly”.