V súčasnosti sa väčšina ľudí pripája na internet cez mobilné gadgety – tablety, telefóny, v tomto smere sa optimalizácia webových stránok tiež dostáva na novú úroveň. Ak používateľ príde a vidí, že stránka nie je optimalizovaná pre mobilné zariadenia: obrázok sa nedá zobraziť, tlačidlá sa posunuli, písma sú malé a nečitateľné, dizajn je skreslený – 99 zo 100 % opustí a začnite hľadať inú pohodlnejšiu. A vyhľadávací robot začiarkne políčko, že zdroj je irelevantný, to znamená, že sa nezhoduje s vyhľadávacím dopytom. Preto treba dizajn stránky prispôsobiť rôznym mobilným zariadeniam. Čo je to mobilná verzia stránky, ako ju vytvoriť a ako ju najlepšie použiť? Prečítajte si viac v tomto článku.
Existujú teda štyri kľúčové spôsoby, ako vytvoriť web vhodný pre mobilné zariadenia.
Prvá metóda – responzívny dizajn
Responzívne šablóny menia obrázok webu v závislosti od veľkosti obrazovky. Spravidla sú nastavené na štandardných 1600, 1500, 1280, 1100, 1024 a 980 pixelov. Na implementáciu sa používajú CSS3 Media Queries. Samotný dizajn stránky sa nemení.
Výhody tejto metódy zahŕňajú:
- pohodlný vývoj,keďže samotná štruktúra sa prispôsobuje parametrom obrazovky a akákoľvek aktualizácia nevyžaduje vývoj dizajnu od začiatku, stačí doladiť CSS a HTML;
- jedna URL – používateľ si nemusí pamätať viacero mien, nie je potrebné presmerovanie (presmerovanie z jednej adresy na druhú), čo môže skomplikovať prácu webmasterovi a jednoduchšie vyhľadávanie nástroj na triedenie a hodnotenie zdroja pomocou jednej adresy.
Samozrejme, adaptívne šablóny majú svoje nevýhody, ktoré sú, mimochodom, viac ako výhod. Napriek tomu mnohí vývojári dodržiavajú tento koncept, napríklad spoločnosť Google Corporation, ktorej mobilná verzia stránky má adaptívny dizajn. Takže nevýhody:
- Responzívny dizajn nepodporuje rovnaké úlohy na mobile ako na PC. Ak ide napríklad o mobilnú verziu webovej stránky banky, kde sú pre používateľa dôležité skôr informácie o kurze alebo najbližších bankomatoch, tak tento dizajn úplne stačí. Ak však ide o komplexný štruktúrovaný zdroj s mnohými sekciami a podsekciami, návštevníkom sa adaptívne rozloženie nebude páčiť.
- Pomalé načítavanie premení obľúbenú stránku na nenávistnú. To platí najmä pre zdroje, kde je veľa animácií, videí, kontextových okien a iných aktívnych prvkov. Kvôli vysokej váhe sa stránka jednoducho „spomalí“, používateľ sa nahnevá a odíde a pozície webu vo vyhľadávaní klesnú.
- Ďalším významným nedostatkom je nemožnosť vypnúť mobilnú verziu. Ak je niektorý prvok skrytý takýmto rozložením, vyna jej otvorenie nemôžete urobiť nič, na rozdiel od stránok, kde ju môžete vypnúť a prepnúť na bežnú doménu.
Takáto mobilná verzia stránky vám však rýchlo, bez špeciálnych zručností a nákladov, umožňuje prispôsobiť zdroj akýmkoľvek modulom gadget. Ale vzhľadom na uvedené nedostatky bude vyhovovať malým jednoduchým zdrojom s minimom informácií a multimédií, bez zložitej navigácie a animácií. Pre komplexnú lokalitu sú vhodné 2 ďalšie metódy.
Druhá metóda – samostatná verzia stránky
Táto metóda je veľmi rozšírená a často je úspešná pri zlepšovaní čitateľnosti stránky na mobilnom zariadení. Jeho podstatou je vytvorenie samostatnej verzie stránky nakreslenej pre aplikáciu a umiestnenej na samostatnej adrese URL alebo subdoméne, napríklad m.vk.com. Zároveň je zachovaná hlavná funkčnosť, dizajn stránky vyzerá inak. Výhody tejto metódy sú zrejmé:
- užívateľsky prívetivé rozhranie;
- ľahko sa mení a upravuje, pretože verzia existuje oddelene od hlavného zdroja;
- vďaka nízkej hmotnosti funguje samostatná verzia stránky oveľa rýchlejšie ako adaptívna šablóna;
- najčastejšie je možné prejsť na hlavnú verziu stránky z mobilu.
Vyskytlo sa však aj niekoľko nevýhod:
- Viaceré adresy – verzia stránky pre počítače a mobily. Ako prinútiť používateľa, aby si zapamätal dve možnosti? Webmasteri často predpisujú presmerovanie (presmerovanie) z desktopovej verzie na mobilnú verziu, no zároveň, ak je táto stránka v mobilnomverzia neexistuje, používateľ dostane chybu. Tu nastávajú problémy s vyhľadávačmi, pre ktoré je ťažké zoradiť 2 rovnaké zdroje, čo priamo ovplyvňuje propagáciu.
- Mobilná verzia stránky z počítača, ak ju používateľ navštívi omylom, bude vyzerať smiešne, čo môže ovplyvniť aj návštevnosť.
- Táto verzia je často výrazne obmedzená, počítačová verzia, takže používateľ získa veľmi obmedzenú funkčnosť. Ale zároveň, ak niečo chýba, návštevník môže prejsť na plnú verziu stránky.
Vo všeobecnosti platí, že samostatná mobilná stránka sa ospravedlňuje a je najbežnejším spôsobom prispôsobenia zdroja pre mobilné zariadenia. Je obľúbený vo veľkých online obchodoch, ako je Amazon.
Tretí spôsob – RESS dizajn
Vyhľadávač Google aktívne podporuje tento smer mobilného dizajnu. Ide o najkomplexnejšiu, nákladnú, ale najefektívnejšiu metódu prispôsobenia stránky telefónu alebo tabletu. Volá sa to RESS. Ide o zacielenie zdroja do mobilnej aplikácie, ktorú je možné stiahnuť pre každé zariadenie samostatne. Pre Android – s GooglePlay a pre Apple – s iTunes.
Takéto aplikácie sú rýchle, bezplatné, pohodlné, dokážu poňať rôzne typy informácií, pričom pamäť telefónu a internetová prevádzka nezaberú ako pri návšteve stránky cez prehliadač. Sú ľahko dostupné, pretože odkaz bude vždy na obrazovke a nie je potrebné zadávať zložitý názov do panela s adresou prehliadača.
Samozrejme, sú tu ajeho nedostatky, ako je zložitosť vo vývoji, vysoká cena práce veľkého počtu programátorov, potreba urobiť niekoľko možností rozloženia. Aplikácia niekedy nerozpozná mobilné zariadenie. Nevyhnutná je pravidelná technická podpora, náprava nedostatkov. Napriek tomu sa táto možnosť považuje za najlepšiu z troch navrhovaných vďaka jej produktívnej, neprerušovanej prevádzke.
Najlacnejší spôsob, ako vytvoriť mobilný web
Všetky vyššie uvedené metódy zahŕňajú, aj keď nie vždy dlhú a náročnú, no stále platenú prácu správcu webu. Ak nevidíte naliehavú potrebu takéhoto rozvoja, bude vám vyhovovať jednoduchá a bezplatná mobilná verzia stránky. Aký je najjednoduchší spôsob, ako to urobiť?
Stiahnite si špeciálne šablóny (pluginy) pre responzívny dizajn. Napríklad WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile a ďalšie. Pomôžu korektnejšie zobraziť stránku na telefóne, pričom dostanete pár tipov, čo treba opraviť, aby sa stránka lepšie prispôsobila mobilnej verzii.
Samozrejme, táto metóda je sotva vhodná pre seriózne zdroje. Táto bezplatná funkcia je skôr určená pre malé a jednoduché stránky, blogy, informačné kanály. Nezabúdajte, že vyhľadávač Google, rovnako ako Yandex, má dnes vážne nároky na mobilné verzie, takže je tu obrovská šanca znížiť si pozície pomocou tejto metódy.
Pri tejto metóde budú reklamy a kontextové okná s najväčšou pravdepodobnosťou odrezanébannery, ale stránka sa načíta rýchlo a bez „oneskorení“.
Princípy vytvárania mobilných verzií
Nezáleží na tom, či bola mobilná verzia stránky vytvorená zadarmo alebo s pomocou tímu webmasterov, bola vytvorená na systéme RESS alebo pomocou adaptívnej šablóny. Najdôležitejšie je, že pre jeho efektívne fungovanie je potrebné dodržiavať niekoľko mimoriadne dôležitých zásad. Aká by teda mala byť mobilná verzia stránky? Ako to urobiť produktívne, efektívne a produktívne?
Odstráňte všetko nepotrebné
Minimalizmus je to, o čo by sa mal vývojár mobilnej verzie stránky snažiť. Predstavte si, aké ťažké je vnímať informácie, ktoré sú plné farieb, tlačidiel, bannerov a ktoré musíte pri hľadaní toho správneho materiálu donekonečna listovať. Mobilný dizajn by mal byť jednoduchý a čistý. Vyberte si 2-3 farby na rozdelenie priestoru (napríklad značkové). Lepšie, ak je jeden z nich biely. Rozdeľte priestor malej obrazovky na zrozumiteľné a čitateľné zóny. Virtuálne klávesy by mali byť viditeľné, aby používateľ jasne vedel, kde má stlačiť a videl - tu je produkt, tu je formulár na vyplnenie údajov, tu sú informácie o doručení a platbe.
Všetky ďalšie možnosti, ktoré by boli užitočné vo verzii pre počítače a uľahčili život používateľovi, tu prinesú len ťažkosti. Nechajte len tie najdôležitejšie prvky. Animácie, reklamné bannery, multimédiá s najväčšou pravdepodobnosťou len spomalia prácu stránky alebo aplikácie a odvrátia pozornosť odhlavná.
Zarovnanie
Otázka zarovnania nie je o nič menej naliehavá, pretože ak sa to urobí nesprávne, používateľ dostane iba koncovky dôležitých slov. Všeobecne sa akceptuje zarovnanie doľava a vertikálne zarovnanie. Predstavte si, že sa posúvate cez informačný kanál vo svojom telefóne. Robíte to zhora nadol, nie doľava ani doprava.
Zjednotenie
Ak neexistuje možnosť dlhého reťazca prechodov, skúste spojiť niekoľko krokov do jedného. Stránka napríklad vyžaduje zadávanie údajov v niekoľkých fázach - meno, potom adresa, pričom v každej jednotlivej bunke je samostatný dom, ulica, byt atď. Aby používateľ nenútil zasiahnuť veľa malých buniek, požiadajte ho, aby vyplnil iba 2 - meno a adresu.
A odpojenie
Niekedy je naopak potrebné oddeliť príliš veľa informácií. Napríklad v rozbaľovacej ponuke máte zoznam viac ako 80 miest, kde sa uskutočňuje doručovanie. Zoskupte ich podľa regiónu, aby používateľ nemusel listovať v tomto obrovskom zozname. Keď umiestni kurzor myši na regionálne centrum alebo región, vypadne ďalší zoznam miest.
Listings
Mimochodom, o zoznamoch. Sú dva - pevné v abecednom alebo inom poradí a so substitúciou. Ich výber závisí od toho, čo bude uvedené.
Pevné je užitočné, ak používateľ presne vie, čo hľadá. Napríklad mesto, číslo alebo dátum. Druhá možnosť je vhodná pre dlhé zložité názvy alebo pre prípady, keď existuje veľa variácií jedného a toho istéhorovnaký názov a každý rozbaľovací zoznam privedie používateľa o krok bližšie k cieľu. Možnosť automatickej náhrady sa častejšie používa, keď návštevník potrebuje pomoc. Napríklad pletací web ponúka na nákup pletacích ihiel. Používateľ zadá vyhľadávací dopyt „Kovové pletacie ihlice“a v popise sa mu zobrazí „Ihlice 5 mm“, „Ihlice 4,5 mm“atď.
Automatické dopĺňanie
Táto položka je obzvlášť dôležitá pre stránky, ktoré predávajú niečo online a musíte vyplniť štandardné formuláre na platbu, doručenie atď. Ak niekto nakupuje z telefónu, s najväčšou pravdepodobnosťou nemá čas dostať sa k počítaču, čo znamená, že proces nákupu by mal byť čo najrýchlejší a najpohodlnejší.
Na tento účel môžu formuláre obsahovať už vyplnené údaje, môžete sa uchýliť k najobľúbenejším odpovediam. Zadajte napríklad dnešný dátum, spôsob platby v hotovosti, mesto, ak pracujete v rovnakom regióne. Možno ich zmeniť, ale ak zasiahnete cieľ, čas používateľa sa uloží.
Všetko sa číta, všetko sa zobrazuje
Pri navrhovaní mobilnej verzie stránky pamätajte na to, že telefón každého človeka je iný a rovnako aj jeho zrak. Možno sa vaša stránka bude zobrazovať z malej obrazovky, takže písma by mali byť jednoduché a čitateľné, tlačidlá by mali byť dostatočne veľké, aby sa na ne dalo kliknúť bez toho, aby ste museli prejsť na inú stránku, a obrázky by sa mali otvárať oddelene, veľké, najmä keď prichádza na internet. obchod.
Niektoré štatistiky
Keď už hovoríme o prispôsobení stránky mobilným zariadeniam, nemožno sa uchýliť k štatistikám, aby sme pochopili, aký dôležitý je tento proces preonline propagácia.
Čísla sú nasledovné. Dnes gadgety používa 87% populácie, očividne okrem najmenších detí a niektorých starších ľudí. Ekonómovia predpovedajú, že mobilný obchod v priebehu nasledujúcich 5 rokov vzrastie 100-krát. Zároveň len 21 % stránok je prispôsobených na prácu s mobilnými zariadeniami. To znamená, že je obsadená iba malá 5. časť internetovej prevádzky a trhu elektronického obchodu.
Zamyslite sa nad týmito číslami. Má zmysel prispôsobiť svoj zdroj? Samozrejme áno. Navyše, hoci je na tomto trhu toľko priestoru, môžete si na ňom vytvoriť svoj vlastný segment.
Kde potrebujete mobilnú verziu
Používanie mobilnej verzie má zmysel pre každú platformu, ktorej cieľom je získať vysoké hodnotenie. Koniec koncov, toto je priamy dopad na používateľa, ktorý mu vytvára pohodlné podmienky na to, aby zostal na vašej stránke.
Nemôže existovať bez mobilnej verzie:
- spravodajské portály, pretože väčšinu z nich si prezeráte z telefónu na ceste do práce alebo školy;
- sociálne siete – z rovnakého dôvodu, navyše je tu faktor online komunikácie, čo znamená, že na tento účel by mal byť vytvorený pohodlný a zrozumiteľný chat;
- referencie, navigačné stránky atď., kam ľudia chodia, keď niečo hľadajú;
- internetové obchody – príležitosť prilákať zákazníkov, ktorí nestrácajú čas nakupovaním, ale nakupujú všetko cez mobilný internet.
Namiesto záveru
Mobilné technológie sú dnes v kurzeaktívny rast a rozvoj, preto v snahe o vedúce postavenie na trhu musí každá spoločnosť zabezpečiť, aby jej internetový zdroj spĺňal požiadavky. Vzhľadom na rastúce požiadavky používateľov musia byť stránky neustále aktualizované a prispôsobené rôznym zariadeniam. Je jasné, že ak je človeku nevyhovujúce byť na konkrétnom zdroji, nemôže tam získať informácie o produkte alebo cene, zadať objednávku, zistiť doručenie, potom nájde stránku, kde to všetko bude možné. Preto, ak chcete vyhrať súťaž, je dôležité mať flexibilný, pohodlný, funkčný a zaujímavý zdroj.
Pomôže vám k tomu mobilná verzia webovej stránky pre Android alebo Ios. K tomu je potrebné zvoliť jednu z vyššie uvedených metód redizajnu – adaptívnu šablónu, vytvorenie novej stránky na subdoméne a presmerovanie na ňu, využitie bezplatných šablón alebo vytvorenie mobilnej aplikácie, ktorá používateľovi uľahčí zadávanie a buďte na stránke.
Tento prístup pomôže nielen udržať lojalitu existujúcich zákazníkov, ale poskytne aj príležitosť prilákať nových návštevníkov.
