Jak dát dohromady mobilní první, výkonem orientované téma WordPress [část 1]

Jak dát dohromady mobilní první, výkonem orientované téma WordPress [část 1]

Jak dát dohromady mobilní první, výkonem orientované téma WordPress [část 1]
СОДЕРЖАНИЕ
02 июня 2020

V jádru je sestavení tématu WordPress poměrně jednoduchý úkol. WordPress poskytuje opravdu přátelské prostředí a jasně ukazuje, které funkce PHP mají být použity pro jaký účel.


Nicméně. I když je to jednoduché, není to zdaleka snadné, a zejména pokud chcete, aby vaše téma bylo optimalizováno pro mobily.

Existuje řada jedinečných problémů, které byste měli překonat, pokud chcete skončit s kvalitním produktem, který se načítá rychle, pracuje předvídatelným způsobem a (co je nejdůležitější) je uživatelsky přívětivý a přístupný lidem, kteří používají různá zařízení. a velikosti obrazovky.

Tento dvoudílný průvodce vás provede procesem v 10 krocích a uvádí nejdůležitější věci, o které se musíte starat při vytváření mobilního WordPress orientovaného na výkon.

Část 2, viz zde: Jak dát dohromady první mobilní, téma WordPress zaměřené na výkon [část 2]

1. Obsah je na prvním místě

Na mobilu opravdu není moc místa na předvádění mnoha detailů designu nebo použití hezky vypadajících prvků jen kvůli tomu.

Přestože moderní zařízení jsou schopna zobrazovat grafiku až do 1136 × 640 pixelů (iPhone 5s), nezapomeňme, že obrazovka je stále přes čtyři palce. Toto není spousta nemovitostí, se kterými by bylo možné pracovat.

Věci, které stojí za to:

  • zbavte se všech dalších prvků designu, které nejsou nezbytné pro prezentaci obsahu,
  • ujistěte se, že hlavní blok obsahu je na konstrukčním plátně co nejvyšší (vzhledem k různým velikostem obrazovky mobilních zařízení nemůžeme předvídat, kde "složit" přijde přesně),
  • zaměřit se na typografii a učinit obsah čitelným (zvětšit velikost písma, ale dávejte pozor, aby nebyl jediný řádek textu příliš krátký a nečitelný),
  • přináší dobrý kontrast – text vs. pozadí (to je zásadní pro mobilní zařízení, zejména pokud se někdo pokusí přečíst stránku, když stojí ve slunné oblasti).

2. Optimalizujte obrázky

Optimalizace obrazu je pro mobil ještě důležitější než pro jakýkoli jiný scénář. Jde o to, že když se někdo pokusí o přístup k webu přes mobil, pravděpodobně je na pomalém připojení 3G. Musíte se proto ujistit, že téma umožňuje, aby se obrázky načítaly relativně rychle, bez ohledu na tuto skutečnost.

Konkrétní věci, které můžete udělat:

  • Zvažte integraci funkce líného zatížení. Samo o sobě je líné načítání skvělé (načítání obrázků pouze tehdy, když k nim návštěvník přejde). Problém je však v tom, že koncoví uživatelé mohou nakonec nainstalovat nějaké líné zátěžové pluginy na samotný konečný web. Mohlo by to zasahovat do všeho, co jste již do tématu integrovali. Pokud však chcete riskovat, bylo by nejlepší zajistit funkčnost prostřednictvím řešení, jako je jQuery a jeho Lazy Load Plugin. Pluginy WordPress mají tendenci tuto knihovnu používat také, takže minimalizujete pravděpodobnost, že se věci pokazí, když se dva různé skripty snaží dosáhnout stejného výsledku. Umožněte také deaktivovat líné zatížení v nastavení motivu.
  • Optimalizujte obrázky pro velikost a kvalitu. Obrázky obvykle představují většinu spotřeby šířky pásma pro průměrný web, takže jako tvůrce motivu musíte zajistit, aby vaše obrázky byly co nejoptimalizovanější. K tomu můžete udělat dvě věci: (1) ujistěte se, že obrázky nejsou větší, než je třeba, aby byly (viz # 3) – další pixel zde a tam se dá rychle přidat, (2) optimalizovat všechny obrázky pomocí nástroje jako Optimole nebo TinyPNG před zveřejněním tématu pro veřejnost.
  • Kdykoli je to možné, používejte písma ikon. Stará škola zahrnutí ikon do jakéhokoli designu spočívala v jejich vytvoření ve Photoshopu, převedení všeho na PNG nebo GIF a jeho zavedení. V dnešní době však nejde o nejoptimalizovanější řešení. S nástroji jako Písmo Awesome, můžeme naše návrhy obohatit stovkami krásně navržených písem a zároveň udržet výkon velmi slušný.

3. Připravte si připravený design sítnice (optimalizovaný pro obrazovky s vysokým DPI)

Téměř všechna nová zařízení jsou dnes vybavena vysokými DPI displeji. Na těchto obrazovkách vypadá vše velmi ostře, ale pouze v případě, že byla dotyčná věc optimalizována pro prohlížení s vysokým DPI. V opačném případě uvidí uživatel mnoho pixelací, což způsobí, že zážitek bude celkově neatraktivní.

K optimalizaci s vysokým DPI můžete použít dva hlavní zkratky:

  • Použijte obrázková písma – uvedená výše; obrazová písma se měří automaticky a vypadají skvěle na každém zařízení.
  • Vytvořte alternativní verze všech ostatních obrázků – ve dvojnásobné velikosti – a vyměňte je za CSS vždy, když se k prohlížení obsahu používá zařízení s vysokým DPI. Zde je průvodce jak to můžete udělat.

Nakonec byste se měli také starat o favicony ve svém motivu (a pravděpodobně také umožnit uživateli je změnit také, ale to je další věc).

V ten den jste potřebovali pouze jeden 16 × 16 PNG obrázek, který byste pak převedli na ICO, a všichni jste byli nastaveni. Právě teď je to mnohem složitější. Například nová zařízení Apple se pokusí vyhledat větší ikony a poté se je pokusí použít jako záložky.

Některé z velikostí favicon, které iOS očekává, jsou: 76 × 76, 120 × 120, 152 × 152. Tady je kompletní seznam na Apple.com.

Tyto ikony můžete vytvořit buď ručně, nebo použít podobný nástroj Skutečný generátor Favicon. Potřebuje pouze jeden úvodní obrázek, který bude použit jako základna pro generování všech ostatních verzí. Kromě toho získáte také správný kód HTML pro vkládání ikon do motivu.

4. Optimalizujte pro klepání

Musíme si uvědomit, že většina mobilních zařízení tam podporuje dotyková rozhraní nebo je založena výhradně na dotykové obrazovce. To znamená, že musíme udělat každý prvek, který lze připojit, dostatečně velký, aby k němu měl uživatel snadný přístup.

Například textové odkazy nejsou příliš optimalizovány dotykem, protože vyžadují hodně soustředění na straně uživatele, aby na ně bylo možné přesně klepnout. Je to lepší volba designu jít s tlačítky pro rozhraní motivu. Tlačítka, která jsou sama o sobě relativně velká a mají také velkou dotykovou plochu.

Další věcí, kterou je třeba mít na paměti, je to, že uživatelé dělají většinu klepnutí palci, takže je dobré umístit hlavní "výzva k akci" tlačítka na snadno přístupných zónách palce. Například, tady je jak se hraje na iPhone.

5. Nezáleží na tom, aby bylo téma odpovědné

Nakonec zakončíme první část této příručky nejčastějšími chybami, které lidé dělají při navrhování témat pro mobily. Tato chyba považuje zpracování responzivních návrhů za konečnou koncovou hru.

Je samozřejmé, že přizpůsobení motivu je obrovská výhoda, zejména pokud jde o řešení nestandardních zařízení a velikostí obrazovky, ale zdaleka není řešením magické kulky. To, že návrh reaguje, ještě neznamená, že na mobilu bude dobře fungovat. Například nevyřeší žádné problémy s optimalizací obrazu nebo skutečnost, že tlačítka je obtížné přesně klepnout atd.

Takže ano, udělejte vše pro to, aby vaše téma reagovalo, ale zároveň se postarejte o další prvky, které v tomto průvodci procházíme, abyste dosáhli maximálního designu vhodného pro mobily.

Vyzývám vás, abyste se naladili na druhou část, abyste získali zbytek seznamu (dostaneme se k věcem, jako je návrh UX, navigace, pomocí JS k optimalizaci doby načítání, s využitím některých méně známých funkcí WordPress, a více). A mezitím, jaká je vaše největší výzva při navrhování pro mobily?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector