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

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

Jak dát dohromady mobilní první, na téma zaměřený na výkon WordPress [část 2]
СОДЕРЖАНИЕ
02 июня 2020

Pokud jste se posunuli dolů, abyste zjistili, co je tady v obchodě, možná vás zajímá, co se stalo s body 1-5.


Aha, správně, abyste našli odpověď, měli byste se podívat na první část této mini-série.

Stručně řečeno, to, co tady budeme, vám poskytne průvodce jak vytvořit vysoce výkonné mobilní téma pro WordPress. Na první pohled se to nemusí zdát, ale výzva je ve skutečnosti větší, než si většina lidí myslí.

Koneckonců, obecná víra je, že stačí, aby téma reagovalo a, voilà, je optimalizováno pro mobily, že? No, ne docela. Takže bez dalšího povyku se vraťme zpět k tématu.

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

6. Design pro všechny mobilní prohlížeče

Je opravdu překvapivé, jak jinak se může kus kódu HTML chovat na základě webového prohlížeče, na kterém běží. A to platí pro mobilní i stolní počítače. Pravděpodobně to platí spíše pro mobily, protože máme k dispozici stovky různých zařízení a specifikace obrazovky.

Proto při práci na motivu nezapomeňte na následující:

  • vyzkoušejte si svou práci ve všech hlavních prohlížečích za současného stavu – včasné provedení tohoto postupu vám usnadní odstraňování problémů, na rozdíl od spuštění testů v prohlížeči, když již máte hotové celé téma,
  • zapojte se do co největšího počtu zařízení a podívejte se, jak se na nich chová motiv (zkuste různé velikosti obrazovky, rozlišení a poměry, pokud je to možné).

7. UX záleží

V mobilu lidé interagují s webovými stránkami velmi odlišně než na stolních počítačích.

Zní to jednoduše, ale dovolte mi uvést jednoduchý příklad. Když někdo hledá místo pro pizzu na své ploše, pravděpodobně se zajímá o řadu podrobností o restauraci, kterou kontrolují. Například věci, jako je nabídka, galerie, kontaktní údaje atd.

Pokud však navštíví stejný web v mobilu, pravděpodobně jim záleží jen na jedné věci – jak se dostat na místo a na jaké číslo volat, aby se zaregistroval.

To vše se scvrkává na to, že když vytváříte téma pro mobily, měl by návrh majiteli stránek umožnit, aby se více zaměřil na konkrétní prvky, které mohou být pro mobilní návštěvníky klíčové..

Nejjednodušší způsob, jak to udělat, je pomocí dobře navržených oblastí widgetů, které se objeví na domovské stránce a zůstanou v horní části viditelné oblasti obrazovky (aka je udržují nad záhybem).

Na mobilu mají lidé jen velmi málo času hledat informace, které potřebují. Proto by měl být dobrý mobilní design při zpřístupňování těchto informací účinný.

8. Méně je více

Čím méně je více koncepce, lze ji snadno aplikovat na většinu scénářů ve vývoji motivů, a pokud jde o mobilní témata, znamená to rozdíl mezi skvělým a takovým tématem..

Tady můžete udělat, abyste dosáhli více s méně:

  • Ponechejte méně prostoru pro značky. Určité místo pro logo webu je důležité, to je zřejmé. Stále však není tak důležitý jako skutečný obsah, proto nezapomeňte logo nechat zabírat většinu prostoru nad záhybem.
  • Zavedení přístupných nabídek. Nabídky byly vždy problémem pro mobily. Na jedné straně webové stránky potřebují nabídky. Na druhé straně však i krátká nabídka (která má pouze čtyři položky) může na většině mobilních zařízení snadno použít až dva řádky textu, což posouvá obsah dále dolů po stránce. Chcete-li to vyřešit, postupujte takto: (1) zobrazí nabídku normálně, pokud se vejde do jednoho řádku textu, (2) učiní ji rozevírací, pokud není.
  • Zbavte se nedůležitých nabídek. Riskoval bych, že nabídka zápatí pro návštěvníka mobilních zařízení většinou nepřináší žádnou hodnotu. Na ploše slouží jako jakési přehledné menu, kde návštěvníci najdou odkazy na všechny ostatní stránky, ale na mobilních zařízeních není důvod, proč by je někdo používal. Zvažte, jak se toho úplně zbavit, když se vaše téma prohlíží na mobilu.
  • Buďte opatrní s dalšími funkcemi webových stránek. Pokud jde o zavedení vlastních funkcí do nového tématu WordPress, existuje nespočet možností. Můžete implementovat věci, jako jsou posuvníky obrázků, integrace sociálních médií, vlastní galerie a mnoho dalších. Ale měli byste? Přestože jsou všechny tyto nápady na funkce skvělé, mohou uživatelům mobilních zařízení způsobovat problémy. Pokud se chcete ujistit, že vaše téma funguje správně na většině platforem, použijte nativní wp_is_mobile () funkce. To vám umožní rozlišovat mezi mobilními a stolními návštěvníky, takže můžete zjednodušit rozhraní pro první, abyste se vyhnuli problémům.

