Destilovaná prax pri vytváraní webových stránok vhodných pre mobilné zariadenia

vytváranie webových stránok vhodných pre mobilné zariadenia


V roku 2015 spoločnosť Google priniesla algoritmus „Mobilegeddon“, aký druh potrestaných webových stránok, ktoré neboli prispôsobené pre mobilné zariadenia. V súlade s týmto algoritmom by sa hodnotenie webových stránok, ktoré neboli vhodné pre mobilné zariadenia, znížilo.

Ako vidíte, že mobil predbiehal stolové počítače a prenosné počítače a je najrozšírenejším zariadením na prehliadanie internetu. Google povzbudil firmy, aby najskôr rozmýšľali o mobilnom telefóne.

globálny mobilný dátový prenos

To znamená, že grafickí dizajnéri a obchodníci musia pri práci na webových stránkach rozšíriť svoju víziu okolo stolových počítačov a prenosných počítačov.

Čo je to webová stránka vhodná pre mobilné zariadenia?

čo je web vhodný pre mobilné zariadenia

Ako už názov napovedá, webová stránka vhodná pre mobilné zariadenia je webová stránka navrhnutá, vyvinutá a optimalizovaná tak, aby bola webová stránka na mobilných telefónoch hladká – je zložitejšia a naliehavejšia, ako sa zdá. Na najzákladnejšej úrovni – používatelia požadujú obsah, ktorý sa dá ľahko zobraziť na mobilných zariadeniach.

Ak je váš text príliš malý alebo sa obrázky nenačítajú, používatelia budú podráždení a odídu. Preto je dôležité mať primerane veľkú veľkosť obsahu. Implementácia je, bohužiaľ, zložitá, pretože smartfóny, tablety sú dodávané v rôznych veľkostiach a rozlíšeniach; preto neexistuje žiadny pevný formát na dokonalé zobrazenie obsahu na „každom“ zariadení.

Tu je niekoľko tipov, ktoré vám pomôžu optimalizovať vaše webové stránky pre mobilné zariadenia.

Vyhnite sa vytvoreniu samostatnej webovej stránky vhodnej pre mobilné zariadenia:

vyhnúť sa vytváraniu samostatných webových stránok vhodných pre mobilné zariadenia

Aby sa implementácia zjednodušila, občas sa dizajnéri pri navrhovaní webovej stránky pre mobil rozhodnú vystrihnúť obsah na „vhodné“ a ktoré časti sa v mobile nezobrazia. Nedokážeme však určiť, aký typ obsahu chcú používatelia vidieť, a ani nie je možné vytvoriť samostatný priestor pre mobil okrem desktopu..

Spoločnosť Google vás potrestá, ak zistí, že máte rovnaký obsah pre dva rovnaké webové stránky – jedna je verzia pre stolný počítač alebo laptop, zatiaľ čo druhá je pre mobilnú verziu, pretože existuje iba jeden Google. Preto ani nemysli na vytvorenie samostatnej webovej stránky pre mobil.

Využite responzívne vzory:

používať responzívne šablóny dizajnu

Citlivý dizajn umožňuje vývojárom webových stránok vytvoriť webovú stránku, ktorú je možné ľahko zobraziť na rôznych veľkostiach zariadení. Znižuje sa tým množstvo ďalšieho úsilia, ktoré musia vývojári vynaložiť na to, aby webová stránka bola kompatibilná s rôznymi veľkosťami zariadení.

Citlivý dizajn využíva flexibilné obrázky, flexibilné rozloženie a prudké mediálne dotazy na šablóny so štýlmi. Ak sa tento responzívny dizajn použije na webových stránkach, webová stránka bude môcť zistiť veľkosť a polohu obrazovky používateľa a potom podľa toho upraviť rozloženie webovej stránky..

Využite mediálne dotazy:

Mediálne dotazy vám umožňujú požiadať zariadenie o jeho veľkosť a potom nasmerovať prehliadač, aby zobrazil veci podľa sady CSS, ktorú ste nastavili v kóde:

