Dlouhé animace škodí: Řekni si o web #58
Efekty delší 500 ms škodí. Mapy.cz jsou příliš sexy, aby nevydělávaly. Návod na funkční dokumentaci design systému. Variabilní hyperčitelné písmo. Škodolibý Caps-Lock.
Telegraficky
🔗 Slovenské vnitro mělo linkbuilding na hazard.
🧠 Meta AI umí přečíst 80 % myšlenek.
🔌 AI zdvojnásobí spotřebu elektřiny.
🖼️ Google snižuje ranking generovaným obrázkům.
✍ Podpis úředníka nezačerňovat, říká soud.
🥨 Česká e-commerce expanduje do Německa a Rakouska.
⚜️ Skauti odešli z X.
🪪 Identitu občana využily skoro čtyři miliony uživatelů.
🏫 DIPSy padal.
Sledujte nás také přes RSS feed, Twitter, Threads, Bluesky, Linkedin nebo Facebook.
Linkodrom
Efekty s animací delší než 500 milisekund zhoršují metriku Web Vitals, píše na Twitteru Machal. Animovaný efekt v kódu ovlivní metriku Cumulative Layout Shift a může to mít vliv na uživatelský prožitek a podružně také na umístění ve výsledcích vyhledávání.
Mapy.cz jsou příliš sexy, aby nevydělávaly. Mapy.cz před nedávnem spustily prémiovou verzi s předplatným. Jak se jim vede v prosinci povídal v podcastu Živě manažer produktového týmu Map Martin Jeřábek.
Šablona pro jasnou a přehlednou dokumentaci designu. Při dokumentování designových systémů designéři bojují se srozumitelností návodů k používání svých komponent. Michael Haggerty-Villa sdílí osvědčenou metodu: využití strukturované tabulky, která pomáhá systematizovat obsah a urychlit tvorbu dokumentace.
Hyperčitelné písmo a hned v sedmi variantách. Atkinson Hyperlegible je písmo navržené pro čtenáře se zhoršeným zrakem. Nová varianta Atkinson Hyperlegible Next nabízí sedm vah pro variable font a podporu více než sto padesát jazyků. Atkinson Hyperlegible Mono je neproporční verze určená pro tabulky nebo vývojářské editory. Všechny varianty jsou k dispozici zdarma pro osobní i komerční použití.
Sdílený Caps-Lock. Caps-Lock je asi NEJZBYTEČNĚJŠÍ KLÁVESA na klávesnici – nesouhlasíte? 🤔 Pokud máte zálibu v podivnostech nebo chcete vytrestat kolegy s nezabezpečeným počítačem, bude se vám líbit škodolibá utilitka Global Caps-Lock, která pro Caps-Lock synchronizuje stav s kýmkoli na internetu, kdo ji má také nainstalovanou. Jen nezapomeňte, že legrace je to – jak říkáme doma dětem – jen pokud se baví všichni.
Brašna s nářadím
Tentokrát jsme vám do brašny s nářadím přibalili utilitku Hemingway Editor, která vylepšuje psaní v angličtině, a šikovné udělátko na kreslení map webů a aplikací Wireflow.co.
Hemingway detekuje dlouhé věty, náročná slova nebo stylistické nedokonalosti. Možná by se zdálo, že v době AI chatů a copilotů není specializovaná utilitka potřeba. Hemingway ale díky přehledné vizualizaci poklesků a jasným pravidlům nejen vylepšuje konkrétní texty, ale také nás učí vyjadřovat se zřetelně a srozumitelně.
Škoda, že takový nástroj nemáme pro češtinu.
Nástroje jako Wireflow.co to mají těžké, když musí přežít vedle Figmy. Určitě i pro tvorbu map průchodu uživatele webem nebo aplikací se ve Figmě najde dost knihoven komponent. Nástroj Wireflow.co má ale tu výhodu, že je tak jednoduchý, že každý, kdo zvládne přetáhnout komponentu ze seznamu na plátno, může začít navrhovat. Data se ukládají jen v paměti prohlížeče a dají se exportovat jako obrázek.
Abychom si rozuměli
Jestli jste tak staří jako my dva, určitě pamatujete dobu, kdy bylo důležité, v jakém kódování češtiny ukládáte soubory. Pro rychlé rozpoznání správné znakové sady posloužil pangram – věta, která obsahuje všechna písmena abecedy konkrétního jazyka. Nebylo nic neobvyklého vídat na webových stránkách věty jako „Kŕdeľ ďatľov učí koňa žrať kôru.“ nebo „Příliš žluťoučký kůň úpěl ďábelské ódy.“
Dnes pangramy najdete v návrzích jako slepý text nebo ve vzornících písem pro snadnou detekci fontů vhodných pro zvolený jazyk.
Když začalo být moderní sestavovat uživatelské rozhraní na straně prohlížeče, napadlo někoho, že by místo točícího se indikátoru načítání mohly na obrazovce svítit placeholdery. A tak se zrodil Skeleton screen.
U nás se říká: Jak se do lesa volá, tak se z lesa ozývá. Američtí vědci mají pořekadlo Smetí dovnitř, smetí ven. Používá se pro případy, kdy pracujete s nekvalitními vstupy. Z nekvalitních vstupů i při sebelepší metodě dostáváte zase jen nekvalitní výstupy.
Až se jednou bude stavět pantheon interakčního designu, zvláštní místo v něm bude mít busta Larryho Teslera. Jeho jméno nese zákon o zachování složitosti. Ten říká, že když zjednodušíte aplikaci, přenášíte tím složitost na uživatele.
Na webu Kecy designérů bude jednou z prvních hlášek To záleží! Do návrhu vstupuje tolik okolností, že je mnohdy těžké dát na jednoduchou otázku jednoduchou a přímou odpověď. A tak se my designéři uchylujeme k alibistickému vypočítávání podmínek, které musíme vypořádat, než uděláme rozhodnutí.
Jak si naklikat web bez cizí pomoci. Přihlaste se na první z našich workshopů. Připravili jsme ho pro kohokoli, kdo se rozhodl, že si postaví web bez pomoci designérů a vývojářů.
Za dvě hodinky si v úterý 4. března v podvečer společně vytvoříme web na platformě Solidpixels a ukážeme si, jak web zveřejnit na vlastní doméně. Dozvíte se, jak postavit web rychle a vyhnout se obvyklým chybám. (Detaily kurzu)
Pokud odebíráte náš newsletter e-mailem, najdete v něm kód na 30% slevu. A pokud ještě nejste našimi odběrateli, tak teď je vhodná příležitost. V uvítacím e-mailu na vás čeká drobná odměna. 😉
A to je z třetího únorového zpravodaje Řekni si o web roku 2025 všechno. Dnes slaví 37. narozeniny hodné děvče, které se zkazilo. Díky, že nás nejen čtete, ale také o sobě dáváte vědět. Pokud pro nás máte nějaký tip, co příště vylepšit nebo udělat jinak, těšíme se.
Hezký týden vám přejí,
Jakub Goldmann a Martin Kopta.