Více než 70 % lidí v Česku prohlíží internet na mobilu. Pokud váš web na telefonu nefunguje správně, přicházíte o většinu návštěvníků. Responzivní design zajistí, že se web přizpůsobí jakékoli obrazovce – od malého telefonu po velký monitor.
Co je responzivní design a proč to potřebujete
Responzivní design (anglicky responsive design) je způsob tvorby webu, při kterém se rozložení stránky automaticky přizpůsobuje velikosti obrazovky. Na velkém monitoru uvidíte obsah ve třech sloupcích, na tabletu ve dvou a na telefonu v jednom – vše čitelné a snadno ovladatelné.
Proč je to důležité? Protože Google od roku 2021 hodnotí weby primárně podle jejich mobilní verze (tzv. mobile-first indexing). Web, který na mobilu nefunguje, se ve vyhledávání propadne. Navíc návštěvníci, kteří musí na telefonu přibližovat a posouvat stránku do stran, prostě odejdou ke konkurenci.
Co budete potřebovat
- Mobilní telefon a tablet – na testování, jak web vypadá na různých zařízeních
- Nástroj pro testování – například vestavěné nástroje prohlížeče Chrome (klávesa F12, ikona telefonu)
- Google Mobile-Friendly Test – bezplatný online nástroj od Googlu
- Spolupráci s vývojářem – responzivní design je technická záležitost, ale vy rozhodujete o prioritách obsahu
Postup krok za krokem
1. Pochopte princip „mobile-first“
Moderní weby se navrhují nejprve pro mobil a teprve potom pro větší obrazovky. Důvod je jednoduchý: na malé obrazovce musíte zobrazit jen to nejdůležitější. Když web funguje na mobilu, rozšířit ho pro počítač je snadné. Naopak to bývá problém.
2. Určete priority obsahu
Na mobilu se obsah zobrazuje pod sebou v jednom sloupci. Rozhodněte, co je nejdůležitější a co uvidí návštěvník jako první. Telefonní číslo, hlavní nabídka a výzva k akci (například tlačítko „Nezávazná poptávka“) by měly být snadno dostupné.
3. Zjednodušte navigaci
Na mobilu se hlavní menu obvykle skryje pod ikonu tří čárek (tzv. hamburger menu). Ověřte, že je menu přehledné, položky jsou dostatečně velké pro ovládání prstem a návštěvník se vždy snadno dostane na hlavní stránku.
4. Optimalizujte obrázky
Velké obrázky na mobilu zbytečně zpomalují načítání. Web by měl automaticky načítat menší verze obrázků pro menší obrazovky. Tomu se říká responzivní obrázky a vývojář to zajistí pomocí speciálních HTML značek.
5. Testujte na skutečných zařízeních
Simulace v prohlížeči je dobrý začátek, ale nic nenahradí test na skutečném telefonu. Projděte si celý web na svém mobilu – klikněte na každý odkaz, vyplňte formulář, přečtěte si texty. Co nefunguje nebo je nepohodlné, zapište a předejte vývojáři.
6. Ověřte rychlost načítání
Otevřete nástroj PageSpeed Insights (pagespeed.web.dev) a zadejte adresu svého webu. Nástroj vám ukáže, jak rychle se web načítá na mobilu i na počítači, a navrhne konkrétní vylepšení.
Nejčastější chyby začátečníků
- Ignorování mobilní verze – „Většina našich zákazníků používá počítač“ už dávno neplatí. Ověřte si to v Google Analytics.
- Příliš malý text – na mobilu by základní text měl mít alespoň 16 px. Menší písmo nutí lidi přibližovat.
- Příliš malá tlačítka – tlačítka a odkazy musí být dostatečně velké, aby se na ně dalo snadno kliknout prstem (minimálně 44 × 44 pixelů).
- Pop-up okna zakrývající obsah – vyskakovací okna, která na mobilu zakryjí celou obrazovku, návštěvníky odradí a Google je penalizuje.
- Neoptimalizované formuláře – formulářová pole by měla být dostatečně velká a klávesnice na telefonu by se měla přepínat podle typu pole (čísla, e-mail).
Praktické tipy
- Požádejte vývojáře, aby vám web ukázal na různých zařízeních ještě před spuštěním.
- Používejte nástroj BrowserStack nebo Responsinator pro rychlý náhled na desítkách zařízení.
- Sledujte v Google Analytics, jaká zařízení vaši návštěvníci používají, a podle toho upravujte priority.
- Responzivní design není jednorázová věc – nová zařízení a rozlišení přibývají, web je třeba průběžně testovat.
- Při pořizování fotek na web myslete na to, že se na mobilu zobrazí menší – vyhněte se obrázkům s drobným textem.
Shrnutí
Responzivní design zajistí, že váš web bude fungovat na jakémkoli zařízení – od telefonu přes tablet po velký monitor. Je to dnes naprostá nutnost, jak kvůli pohodlí návštěvníků, tak kvůli pozicím ve vyhledávačích. Při tvorbě webu trvejte na mobile-first přístupu, testujte na reálných zařízeních a průběžně sledujte, jak se web chová na různých obrazovkách.