Responsivní vyhledávání

Změna velikosti hledání podle dostupné šířky

Webové stránky často obsahují políčko pro hledání – obvykle ho návštěvníci čekají vpravo nahoře a jedná se o další prvek, jak usnadnit a zrychlit navigaci po celém webu.

Při vytváření responsivního vzhledu je nutné nějak řešit přizpůsobení hledacího formuláře dostupné šířce.

Podoba vyhledávacích formulářů

V nejjednodušší podobě sestává hledání z jednoho textového <input>u a odesílacího tlačítka (<button>) s popisem Hledat.

Hledací formulář na Jak psát web
Hledací políčko na Jak psát web

Zažitý symbol pro hledání je obrázek lupy, proto může být vhodné ho do políčka pro hledání doplnit.

Formulář pro vyhledávání
Formulář pro hledání na Zdrojáku

Pomocí atributu placeholder jde do políčka pro zadání výrazu doplnit k hledání nápovědu.

Formulář pro vyhledávání
Hledání na e-shopu Alza.cz
Formulář pro vyhledávání
Hledání na e-shopu CZC.cz

Některé weby upustily od používání tlačítka s popiskem Hledat, které nahradily ikonou lupy.

Formulář pro vyhledávání
Formulář pro hledání na Googlu
Formulář pro vyhledávání
I český Seznam nahradil tlačítko Hledat ikonou
Hledací formulář na Games.cz
Hledání na Games.cz
Formulář pro vyhledávání
Vyhledávání na Programujte.com

Pokud hledání obsahuje našeptávač, nemusí být tlačítko ani příliš výrazné, protože ho člověk často ani nepoužije – uspokojí ho výsledek z automatického napovídání.

Formulář pro vyhledávání
Hledání na Twitteru

K vidění jsou i maximálně minimalistické hledací formuláře, které žádné tlačítko ani nemají. Spoléhají na potvrzení hledání klávesou Enter. Takové chování se ale už může setkat s nepochopením ovládání.

Formulář pro vyhledávání
Políčko pro hledání na StackOverflow

Mít, nebo nemít hledání?

Je potřeba mít hledání na stránce vždy?

U jednoduchých webů s pár stránkami, kde se na každou jde dostat jedním kliknutím, většinou možnost hledání příliš pohodlí nezvyšuje. U komplikovanější struktury je ale hledací formulář užitečnou pomůckou, jak se dostat k požadovanému obsahu.

Vytvoření responsivního hledání

V případě nejstandardnějšího hledacího formuláře je cílem, aby se šířka políčka + tlačítka přizpůsobovala dostupné šířce.

Jinak řečeno: textové pole vyplní prostor, který zbude vedle tlačítka Hledat s pevnou šířkou.

Responsivní vyhledávací formulář

Existuje více možností, jak toho docílit. Dobře funkční postup je použít tabulkové hodnoty vlastnosti display a textovému políčku nastavit 100% šířku.

Kvůli paddingu a okrajům se hodí použít okrajový boxmodel.

Změnit maximální šířku:

Samostatná živá ukázka

Rozbalení vyhledávání

Kvůli úspoře místa jde u mobilů navíc uvažovat o sbalení vyhledávání do malého tlačítka, které teprve formulář odkryje.

Z hlediska použitelnosti je dobré, aby vyhledávací políčko po odkrytí dostalo focus, aby do něj šlo rovnou psát.

Překrytí stránky hledáním

V případě, že je formulář pro hledání hodně velký nebo obsahuje našeptávání, potřebuje na mobilu maximální možný prostor. Nabízí se ho tedy zobrazit nad obsahem stránky.

Změna velikosti hledání podle dostupné šířky

Živá ukázka

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Responsivní web

Jak na mobilní (responsivní) web

Jak a proč vytvářet mobilní versi webu – responsive web.

Responsivní obrázky

Responsivní obrázky

Co s obrázky na mobilních zařízeních?

Obtékané boxy s proměnlivou šířkou

Obtékané boxy s proměnlivou šířkou

Jak udělat, aby se obtékané boxy přizpůsobovaly proměnlivé velikosti okna.

Responsivní design webu

Responsivní design webu

Jak jednoduše a kvalitně vytvořit web, který se přizpůsobí všem velikostem cílových zařízení.

Responsivní menu

Responsivní navigace

Jak udělat elegantní navigaci pro zobrazení na malých obrazovkách.

Komentáře