ukážkové dotazy na mediálne obrazovky

Mediálne dopyty sú kľúčovou súčasťou najobľúbenejších webových stránok, ale predtým musíte zaistiť, aby bol systém správne nakonfigurovaný pre všetky aktuálne používané zariadenia – nielen pre dve alebo tri najobľúbenejšie mobilné zariadenia. Uschovajte si zoznam zariadení alebo si môžete zaobstarať tieto informácie.

Využívajte rámce ako Bootstrap:

Pre front-end môžete využiť voľne dostupné rámce ako Nadácia 3, kostra Najlepší bezplatný rámec je Twitter je bootovací program.

používať bootstrap framework

Bootstrap je front-end framework navrhnutý tak, aby rýchlo a nevyhnutne prispôsobil webovú stránku vašej webovej stránky ľubovoľnému zariadeniu.. Uvedenie do prevádzky vopred zostaveného systému je oveľa jednoduchšie ako vytvorenie nového kódu pre každú možnú kombináciu samostatne (a dokonca aj testovanie) – a je oveľa menej nadol a von.

Ale predtým, ako začnete používať nejaký rámec, nezabudnite si preštudovať, či je rámec plne kompatibilný s vašimi webovými stránkami a cieľmi. Čím viac sú vlastné kódy a funkcie na vašom webe, tým ťažšie bude zabezpečiť, aby na mobilnom zariadení všetko fungovalo hladko; V prípade akýchkoľvek problémov sa obráťte na odborníka.

Vždy využívajte virtuálnu značku meta:

Výrez je virtuálna oblasť, ktorú používa prehliadačový interpretačný stroj na určenie, ako sa má veľkosť a veľkosť obsahu upravovať. Napriek tomu je to rozhodujúci kód pri budovaní zážitku z viacerých zariadení. Bez tohto kódu nebude váš web na mobilnom zariadení fungovať dobre.

Značka výrezu oznámi vášmu prehliadaču, že stránka sa musí zmestiť na obrazovku. Existuje mnoho ďalších konfigurácií, ktoré môžete povedať vášmu výrezu, aby ovládal. Na začiatok dokumentu sa odporúča použiť toto:

Zero in na jednoduchší dizajn:

používať jednoduchý responzívny dizajn

Výrazný rozdiel medzi webovými stránkami pre stolné počítače a mobilnými webmi spočíva v tom, že ľudia pri prezeraní na mobilných telefónoch uprednostňujú jednoduchý dizajn webových stránok. Ide o veci v skutočnom svete, ako čokoľvek iné – veci, ktoré sú veľké a komplikované, sa na mobilnom zariadení pomalia a jednou z hlavných požiadaviek používateľov je okamžité sprístupnenie obsahu webovej stránky..

Udržiavanie jednoduchého dizajnu tiež uľahčuje udržanie pozornosti divákov na obsahu, ktorý chcú, aby videli – mobilní používatelia majú strašne krátke rozpätie pozornosti a je v najlepšom záujme, aby bol dizajn jednoduchý, a nie investoval do komplexu. téma.

Nikdy neignorujte veľkosť písma a veľkosť tlačidla:

Veľkosť písma a veľkosť tlačidla na vašej webovej stránke sú veľmi dôležité pre mobilné zariadenia. Veľkosť písma by mala byť aspoň 14 pixlov. Môže to vyzerať dobre, ale je to lepšie ako zväčšenie používateľského obsahu, aby mohol čítať váš obsah; zjednodušte ich úpravou písma na maximálnu čistotu. Jediný čas, keď by ste mali použiť menšie písmo (minimálne 12px), je na štítku alebo formulára.

ignorovať veľkosť písma

Teraz, keď sa tlačí na tlačidlá, čím väčšie je tlačidlo, tým lepšie – tým sa zníži pravdepodobnosť, že používatelia stlačia nesprávne tlačidlo alebo že zmeškajú stlačenie tlačidla. Rovnako ako pokyny spoločnosti Apple odporúčame veľkosť gombíkov minimálne 44 x 44 pixlov. Pomocou týchto pokynov zlepšíte používateľské prostredie a zvýšite mieru konverzie elektronického obchodu.

