Mobilní nebo responzivní – vše co potřebujete vědět

V únoru 2015 jsme u mnoha našich klientů změřili, že návštěvnost z mobilních telefonů překročila 10 % a v posledních měsících je růst tak velký, že odhadujeme, že hranice 20 % bude překročena ještě v tomto roce. Celosvětově se udává, že provoz z mobilních zařízení představoval koncem roku 2014 již 34 % celkového internetového provozu, i když většinu tohoto provozu si ukrajují sociální sítě. Google udává, že v USA 94 % uživatelů chytrých telefonů hledá lokální informace v telefonech. Je tedy nejvyšší čas se o tyto návštěvníky začít více starat a nabídnout jim co nejlepší zážitek z používání vašeho webu nebo e-shopu.

Další zajímavé informace o chování českých uživatelů mobilních telefonů z roku 2013.

 růst mobilní zařízení

Obrázek 1: Výřez ze statistik ukazující nárůst návštěv z mobilních zařízení v posledních dvou měsících.

Co to jsou stránky optimalizované pro mobilní zařízení ?

Někteří z našich klientů se ptali, k čemu potřebují nějakou mobilní verzi stránek, když jim stránky v telefonu fungují? Stránky skutečně fungují, ale jejich použití většinou není pohodlné a často je těžké odeslat objednávku nebo poptávku. A i když se ji nakonec podaří odeslat, pravděpodobně se do toho zákazníkům nebude chtít znovu a riskujeme, že přejdou ke konkurenci, která je vzdálená jen o jedno kliknutí. Máme změřeno, že webové stránky optimalizované pro zobrazení v mobilních telefonech získávají více objednávek a klienti je preferují při příštích nákupech. Toto u neeshopových stránek potvrzují statistiky v parametrech jako je průměrná délka návštěvy nebo počet shlédnutých stránek, při srovnání webových stránek před a po nasazení mobilní verze.

Dalším důležitým faktorem je označení optimalizovaných stránek přímo ve výsledcích hledání Google. U neoptimalizovaných a tedy neoznačených stránek je nižší míra prokliku, což následně může vést k celkovému snížení pozice ve výsledcích hledání.

 Google výsledky hledání - optimalizováno pro mobily

Obrázek 2: Ukázka části výsledků hledání na Google v mobilním telefonu.

Doplněno 27.2.2015. Google na svém blogu oznámil, že změní algoritmy hledání v mobilních zařízeních tak, že mobilní verze stránek bude mít významný vliv na pozici ve výsledcích hledání. Tyto změny se projeví od 21.4.2015!

Jak vytvořím mobilní verzi webových stránek?

Pro technické řešení mobilní verze stránek existují z pohledu Google tři hlavní možnosti:

Webové stránky v responsivním designu

Nejčastější řešení, kdy zobrazení v mobilních telefonech a na ostatních zařízeních využívá stejný html kód, ale mění se vzhled pomocí stylování. Neznamená to, že návštěvník mobilní verze musí vidět přesně to samé jako návštěvník používající stolní počítač. Některé prvky je možné skrýt a lépe tak optimalizovat obsah pro potřeby mobilního návštěvníka. Hlavní nevýhodou je častá nutnost rekonstrukce základní verze webu, ale z pohledu budoucího vývoje se většinou jedná o nejlepší řešení.

Mobilní verze stránek na stejných adresách pomocí přizpůsobení obsahu zařízení

Další možností je rozpoznat, z jakého zařízení návštěvník přišel a zobrazit mu jinou verzi stránek. Tato metoda je vhodná v případě, že potřebujete mobilním návštěvníkům ukázat výrazně jiný obsah než návštěvníkům využívajícím stolní počítač. Na druhou stranu je v této verzi potřeba dodržet stejnou strukturu webu. Technologie se nazývá Dynamic serving.

Mobilní verze na oddělené adrese

Pokud potřebujete mobilním návštěvníkům zobrazit jinou verzi obsahu a zároveň jinou strukturu, doporučuje se použít mobilní verzi stránek na oddělené adrese. Často se setkáváme například s mobilní verzi na adrese: http://m.adresawebu.cz/

Výběr řešení mobilní verze z pohledu SEO

Výběr konkrétní verze záleží na tom, co chcete, aby viděl návštěvník stránek, ale také na tom, jaké jsou vaše technické a finanční možnosti.

Vždy je důležité se ptát. Co je pro námi hledaného uživatele webu nejlepší? Co potřebujeme, aby viděl a následně udělal v mobilní verzi?

