Mobilní verze webu: jak na to? Adaptivní design

Obsah:

Mobilní verze webu: jak na to? Adaptivní design
Mobilní verze webu: jak na to? Adaptivní design
Anonim

V dnešní době většina lidí chodí online přes mobilní gadgety – tablety, telefony, v tomto ohledu se optimalizace webových stránek také dostává na novou úroveň. Pokud uživatel přijde a vidí, že stránka není optimalizována pro mobilní zařízení: obrázek nelze zobrazit, tlačítka se posunula, písma jsou malá a nečitelná, design je zkreslený – 99 ze 100 % opustí a začněte hledat jiný pohodlnější. A vyhledávací robot zaškrtne políčko, že zdroj je irelevantní, to znamená, že neodpovídá vyhledávacímu dotazu. Proto je třeba design stránky přizpůsobit různým mobilním zařízením. Co je to mobilní verze webu, jak ji vytvořit a jak ji nejlépe použít? Přečtěte si více v tomto článku.

Existují tedy čtyři hlavní způsoby, jak svůj web upravit pro mobily.

jak vytvořit mobilní verzi webu
jak vytvořit mobilní verzi webu

Metoda jedna – responzivní design

Responzivní šablony mění obrázek webu v závislosti na velikosti obrazovky. Zpravidla jsou nastaveny na standardních 1600, 1500, 1280, 1100, 1024 a 980 pixelů. Pro implementaci se používají CSS3 Media Queries. Samotný design stránek se nemění.

Výhody této metody zahrnují:

  • pohodlný vývoj,protože se struktura sama přizpůsobí parametrům obrazovky a jakákoliv aktualizace nevyžaduje vývoj designu od začátku, stačí upravit CSS a HTML;
  • jedna URL – uživatel si nemusí pamatovat několik jmen, není potřeba přesměrování (přesměrování z jedné adresy na druhou), což může webmasterovi zkomplikovat práci a snáze se hledá nástroj pro třídění a hodnocení zdroje pomocí jedné adresy.

Adaptivní šablony mají samozřejmě své nevýhody, kterých je mimochodem víc než výhod. Přesto se mnoho vývojářů tohoto konceptu drží, například Google Corporation, jejíž mobilní verze stránek má adaptivní design. Takže nevýhody:

  • Responzivní design nepodporuje stejné úkoly na mobilu jako na PC. Pokud se jedná například o mobilní verzi webu banky, kde jsou pro uživatele důležitější informace o kurzu nebo nejbližších bankomatech, pak tento design zcela stačí. Ale pokud se jedná o složitý strukturovaný zdroj s mnoha sekcemi a podsekcemi, pak se návštěvníkům stěží bude líbit adaptivní rozvržení.
  • Pomalé načítání změní oblíbenou stránku na nenávistnou. To platí zejména pro zdroje, kde je mnoho animací, videí, vyskakovacích oken a dalších aktivních prvků. Kvůli vysoké váze se stránka jednoduše „zpomalí“, uživatel se rozzlobí a odejde a pozice webu ve vyhledávání klesnou.
  • Nemožnost vypnout mobilní verzi je další významnou nevýhodou. Pokud je některý prvek takovým rozložením skrytý, vypro jeho otevření nemůžete nic udělat, na rozdíl od stránek, kde jej můžete vypnout a přejít na běžnou doménu.

Taková mobilní verze webu však rychle, bez zvláštních dovedností a nákladů, umožňuje přizpůsobit zdroj jakýmkoli gadgetům. Ale s ohledem na uvedené nedostatky bude vyhovovat malým jednoduchým zdrojům s minimem informací a multimédií, bez složité navigace a animací. Pro složité stránky jsou vhodné 2 další metody.

design stránek
design stránek

Druhý způsob – samostatná verze webu

