Otevřeli jste svůj web na telefonu a našli něco, co s tím, co jste vytvořili, nemá nic společného? Web rozbitý na mobilu patří mezi nejčastější stížnosti majitelů značek, kteří web navrhovali na počítači a nikdy nezkontrolovali, jak funguje na menší obrazovce. Tento článek vysvětluje, co problém způsobuje, jak zjistit, která příčina se týká vašeho webu, a jak ji opravit.
Z mobilních zařízení dnes pochází více než polovina veškeré návštěvnosti webů. Tento podíl roste už několik let a dál stoupá. Pokud návštěvník přijde na váš web z telefonu a narazí na text příliš malý na čtení, obrázky přetékající přes okraj obrazovky nebo navigační nabídku, která na klepnutí nereaguje, je pravděpodobnost, že zůstane, malá. Vysoká míra okamžitých odchodů na mobilu bývá prvním měřitelným znamením, že je něco rozbité, a mnoho majitelů značek tyto dvě věci propojí, až když se podívají do analytiky.
Frustrující je, že problémy se zobrazením na mobilu nemusí být patrné z pohledu na počítači, ze kterého web spravujete. Objeví se často až tehdy, když se podíváte na skutečnou obrazovku telefonu, takže mohou zůstat týdny nebo měsíce nepovšimnuty, zatímco návštěvníci tiše odcházejí.
Proč web vypadá na mobilu rozbitě?
Web rozbitý na mobilu nemá jedinou příčinu. Problém je obvykle jedním z pěti základních, případně jejich kombinací. Která příčina se týká vašeho webu, určuje, jaké řešení se použije.
Web nebyl postaven s responzivním designem
Responzivní web upravuje své rozvržení automaticky podle šířky obrazovky, na které se zobrazuje. Na počítači se obsah může zobrazit ve třech sloupcích. Na tabletu ve dvou. Na telefonu v jediném posouvatelném sloupci. Tato úprava probíhá pomocí pravidel CSS zvaných media queries, která prohlížeči říkají, jak přeskupit obsah při různých velikostech obrazovky.
Pokud byl web postaven bez responzivního designu, zobrazuje stejné pevné rozvržení bez ohledu na velikost obrazovky. Web navržený pro monitor širý 1 440 pixelů se pokusí vykreslit v této šířce na obrazovce telefonu, která má kolem 390 pixelů. Výsledkem je zmenšená, oddálená stránka, na které je text nečitelný a tlačítka příliš malá na klepnutí. Obsah tam technicky je, ale nedá se použít.
Tímto problémem často trpí starší weby, zejména ty postavené v editorech typu drag-and-drop, které na mobilní výstup nekladly důraz. Do této kategorie mohou spadat i weby psané na míru bez myšlení v duchu mobile-first.
Obrázky nejsou přizpůsobené mobilním obrazovkám
Obrázek nahraný v šířce 3 000 pixelů a zobrazený bez omezení se pokusí vykreslit v plné velikosti bez ohledu na to, kde se prohlíží. Na počítači ho prohlížeč dokáže zmenšit, aby se vešel. Na mobilním zařízení bez použitých pravidel pro responzivní velikost může obrázek přesáhnout okraj obrazovky a způsobit vodorovné posouvání nebo zhroucení rozvržení.
I když obrázky nepřetékají, velké neoptimalizované obrázky ovlivňují to, proč na rychlosti webu záleží, zvlášť na mobilu. Pomalu se načítající obrázek, který brzdí zobrazení zbytku stránky, je formou rozbitého chování, i když rozvržení technicky drží pohromadě. Návštěvníci na mobilním připojení jsou na to obzvlášť citliví.
Prvky s pevnou šířkou přetékají přes obrazovku
Prvky s pevnou šířkou jsou kontejnery, bloky div, tabulky nebo jiné prvky HTML, kterým je ve stylech přidělena konkrétní šířka v pixelech místo procenta nebo pružné jednotky. Kontejner nastavený na šířku 900 pixelů se na počítači zobrazí správně, ale na telefonu přeteče přes okraj obrazovky a uživatel musí posouvat vodorovně, aby viděl celý obsah. Vodorovné posouvání na webu je téměř vždy znamením problému s přetékáním prvku s pevnou šířkou.
Častým viníkem jsou tabulky. Ceník nebo srovnávací tabulka vytvořená v HTML s pevnými sloupci se na mobilu může dramaticky zhroutit, takže se text skládá způsobem, který se nedá přečíst. Totéž platí pro postranní panely, vložené widgety a jakýkoli prvek zapsaný s konkrétní šířkou v pixelech, která přesahuje dostupné místo na obrazovce telefonu.
Písmo je příliš malé a bez přiblížení se nedá číst
Text, který se dobře čte při velikosti 14 pixelů na obrazovce počítače, může být na telefonu nečitelný, zejména na displejích s vysokou hustotou, kde je fyzický počet pixelů mnohem vyšší než logická velikost displeje. Pokud musí návštěvník váš obsah číst přibližováním prsty, je zážitek rozbitý, i když je rozvržení technicky v pořádku.
Doporučená minimální velikost základního písma pro mobil je 16 pixelů. Cokoli menšího riskuje špatnou čitelnost na značné části zařízení. Menší text také vyhledávačům signalizuje, že stránka není pro mobil optimalizovaná, což může ovlivnit, jak je web hodnocen a indexován.
Navigace se špatně sbalí nebo nefunguje na dotyk
Navigační nabídky pro počítače bývají postavené jako vodorovné lišty s rozbalovacími položkami, které se zobrazí při najetí myší. Na dotykové obrazovce najetí neexistuje. Nabídka, která závisí na najetí, na telefonu prostě nefunguje. Návštěvníci klepnou na položku a nic se nestane, nebo se dostanou na špatnou stránku, protože stav najetí, který měl odhalit podnabídku, se nikdy nespustí.
I navigace, která na dotyk technicky funguje, může být v praxi rozbitá, pokud jsou cíle klepnutí příliš malé nebo příliš blízko u sebe. Obecné doporučení pro mobilní dotykové cíle je minimálně 44 × 44 pixelů. Menší cíle vedou k nepovedeným klepnutím, nechtěné navigaci a frustrovaným návštěvníkům, kterým připadá snazší odejít než najít to, kvůli čemu přišli.
Jak zkontrolovat, zda je váš web vhodný pro mobily
Nejrychlejší kontrolou je otevřít web na skutečném telefonu. Použijte vlastní zařízení a pokud možno i jinou značku a model. Co vypadá dobře na jednom telefonu, se může na jiném zobrazit odlišně kvůli rozdílům v rozlišení obrazovky, vykreslovacím jádru prohlížeče a verzi operačního systému.
Vývojářské nástroje prohlížeče nabízejí vestavěnou simulaci mobilu. Ve většině prohlížečů na počítači se klávesou F12 otevře panel pro vývojáře. Ikona panelu zařízení umožňuje simulovat různé velikosti obrazovek a typy zařízení. Hodí se to na rychlé kontroly, ale není to úplná náhrada testování na skutečném zařízení, protože simulovaná prostředí neodrážejí skutečné chování dotyku, vykreslování písma ani podmínky sítě.
Test vhodnosti pro mobily od Googlu, dostupný přes Google Search Console, vyhodnotí vaše stránky a upozorní na konkrétní problémy s použitelností na mobilu. Odhalí například text příliš malý na čtení, klikací prvky příliš blízko u sebe a obsah, který se nevejde do zobrazované oblasti. Zpráva poskytuje podrobnosti na úrovni stránek, takže poznáte, které konkrétní stránky neprocházejí a které ano.
Kontrola dat z analytiky přidává k technickému obrazu behaviorální vrstvu. Pokud je míra okamžitých odchodů na mobilu výrazně vyšší než na počítači, tento rozdíl často ukazuje na problém se zobrazením nebo použitelností na telefonech. Článek o vysoké míře okamžitých odchodů na mobilu vysvětluje, jak tyto signály číst a proč návštěvníci na menších obrazovkách okamžitě odcházejí.
Jak opravit web, který vypadá na mobilu rozbitě
Správné řešení závisí na tom, která příčina problém způsobuje. Každé z pěti výše uvedených příčin odpovídá řešení.
Přejděte na responzivní rozvržení
Pokud web není responzivní vůbec, řešením je buď postavit ho znovu na responzivním frameworku, nebo přejít na platformu, která ve výchozím stavu generuje responzivní HTML. Přidat responzivní chování do neresponzivního webu dodatečně je možné, ale často pracnější než začít od responzivního základu. Pokud je web na moderní platformě podporující responzivní šablony, bývá rychlejší cestou přechod na responzivní šablonu.
Změňte velikost obrázků a omezte je
Obrázky by se měly nahrávat ve skutečné zobrazované velikosti, ne v původním exportním rozlišení. U většiny obrázků na webu stačí maximální šířka 1 200 pixelů, aby vyhověla displejům s vysokou hustotou a soubory zůstaly rozumně velké. Pravidla CSS nastavující max-width: 100% u obrázků zajistí, že nikdy nepřetečou svůj kontejner bez ohledu na šířku obrazovky. Toto jediné pravidlo vyřeší většinu problémů s přetékáním obrázků, aniž by bylo nutné měnit velikost každého obrázku zvlášť.
Nahraďte pevné šířky pružnými jednotkami
Pevné šířky v pixelech u kontejnerů, tabulek a dalších prvků rozvržení by se měly nahradit šířkami v procentech nebo pružnými jednotkami CSS, jako jsou em, rem nebo vw. Kontejner nastavený na width: 90% místo width: 900px se správně přizpůsobí každé velikosti obrazovky. U tabulek zabrání rozbití celkového rozvržení na úzkých obrazovkách pravidlo CSS, které tabulky učiní uvnitř jejich kontejneru vodorovně posouvatelné.
Zvětšete písmo pro mobil
Základní text na mobilu by měl mít alespoň 16 pixelů. Pokud stylopis pro počítač definuje menší velikost, může ji přepsat media query zaměřená na šířky mobilních obrazovek. Měli byste zkontrolovat i velikosti nadpisů, protože mnoho stylů nadpisů, které na počítači vypadají přiměřeně, je na telefonu příliš velkých a odsunou další obsah pod hranu obrazovky dřív, než návštěvník cokoli přečte.
Nahraďte navigaci závislou na najetí mobilní nabídkou
Standardním řešením mobilní navigace je rozbalovací nabídka, často nazývaná hamburger menu, spouštěná klepnutím, ne najetím. Většina responzivních frameworků a tvůrců webů tento vzor obsahuje ve výchozím stavu. Pokud navigace současného webu mobilní ekvivalent nemá, jeho přidání vyžaduje buď úpravu stylů a JavaScriptu, nebo přechod na šablonu, která mobilní navigaci obsahuje jako vestavěnou funkci. Měli byste také zkontrolovat velikost cílů klepnutí, aby všechny položky nabídky splňovaly minimální doporučení 44 pixelů.
Pokud má váš web vedle problémů se zobrazením i nefunkční stránky, bývá snazší nejdřív opravit vizuální rozvržení, protože pak se při auditu na jednotlivé stránky lépe dostanete a otestujete je.
Jak WEMASY řeší mobily
Tvůrce webů WEMASY generuje responzivní HTML na každé stránce bez nutnosti nastavování. Rozvržení se na mobilních velikostech obrazovky automaticky přeskupí, obrázky jsou omezené uvnitř svých kontejnerů a navigace se na telefonech a tabletech přepne na nabídku vhodnou pro dotyk. Velikosti písma, cíle klepnutí a rozestupy jsou nastavené v designovém systému platformy tak, aby splňovaly standardy použitelnosti na mobilu, takže značky, které začínají na WEMASY, mají web připravený pro mobily od začátku, a nemusí ho dodatečně upravovat.
Co všechno je v ceně, zjistíte u tvůrce webů WEMASY, nebo si prohlédněte dostupné tarify v ceníku.
Často kladené otázky
Proč můj web vypadá na počítači dobře, ale na mobilu rozbitě?
Obvykle se to stává proto, že web byl postaven nebo navržen především pro zobrazení na počítači, bez responzivních pravidel CSS, která rozvržení přizpůsobí menším obrazovkám. Prohlížeč na počítači má dost šířky na to, aby pevné rozvržení zobrazil tak, jak bylo zamýšleno. Obrazovka telefonu ne, takže prvky přetékají, překrývají se nebo se zmenší tak, že jsou nečitelné. Nejrychleji zjistíte, co mobilní návštěvníci vidí, když web zkontrolujete v režimu simulace mobilu v prohlížeči nebo na skutečném zařízení. S tvůrcem webů WEMASY to můžete nastavit přímo na svém webu.
Ovlivňuje rozbité mobilní rozvržení moje pozice v Googlu?
Ano. Google používá mobilní indexaci (mobile-first indexing), což znamená, že pro hodnocení pozic Google primárně posuzuje mobilní verzi stránky. Web s problémy se zobrazením na mobilu, malým textem nebo obsahem přetékajícím mimo zobrazenou oblast dostane nižší skóre použitelnosti, což se promítne do celkového výkonu ve vyhledávání. Oprava mobilních problémů je zlepšením uživatelského zážitku i přínosem pro SEO.
Co způsobuje vodorovné posouvání na mobilním webu?
Vodorovné posouvání na mobilu téměř vždy ukazuje na prvek s pevnou šířkou v pixelech, která přesahuje šířku obrazovky telefonu. Častými viníky jsou tabulky, postranní panely, vložený obsah, obrázky bez omezení šířky a kontejnery nastavené na konkrétní šířku v pixelech místo procenta. Problém obvykle vyřeší, když v nástrojích pro vývojáře v prohlížeči najdete přetékající prvek a pevnou šířku nahradíte procentem nebo přidáte ovládání přetékání u jeho nadřazeného kontejneru.
Jak otestuji, zda je můj web vhodný pro mobily?
Otevřete web na skutečném telefonu a projděte všechny klíčové stránky. Potom ho otevřete ve vývojářských nástrojích prohlížeče na počítači a v režimu simulace zařízení si ho prohlédněte při několika šířkách obrazovky. Pro strukturovaný audit pusťte stránky přes přehled použitelnosti na mobilu v Google Search Console, který upozorní na konkrétní problémy, například příliš malý text, klikací prvky příliš blízko u sebe a potíže s nastavením zobrazované oblasti. Oba přístupy dohromady poskytnou nejúplnější obraz.
Dá se rozbitý mobilní web opravit bez přestavby celého webu?
Záleží na tom, jak byl web původně postaven. Pokud web běží na platformě podporující responzivní šablony, je přechod na responzivní šablonu často nejrychlejším řešením a nevyžaduje, abyste obsah budovali znovu od nuly. Pokud je web napsaný na míru s neresponzivním rozvržením, mohou konkrétní problémy vyřešit cílené úpravy CSS pomocí media queries bez úplné přestavby. Pokud je ale rozvržení postavené na tabulkách nebo se všude silně spoléhá na pevné šířky, bývá úplná přestavba na responzivním základu obvykle efektivnější než záplatování jednotlivých problémů.
Proč návštěvníci na mobilu odcházejí z mého webu po pár sekundách?
Když návštěvníci přijdou na stránku s problémy se zobrazením, nečitelným textem, rozbitou navigací nebo pomalu se načítajícími obrázky, rychle odcházejí, protože stránka nesplňuje jejich základní očekávání použitelnosti. Mobilní návštěvníci mají menší toleranci k potížím než návštěvníci na počítači. Pokud je rozvržení rozbité nebo pomalé, vrátí se do výsledků vyhledávání a kliknou místo toho na výsledek konkurence. Článek o návštěvnících, kteří z vašeho webu odcházejí, pokrývá celou škálu důvodů, proč lidé odcházejí rychle, a jak zjistit, který se týká vašeho webu.