mobilní verze z pohledu SEO

Praktický příklad pro penzion na Šumavě.

Analýzou dat zjistíme, že lidé v mobilních telefonech nevybírají penzion (v jiné lokalitě například u hotelu to může být jinak!), výběr provádí pouze v desktopové verzi. V mobilní verzi hledají jen: „brand + adresa“, … kontakt, … telefon, … mapa, a podobně. Tedy hlavně výrazy spojené s kontaktními informacemi. Z toho plyne, že pro vás může být nákladově výhodné vytvořit jen jednoduchou oddělenou mobilní verzi, která bude poskytovat jen kontaktní informace, mapu a podobně. Tedy není nutné ihned kompletně předělat celou prezentaci.

Nezapomínejte, že trendy se mění a proto data pravidelně vyhodnocujte a přizpůsobujte se. Příkladem chceme hlavně ukázat, že není nutné se ihned vrhat na rekonstrukci jinak funkčního a úspěšného webu a vytvářet nákladně novou responzivní verzi.

Praktický příklad pro provozovatele e-shopu

Od mobilní verze většinou chceme přeměnit návštěvníky na zákazníky a přijdeme na to, že se na stránky dostávají hledáním stejných výrazů jako u desktopové verze. Proto bude vhodné vytvořit responsivní verzi e-shopu.

Responzivní nebo mobilní web?
Rozlouskneme to za vás!

Další poznámky k výběru technického řešení pro mobilní verzi

  1. Google preferuje weby s jednou adresou a s jedním kódem. Doporučení na oficiálním blogu Google, kde se zmiňuje i o možnosti různého kódu.
  2. Stejné URL jsou důležité při sdílení na sociálních sítích a celkově odkazování.
  3. Přesměrování na m. verzi stránek je pomalé (trvá 0,5 s) a může mít vliv na snížení konverze.
  4. Responzivní verze omezí chyby způsobené špatným přesměrováním a celkově sníží náklady na údržbu.
  5. Responzivní verze se může načítat příliš dlouho. Při nevhodně navržené struktuře jednotlivých stránek a špatném technickém řešení bude čas načtení delší než u mobilní verze.
  6. Oddělená mobilní verze umožní zobrazení jiného, přesněji cíleného obsahu.
  7. Oddělená mobilní verze umožní zachování stávajícího webu a sníží náklady na jeho přizpůsobení.
  8. Technické řešení oddělené mobilní verze je levnější než řešení responzivní verze webu, ale je náročnější na správu obsahu.

Společné tipy pro realizaci mobilní verze

  • Využijte test použitelnosti v mobilech od Google.
  • Otestujte rychlost pomocí nástroje od Google.
  • Ujistěte se, že uživatelé mohou jednoduše splnit dané cíle (objednávka, zaslání poptávky, dotaz, nalezení kontaktu, přímo zavolat nebo zobrazit mapu).
  • Testujte vzhled na co nejvíce zařízeních a platformách. iOS, Android, Windows Phone a s různými prohlížeči (Safari, Google Chrome, …).
  • Kontrolujte, zda jsou odkazy dostatečně velké pro dotyk prstem. Doporučuje se alespoň 28 × 28 px.
  • Vyhněte se zcela Flash animacím nebo Flash přehrávačům videa.
  • Používejte viewport meta tag.
  • Nedoporučujeme používat vyskakovací okna nebo okna překrývající obsah stránky.
  • Ujistěte se, že jsou pomocí navigace dostupné všechny stránky.
  • Odstraňte zbytečné obrázky, případně nenačítejte hned všechny obrázky, pokud to není nutné.
  • Používejte pro kontrolu Google Webmaster Tools a nezapomeňte zde kontrolovat mobilní verzi.
  • Používejte přesměrování na straně serveru (301,302), protože jsou rychlejší.
  • Překontrolujte titulky stránek ve výsledcích hledání. Zalomení na dva řádky může způsobit komplikace. Je povolena stejná délka textu, ale titulky se v mobilním vyhledávání zalamují na dva řádky.
  • Vypadají popisy (descriptions) dobře i při zkrácení na 120 znaků? Google v mobilním vyhledávání zkracuje popisy na 120 znaků proti 150 znakům v desktopové verzi.
  • Otestujte, jestli jsou stránky validní.
  • Nezapomeňte na možnost přepnutí na plnou verzi webu
  • Nezapomeňte v responzivní i mobilní verzi na vyhledávání - ušetříte tím uživateli spoustu času.