Tato metoda je velmi běžná a často je úspěšná při vytváření čitelnější stránky na mobilním zařízení. Jeho podstatou je vytvořit samostatnou verzi stránky nakreslenou pro aplikaci a umístěnou na samostatné adrese URL nebo subdoméně, například m.vk.com. Hlavní funkčnost je přitom zachována, design stránek jen vypadá jinak. Výhody této metody jsou zřejmé:

  • uživatelsky přívětivé rozhraní;
  • snadno změnit a upravit, protože verze existuje odděleně od hlavního zdroje;
  • vzhledem k nízké váze funguje samostatná verze webu mnohem rychleji než adaptivní šablona;
  • nejčastěji je možné přejít na hlavní verzi stránky z mobilu.

Ale i zde byly některé nevýhody:

  • Více adres – desktopová a mobilní verze webu. Jak přimět uživatele, aby si zapamatoval dvě možnosti? Webmasteri často předepisují přesměrování (přesměrování) z desktopové verze na mobilní verzi, ale zároveň, pokud je tato stránka v mobiluverze neexistuje, uživatel obdrží chybu. Zde nastávají potíže s vyhledávači, pro které je obtížné ohodnotit 2 stejné zdroje, a to přímo ovlivňuje propagaci.
  • Mobilní verze webu z počítače, pokud jej uživatel navštíví omylem, bude vypadat směšně, což může ovlivnit i návštěvnost.
  • Tato verze je často značně omezená, desktopová, takže uživatel získá velmi omezenou funkčnost. Ale zároveň, pokud něco chybí, návštěvník může přejít na plnou verzi stránky.

Obecně platí, že samostatný mobilní web se ospravedlňuje a je nejběžnějším způsobem přizpůsobení zdroje pro mobilní zařízení. Je oblíbený u velkých internetových obchodů, jako je Amazon.

adaptivní šablony
adaptivní šablony

Třetí cesta – RESS design

Vyhledávač Google aktivně podporuje tento směr mobilního designu. Jedná se o nejsložitější, nákladnější, ale nejefektivnější způsob přizpůsobení webu telefonu nebo tabletu. Jmenuje se RESS. Jedná se o zacílení zdroje do mobilní aplikace, kterou lze stáhnout pro každé zařízení zvlášť. Pro Android – s GooglePlay a pro Apple – s iTunes.

Takové aplikace jsou rychlé, bezplatné, pohodlné, dokážou pojmout různé typy informací, přičemž paměť telefonu a provoz na internetu nezabírají jako při návštěvě webu přes prohlížeč. Jsou snadno dostupné, protože odkaz bude vždy na obrazovce a není třeba zadávat složitý název do adresního řádku prohlížeče.

Samozřejmě jsou zde ajeho nedostatky, jako je složitost ve vývoji, vysoká cena práce velkého počtu programátorů, potřeba vytvořit několik možností rozložení. Někdy aplikace mobilní zařízení nerozpozná. Nutná pravidelná technická podpora, náprava nedostatků. Přesto je tato možnost považována za nejlepší ze tří navrhovaných díky jejímu produktivnímu, nepřerušovanému provozu.

mobilní web google
mobilní web google

Nejlevnější způsob, jak vytvořit mobilní web

Všechny výše uvedené metody zahrnují, i když ne vždy dlouhou a obtížnou, ale přesto placenou práci webmastera. Pokud nevidíte naléhavou potřebu takového rozvoje, bude vám vyhovovat jednoduchá a bezplatná mobilní verze webu. Jaký je nejjednodušší způsob, jak to udělat?

Stáhněte si speciální šablony (pluginy) pro responzivní design. Například WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile a další. Pomohou ke správnějšímu zobrazení webu na telefonu, přičemž dostanete pár tipů, co by se mělo opravit, aby se stránka lépe přizpůsobila mobilní verzi.

Tato metoda je samozřejmě stěží vhodná pro seriózní zdroje. Tato bezplatná funkce je spíše určena pro malé a jednoduché stránky, blogy, zpravodajské kanály. Nezapomeňte, že vyhledávač Google, stejně jako Yandex, dnes klade vážné požadavky na mobilní verze, takže existuje obrovská šance na snížení pozice pomocí této metody.

