Autor & Specialista
Petr Svoboda
Senior Web Design Expert zaměřený na marquee tickery a horizontální animace textu
Scroll Marker s.r.o.
Specialista v oboru
Co je mojí specialitou
Marquee Tickery
Vytváření plynulých horizontálních textových bannerů s důrazem na čitelnost a vizuální integraci do webového designu.
Animační Řízení
Kontrola rychlosti, časování a hladkosti animací tak, aby text zůstal čitelný bez únavy z pohledu uživatele.
Přístupnost Prvního Řádu
Implementace pauzy při najetí myši a klávesnicové navigace pro plnou kompatibilitu s WCAG standardy.
Typografická Integrace
Styling tickerů s ohledem na celkový design webu, barvy, fonty a vizuální hierarchii.
Výkonnostní Optimalizace
Efektivní CSS a JavaScript animace s minimálním dopadem na výkonnost webu a dobu načítání.
Responzivní Design
Tickery fungují bezproblémově na všech zařízeních — od mobilních telefonů až po velké monitory.
Příběh kariéry
Moje cesta v webdesignu
Do webdesignu jsem se dostal v polovině 2000. let, kdy jsem začal experimentovat s CSS animacemi a dynamickými prvky. Byl to čas, kdy se HTML5 a CSS3 teprve rodily a jejich potenciál byl skoro neomezený. Studium na Fakultě informačních technologií VUT v Brně mi dalo solidní teoretické základy, ale opravdu jsem se začal učit v praxi.
Důležitý zlom přišel v roce 2012. Pracoval jsem jako součást týmu pro e-commerce společnost Alza.cz a měli jsme za úkol implementovat komplexní ticker systém pro real-time zobrazování skladových zásob a cen. To bylo poprvé, kdy jsem si uvědomil, jak obtížné je dělat animace, které jsou nejen pěkné, ale zároveň funkční a přístupné. Od té doby se neustále věnuji zdokonalování technik marquee animací s ohledem na WCAG standardy a výkonnost.
Co mě v tomto oboru stále pohání, je snaha najít dokonalou rovnováhu mezi vizuální atraktivitou a praktickou použitelností. Chci, aby se text pohyboval elegantně, ale zároveň aby nenarušoval uživatelský komfort. Věřím, že dobrý ticker design není jen technickou záležitostí — je to také umělecká disciplína, která vyžaduje hlubokého porozumění typografii, barvám a tomu, jak se uživatelé s webem interagují.
V současné době vedu tým webových designérů v Scroll Marker s.r.o., kde propagujeme principy udržitelného a uživatelsky orientovaného designu. Za těch 14 let, co pracuji v tomto oboru, jsem se podílel na desítkách projektů pro středně velké a velké firmy. Každý projekt mě učí něco nového.
Vzdělání a certifikace
Kvalifikace a zkušenosti
Vysoké učení technické v Brně
2006–2010
Fakulta informačních technologií, obor Webové aplikace a služby
WCAG 2.1 Accessibility Specialist
2018
Certifikace v oblasti přístupnosti webu a standardů dostupnosti
Advanced CSS & Web Animation
2019
Certifikace od CSS-Tricks a Web Animation Institute
Senior Web Designer
Od roku 2015
Vedoucí projektu a mentor pro mladší designéry v Scroll Marker
Vedení týmu designérů
Od roku 2020
Vedení týmu 8 webových designérů a vývojářů v Scroll Marker s.r.o.
Spolupráce se klíčovými klienty
2010–2026
Alza.cz, Mall.cz, Datart a desítky dalších středně velkých a velkých firem
Můj přístup
Filosofie designu a animací
Přístupnost není volitelná
Když navrhuju marquee ticker, vždycky si kladu otázku: co se stane, když uživatel použije klávesnici? Co když má epilepsii a pohybující se prvky mu mohou uškodit? Přístupnost není přidaný bonus — je to základní předpoklad dobrého designu. Každý ticker, který vytvářím, má funkci pauzy při najetí myší a lze jej ovládat z klávesnice.
Čitelnost je na prvním místě
Není důvodu mít ticker, který se pohybuje tak rychle, že jej nikdo nemůže přečíst. Experimentoval jsem s mnoha rychlostmi animací a zjistil jsem, že ideální je kolem 40–60 pixelů za sekundu. To dovoluje čtení bez nutnosti „pronásledovat” oči pohybem. Contrasts, font size, letter spacing — všechno to hraje roli.
Výkonnost znamená respekt
Pomalý web frustruje lidi. Když tvořím animace, vždy mysli na to, že se budou spouštět na slabších zařízeních a pomalých připojeních. Používám GPU-accelerované CSS transforms, minimalizuji reflows a snažím se animace optimalizovat. Dobrý design neznamená jen, jak to vypadá — znamená to, jak to funguje.
Integrace s celkovým designem
Ticker by neměl být náhodný prvek, který někdo přidal na poslední chvíli. Měl by být organickou součástí designu webu. Barvy, fonty, spacing — všechno musí být v souladu s ostatním obsahem. Když se to dělá správně, uživatel to ani nevnímá jako něco cizího.
Příspěvky
Moje články a návody
Praktické poznatky z let práce s marquee tickery a textovými animacemi
Vytváření Ticker Bannerů Krok za Krokem
Kompletní průvodce od prvního řádku HTML až po plně funkční marquee ticker s CSS animacemi a JavaScriptem.
Přečíst článekKontrola Rychlosti Animace pro Čitelnost
Jak nastavit ideální rychlost animace tak, aby text zůstal čitelný a uživatelé se neznamená cítili zmateně.
Přečíst článekPauza Při Najetí pro Lepší Dostupnost
Implementace funkce pauzy animace při najetí myší a klávesnicové podpory pro splnění WCAG standardů.
Přečíst článekStylování Tickeru Podle Designu Webu
Praktické tipy na integraci marquee tickeru do stávajícího designu — barvy, fonty, kontrast a typografie.
Přečíst článekMáte otázky?
Pojďme si promluvit
Pokud máte projekt, na kterém byste chtěli pracovat, nebo se chcete ptát na marquee tickery a webový design, jsem tady pro vás. Napište mi nebo se podívejte na naši práci.