Strategie umístění a designu popisků
Jak umístit popisky tak, aby zvýrazňovaly fotografii, ne ji zakrývaly. Tipy pro typografii, kontrast a čitelnost na všech zařízeních.
Proč jsou popisky důležité
Popisky pod fotografiemi nejsou jen dekorace. Jsou to klíčový prvek, který vysvětluje obsah, přidává kontext a zlepšuje uživatelský dojem. Když návštěvník otevře zvětšenou fotku v lightboxu, popisek mu pomůže pochopit, co vidí. Zároveň ale nemůže překrývat samotnou fotografii.
Je rozdíl mezi dobrým a špatným umístěním. Popisek na černém pozadí pod fotkou je čitelný a elegantní. Popisek nalepený přímo přes fotografii? Ten je frustrující a někdy úplně nečitelný.
Umístění pod fotografií – nejjednoduší přístup
Nejčastěji se popisky umisťují přímo pod miniaturu. Je to nejlogičtější místo. Obrázek se zobrazí, pod ním popisek. Návštěvník to čte přirozeně, odshora dolů. Nemusíme řešit žádné složité pozicování nebo průhlednost.
V lightboxu to funguje stejně. Zvětšená fotografie se zobrazí, a popisek bude pod ní na tmavém pozadí. Nebo můžeme dát popisek vedle fotky, pokud máme dost místa. Na mobilech to obvykle nebude fungovat, takže se vrátíme pod fotografii.
Tipem je nechat mezi fotografií a popiskem nějaké místo. Asi 12-16 pixelů je dobrá volba. Díky tomu se popisek nebude “leptat” k fotografii a bude to vypadat uklizeněji.
Čtyři praktické tipy pro popisky
Osvědčené postupy, které fungují na všech zařízeních
Popisek pod fotografií
Umístěte popisek přímo pod miniaturu s malou mezerou. Na mobilech to znamená pod fotku, na desktopu také. Je to nejpřirozenější čtení a funguje to všude.
Kontrastní pozadí v lightboxu
Když je fotografie otevřena v lightboxu, umístěte popisek na tmavé (téměř černé) pozadí. Použijte jasný text – bílý nebo světle šedý. Kontrast je klíč k čitelnosti.
Responsive velikost textu
Nepoužívejte pevné pixely. Použijte clamp() v CSS pro plynulé zvětšování a zmenšování. Na mobilu 13px, na desktopu 16px, všechno je hladké a čitelné.
Omezte délku textu
Popisek by měl být krátký. Jedna, maximálně dvě věty. Pokud potřebujete více informací, použijte modální okno nebo zvláštní stránku. Popisek je jen krátké vysvětlení.
Pokročilé strategie pro portfolio weby
Když pracujete na portfoliu fotografa nebo designéra, popisky hrají dvojí roli. Musí být čitelné, ale zároveň nesmí rozptylovat od fotografie. Fotografie by měla být hvězdou, popisek jen podpůrnou roli.
Zkuste umístit popisek vedle fotografie namísto pod ní. Na desktopu máte prostor. Fotografie vlevo, popisek vpravo. Funguje to výborně, pokud máte dost šířky. Na mobilech se to automaticky vrátí pod fotografii. CSS media queries to zvládnou bez problémů.
Další možnost? Popisek se objeví až po najetí myši. Na desktopu vidíte jen fotografii, po najetí se popisek vynoří. Na mobilech to samozřejmě nefunguje, takže tam bude popisek viditelný pořád. Je to elegantní řešení, ale vyžaduje JavaScript.
Typografie popisků
Font je důležitý. Nepoužívejte příliš dekorativní písma. Popisky musí být čitelné, takže sans-serif fonty (jako Inter, Figtree nebo Urbanist) jsou ideální. Monospace písma jsou špatná volba, pokud není popisek kód.
Váha písma by měla být normální nebo lehce tučnější. Tučný text je pro titulky, ne pro popisky. Kurzíva je někdy pěkná, ale opět – může snížit čitelnost, zvlášť na menších zařízeních.
Barva textu je kritická. Pokud je popisek na bílém pozadí, použijte tmavě šedou nebo černou. Nikdy ne světle šedou – ta má špatný kontrast. WCAG doporučuje poměr alespoň 4.5:1 pro normální text. To znamená, že světle šedá (#999999) na bílém pozadí nesplňuje standard.
Poznámka k dostupnosti
Všechny příklady v tomto článku se zaměřují na vizuální přístupnost. Pamatujte, že existují i jiné aspekty – popisky by měly být k dispozici i v alternativní formě (alt text) pro čtečky obrazovky. Neměňte čtečkám informace dostupné v popisku.
Shrnutí
Popisky jsou malá, ale důležitá část každé galerie. Jejich umístění, typografie a kontrast ovlivňují, jak celá galerie vypadá. Když to uděláte správně, návštěvníci si ani nebudou všímat, že tam jsou – prostě je přirozeně přečtou. Když to uděláte špatně, budou vás to rozptylovat.
Pamatujte: fotografie je hvězda, popisek je jen pomocník. Neztratí se v detailech, ale taky to nebude konkurovat samotnému obrázku. Zkuste doporučení z tohoto článku na svém webu a sledujte, jak se to změní.
