Co mi dalo WebExpo 2025: tipy z frontendu, AI a přístupnosti

WebExpo 2025 opět vystartovalo v tradičním formátu dvoudenní akce rozprostřené po různých sálech v pražské Lucerně. Velkolepý začátek letos obstarala tanečnice / vzdušná akrobatka. Následovalo klasické uvítání od Šárky Štrosové s organizačními informacemi a také v roli moderátora Vitaly Friedman a jeho vrhání čokolád do publika.

Chválím konferenční appku Eventee. Oblíbil jsem si ji už loni na FrontKonu a jsem rád, že letos byla i na WebExpo.

Protože počet přednášejících byl za dva dny poměrně velký, a to jsem samozřejmě nezvládl všechny přednášky, rozdělil jsem tentokrát své zápisky podle témat.

Image

Frontend tipy pro rok 2025 i příští

První frontendová přednáška na letošním WebExpo se týkala Tailwindu. Shruti Balasa povídala o poskládání prvků na webové stránce pomocí flexboxu, gridu a dalších technik ve spojení s utility třídami frameworku Tailwind. Vše hezky na příkladech, nechyběla ukázka subgridu.

Tip: grid lze pěkně ladit v Chrome DevTools, když v DOMu kliknete na slovíčko grid.

Image

Úplná novinka to pro mě sice není, ale o to více mi Bramus Van Damme připomněl, na co se chystám už delší dobu. View Transitions a přechodové efekty mezi stránkami. Chrome i Safari to už umí, Firefox alespoň částečně. Co mě překvapilo, tak při zachování same origin je možné tento efekt využívat i na vícestránkových webech, tedy bez moderních JS frameworků.

Image

Na pomezí frontendu a UX měl přednášku druhý den konference Vitaly Friedman, zakladatel Smashing Magazine a po dva dny také moderátor ve Velkém sále Lucerny. Obyčejný vyhledávací box je docela věda. Hned na začátku zmínil, že se mění použití vyhledávačů. Zatímco dříve jsme do něj psali klíčová slova, dnes se prostě ptáme. Možná jiného nástroje, ale zadávání dotazů se změnilo.

Koukli jsme na ukázky špatných implementací vyhledávacích polí. Neukrývejte hledací pole, pokud chcete, aby jej uživatelé aktivně používali. Ukazuje rozdílné výsledky, například kategorie, kromě článků (i Maxiorel to umí). Seskupujte výsledky hledání dle témat, clusterizujte. Využijte AI, dává-li to smysl. Nabídněte filtraci výsledků. 

Znáte Fugu? Jde o společný projekt Google, Microsoftu, Intelu, Samsungu a dalších. Má přinést propojení webového světa a běžných aplikací a pomůcek v počítači. Rowdy Rabouw z Google předvedl praktické ukázky Clipboard API, Fullscreen API, Picture-in-picture API, Screen wake API, propojení s Bluetooth, USB a dalšími periferiemi. A také Web Share API, o kterém jsem tu psal loni v říjnu.

AI na WebExpo 2025

Se zajímavou přednáškou přišel Tejas Kumar. Ihned jsem si do poznámek napsal Model Context Protocol (MCP) a open source nástroj Langflow, se kterým pomocí AI propojíte nespočet jiných aplikací a služeb. Třeba váš kalendář nebo program konference WebExpo do chatovacího AI Claude, kde se následně na data z těchto zdrojů ptáte.

Langflow si rozhodně zaslouží vaši pozornost, pokud hledáte způsob, jak propojit různé systémy přes AI bez zbytečného kódování.

Spíše nudnější pro mě bylo povídání o modelu Gemma, který představila Teresa Wu. Je to odlehčená verze Gemini, lze ji stáhnout a hodí se na sumarizaci, dokumentaci či odpovídání na maily v mobilním zařízení. K dispozici je v Google AI Studiu a pomocí služeb jako Kaggle a Hugging Face.

Naopak tuze poutavé mi přišlo povídání Lukáše Pittera o stavbě AI aplikací, úskalích spojených s jejich ovládáním ze strany běžných uživatelů a o využití ComfyUI. Už to mám stažené.

Weby? Přístupné, prosíme

Přístupnost je nyní velké téma, nejenom kvůli Evropskému aktu přístupnosti (EAA), který začne platit od konce června a rozšiřuje povinnosti mít přístupné některé weby a služby i ze strany soukromého sektoru. Ondřej Pohl mě zaujal tímto tématem už loni. Letos povídal o typických chybách v přístupnosti.