Tipy pro realizaci responzivního webu

Kvalitní responzivní web by měl být nejčastějším řešením, vhodným pro naprostou většinu webů a při příštím redesignu s ním určitě počítejte.

  • Minimalizujte počet žádostí na server, omezte množství javascriptových, css souborů. Omezte jejich velikost.
  • Logo řešte pomocí SVG formátu.
  • Pro zobrazení grafiky využijte css.
  • Překontrolujte, jestli jsou důležité prvky nahoře, případně jestli nejsou mimo zobrazenou plochu (vpravo)
  • Nastavte správně HTTP-hlavičky

Tvoříme mobilní verzi se stejnými adresami pomocí přizpůsobení obsahu, na co si dát pozor

  • Nastavte správně HTTP-hlavičky

https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/dynamic-serving

Praktické příklady:

  • Přidejte do index.php pro obě verze webu VARY: header("Vary: Accept-Encoding,User-Agent");
  • Přepínání verzí udělejte pomocí Plná verze
    Mobilní verze

Tvoříme oddělenou mobilní verzi na jiných adresách na co si dát pozor

  • Přesměrování musí probíhat na odpovídající konkrétní stránky, nikoliv na úvod.
  • Umožněte návštěvníkům přepnutí na plnou verzi.
  • Nastavte správně HTTP-hlavičky.
  • Nastavte správně rel=alternate/canonical tagy
    Desktop verze:
    Mobilní verze .
  • Použijte oddělenou mapu stránek pro mobilní verzi.
  • Měřte, jestli klientům nechybí některé stránky, dostupné jen v plné verzi.
  • Jsou URL stránek uživatelsky příjemné a obsahují odpovídající klíčová slova? Google zobrazuje ve výsledcích mobilní adresy webu.

Projděte si celý seznam: http://moz.com/blog/mobile-site-audit-checklist.

Zanamenali jste propad s novou verzí stránek?
Pomůžeme vám - kontaktujte nás!

Časté otázky a odpovědi

Jak zjistím, kolik návštěv mám z mobilních zařízení?

Pomocí Google Analytics - Cílové publikum - Mobilní zařízení - Přehled.

Jaké adresy zvolit pro oddělenou mobilní verzi stránek

Doporučujeme spíše m.domena.cz před mobile.domena.cz a podobně a to proto, že výsledná adresa bude ve výsledcích hledání kratší a zůstane více místa pro zobrazení další části adresy.

Mohu mobilní verzi vytvořit na jiné doméně?

Ne tomu se určitě vyhněte, toto patří mezi tři největší chyby podle Google.

Kolik stojí vytvoření mobilní verze stránek?

Na toto se nedá přímo odpovědět. Záleží na vybrané variantě:

Responzivní verze na míru – Minulé náklady na přípravu krát dva, ale spíše krát tři, pokud chcete opravdu kvalitní optimalizaci rychlosti a testování.

Responzivní verze ze šablony – Kvalitní šablony jsou dnes většinou responzivní, proto je zde jen náklad přechodu na tuto novou šablonu. Pozor na kupované šablony pro opensource systémy, jsou často neoptimalizované a tedy pomalé. Doporučujeme vybrat si dobrého dodavatele, který šablonu dokáže nejen nasadit, ale i optimalizovat.

Mobilní verze na stejných adresách – Toto řešení volte hlavně v případě, že jej umožní váš stávající dodavatel webu. Většinou je možné rozpoznat, z jakého zařízení návštěvník přistupuje a podle toho zobrazit příslušné kódy. Mobilní verzi byste měli vytvořit v ceně do 50 % původní verze webu včetně řešení rozpoznání a správného přepnutí.

Mobilní verze na oddělených adresách – Tady velmi záleží na množství přenášeného obsahu, ale může se jednat o nejlevnější řešení na přípravu, na druhou stranu může znamenat nákladnější správu obsahu.

Štítky:

 


Vaši adresu nikomu nedáme. Nebudeme vás spamovat. Obvyklá dávka 1× za měsíc.

Diskuse k článku

Zatím nebyl přidán žádný příspěvek. Buďte první.

Přidat příspěvek:

Naše práce je o plánování, spolehlivosti a výsledcích!

Pojďme se setkat,

ukážeme vám, jak díky nám budete na internetu úspěšnější!

Naše práce je o plánování,...