jak vytvořit mobilní web (ve 4 jednoduchých krocích)
v říjnu 2016 počet uživatelů mobilního a tabletového internetu poprvé překonal počet uživatelů stolních počítačů. Tento posun paradigmatu sloužil jako výzva k akci pro vývojáře, aby začali přehodnocovat celé své odvětví. Od té doby, mobilní využití nadále roste a stává se ještě rozšířenější a existuje mnoho elegantních řešení pro vývoj webových stránek, které dnes slouží těmto uživatelům.
tato řešení jsou schopna poskytnout uživatelům podobný zážitek, jaký by získali na ploše, aniž by to ohrozilo obsah nebo funkci vašeho webu. Při budování webu, který je schopen vytvořit tuto zkušenost, se může zdát skličující, je to mnohem jednodušší, než si myslíte.
ve skutečnosti je to tak jednoduché, že jsme sestavili snadno sledovatelného průvodce 4 kroky k vytvoření mobilního webu, který vám pomůže začít.
Vyberte si přístup k webovému designu
existuje několik řešení, která můžete použít k vytvoření webové stránky vhodné pro mobilní zařízení. Zatímco každý web design přístup má své vlastní přívržence, kteří vám řeknou, že je to nejlepší, měli byste určit, který z nich vyhovuje vašim potřebám na základě vlastního zvážení informací.
responzivní webdesign
responzivní webdesign (RWD) využívá přizpůsobivá rozvržení, která jsou umožněna pomocí médií, rozšíření a backendových sítí založených na poměrech. To znamená, že pokud je okno prohlížeče rozšířeno nebo uzavřeno, obsah se bude řídit a podle potřeby se přizpůsobí. Výsledkem je web, který vypadá podobně na stolním i mobilním zařízení.
toto plastové uživatelské rozhraní je často srovnáváno s vodou. Můžete nalít šálek vody do sklenice, hrnce nebo džbánu a objem vody zůstane stejný, navzdory změně nádoby.
Adaptive Web Design
na rozdíl od RWD se adaptive web design (AWD) nespoléhá na jediné měnící se rozvržení. Místo toho používá odlišné rozvržení pro různá zařízení a velikosti obrazovky. To znamená, že když se přihlásíte na web, zobrazí se vám stránka, která nejlépe vyhovuje potřebám zařízení, které právě používáte.
někteří se mohou rozhodnout vytvořit tři webové stránky: jeden pro chytré telefony, jeden pro tablety a jeden pro stolní počítače. To by vyžadovalo tři různé návrhy, které by zůstaly „v pohotovostním režimu“, dokud by nebyl vyzván každým návštěvníkem. Místo jednoho-size-fits-all webové stránky, AWD funguje jako přizpůsobená brána pro všechny uživatele.
přístup, který zvolíte pro vytvoření mobilního webu, je pouze začátkem procesu návrhu.
použijte nástroj pro tvorbu webových stránek nebo CMS
jakmile zjistíte, jak chcete, aby vaše webové stránky fungovaly na různých zařízeních, jste připraveni začít je budovat! Platforma, na které vytvoříte svůj web, je nápomocná při zaměstnávání vašeho plánu mobilního designu. Pro základní uživatele existují dvě možnosti, které je třeba zvážit.
stavitelé webových stránek
stavitelé webových stránek berou všechny dohady z webového designu a umožňují vám vytvořit plně přizpůsobitelný a bohatý web během několika minut. Dosahují toho, což uživatelům umožňuje vybrat si téma nebo šablonu a jednoduše přetáhnout funkce, které se jim líbí, na své webové stránky a snadno odstranit ty, které nemají.
většina tvůrců webových stránek, včetně zlatého standardu Wix, umožňuje uživatelům jednoduše určit, jak budou jejich stránky reagovat na mobilu. Platforma Wix se většinou spoléhá na adaptivní webové stránky, zatímco jiné služby, jako je Weebly, se většinou spoléhají na responzivní design. V závislosti na druhu přístupu, který jste si představili pro svůj web, můžete se rozhodnout jít s nástrojem pro tvorbu webových stránek, který vyhoví vašim potřebám.
systémy pro správu obsahu
systém pro správu obsahu (CMS) je vaší nejlepší alternativou k vyhrazenému nástroji pro tvorbu webových stránek. CMS, jako je WordPress, se spoléhají na o něco více počítačových a internetových znalostí, ale mohou poskytnout více funkcí než tvůrci webových stránek. CMS navíc nabízí návrhy RWD i AWD.
podobně jako nástroje pro tvorbu webových stránek může CMS využít buď přístup mobilního designu tím, že je integruje do množství témat dostupných uživatelům. Tato témata mohou být jen bohatá jako témata nalezená na stavitelích webových stránek, ale lépe slouží těm, kterým nevadí, že si trochu zašpiní ruce a naučí se něco o webdesignu.
pokud se rozhodnete používat CMS, můžete si jednoduše stáhnout motiv připravený pro mobilní zařízení, a to buď zdarma, nebo za poplatek, a použít jej k vytvoření webu. Většina z těchto témat přichází s plnou podporou a pravidelnými aktualizacemi, takže se nemusíte starat o údržbu a správu svých webových stránek.
Navrhněte mobilní web
po určení, na jaké platformě budete svůj web stavět, jste připraveni navrhnout a vytvořit svůj web. Ať už vytváříte blog, portfolio, obchodní web nebo dokonce obchod s elektronickým obchodem, můžete to udělat pomocí standardních zásad nezbytných pro jakýkoli design webu. Jakmile dokončíte svůj návrh, budete muset jednoduše otestovat svůj web, abyste zjistili, zda reaguje správně (RWD), nebo vytvořit jiný design pro mobilní zařízení (AWD).
navrhování mobilních webových stránek je téměř stejně jednoduché jako navrhování desktopových stránek, ale je třeba mít na paměti několik věcí.
a. mobilní uživatelé mají obecně omezenou šířku pásma
vždy byste měli mít na paměti, že většina mobilních návštěvníků využívá mobilní sítě, které omezují jejich šířku pásma. V důsledku toho je velmi důležité, aby vaše mobilní stránky lehké a bez příliš mnoho obsahu, který může jíst pryč na těchto klíčových bajtů.
b. Mobilní uživatelé chtějí relevantní informace rychle
často mobilní uživatelé navštíví web, aby získali relevantní informace o místech, která navštěvují, jako jsou hodiny obchodu nebo telefonní čísla. Pokud tyto relevantní informace nejsou k dispozici rychle a jasně, může to mít za následek ztrátu zákazníka. Ujistěte se, že váš mobilní web obsahuje Rychlé odkazy na kontaktní informace a další relevantní data.
c. mobilní zařízení jsou méně výkonná
Stolní a přenosné počítače jsou postaveny s grafickými kartami a procesory, které jsou schopny zvládnout velké zatížení. Zatímco mobilní zařízení jsou extrémně výkonná, nejsou postavena stejným způsobem. Místo toho ztrácejí funkci pro formu a v důsledku toho nemohou zpracovat obsah náročný na procesor stejným způsobem jako počítač.
pokud váš web pro stolní počítače vyžaduje tento druh věnování zdrojů, možná budete chtít dvakrát přemýšlet o tom, že budete sloužit mobilnímu publiku tento stejný druh webu.
organizovat obsah
při vytváření mobilního webu je důležité zajistit, aby uživatelé měli přístup ke všemu na vašem webu pro počítače a zároveň si zachovali schopnost pracovat na menší obrazovce. Při organizaci obsahu byste měli mít na paměti několik úvah.
a. Mobile First
Mobile First je jedním z nejnovějších pohybů ve světě designu. Stanoví, že musíte nejprve navrhnout svůj mobilní web před rozšířením na stránky pro stolní počítače a tablety. Obsah, který vytvoříte pro svůj mobilní web, lze také načíst ve verzi pro stolní počítače.
tento přístup je proto užitečný pro dynamicky obsluhované a reagující webové stránky, kde je obsah ve vaší mobilní verzi totožný s obsahem na vašem webu pro stolní počítače.
b. Mobile Second
pokud již máte webové stránky pro stolní počítače, organizace obsahu může být o něco obtížnější, i když ne úplně nemožné. Nejprve zjistěte prvky vašeho webu pro počítače, které musíte zobrazit v mobilní verzi.
shromažďujte uživatelská data pomocí standardních analytických nástrojů, které používáte, a zjistěte:
- obsah, který je pro vaše návštěvníky nejdůležitější.Co mobilní uživatelé mají tendenci ignorovat.Cesta, kterou se vaši návštěvníci obvykle vydávají.
použijte poznatky, které shromažďujete, abyste věděli, co by mělo a co by nemělo jít na mobilním webu. To vám pomůže vyčistit váš desktopový web. Poté zmapujte cestu obsahu, kterou vaši návštěvníci budou mít.
poté, co máte dobrou představu o vizuálním toku vašeho webu, můžete snadno rozložit Počáteční návrh mobilních obrazovek a jít přímo do vývoje mobilních webových stránek.
c. navigace
obrazovky mobilních telefonů jsou malé. To znamená, že byste měli minimalizovat možnosti mobilní navigace. Zvažte použití lupy nebo třířádkového (hamburgerového) menu navicon. Až budete hotovi, otestujte svůj web na populárních zařízeních používaných až 90% vašich mobilních návštěvníků.
D. Design pro dotyk
vzhledem k tomu, že není možné kliknout pravým tlačítkem myši nebo vznášet se prsty na mobilním zařízení, musíte na svém mobilním webu umístit odkazy, abyste zajistili, že uživatelé náhodně nekliknou na nesprávné odkazy. Udělejte to pomocí:
- poskytnutí zpětné vazby při každém dotyku obrazovky.Pomocí tlačítek definovat, kde uživatelé mohou a nemohou kliknout.Přepracujte své rozbalovací nabídky.Minimalizace zadávání textu.
a tady to máte! Tyto informace použijte při příštím přepracování webu pro stolní počítače pro prohlížení na mobilních zařízeních nebo při vytváření nového mobilního webu od nuly.