Mnoho z nás v této souvislosti myslí třeba na uživatele se zrakovými či sluchovými problémy. Ale přístupnost se týká třeba i neurodivergentních, kteří mohou vnímat a přemýšlet nad obsahem webu odlišně, než jeho tvůrci a provozovatelé.

Testujte své weby. Třeba zjistíte, že něco fakt nemá smysl dělat. Například automaticky vyskakující okna s výzvou k odběru newsletteru, která přerušují interakci uživatele se zbytkem stránky. Okamžitá validace formuláře, která nečeká na dopsání textu. Validujte až po odeslání formuláře nebo alespoň použijte aria-live pro chybové hlášky.

Co taková rozbalovačka s nespočtem možností? Přidejte do ní vyhledávání a nejčastější možnosti dejte nahoru. Třeba aktuální lokaci uživatele v seznamu států. Pozor na placeholdery místo popisků polí, inkonzistenci barev a přehnané použití přístupnostních popisků. Typicky u čistě dekorativní grafiky.

Napadlo vás, že plovoucí a sticky prvky představují problém? Pokud ne, vyzkoušejte svůj web při nějakém velkém zvětšení. Dost možná vám ikonka chatbota překryje podstatnou část obsahu a ikona pro nastavení cookies ten zbytek.

Image

Opusťte ikonfonty. Při použití emoji myslete na to, že jejich interpretace čtečkou obrazovky bude nejasná. Designéři by měli myslet na možnost nastavení vlastních fontů a velikostí. Design webu by se v takovém případě neměl zcela rozpadnout. Ale trvat na přesně daném počtu řádků zkráceného textu pak nedává smysl.

Jak zabít přístupnost? S pomocí overlay prvků na webových stránkách. Hezky o tom povídal Lukáš Hosnedl. Ale zmínil i obecné věci, jako tři hlavní pilíře přístupnosti – kód, design a obsah. Na ten třetí se podle mě často zapomíná.

Zkratku POUR si zapište. Weby by měly být Perceivable (vnímavé), Operable (ovladatelné), Understandable (srozumitelné) a Robust (robustní). A ano, pravidla WCAG jsou těžko stravitelná, moc technická, těžko se objektivně měří a některé nápady jsou tam příliš obecné a bez kontextu.

Jak naštvat uživatele? Pomalým webem

O rychlosti webu jsem navštívil dvě přednášky. První byla od Tammy Everts ze SpeedCurve, nástroje na monitoring rychlosti webů. Existuje jasné pojítko mezi pomalým webem a stresem nebo frustrací uživatelů. Pomalé brouzdání a průchod košíkem prý frustraci zvedne o 11 až 26 % a lidé si negativní pocit spojený s pomalým webem pamatují i dlouho po jeho opuštění.

Navíc při procházení pomalého webu začínají uživatelům vadit i věci, kterým by normálně nevěnovali takovou pozornost. Jak má být web rychlý? Ve SpeedCurve to lze vypozorovat z počtu konverzí při různých rychlostech. Pomáhá s tím Real User Monitoring obecně.

Image

Jako laik si nedělejte těžkou hlavu ze všech zkratek okolo rychlosti. Prostě sledujte, zda se stránka načítá, zda jde používat, jak působí a hlavně jak koreluje s byznys metrikami. I malá změna může mít velký dopad.

Pozor na to, co budete optimalizovat. Například u eshopu bývá nejdůležitější stránka produktu a kategorie, až potom homepage, košík a vyhledávání. Naopak u webového magazínu je zase hlavní detail článku, hledání a také teprve potom homepage.

Tipy: Page Speed Benchmarks a Web Performance Guide.

Zatímco předchozí přednáška byla spíše začátečnická, Tim Kadlec z Cloudflare přišel s podrobnostmi k Speculation Rules. Každých 100 ms, o které načtení svého webu zrychlíte, se projeví 1% nárůstem konverzí. Alespoň u velkých hráčů.

Znáte Jevonsův paradox? Čím více máme zdrojů, tím více konzumujeme. Je to určitý hédonismus. Čím jsou zdroj výkonnější, tím se zvyšují naše požadavky.

Core Web Vitals berte jako odrazový můstek a ne cílovou linii. Myslete na to, že očekávaní spojené s rychlostí webu se mění v průběhu času.

Překvapení? WordPress na WebExpo

