Mobilní web a responzivita: proč na ní záleží

Krátká odpověď: responzivní web se sám přizpůsobí obrazovce, takže je stejně dobře použitelný na telefonu jako na počítači. Je to nutnost: velká část návštěv přichází z mobilu a Google hodnotí hlavně mobilní verzi stránek. Web, který se na telefonu špatně čte, ztrácí zákazníky i pozice ve vyhledávání.

Co přesně responzivita znamená?

Responzivní web používá jeden obsah a jedno rozložení, které se mění podle šířky obrazovky:

• sloupce se na úzkém displeji poskládají pod sebe,
• menu se schová do tlačítka (tzv. hamburger),
• obrázky se zmenší a nepřetékají,
• písmo zůstane čitelné bez přibližování,
• tlačítka jsou dost velká na prst.

Proč na mobilu tolik záleží?

• Lidé hledají na telefonu. Hlavně u místních služeb: kavárna, kadeřník, servis, otevírací doba.
• Google hodnotí mobilní verzi. Takzvaný mobile-first indexing znamená, že pro hodnocení stránky se primárně používá její mobilní podoba.
• Reklamy na sociálních sítích přivádějí lidi převážně z mobilů.
• Trpělivost je menší. Na telefonu člověk rychle odejde, když něco nefunguje.

Co by měl mobilní web umět?

Jak web zkontrolovat sami?

1. Otevřete web na svém telefonu a projděte ho jako zákazník: najděte cenu, zavolejte, najděte adresu.
2. Zkuste i jiný telefon, ideálně s menší obrazovkou nebo jiným systémem.
3. V počítači zmenšete okno prohlížeče nebo použijte vývojářské nástroje prohlížeče (režim zařízení).
4. Otočte telefon na šířku a podívejte se, jestli se nic nerozbije.
5. Zkuste pomalejší připojení, třeba mobilní data mimo město.

Nejčastější problémy na mobilu

• Posouvání do strany – nějaký prvek je širší než displej (tabulka, obrázek, dlouhé slovo).
• Malé písmo – člověk musí přibližovat.
• Tlačítka moc blízko u sebe – klepne se na špatné.
• Obří obrázky – stránka se načítá dlouho. Viz Rychlost webu.
• Telefon jako obrázek – nedá se na něj klepnout ani zkopírovat.
• Cookie lišta přes půl obrazovky, která nejde zavřít.

Mobile first: navrhovat od mobilu

Přístup „mobile first“ znamená navrhnout web nejdřív pro malou obrazovku a teprve pak ho rozšířit pro počítač. Nutí to k jednoduchosti: na mobilu se vejde jen to podstatné, takže musíte rozhodnout, co je opravdu důležité. Ve výsledku bývá přehlednější i verze pro počítač.

Jak psát a skládat obsah pro malou obrazovku

• Nejdůležitější nahoru. Na mobilu člověk vidí jen kus stránky. Co děláte a jak vás kontaktovat, patří úplně nahoru.
• Krátké odstavce. Odstavec o pěti řádcích na počítači je na telefonu stěna textu.
• Mezititulky a seznamy pomáhají při rolování palcem najít, co člověk hledá.
• Tabulky střídmě. Široké tabulky se na mobilu špatně čtou. U ceníku často funguje lépe seznam „služba – cena“.
• Žádný důležitý text v obrázku. Na malém displeji se špatně čte a vyhledávače ho nepřečtou.

A co tablety a velké monitory?

Responzivita neznamená jen mobil. Stejně tak by měl web dobře vypadat na tabletu a na širokém monitoru:

• Tablet je mezi oběma světy. Často se zobrazí dva sloupce místo tří. Zkontrolujte, že se nic nepřekrývá.
• Velký monitor: text by neměl být roztažený přes celou šířku obrazovky. Řádky s více než zhruba 80 znaky se čtou špatně. Obsah se proto obvykle drží v rozumně širokém sloupci uprostřed.
• Obrázky ve vysokém rozlišení se hodí pro velké a ostré displeje, na mobilu ale stačí menší verze. Moderní weby posílají každému zařízení vhodnou velikost.

Kontrolní seznam

• Nemusím na mobilu posouvat do strany ani přibližovat text?
• Dá se na telefonní číslo klepnout a zavolat?
• Otevře se adresa v mapách?
• Je hlavní tlačítko vidět bez rolování?
• Jsou tlačítka dost velká a s mezerami?
• Načte se web rychle i na mobilních datech?
• Funguje formulář s mobilní klávesnicí?

Shrnutí

Responzivita dnes není bonus, ale základ. Pokud web na mobilu nefunguje, přicházíte o zákazníky i o pozice ve vyhledávání. Weby vytvořené ve Foxli jsou responzivní automaticky. V náhledu si můžete přepnout zobrazení na mobil a úpravy pro telefon zadat obyčejnou větou. Další krok je SEO pro začátečníky.