U této metody budou reklamy a vyskakovací okna s největší pravděpodobností odříznutybannery, ale stránka se načte rychle a bez „prodlev“.

mobilní verze stránek pro android
mobilní verze stránek pro android

Principy vytváření mobilních verzí

Nezáleží na tom, zda byla mobilní verze stránek vytvořena zdarma nebo s pomocí týmu webmasterů, byla vytvořena na systému RESS nebo pomocí adaptivní šablony. A co je nejdůležitější, pro jeho efektivní fungování je nutné dodržovat několik nesmírně důležitých zásad. Jaká by tedy měla být mobilní verze webu? Jak to udělat produktivní, efektivní a produktivní?

mobilní verzi webu z počítače
mobilní verzi webu z počítače

Odstraňte vše nepotřebné

Minimalismus je to, o co by se měl vývojář mobilní verze webu snažit. Představte si, jak těžké je vnímat informace, které jsou přeplněné barvami, tlačítky, bannery a které musíte při hledání toho správného materiálu donekonečna procházet. Mobilní design by měl být jednoduchý a čistý. Vyberte si 2-3 barvy pro rozdělení prostoru (například značkové). Lepší, když je jeden z nich bílý. Rozdělte prostor malé obrazovky na srozumitelné a čitelné zóny. Virtuální klíče by měly být viditelné, aby uživatel jasně věděl, kde má stisknout a viděl - zde je produkt, zde formulář pro vyplnění údajů, zde informace o doručení a platbě.

Všechny další možnosti, které by byly užitečné v desktopové verzi a usnadnily život uživateli, zde přinesou pouze potíže. Nechte jen ty nejdůležitější prvky. Animace, reklamní bannery, multimédia s největší pravděpodobností pouze zpomalí práci webu nebo aplikace a odvádějí pozornost odhlavní.

Zarovnání

Problém zarovnání není o nic méně naléhavý, protože pokud se to udělá nesprávně, uživatel dostane pouze koncovky důležitých slov. Obecně je akceptováno zarovnání doleva a svislé zarovnání. Představte si, že procházíte zpravodajstvím v telefonu. Děláte to shora dolů, ne doleva nebo doprava.

Sjednocení

Pokud neexistuje možnost dlouhého řetězce přechodů, zkuste spojit několik kroků do jednoho. Stránky například vyžadují zadávání dat v několika fázích – jméno, poté adresa, kde v každé jednotlivé buňce je samostatný dům, ulice, byt atd. Aby uživatel nenutil zkoušet trefit mnoho malých buněk, požádejte ho, aby vyplnil pouze 2 - jméno a adresu.

A odpojení

Někdy je naopak potřeba oddělit příliš mnoho informací. Například v rozbalovací nabídce máte seznam více než 80 měst, kde se rozvoz provádí. Seskupte je podle regionů, aby uživatel nemusel procházet tento obrovský seznam. Když najede na krajské centrum nebo region, vypadne další seznam měst.

Listings

Mimochodem, o seznamech. Jsou dva - pevně uspořádané v abecedním nebo jiném pořadí a se záměnou. Jejich výběr závisí na tom, co bude uvedeno.

Fixed je užitečné, pokud uživatel přesně ví, co hledá. Například město, číslo nebo datum. Druhá možnost je vhodná pro dlouhé složité názvy nebo pro případy, kdy existuje mnoho variant jednoho a téhožse stejným názvem a každý rozevírací seznam přivádí uživatele o krok blíže k cíli. Možnost automatické substituce se častěji používá, když návštěvník potřebuje pomoc. Například pletací web nabízí ke koupi pletací jehlice. Uživatel zadá vyhledávací dotaz „Kovové pletací jehlice“a v popisku se mu zobrazí „Jehlice 5 mm“, „Jehlice 4,5 mm“atd.

Automatické vyplňování

Tato položka je zvláště relevantní pro weby, které něco prodávají online, a vy musíte vyplnit standardní formuláře pro platbu, doručení atd. Pokud člověk nakupuje z telefonu, s největší pravděpodobností nemá čas dostat se k počítači, což znamená, že proces nákupu by měl být co nejrychlejší a nejpohodlnější.

Za tímto účelem mohou formuláře obsahovat již vyplněné údaje, můžete se uchýlit k nejoblíbenějším odpovědím. Pokud pracujete ve stejném regionu, zadejte například dnešní datum, způsob platby v hotovosti, město. Lze je změnit, ale pokud zasáhnete cíl, čas uživatele se uloží.

Vše je přečteno, vše je zobrazeno

Při navrhování mobilní verze webu mějte na paměti, že každý má jiný telefon a stejně tak i zrak. Možná bude vaše stránka zobrazena na malé obrazovce, takže písma by měla být jednoduchá a čitelná, tlačítka by měla být dostatečně velká, aby na ně bylo možné kliknout, aniž by bylo nutné přejít na jinou stránku, a obrázky by se měly otevírat samostatně, velké, zvláště když přijde na internet. obchod.

Nějaké statistiky

Když už mluvíme o přizpůsobení webu mobilním zařízením, nelze se uchýlit k statistikám, abychom pochopili, jak důležitý je tento proces proonline propagace.

Čísla jsou následující. Dnes gadgety používá 87 % populace, zjevně kromě nejmenších dětí a některých starších lidí. Ekonomové předpovídají, že mobilní obchod v příštích 5 letech stokrát vzroste. Pro práci s mobilními zařízeními je přitom přizpůsobeno pouze 21 % webů. To znamená, že je obsazena pouze malá 5. část internetového provozu a trhu elektronického obchodování.

Zamyslete se nad těmito čísly. Má smysl přizpůsobovat svůj zdroj? Samozřejmě ano. Navíc, i když je na tomto trhu tolik prostoru, můžete si na něm vytvořit svůj vlastní segment.

mobilní verze stránek zdarma
mobilní verze stránek zdarma

Kde potřebujete mobilní verzi

Používání mobilní verze má smysl pro jakoukoli platformu, která má za cíl získat vysoké hodnocení. Koneckonců, toto je přímý dopad na uživatele a vytváří mu pohodlné podmínky pro pobyt na vašem webu.

Nemohu existovat bez mobilní verze:

  • zpravodajské portály, protože většinu z nich lze sledovat z telefonu na cestě do práce nebo do školy;
  • sociální sítě – ze stejného důvodu, navíc je zde faktor online komunikace, což znamená, že by k tomu měl být vytvořen pohodlný a srozumitelný chat;
  • reference, navigační stránky atd., kam lidé chodí, když něco hledají;
  • internetové obchody – příležitost přilákat zákazníky, kteří neztrácejí čas nakupováním, ale vše nakupují přes mobilní internet.

Místo závěru

Mobilní technologie jsou dnes v kurzuaktivní růst a rozvoj, proto ve snaze o vedoucí postavení na trhu musí každá společnost zajistit, aby její internetový zdroj odpovídal požadavkům. Vzhledem k rostoucím nárokům uživatelů je nutné stránky neustále upgradovat a přizpůsobovat různým zařízením. Je jasné, že pokud je člověku nepohodlné být na konkrétním zdroji, nemůže tam získat informace o produktu nebo ceně, zadat objednávku, zjistit doručení, pak najde stránku, kde to vše bude možné. Proto, abyste vyhráli soutěž, je důležité mít flexibilní, pohodlný, funkční a zajímavý zdroj.

Pomůže vám k tomu mobilní verze webu Android nebo Ios. K tomu je potřeba zvolit jednu z výše uvedených metod redesignu – adaptivní šablonu, vytvoření nového webu na subdoméně a přesměrování na něj, použití bezplatných šablon nebo vytvoření mobilní aplikace, která uživateli usnadní zadávání a buďte na stránce.

Tento přístup nejen pomůže udržet loajalitu stávajících zákazníků, ale také poskytne příležitost přilákat nové návštěvníky.

Doporučuje: