Spotřeba dat v mobilním provozu se v roce 2006 zvýšila o 74% 2015, s více než miliardou zařízení prodaných během stejného období, a trend se stále mění. To samo o sobě by mělo stačit ke zdůraznění důležitosti optimalizace vašich návrhů pro mobilní provoz.

Některé Témata WordPress jsou lépe optimalizovány, aby zvládly nižší rozlišení, ale to neznamená absolutní kompatibilitu, které budete zcela důvěřovat. Ve skutečnosti je třeba implementovat řadu oprav, které vám umožní lépe optimalizovat váš web pro mobilní zařízení.

V tomto kurzu prozkoumáme různé tipy specifické pro mobilní zařízení, optimalizaci obrázků, návrh rozložení a další.

Tip 1: Přidejte ikony iOS a úvodní obrazovky

iOS ikony, úvodní obrazovkou

Navzdory mnoha pokrokům Androidu zůstávají zařízení iOS velmi populární a těžit z podpory aktivní komunity vývojářů. Jde o to, že spousta vašich návštěvníků bude pravděpodobně vlastnit zařízení Apple, a pokud si pravděpodobně budou chtít váš web užít ještě více, uložením ikony na domovskou obrazovku.

Abychom vás na tuto možnost připravili, ukážeme vám, jak můžete přidat ikony iOS z WordPress blog.

Nejprve budete muset soubor najít header.php vašeho motivu (nebo podřízeného motivu), protože do značky budeme muset přidat nějaký kód .

Zde je kód, který je třeba přidat:

 

Jak vidíte, kód zmiňuje konkrétní ikony pro iPhony, iPady a zařízení Retina, před kterými musí předcházet atribut rel s hodnotou „call-touch-icon“.

Když už jste u toho, můžete také navrhnout zcela novou úvodní obrazovku iOS pro váš web pomocí následujícího kódu:


Poznámka: Úvodní obrazovka je obrazovka, která se zobrazí při spuštění aplikace. Je to jako obrazovka načítání aplikace.

Tip 2: Použijte několik velikostí obrázků ve spojení s „dotazy médií“

více-image-velikosti-Media-dotazy

Pojem „ media-dotazy". Když nastane konkrétní scénář, přemýšlejte o konkrétních pravidlech návrhu začleněných do vašeho CSS. V případě mobilního designu jsou těmito scénáři různá rozlišení, orientace zařízení a rozměry prohlížeče. Problém s „ media-dotazy Je to tak, že dnes mnoho designérů a vývojářů vytváří webové stránky se sekundárním mobilním přístupem, přesto by to mělo být naopak.

Tento sekundární mobilní přístup lze spatřit v media-dotazy Když uvidíte rozměry populárních zařízení (tj. 320px, 480px, 768px) použité jako pokyny. I když se to teoreticky může zdát jako dobrý přístup, protože za efektivní nelze tvrdit, že použijí rozměry všech zařízení, které se mění tak často, jak jsou vytvářeny.

Až tedy příště budete pracovat na designu, udělejte z mobilní kompatibility prioritu:

  • Design Your „Dotazy“ takže pracujte na malých rozlišeních.
  • Nepoužívejte pixely k deklaraci hraničních bodů. Místo toho zkuste pracovat s "Ems" a procenta tak často, jak je to možné, aby se vaše návrhy mohly přizpůsobit zvětšení.
  • Nezapomeňte zaplatit " media-dotazy Aby se přizpůsobili zařízením Retina (minimální rozlišení: 192 dpi).

Tip # 3: Optimalizujte své obrázky

optimalizovat-svoji-image

I když máte fantastický a pohotový design, potenciální návštěvníci mohou uniknout, pokud si uvědomí, že načítání vašeho webu trvá dlouho, a obrázky v tomto ohledu hrají velkou roli. Uživatelé chtějí vidět nádherné obrázky, které se však načítají velmi rychle, a proto je nutné obrázky optimalizovat.

