Blog

Návštěvník si může váš web otevřít na telefonu, tabletu i velkém monitoru. Pokaždé potřebuje pohodlně přečíst obsah, najít požadované informace a snadno vás kontaktovat. Responzivní design přizpůsobuje rozložení stránky dostupné šířce obrazovky, aby byl web přehledný a dobře ovladatelný na různých zařízeních.

Jak responzivní web funguje

Na počítači se mohou služby zobrazovat ve třech sloupcích vedle sebe. Na telefonu se stejné bloky seřadí pod sebe, obrázky přizpůsobí svou velikost a navigace se změní na rozbalovací menu. Obsah zůstává dostupný, ale jeho uspořádání odpovídá prostoru na obrazovce.

Základem jsou pružné rozložení stránky, přizpůsobivé obrázky a pravidla CSS označovaná jako media queries. Ta umožňují upravit vzhled například podle šířky okna prohlížeče. Web tak nemusí mít samostatnou mobilní verzi na jiné adrese.

Co má návštěvník na mobilu zvládnout

Představte si zákazníka, který na telefonu hledá vaši službu. Chce zjistit, co nabízíte, prohlédnout si ukázky práce a zavolat nebo odeslat poptávku. Pokud musí zvětšovat drobný text nebo se opakovaně trefovat do malého tlačítka, zbytečně mu cestu ke kontaktu komplikujete.

Při návrhu mobilního zobrazení proto záleží zejména na těchto věcech:

• Čitelný text – dostatečně velké písmo a přehledné odstavce bez nutnosti přibližování.
• Pohodlné ovládání – tlačítka a odkazy, na které lze snadno klepnout prstem.
• Srozumitelná navigace – menu, ve kterém se návštěvník rychle zorientuje.
• Použitelné formuláře – pole, popisky a odesílací tlačítko, které se vejdou na obrazovku.
• Dostupné kontakty – telefonní číslo s možností zavolat klepnutím a snadno dohledatelný e-mail.

Přizpůsobení obrazovce je jen část práce

Samotné přeskládání prvků ještě nezaručí, že se web bude dobře používat. Důležité je také načítání obrázků, srozumitelnost obsahu a funkčnost jednotlivých prvků. I stránka, která se správně vejde na displej, může návštěvníka zdržovat příliš velkými fotografiemi nebo složitým formulářem.

Pozornost si zaslouží také plovoucí tlačítka, oznámení a další překryvné prvky. Na malé obrazovce nesmějí zakrývat důležitý obsah nebo bránit odeslání zprávy.

Jak si svůj web jednoduše zkontrolovat

Otevřete web na telefonu a projděte stejnou cestu jako nový zákazník. Vyhledejte konkrétní službu, otevřete reference a zkuste vyplnit kontaktní formulář. Sledujte, zda:

• text přečtete bez přibližování,
• obsah neujíždí mimo obrazovku do stran,
• menu i jeho podnabídky fungují dotykem,
• obrázky a tabulky nepřekrývají okolní text,
• formulář zůstává použitelný i po otevření klávesnice,
• po odeslání zprávy dostanete jasné potvrzení.

Změna velikosti okna na počítači pomůže odhalit část problémů. Kontrola na skutečném telefonu navíc ukáže, jak se web ovládá dotykem a jak se chová při psaní do formuláře.

Web, který se přizpůsobí vašim zákazníkům

U firemního webu má responzivní design praktický úkol: umožnit návštěvníkovi pohodlně najít informace a udělat další krok. Ať už jde o telefonát, prohlédnutí nabídky nebo odeslání poptávky.

Při tvorbě webových stránek proto řešíme zobrazení na počítači i mobilu společně s obsahem a ovládáním. Potřebujete nový web nebo úpravu stávajícího? Napište nám a probereme, co má váš web zvládnout.