Po pravdě, klasický redakční systém jsem na WebExpo nečekal. Přesto se toto téma do přednášek dostalo. Maciek Palmowski o něm povídal ve spojení s bezpečností. Ano, WordPress je bezpečný, loni měl jen asi sedm bezpečnostních problémů.

To ovšem platí pro jeho jádro. Ekosystém pod kontrolou není a 96 % zranitelností je v pluginech. Testuje se pouze prvotní release. Je spousta zastaralých a opuštěných pluginů. Často vám nikdo nedá vědět o ukončení pluginů kvůli bezpečnosti. Podle Macieka je to kvůli strachu z negativního PR u WordPressu.

Co je na WP fajn, tak snadná aktualizace. Kliknutí v adminu, update přes WP CLI, API nebo nástroje třetích stran.

Asi bych k tomu jen dodal, že podle mě má z hlediska bezpečnosti svůj ekosystém mnohem lépe zvládnutý Drupal.

Co dalšího jsem si poslechl?

Myslete jako leader. To UX specialistům doporučil v deseti tipech Joe Natoli. Nemluvte o sobě, ale o ostatních. Používejte jazyk ostatních, žádné UX termíny v komunikaci s klienty. Soustřeďte se na to, co můžete udělat, nikoli na věci, které nezměníte. Nezvyšujte výkon. Nastavte si hranice, ne bariéry. Přestaňte se zabývat tím, co by se mělo stát. Pracujte s tím, co je teď.

Elis Laasik se osvědčilo prototypování přímo v kódu. Benefity? Chová se to jako skutečný produkt, pracuje to s daty i různými jazyky. Lépe simuluje skutečné chování webu či aplikace.  Naopak se nehodí pro různé verze designu a tam, kde je design priorita.

Riki Fridrich zpovídal Martina Cízlera, který se podělil o zkušenosti s přechodem z Microsoftu do Make, coby výrazně menší firmy.

Pokud byl někdo zcela mimo měřítka průměrnosti, pak to byl se svým vystoupením Jan Řezáč. V povídání určeném designérům předal 12 tipů na dovednosti, které by měli ovládat. Tím hlavním sdělením je, že nástroje se mění, ale řada designérů vlastně jen pořád kreslí čtverečky. V současné době ve Figmě, dříve ve Photoshopu nebo Corelu.

Junioři vylepšují první návrhy, senioři si pomohou AI a předají jich více. Zkuste Relum, Replit, Lovable, vyhněte se podle Honzy Copilotu. Nebojte se uživatelského výzkumu a vibe codingu.

Image

Keynote z prvního dne považuji za nejslabší přednášku z celé konference. Asi nejsem správná cílovka, ale Mark Pollard se mi prostě se strategickým myšlením pro každého do vkusu netrefil.

Naopak Krasimir Tsonev na závěr krásně zrekapituloval posledních dvacet let v životě webového vývojáře. Zavzpomínali jsme na Flash, jQuery či Firebug a ukázali si, častou chybu – plevelení kódu, protože junioři mnohdy neznají nic jiného než frameworky. Použijte schody místo výtahu, jděte k jádru pudla.

Úkolníček

Vojta Bruk v nějakém svém zápisu z jiné akce měl formát úkolníčku. Přijde mi to jako dobrý nápad, protože účast na konferenci je jedna věc, zápisky druhá, ale má-li to mít konkrétní dopad, je třeba vše převést do praxe. Třeba vás moje úkoly také inspirují:

• Implementovat Speculation Rules, ideálně na vlastním malém webu
• Vyzkoušet si Views Transitions na statickém webu v Hugo
• Zkusit si analyzovat a vyladit přístupnost na některém svém projektu (už mám za sebou dva klientské)
• Vyzkoušet generování prototypů místo kreslení grafiky
• Zkusit jednoduchý scénář s Langflow
• Vyzkoušet ComfyUI

WebExpo 2025 mi připomnělo, jak rychle se svět webu mění. Když jsem odjížděl, měl jsem hlavu plnou inspirace, ale i konkrétní plány, co chci zkusit. A právě to dělá dobrou konferenci – že vás posune.

Loni jsem si chválil, jak jsem běháním po Lucerně z přednášky na přednášku pěkně zhubl. Dneska jsem to ve znamení pokroku konzultoval s ChatGPT a napsala mi, že „WebExpo je low-intensity cardio v převleku za vzdělávání“. To pobavilo.