Responzivní web: proč je dnes nutnost a jak ho poznat

Kdy jste naposledy hledali restauraci, kadeřnictví nebo řemeslníka na počítači? Většina lidí to dnes dělá na telefonu – cestou, na gauči, v pauze na oběd. Web, který se na mobilu nedá pohodlně číst a ovládat, tak zklame většinu svých návštěvníků. Responzivní web je proto dnes stejná samozřejmost jako telefonní číslo na vizitce. V článku vysvětlíme, co responzivní design znamená, proč je nutnost, jak si web otestovat a jakých chyb se vyvarovat.

Co je responzivní web

Responzivní web je jeden web, který se sám přizpůsobí obrazovce, na které ho někdo otevře. Na velkém monitoru je obsah ve více sloupcích vedle sebe, na mobilu pod sebou. Písmo zůstane čitelné, tlačítka dost velká pro prst a nic se nemusí zvětšovat ani posouvat do strany.

Není to totéž jako web, který se na mobilu „nějak zobrazí“. Starší weby se na telefonu často jen zmenší: vidíte celou stránku jako na počítači, ale tak malou, že ji musíte roztahovat prsty a posouvat sem a tam. Technicky se načte, prakticky se nedá používat.

Příklad: restaurace, která na mobilu nefunguje

Představte si běžnou situaci. Je poledne, jste ve městě a hledáte, kde se najíst. V mapě najdete restauraci s dobrým hodnocením a otevřete její web:

Písmo je malinké. Celá stránka je zmenšená na šířku telefonu a text má velikost drobného písma na smlouvě.
Jídelní lístek je obrázek nebo PDF. Naskenovaný lístek nebo fotka tabule. Musíte ho roztáhnout, posouvat a hledat, kde jsou ceny. PDF se navíc dlouho stahuje a otevírá v jiné aplikaci.
Menu webu nejde ovládat. Položky jsou tak blízko u sebe, že místo „Kontakt“ klepnete na „Galerie“.
Telefon nejde vytočit. Číslo je jen text, nebo dokonce součást obrázku. Musíte si ho opsat.

Co uděláte? Většina lidí neudělá nic z toho – během pár vteřin se vrátí do mapy a vybere jinou restauraci. Ne proto, že by jídlo bylo horší, ale proto, že se k informacím nedostali.

A pro Google je takový web stejně nepohodlný jako pro hosta. Text na obrázku vyhledávač nepřečte, takže jídelní lístek pro něj prakticky neexistuje, a stránku, která se na mobilu špatně používá, nemá důvod doporučovat lidem, kteří hledají na mobilu. Jak udělat jídelní nabídku, kterou si host přečte na telefonu a najde ji i Google, popisujeme v článku Denní menu na webu.

Proč je responzivní design nutnost

Lidé přicházejí z mobilu. U restaurací, služeb a místních firem tvoří mobilní návštěvy obvykle většinu. Kolik přesně u vás, ukáže měření návštěvnosti webu.
Google hodnotí mobilní verzi. Google při indexování a hodnocení stránek vychází z toho, jak web vypadá a funguje na mobilu. Co na mobilu chybí nebo nefunguje, jako by pro něj nebylo.
Na mobilu se rozhoduje. Lidé přicházejí z mapy, z odkazu ve WhatsAppu, z QR kódu na dveřích nebo z profilu na Googlu. Všechny tyhle cesty vedou na telefon. Viz také článek Google firemní profil a Firmy.cz.
Na mobilu se i objednává. Rezervace stolu, objednání termínu, vyplnění poptávky – když formulář na telefonu nejde vyplnit, zákazník ho nevyplní nikde.

Neresponzivní web a reklama: placené kliky, které odcházejí

Nejdráž vyjde nemobilní web těm, kdo platí za reklamu. U Google Ads i u reklamy na Facebooku a Instagramu platíte za každé kliknutí – u místních služeb klidně dvacet korun i víc. Člověk na mobilu klikne na reklamu, otevře se mu zmenšená stránka s nečitelným textem a on se během pár vteřin vrátí zpátky. Kliknutí jste zaplatili, zákazníka nemáte.

Počítejme: sto kliknutí po dvaceti korunách jsou dva tisíce. Pokud polovina lidí z mobilu odejde hned po otevření stránky, tisíc korun jste utratili za nic. A to každý měsíc, dokud web neopravíte. Reklama přitom „funguje“ – lidé na ni klikají –, takže se problém v přehledech snadno přehlédne.

Google navíc u reklam hodnotí i stránku, na kterou reklama vede, včetně toho, jak se používá na mobilu. Horší hodnocení vstupní stránky snižuje skóre kvality reklamy, a to může znamenat vyšší cenu za kliknutí a horší pozici reklamy. Nemobilní web vás tak u reklamy stojí dvakrát: dražšími kliky a lidmi, kteří po kliknutí odejdou.

Než pustíte peníze do reklamy, otevřete na mobilu přesně tu stránku, na kterou reklama vede, a projděte ji jako zákazník – až do zavolání, rezervace nebo odeslání poptávky. Jestli to nejde pohodlně, opravte nejdřív web, pak teprve spouštějte reklamu.

Jak si web otestovat za pět minut

