Co je responzivní web a jak poznat, že funguje na mobilu
Responzivní web je jeden web, který se sám přizpůsobí obrazovce – telefonu, tabletu i velkému monitoru. Text je čitelný bez přibližování, tlačítka jdou trefit prstem a nic neutíká z obrazovky do strany. Dnes je to základní požadavek, ne příplatek.
Aktualizováno
Jak responzivita funguje
Prohlížeč webu sdělí, jak široká je obrazovka, a web podle toho upraví rozvržení: sloupce se na úzkém displeji poskládají pod sebe, menu se schová pod ikonu, obrázky se zmenší a písmo zůstane dost velké. Obsah je přitom stejný – nejde o druhou, ořezanou verzi webu.
Dobré weby se dnes navrhují „mobile first“: nejdřív pro telefon, kde je místa nejméně a musíte se rozhodnout, co je nejdůležitější, a teprve pak se rozvržení rozšiřuje pro větší obrazovky.
Proč na tom záleží
- Lidé hledají z telefonu. Zvlášť u místních služeb – cestou, na ulici, v čekárně. Kdo na mobilu nenajde telefon nebo adresu, zavolá konkurenci.
- Google hodnotí primárně mobilní verzi. Problémy na telefonu se tak propisují do pozic ve vyhledávání (víc v hesle SEO).
- Důvěra. Rozsypaný web na mobilu působí opuštěně, i když firma funguje skvěle.
Otestujte si web sami za pět minut
- Otevřete web na svém telefonu i na telefonu někoho jiného.
- Přečtěte úvodní text bez přibližování.
- Klepněte na telefonní číslo – mělo by se nabídnout volání.
- Otevřete menu a přejděte na ceník nebo služby.
- Vyplňte a odešlete formulář. Zobrazuje se správná klávesnice (číselná pro telefon, s @ pro e-mail)?
- Otočte telefon na šířku a zkuste to znovu.
Na počítači pomohou vývojářské nástroje prohlížeče (v Chromu klávesa F12 a ikona telefonu), kde přepnete na různé velikosti displeje. Skutečný telefon ale neodhalí jen rozvržení – ukáže i to, jak rychle se web načítá na mobilních datech. Měření rychlosti popisuje průvodce rychlost webu.
Nejčastější chyby mobilních verzí
| Chyba | Co s tím |
|---|---|
| Malá tlačítka a odkazy těsně u sebe | Dostatečně velké cíle pro prst a mezery mezi nimi |
| Široké tabulky a ceníky utíkají z obrazovky | Tabulku převést na seznam, nebo ji nechat posouvat jen uvnitř bloku |
| Vyskakovací okno přes celou obrazovku | Okno, které jde snadno zavřít, nebo pruh u okraje |
| Telefon jako obyčejný text | Odkaz typu tel:, aby šlo volat jedním klepnutím |
| Obrázky v plné velikosti z fotoaparátu | Zmenšené a komprimované verze pro různé šířky |
| Text v obrázcích (letáky, ceníky jako JPG) | Text jako text – je čitelný, přizpůsobí se a najde ho vyhledávač |
Řada z těchto chyb je zároveň problémem použitelnosti a přístupnosti – souvislosti rozebírá heslo UX a UI. Pokud jich váš web nasbíral víc, možná je čas na nový – signály shrnuje článek kdy udělat redesign.
U nás samozřejmost
Každý web, který stavíme, je responzivní – pro mobil, tablet i počítač – už od nejmenší varianty, vizitkového webu za 15 000 Kč. Návrh ukazujeme nejdřív na telefonu, protože tam se rozhoduje, jestli návštěvník zavolá. Celý ceník je na úvodní stránce.
Časté otázky
Je responzivní web totéž co mobilní verze?
Ne úplně. Dříve se dělaly samostatné mobilní weby, často na adrese m.vasefirma.cz. Responzivní web je jeden web, jehož rozvržení se přizpůsobí šířce obrazovky. Obsah i adresa jsou stejné pro všechna zařízení.
Jak zjistím, jestli je můj web responzivní?
Nejjednodušší je otevřít ho v telefonu. Pokud musíte text přibližovat prsty nebo posouvat stránku do strany, responzivní není nebo je rozbitý. Na počítači můžete v prohlížeči zúžit okno nebo otevřít vývojářské nástroje a přepnout na zobrazení mobilu.
Dá se starý web udělat responzivním?
Někdy úpravou stylů, často ale ne rozumně. Pokud byl web navržený pevně pro širokou obrazovku, bývá jednodušší a levnější nový návrh než záplatování každé stránky zvlášť.
Proč na mobilní verzi tolik záleží kvůli Googlu?
Google při hodnocení webů vychází primárně z jejich mobilní verze. Co na mobilu chybí nebo nefunguje, s tím při řazení výsledků počítá, i když na počítači web vypadá dobře.