Zväčšiť veľkosť obrázka:

Pri rokovaniach s mobilnými zariadeniami je cieľom mať najmenšiu veľkosť súborov pre obrázky a stále vyzerať ostrý a bohatý na akejkoľvek zobrazenej obrazovke.. Dôvod je ten, že šírka pásma mobilného zariadenia je oveľa menšia v porovnaní so stolným počítačom alebo prenosným počítačom, a preto spôsobuje dlhšiu dobu načítania.

Preto, ak sa chystáte prinútiť divákov, aby si stiahli súbor 1 MB, aby si prezreli miniatúru, budú podráždení a opustia webovú stránku..

Prívetivosť k mobilným telefónom nie je len o príjemnom webe, ale tiež o zlepšenie používateľského komfortu a času načítania. Zmenšovanie veľkosti obrázka využíva menej údajov (ukladanie údajov s obmedzenými dátovými plánmi), pomáha rýchlejšie načítať stránku a zanechá pozitívny dojem z vášho webu..

Zbavte sa predvoleného zväčšenia:

Automatické priblíženie dokáže zničiť prvky rozloženia, zvlášť pre obrázky a navigáciu. Vo vašom rozložení sa môže javiť ako malý alebo príliš veľký. Na vyriešenie tohto problému použite metaznačku výrezu na nastavenie vlastných premenných v obsahu. Uistite sa, že ste do svojho HTML pridali značku:

Skúste použiť štandardné písma:

Vďaka vlastným kreatívnym písmom vyzerá váš web pekne, ale v prípade mobilných zariadení sa používateľom nechce zobraziť výzva na stiahnutie písma na zobrazenie webovej stránky. Pravdepodobne nebude písmo sťahovať a namiesto toho sa presunúť na iný web.

Hoci väčšina písiem je nainštalovaná v mobilnom zariadení, budete ich môcť používať v dizajne svojich webových stránok. Je tu však ešte jedna vec, na ktorú treba pamätať – niektoré písma sa dajú ľahšie alebo ťažšie prispôsobovať rôznym veľkostiam, preto si pred použitím vo svojom návrhu skontrolujte čitateľnosť písma..

Nezabudnite na pokyny:

Priemerný desktop alebo laptop je horizontálny, samozrejme sa posúvame hore a dole, ale je široký. Na druhej strane sú smartphony väčšinou elegantné a urážlivé, preto sa šírka obsahu môže líšiť a preto je potrebné zvážiť. Pri vytváraní videí, obrázkov a rozbaľovacích zoznamov nezabudnite, akým smerom budú ľudia pri prezeraní obsahu postupovať.

Nemajte strach spoliehať sa na profesionála, ktorý opraví vaše webové stránky a spríjemní ich, ak niečo zlyhá. Môže to vyžadovať určitú investíciu, ale pri každodennom zvyšovaní počtu používateľov mobilných telefónov a aktualizovanom algoritme spoločnosti Google sa táto investícia môže ukázať ako vypočítaná.

Zobrať:

S mobilizáciou na svete je veľmi dôležité, aby bol váš web mobilný a v skutočnosti niečo nad očakávania, až potom môžete prilákať používateľov na svoj web. Pred začatím práce na vašom webe sa uistite, že ste si prečítali pokyny pre prívetivosť k mobilným telefónom a zaujali stanovisko od odborníkov. Dúfam, že vám tieto tipy pomôžu prispôsobiť váš web mobilným stránkam. Váš web nie je jediná vec, ktorá musí byť prispôsobená pre mobilné zariadenia. Uistite sa, že aj vaše sociálne riadenie je prispôsobené pre mobilné zariadenia.

Earleen Brown spolupracuje s renomovanou spoločnosťou SEO Services, poprednou spoločnosťou SEO Company v Indii. Spoločnosť je v podstate poskytovateľom IT firiem SEO služby India a veľmi jej pomohol pri zlepšovaní písacích schopností.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map