mít mobilní verzi vašeho webu je dnes nutností a jediným jistým způsobem, jak zpřístupnit váš webový projekt z mobilních zařízení. Takže pokud máte pravdu o spuštění webové stránky, jste povinni vzít tento problém v úvahu, aby byl úspěšný. Máte již web a chcete jej aktualizovat, aby byl mobilní? Níže uvedené informace vám také přijdou vhod.
existuje několik způsobů, jak spustit mobilní webové stránky dnes. Výběr nejvhodnějšího řešení závisí na několika faktorech, jako je typ webu, věk a vlastnosti, vaše vlastní cíle webového designu, dovednosti a požadavky. Nejrozšířenější řešení jsou následující:
- responzivní tvorba designu, když uživatel navštíví stejnou webovou stránku (která se zobrazuje odlišně s ohledem na speciální pravidla související s CSS) z stolních a mobilních zařízení;
- samostatná verze mobilních webových stránek založená na přístupu pouze pro mobilní zařízení, pokud máte dvě rozhraní, která fungují konzistentně a mohou být dokonce hostována na různých doménách/subdoménách;
- plnohodnotná mobilní aplikace, která může být buď samostatným produktem s předem navrženou architekturou vyvinutou pro určitou platformu, nebo samostatným nástrojem náhledu (jako webový prohlížeč), který je použitelný pouze pro jednu webovou stránku.
každá z těchto možností funguje skvěle pro vytváření mobilních webových stránek. Je jen na majiteli, aby vybral nejvhodnější řešení. Podívejme se nyní na nejrozšířenější (a nejpohodlnější) způsoby vývoje mobilních projektů.
jak vytvořit mobilní verzi webové stránky (Website Builder)
pokud ještě nemáte webové stránky, má smysl vybrat službu, která je dodávána s responzivní podporou designu a / nebo má samostatný integrovaný mobilní editor. Tvůrce webových stránek bude pro tento účel nejlépe fungovat, protože tyto platformy jsou většinou vytvořeny pro vývoj webových stránek vhodných pro mobilní zařízení, a proto ve výchozím nastavení reagují na všechny své bloky, widgety a prvky rozhraní. Výsledkem je, že projekty postavené s nimi se skvěle zobrazují na stolních a mobilních obrazovkách bez nutnosti vytvářet samostatnou mobilní verzi. Podívejme se na tuto možnost pomocí nástroje Wix website builder.
Wix je světově populární all-in-one Saas Website builder, který umožňuje spuštění / správu jakéhokoli typu webového projektu, ať už je to blog, portfolio, vstupní stránka, obchodní web nebo dokonce webový obchod. Všechny šablony, které jsou k dispozici v rozsáhlé galerii (je jich zde již více než 550), stejně jako webové stránky, které uživatelé vytvářejí od nuly, jsou automaticky přizpůsobeny pro mobilní prohlížení.
je možné samostatně nastavit verzi pro stolní a mobilní webové stránky, ale zatím neexistuje možnost náhledu tabletu. Zde můžete skrýt vybrané bloky a prvky rozhraní a zde upravovat/nastavovat jedinečné pozadí. A co víc, Wix má specifické funkce související s mobilními zařízeními, jako například:
- zobrazení panelu rychlého spuštění (můžete přidat tlačítko telefonního hovoru, odkazy na sociální sítě / posly atd. zde);
- tlačítko „Nahoru“;
- uvítací obrazovka (druh animované obrazovky načítání, která umožňuje zobrazení emocionálních pozdravů nebo zavedení značky / ochranné známky před skutečným přístupem na web);
- vlastní barevné schéma pro panel prohlížeče Chrome;
- služba automatizované optimalizace rozvržení obsahu a webových stránek pro mobilní zařízení (to je docela vhodná volba pro webové stránky vytvořené nezkušenými designéry).
Wix má také mobilní aplikaci, která vám umožní spravovat webové stránky, pokud získáte předplatné, které zahrnuje přístup k profesionálním obchodním nástrojům.
jak vytvořit mobilní verzi webu CMS (WordPress)
stejně jako jakýkoli jiný CMS, WordPress nevěnuje pozornost zařízení používanému k dosažení webové stránky. Platforma poskytuje pouze variantu návrhu uvedenou ve výchozím nastavení.
stále má smysl zdůraznit služby webových vývojářů, protože WordPress je jedním z těch CMS, jejichž návrh administrativního panelu se může přizpůsobit mobilním zařízením (to znamená, že web bude vhodný nejen pro návštěvníky, ale také pro jeho majitele, který jej bude moci upravovat, nastavovat a naplňovat obsahem z mobilního zařízení). Kromě toho existují aplikace pro chytré telefony, které jsou použitelné nejen pro klasický CMS, ale i pro cloud WordPress.com platforma také.
výsledkem je, že verze mobilních webových stránek se v 99% případů ukázala jako zásluha samotné šablony. Jedinou výjimkou jsou speciální pluginy nebo skripty, které mohou přesměrovat uživatele na samostatné mobilní téma(například na základě rozlišení obrazovky nebo modelu zařízení).
jak vytvořit verzi mobilního webu s WordPress od nuly
pokud právě plánujete spustit web, problém není tak akutní-stačí vybrat správnou šablonu – Sortimentu responzivních témat je více než dost i v oficiálním katalogu CMS. Musíte se ujistit, že vybraný design absolutně dodržuje deklarované funkce. Totéž platí o alternativních platformách, jako je ThemeForest nebo TemplateMonster.
pokud je rychlost načítání a vysoké PageSpeed Insights parametry opravdu záleží na vás, pak existují speciální šablony, které zaručují až 100 bodů v testech profilu, jako je téma Neve, například. Návrhy, které se nemohou přizpůsobit obrazovkám smartphonů, však v dnešní době nejsou příliš rozšířené.
jak nahradit šablonu WordPress responzivní
pokud již vlastníte web po dlouhou dobu a jeho šablona je zastaralá, která byla původně vytvořena tak, aby odpovídala formátům obrazovky ve velkém měřítku, měli byste zvážit možnost nahradit starý design webových stránek novým. Takový přístup má několik výhod, a to:
- verze pro stolní a mobilní webové stránky budou mít stejný styl;
- potřeba spravovat dva typy rozhraní bude odstraněna;
- nebudete muset psát složité funkce a algoritmy pro definování rozlišení obrazovky a typu zařízení, které uživatel musí přesměrovat na samostatný design;
- Komerční témata často přicházejí s technickou podporou, a tak budete moci získat odpovědi na všechny vaše otázky a nastavit nové téma, které není horší než předchozí.
nevýhody jsou také k dispozici zde. Šablony často přicházejí s písemnými kódy analytiky, čítače, reklamní bloky atd. Některé z nich dokonce zavádějí samostatné typy materiálů, což vyvolává potřebu přenést všechny tyto prvky do nové šablony. Všechny potenciální chyby mohou mít negativní dopad na výsledky vyhledávače. Pokud máte pravidelné uživatele, nemusí se jim tento nápad líbit a mohou dokonce odmítnout návštěvu vašeho webu. Proto je třeba důkladně analyzovat nadcházející přepínač návrhu, abyste zvážili všechny možné nuance.
jak vytvořit zastaralou šablonu reagující
myšlenka vytvořit zastaralou šablonu reagující není tak složitá, jak se může zpočátku zdát. Nemá však smysl to vyzkoušet, pokud vám chybí specializované dovednosti nebo alespoň základy webového designu. Každopádně vždy existuje možnost najmout webdesignéra, který vám s tím pomůže.
hlavní myšlenkou je přidat CSS mediální dotazy, na základě kterých budou kaskádové styly speciálně přidány pro požadovaná rozlišení obrazovky. Podívejte se na příklad nyní:
@media screen and (max-width: 479px) {...These are style sheets that will be applied exclusively for screens,the width of which does not exceed 479 pixels, that is, for smartphonesin the portrait format... }@media screen and (min-width:480px) and (max-width:800px) {...CSS styles here will be developed for screens with the width from480 up to 800 pixels, for example, on smartphones with horizontal screen position...}@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {...These are styles for tablets in vertical and horizontal positions...}
například, pokud vaše hlavní mřížka vypadala takto:
bude mít následující vzhled v HTML:
<div class="main page box"> <div class="profile box">Guest profile</div> <div class="article box">Main article</div> <div class="sidebar box">Sidebar</div></div>
styly těchto polí jsou umístěny v souborech šablon CSS s tečkou stojící na začátku, což znamená, že se jedná o třídu CSS:
.main web page box {width: 1280px; (or any other meaning, which can be provided in percentage form - width: 100%;)}.profile box {width: 280px; (the width may also be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}.article box {width: 600px; (the width may be provided in percentage form - width: 50%;)float: left; (left-edge wrap) }.sidebar box {width: 400px; (the width may be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}
pokud nahradíme pevnou nebo relativní šířku 100% pro navrhované rozlišení obrazovky, bude mřížka vypadat následovně:
k dosažení takového výsledku stačí přidat mediální dotaz do stylů (níže uvedený příklad platí pro všechna zařízení s šířkou obrazovky 1024 pixelů a níže):
@media only screen and (max-device-width: 1024px) {.main web page box {width: 100%; (full width)}.profile box {width: 100%; (full width)float: left; (right-edge wrap)}.article box {width: 100%; (full width)float: left; (right-edge wrap)}.sidebar box {width: 100%; (full width)float: left; (right-edge wrap)}}
mějte na paměti, že komentáře uvedené v závorkách jsou uvedeny výhradně jako vzorek, nelze je přenést do skutečného kódu CSS.
jaká úskalí se mohou objevit při tak citlivé realizaci návrhu? Bohužel existuje mnoho z nich:
- celé rozvržení webové stránky může být porušeno, protože nejen klíčové bloky dostupné na stránce mohou mít pevnou šířku. Mohou to být také obrázky,zpravodajské bloky na domovské stránce / v kategorii, bloky popisu autora a další prvky. Není možné je identifikovat všechny najednou. Každý z nich bude muset být upraven, jakmile bude identifikován.
- objem webové stránky se nezmění, což bude mít negativní dopad na rychlost stahování s pomalým připojením k internetu (za takových podmínek nebude možná žádná optimalizace).
- podle doporučení vyhledávače by písma na mobilních zařízeních měla být snadno čitelná bez oddálení. To vyvolá potřebu předefinovat všechny velikosti písma pro nadpisy, texty těla, citace, seznamy (očíslované a nečíslované) atd.
- záhlaví a komplexní nabídka by měly být zcela přepracovány. Má smysl ponechat pouze malé logo webu, ikonu vyhledávání (pokud máte tuto možnost) a ikonu profilu (pokud je použit autorizační systém). Nabídka na ploše by měla být lépe skryta a nahrazena ikonou „sendvič „(ikona nabídky). Ve většině populárních responzivních šablon je to implementováno dvěma paralelními nabídkami: první je určena pro obrazovky stolních počítačů a zobrazuje se pouze na PC, zatímco druhá je určena pouze pro mobilní zařízení (zobrazuje se na základě stejných mediálních dotazů pouze na mobilních zařízeních).
- pokud se struktura hlavních polí liší, například se postranní panel zobrazí vlevo, ale ne vpravo, zatímco všechny widgety se zobrazí před hlavním obsahem, i když je logičtější umístit je níže.
- kromě souborů CSS lze styly webových stránek nahradit skripty JS bude obtížnější je najít a upravit.
to jsou jen některé z možných úskalí. Proto má smysl najmout odborníka na webový design K dokončení úkolu.
výhody mediálních dotazů umožňují kdykoli odstranit nesprávný kód. Tyto styly se nezobrazují na hlavním webu.
jak přidat responzivní verzi webových stránek s pluginy
některé CMS používají své vlastní sady rozšíření, zatímco jiné je nemají vůbec. WordPress coed s nejpozoruhodnějšími pluginy pro responzivní tvorbu webových stránek, jmenovitě:
- Jetpack-funkce automatického vytváření mobilní verze byla ukončena od března 2020;
- WPtouch-je k dispozici v bezplatných i placených verzích, rozšíření má své vlastní pluginy a témata, jako je samostatný plugin pro organizaci mezipaměti, plugin pro tvorbu webových aplikací, plugin pro optimalizaci obrázků, plugin pro vytváření AMP atd. Proces přechodu z desktopu na mobilní téma pomocí WPtouch je dokončen bez změny adres URL webových stránek, což je pro SEO hodně důležité;
- WP Mobile Menu-citlivé menu pro mobilní zařízení (hodí se vám, pokud potřebujete nahradit objemné a složité menu verze webových stránek pro stolní počítače citlivým a kompaktním menu pro mobilní zařízení);
- WP Mobile Detect – plugin zpočátku definuje, že osoba používá mobilní zařízení a poskytuje výsledek jako hodnotu true/false. Díky tomu je použitelný pro implementaci možnosti přepínání šablon nebo pro zobrazení určitých bloků rozhraní;
- WP Mobile Edition-plugin může převést webové stránky WordPress na plnohodnotné webové aplikace. Uživatelé mohou do svých stolních počítačů smartphone/tablet přidat ikonu webu a použít ji ve formátu celé obrazovky (bez rámečků a karet prohlížeče);
- Mobile Smart-plugin identifikuje, že zařízení odkazuje na mobilní třídu, a poté přepne témata na alternativní, která je kompatibilní s mobilními zařízeními. Verze Pro je dodávána s integrovanou podporou mobilních nabídek, speciálních widgetů, možností správy pluginů (pro mobilní zařízení lze poskytnout samostatnou sadu), přepínač domény (pro implementaci správné práce dvou nezávislých verzí webových stránek) atd.
Weboví vývojáři se ujistili, že rozšíření zůstala nevyžádaná, protože mnoho majitelů webových stránek se rozhodlo přejít na responzivní verze šablon. Většina těchto pluginů tedy nebyla po dlouhou dobu aktualizována, což může mít za následek nekompatibilitu s aktuální verzí platformy. Jedinou výjimkou je WPtouch.
práce s každým pluginem bude mít své vlastní zvláštnosti. Některé z nich nabízejí hotové mobilní šablony, zatímco jiné doporučují stahování rozšíření třetích stran nebo vytváření vlastních.
pokud dáváte přednost práci s verzí mobilního webu na subdoméně / alternativní adrese, pak zde jsou nuance, které byste si měli být vědomi:
- Jedná se o různé webové stránky pro vyhledávače a je opravdu špatné, že jejich obsah není jedinečný;
- aby vyhledávače „přilepily“ adresu URL a pochopily, že se jedná o stejný web, měly by být všechny atributy odkazu řádně organizovány:
-
- atribut link … rel= „alternate“ href= „URL-mobile page“ – pro desktopové verze;
- atribut link … rel= „canonical“ href= „URL-desktop web pages“ – pro mobilní šablony.
- pokud se obsah na různých verzích webových stránek liší, riskujete, že dostanete sankce za maskování(za nahrazení obsahu).
jak vytvořit mobilní verzi webových stránek HTML
Pokud webové stránky HTML nemají dynamické funkce, nebudete moci analyzovat rozlišení obrazovky zařízení a přepnout z šablony plochy na mobilní téma na základě výsledku. Vše, co potřebujete, je zcela přepracovat rozvržení mřížky a styly problematických prvků.
již jsme přezkoumali, jak to udělat – to se provádí prostřednictvím mediálních dotazů. Nejobtížněji se přizpůsobují rozvržení s pevnou šířkou a polohou prvků.
nic nebude fungovat bez specializovaných specializovaných dovedností a ponoření kódu CSS/HTML. Má smysl buď najmout web design pro hned od začátku, nebo změnit design na jiný, který si můžete koupit nebo objednat, nebo jednoduše vytvořit zcela novou webovou stránku od nuly, například pomocí Mobirise offline website builder, například. Nakonec může být nejvyšší čas přejít na cloudovou infrastrukturu a vybrat si jednoho z online tvůrců webových stránek.
samostatné weby pro mobilní a stolní počítače nebo jeden web: co je lepší?
jak je uvedeno výše, mít mobilní webové stránky je nutností pro každého vlastníka firmy. Jedná se o jistý způsob, jak zajistit kvalitní obchodní prezentaci na webu, generovat provoz a zaručit nepřekonatelnou uživatelskou zkušenost. Otázka zní: má smysl vytvořit dvě samostatné verze webových stránek pro mobilní a stolní obrazovky nebo vytvořit responzivní web, který se bude skvěle zobrazovat na obou typech zařízení?
obecně platí, že spuštění jednoho responzivního webu je efektivnějším a praktičtějším řešením. Eliminuje potřebu vytvářet dva různé webové stránky s různými doménami / subdoménami, adresami URL a vnitřní strukturou. Takové stránky často zaměňují návštěvníky a mohou vyvolat problémy, pokud jde o optimalizaci SEO, internetový marketing a další související propagační metody. Místo toho získáte jeden projekt, který se zobrazí stejně dobře na stolních a mobilních obrazovkách.
kolik stojí Webová Mobilní verze?
náklady na mobilní verzi webu obecně závisí na platformě, se kterou ji spustíte. Pokud si vyberete online tvůrce webových stránek, jako je Wix, může být zcela zdarma, protože systém vám umožňuje vytvářet weby, které jsou ve výchozím nastavení připraveny pro mobilní zařízení. Bezplatný plán Wix vám však nedovolí připojit si vlastní doménové jméno, což znemožní vytěžit maximum z výkonu vašeho projektu.
pokud má Wix poměrně výraznou a všestrannou cenovou politiku, můžete si vybrat kterýkoli z jejích plánů na spuštění webové stránky. Jen zvážit cíle web design, typ projektu a specializace, stejně jako rozpočet jste připraveni investovat do něj, při výběru nejvýhodnější předplatné. Každý Wix plán je dodáván s širokou škálou speciálních funkcí a termínů, které ovlivňují konečné náklady. Nejlevnější předplatné webových stránek vás bude stát 13 $ / měsíc, zatímco cena nejdostupnějšího základního plánu podnikání začíná od 23 $ / měsíc.
už jste se rozhodli používat WordPress pro responzivní tvorbu webových stránek? Náklady na projekt budou nakonec záviset na ceně pluginů, za které půjdete. Rozšíření WordPress jsou obecně umístěna jako bezplatná, ale část jejich funkcí je stále k dispozici po upgradu na verzi Pro. Například náklady na WPtouch Pro se budou pohybovat od 79 $do 359 $ročně. To je přesně důvod, proč se zdá rozumné přejít na připravenou responzivní šablonu. Taková témata se kupují jednou, zatímco jejich cena se pohybuje kolem 40-80$. V případě, že se stále rozhodnete najmout profesionálního webového vývojáře, aby pro vás přepracoval zastaralé téma, náklady budou projednány individuálně v závislosti na složitosti projektu.
Sečteno a podtrženo
není žádným tajemstvím, že každý web by měl mít mobilní verzi, aby dnes zůstal v poptávce s cílovým publikem. Tam jsou téměř na lidi, kteří nepoužívají své mobilní zařízení k procházení webu, hledají služby a produkty, které potřebují. Proces optimalizace mobilních webových stránek bude tedy nakonec záviset na vybrané platformě.
pokud právě plánujete spustit web, má smysl upřednostňovat jednoho z nejpopulárnějších online tvůrců webových stránek. Wix bude pro tento účel fungovat nejlépe. V případě, že již provozujete web poháněný CMS, jako je WordPress, je lepší jej nahradit citlivým tématem. Pluginy, které nabízejí mobilní podporu, však mohou být poměrně drahé, zatímco kompletní redesign šablony bude skutečnou výzvou, zejména pokud máte v úmyslu zvládnout úkol samostatně.
každopádně nemá smysl vytvářet samostatnou mobilní verzi vašeho webu. Budete čelit problémům souvisejícím s vývojem projektu a jeho další podporou. Mnohem jednodušším a rozumným řešením je, aby váš web od začátku reagoval na mobil.