Responzivní design jednoduše: co musí web služeb ukázat na mobilu jako první

Responzivní design znamená, že web upraví své rozložení podle obrazovky, na které se zobrazí, takže stejná stránka funguje na mobilu, tabletu i notebooku. Pro kouče nebo konzultanta je podstatné jediné: když návštěvník otevře váš web v mobilu, pozná, co děláte, a dokáže se ozvat bez přibližování a hledání? Odpoví na to tři kontroly: tlačítko pro rezervaci, první obrazovka a formulář.

Co responzivní design znamená lidsky

Představte si stránku jako sadu bloků. Na široké obrazovce notebooku stojí bloky vedle sebe. Na úzké obrazovce mobilu se skládají pod sebe do jednoho sloupce a text i tlačítka mají velikost, kterou ovládne palec. Responzivní web to zvládne sám, z jedné verze stránky.

Dřívější řešení byl samostatný malý web pro mobily nebo desktopová stránka, která se prostě zmenšila. Zmenšené stránky mají drobné písmo a odkazy, na které nejde klepnout. Pokud jste někdy kvůli tomu web opustili, viděli jste v praxi web, který není responzivní.

Proč na mobilu záleží při rezervaci hovorů

Mnoho lidí uvidí váš web poprvé v mobilu: z odkazu ve zprávě, ze sociální sítě nebo z výsledků vyhledávání. Pokud je mobilní verze nepohodlná, odejdou a nic vám neřeknou. V e-mailu to neuvidíte, jen v prázdném kalendáři.

Proto FluoSite staví weby nejdřív pro mobil. Malou obrazovku navrhneme pořádně a pak necháme rozložení povyrůst pro větší displeje, místo abychom na konci mačkali desktopový návrh dolů.

Kontrola 1: tlačítko pro rezervaci

Otevřete svůj web na vlastním mobilu a zkuste najít způsob, jak si rezervovat hovor. Měli byste ho najít bez dlouhého posouvání a bez otevírání nabídky. Stránky navrhujeme tak, aby kontakt zabral dvě klepnutí, ne deset.

• Je tlačítko vidět na první obrazovce, nebo je hned po ruce?
• Je dost velké, aby se na něj dalo trefit palcem a nezasáhnout nic jiného?
• Říká popisek, co se stane, například „Rezervovat hovor zdarma“?
• Zůstává snadno k nalezení i při posouvání stránky dolů?

Kontrola 2: první obrazovka

První obrazovka je to, co se objeví před jakýmkoli posouváním. V mobilu je malá, takže každý prvek si musí své místo zasloužit. Návštěvník by měl během pár vteřin pochopit, komu pomáháte, co nabízíte a co má udělat dál.

• Jasný nadpis, který říká, komu a s čím pomáháte.
• Jedna krátká podpůrná věta, ne odstavec.
• Jeden zřejmý další krok.
• Žádný velký obrázek, který odsune všechna slova pod okraj obrazovky.

Kontrola 3: formulář

U formulářů lidé v mobilu vzdávají nejčastěji. Psaní na malé obrazovce je pomalé, proto se ptejte jen na to, co potřebujete k zahájení rozhovoru. Každé další pole je další důvod přestat.

Zkuste vyplnit vlastní formulář v mobilu a ovládat ho palcem. Ověřte, že klávesnice nezakrývá pole, do kterého píšete, že popisky jdou přečíst a že tlačítko pro odeslání je snadno dosažitelné. Pak zkontrolujte, že vám zpráva opravdu dorazí.

Jak otestovat vlastní web za pět minut

• Otevřete web na skutečném mobilu, ne jen ve zmenšeném okně prohlížeče.
• Najděte tlačítko pro rezervaci a klepněte na ně.
• Přečtěte si první obrazovku a zeptejte se známého, co děláte.
• Vyplňte formulář od začátku do konce.
• Pokud můžete, zopakujte to na druhém mobilu, velikosti se liší.

Pokud vám cokoli z toho přijde neohrabané, stojí za to to opravit dřív, než utratíte peníze za získání větší návštěvnosti. Víc lidí na stránce, která se špatně ovládá v mobilu, nepřinese víc hovorů.

FluoSite je webové studio v Amsterdamu. Vytváříme weby na míru a začínáme strukturou: schvalujete drátěný model dřív, než přidáme jedinou barvu, a stránky stavíme nejdřív pro mobil. Většina projektů stojí 2 000-4 000 €, pevná cena domluvená před zahájením práce.