Nejlepší test je ten nejjednodušší – vezměte do ruky vlastní telefon:

Otevřete úvodní stránku. Přečtete text bez zvětšování? Je hned vidět, co nabízíte a jak vás kontaktovat?
Projděte menu. Otevře se pohodlně? Trefíte se do položek prstem?
Klepněte na telefonní číslo. Nabídne se rovnou vytočení hovoru?
Otevřete ceník nebo jídelní lístek. Je to text, nebo obrázek či PDF? Nemusíte posouvat do strany?
Vyplňte formulář. Kontakt, poptávku nebo rezervaci – až do odeslání.
Otočte telefon na šířku. Nerozpadne se stránka?

Na počítači si web na různých velikostech obrazovky prohlédnete v Chrome: stiskněte F12 (na Macu Cmd+Option+I) a vlevo nahoře v nástrojích klikněte na ikonu telefonu a tabletu. Nahoře pak vyberete konkrétní model telefonu. Ve stejných nástrojích najdete i Lighthouse, kterým změříte rychlost webu – postup popisujeme v článku Rychlost webu: jak ji změřit a proč na ní záleží.

Tip: Požádejte o test i někoho, kdo váš web nezná – třeba kamaráda nebo rodiče. Vy víte, kde co hledat. Nový návštěvník ne, a proto rychleji narazí na to, co nefunguje.

Nejčastější chyby na mobilu

Malé písmo – text, který je nutné zvětšovat prsty.
Tlačítka a odkazy těsně u sebe – na mobilu se klepe prstem, ne myší.
Posouvání do strany – stránka nebo její část je širší než obrazovka.
Obsah jako obrázek nebo PDF – jídelní lístek, ceník, rozvrh. Na mobilu se špatně čte a Google ho nepřečte vůbec.
Široké tabulky – ceník s pěti sloupci se na telefon nevejde, pokud s tím web nepočítá.
Vyskakovací okna přes celou obrazovku – na mobilu je často nejde ani zavřít.
Telefon a adresa jako obyčejný text – zákazník si musí číslo opsat a adresu ručně zadat do navigace.
Formuláře, které nejdou vyplnit – malá pole, nepřehledné výběry, tlačítko Odeslat mimo obrazovku.

Responzivní musí být i obsah, nejen šablona

Častá past: web je při předání responzivní, ale po roce už ne. Majitel do článku vloží širokou tabulku, nahraje jídelní lístek jako fotku nebo vloží formulář z jiné služby, který se na mobil nepřizpůsobí. Šablona je v pořádku, obsah ji rozbije.

Proto záleží i na tom, jak se obsah do webu vkládá. Pokud ho zadáváte do připravených míst – jídlo s cenou, fotka do galerie, text upozornění –, web ho zobrazí správně na každém zařízení. Více o tom v článku Správa obsahu webu, kterou zvládne každý.

Responzivní weby od Puretech

Weby navrhujeme a programujeme tak, aby fungovaly na telefonu stejně dobře jako na velkém monitoru. Obsah, který spravujete v Puretech CMS – denní menu, jídelní lístek, fotogalerie, články, upozornění –, se zobrazí jako text a obrázky přizpůsobené obrazovce, ne jako PDF ani fotka tabule.

Responzivní je i náš rezervační formulář. Vložíte ho na jakýkoli web a sám se přizpůsobí šířce stránky i telefonu, takže si host zarezervuje stůl nebo termín pohodlně z mobilu. Víc v článku Online rezervace pro restauraci. Jak to celé vypadá v praxi, si prohlédněte na telefonu na ukázkovém webu restaurace Tornado House.

Časté otázky

Není lepší mít zvlášť mobilní verzi webu nebo aplikaci?

Pro většinu firem ne. Dvě verze webu znamenají dvojí práci a riziko, že se obsah rozejde. Aplikaci si kvůli jedné restauraci nebo kadeřnictví nikdo stahovat nebude. Jeden responzivní web je jednodušší pro vás i pro zákazníky.

Dá se starý web předělat na responzivní?

Někdy ano, často je to ale skoro stejná práce jako nový web – responzivita se musí promítnout do celé stavby stránek. Porovnejte cenu úpravy s cenou nového webu, viz Kolik stojí web pro malou firmu.

Stačí, když se web na mobilu zobrazí?

Ne. Rozhoduje, jestli se dá pohodlně číst a ovládat: text bez zvětšování, tlačítka pro prst, klikatelný telefon, formulář, který jde vyplnit.

Jak poznám, kolik návštěvníků mám z mobilu?

Ukáže to měření návštěvnosti webu, například Google Analytics. Pokud ho nemáte, počítejte s tím, že u místní firmy je to většina.

Shrnutí

Responzivní web je dnes nutnost, ne bonus. Lidé hledají a rozhodují se na mobilu a web, který se na telefonu nedá číst, opustí během pár vteřin – a pokud za jejich kliknutí platíte v reklamě, odcházejí i vaše peníze. Otestujte si svůj web na vlastním telefonu, dejte pozor na obsah jako obrázky a PDF a hlídejte, aby responzivní zůstal i obsah, který do webu přidáváte.

Chci web, který funguje na mobilu→