I když se to může zdát jako hlavolam, existuje spousta nástrojů, které vám mohou pomoci dosáhnout těchto výsledků. Na samém vrcholu seznamu máme EWWW Image Optimizer et WP Smush , která po instalaci automaticky použije kvalitní bezztrátové kompresní techniky pro každý obrázek nahraný na váš web WordPress a váš web WordPress může dokonce procházet vaší mediální knihovnou a optimalizovat dříve nahrané obrázky.

Pokud nechcete na svůj web přidat další plugin, vždy existují samostatné nástroje, jako je TinyJPG et TinyPNG, které dělají v podstatě stejnou práci jako EWWW Image Optimizer tím, že selektivně snižují počet barev ve vašich obrázcích a také odstraňují meta (odstraňují nepotřebná data). To znamená podstatně menší velikost souboru se spoustou téměř nezjistitelných změn, což je ideální kompromis.

Tip # 4: Přemýšlejte o použití SVG

animovaný-SVG-logo-s-CSS-miniatura

Scalable Vector Graphics (SVG) jsou šikovný nástroj, který byste měli zvážit. Navzdory tomu, co by název naznačoval, používají místo obrazového formátu nějakou formu značkovacího jazyka XML a jsou užitečné zejména pro jednoduchou grafiku, jako jsou loga, ikony, infografiky a další aplikace.

« Proč SVG tak užitečná?"Můžete se rozumně divit." Pro začátečníky jsou rozšiřitelné, což znamená, že se nebudete muset starat o přizpůsobení různým oknům. Kromě toho je lze také snadno animovat pomocí CSS.

Měli byste být obeznámeni s nástroji jako Adobe Illustrator, Inkscape a Sketch, které obsahují podporu pro tento formát, takže je vyzkoušejte!

5 Tip: vybrat dobré fonty

pick-right-dělat

Mobilní design není jen o obrázcích. Výběr písma, která chcete použít, může mít na vaše designy stejně velký dopad (ne-li více) jako grafika, protože většina webů používá jako primární způsob přenosu informací text.

Z pohledu designéra to znamená zvolit správná písma, která zahrnují:

  • Nepoužívejte písma, která jsou příliš tenká nebo komplikovaná. Pokud nechcete, aby uživatelé upravovali přiblížení tak, aby vás lépe četli, by vaše písmo mělo být snadno vidět na mobilních zařízeních.
  • Pro lepší čitelnost nepoužívejte písma s příliš malým mezerou mezi písmeny.
  • Pokud používáte media-query Pro text použijte místo velikostí pixelů ems.
  • Zvažte použití bezpatkových písem, protože mají tendenci lépe zapadat do většiny rozlišení.

Tip 6: Považujte text za součást uživatelského rozhraní

text-part-interface

Jelikož se věnujeme typografii, měli byste vědět, že písmo není jediná věc, kterou je třeba vzít v úvahu, a samotné nejde o čitelnost. Protože budeme pracovat s širokou škálou oken, chcete, aby váš návrh považoval text za nedílnou součást uživatelské zkušenosti, aby byla maximalizována čitelnost, to znamená:

  • Použití " media-dotazy "Udržet zvládnutelný limit znaků na řádek (Nezapomeňte použít ems místo pixelů!). Obecně přijímaná částka je nastavena někde mezi znaky 45-75.
  • Nezapomeňte použít vw, vh a vhmin (to vše souvisí s procentem výřezu) Hodnoty CSS3, aby byla zachována velikost písma ve vztahu k velikosti prohlížeče nebo na konkrétních oknech.

Shrnutí

V tomto článku jsme viděli, že mobilní provoz je stále méně a méně zanedbatelný, což by mělo být prioritou každého vývojáře v oblasti designu webových stránek. Takže máte několik tipů, které můžete použít váš blog pro zadání aktuální webové stránky « mobile-friendly".