9. Načtěte pouze potřebné soubory

V dnešní době mají lidé přístup k webu z velkého množství mobilních zařízení, takže některá z těchto zařízení budou nevyhnutelně zastaralá a nebudou moci podporovat moderní webové funkce. Z tohoto důvodu byste měli vždy zkontrolovat, která knihovna nebo modul je potřebný k provedení dané funkce.

Jedním z nejlepších způsobů, jak toho dosáhnout, je řešení jako Modernizr. Stručně řečeno, je to knihovna JavaScript, která detekuje funkce HTML5 a CSS3 v prohlížeči uživatele. Umožňuje vám psát podmíněný kód podle toho, zda je daná funkce ve výchozím nastavení v prohlížeči zahrnuta. Pokud je to potřeba, pak lze požadované knihovny importovat.

modernizr

Modernizr však nebude řešením pro všechno. Zde je několik dalších pokynů, které je třeba mít na paměti:

  • Obecně platí, že neimportujte knihovny, pokud nejsou nezbytně nutné pro funkčnost motivu. Čím více knihoven a externích skriptů je, tím více času bude trvat načtení finálního webu (zejména v mobilu).
  • Vždy se pokuste načíst soubory JavaScriptu na konci struktury HTML, nikoli na začátku.
  • Zkusit minimalizujte počet prvků DOM vaše struktura HTML používá.
  • Načtěte soubory CSS a JavaScript pro každou stránku zvlášť. Například pokud máte soubor CSS, který je vyžadován pouze na jedné konkrétní stránce, použijte funkci is_page () uvnitř podmíněného příkazu a styl zakryjte pouze na této stránce..

10. Proveďte testy rychlosti na testovacím serveru

Mít lokální testovací server bude dost dobrý v počátečních fázích vývoje, ale budete muset rychle zavést pokročilejší testovací nastavení.

Faktem je, že nikdy nebudete vědět s jistotou, jak je vaše téma optimalizováno, dokud jej nenainstalujete na hrst testovacích prostředí a neuvidíte, jak funguje v reálném životě..

I když stále udržujete nízké náklady, můžete to provést instalací svého motivu na několik levných účtů sdíleného hostingu (protože většina koncových uživatelů je pravděpodobně stejně použije). Poté můžete pomocí následujících nástrojů spustit různé testy:

  • Statistiky PageSpeed. Nástroj vytvořený společností Google. Poskytne vám dobré údaje o výkonu mobilních i stolních počítačů a několik tipů, jak věci vylepšit.
  • Rychlostní test webových stránek Pingdom. Tento nástroj vám poskytne kompletní přehled o tom, jak dlouho trvá načtení jednotlivých skriptů / souborů, které váš web vyžaduje.
  • Ghostlab. Velmi užitečný nástroj pro simultánní testování synchronizovaného prohlížeče pro web i mobilní zařízení.
  • Mobilní testování výkonu společností Mobitest. Umožňuje testovat váš web na skutečných mobilních zařízeních a nejen na všeobecném emulovaném mobilním prostředí.
  • BrowserStack. Poskytuje okamžitý přístup ke každé verzi každého populárního mobilního a stolního prohlížeče. S tímto nástrojem se nemusíte divit, jak bude vypadat vaše téma v zastaralém prohlížeči, můžete vygenerovat snímek obrazovky pomocí několika kliknutí.

pagepeed

Toto shrnuje našeho 10 krokového průvodce, jak vytvořit mobilní WordPress s orientací na výkon. Doufám, že z toho dostanete nějaké skvělé nápady a že vám pomůže proměnit vaše další téma na skutečné výkonné monstrum!

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