Jakub Goldmann a Martin Kopta

Byznys

Design

Marketing

Umění

Návrat ke kořenům indie webu. Řekni si o web #23

Řekni si o web – Podcast pro majitele a designéry webů

Jakub Goldmann a Martin Kopta. Specialisté na webdesign a digitální strategie. Tipy a triky pro designéry, manažery i podnikatele, kteří spravují své vlastní weby. Sledujte nové techniky a trendy ve světě webu → 📒 75 tipů, jak si říct o web <a href="https://www.reknisioweb.cz?utm_medium=podcast">www.reknisioweb.cz</a>

(00:00) Řekni si o web #23(00:14) Telegraficky(00:50) Linkodrom(03:58) Život s technologiemi(05:06) Na čem právě pracujeme(05:32) Tip z naší knížky(06:06) ZávěrTelegraficky * Google Universal Analytics definitivně končí – 1. července Google smaže vaše data. * Cenu Zlatý erb pro nejlepší obecní web získaly Plzeň a Poděšín. * Uživatelé preferují chatbota s AI tam, kde se před živými lidmi stydí. * Udržíte tajemství? Ex-šéf Avastu Ondřej Vlček založil utajený startup. * Screen Wake Lock API zabrání zhasnutí a uzamčení displeje při prohlížení webu. * Seznam letos uvede další placené služby. * Apple v pondělí představil novinky. Jak se na Apple novinky dívají teenageři?LinkodromKodéři je chtěli, ale využívají je? Řeč je o vlastnosti kaskádových stylů Container Queries. Je to vlastnost podobná media query, která se nejčastěji používá, aby se webová stránka přizpůsobila šířce okna prohlížeče. Container queries zjišťují kontext přímo pro konkrétní prvek a podle toho aplikují další vlastnosti. Jedna komponenta, například karta s profilem uživatele, tak může vypadat jinak na profilové stránce a jinak v postranním vysouvacím menu nebo v tooltipu, který se zobrazí po najetí na jméno uživatele.Podle webu Can I Use má prohlížeč s podporou téhle vlastnosti 92 % uživatelů internetu. Martin Michálek o nich psal už před rokem: „Je to věc, kterou ve webdesignu opravdu hodně chci. A věřte mi, že vy taky.“ Utekl rok a Chris Coyier si všímá, že se s container queries na webu ještě moc často nesetkáváme. Nabízí několik ukázek z vlastních prací, kde se komponenty proměňují podle kontextu použití.Kolekce předloh pro Apple ve Figmě. Zatímco má Material Design pro Figmu oficiální podporu už dlouho, Apple má svoje oficiální šablony ve Figmě teprve pár týdnů. Jejich počet ale rychle roste a dnes už designérům nabízejí třináct zdrojových souborů nejen s komponentami pro Human Interface operačních systémů pro iPhony, iPady, Mac a brýle, ale také pro Apple Pay, přihlašování přes Apple ID, iMessage a další.CX v české e⁠-⁠commerce: 400 hodin výzkumu se zákazníky. Klára Brožovičová, Lucie Sikorová, Jana Hanfová a Anna Jančaříková z Proof&Reason za podpory Jana Junka sestavily stostránkovou studii použitelnosti e-shopů s 82 problémy rozdělené do třinácti částí. Studie si vyžádala přes čtyři sta hodin práce a je to na ní poznat. Jan Junek prezentoval studii na WebExpu a stáhnout si ji můžete výměnou za kontakty.Přestože to nebylo předmětem testování, některé nákupy skončily už při hledání produktu v daném e-shopu. Další problémy přineslo nedostatečné či dokonce žádné informování o přidání produktu do košíku, stejně jako nešťastné umístění tlačítka „Do košíku“.— Jan Junek & aliæ, CX v české e⁠-⁠commerceŠablona pro poptávku na web. Minule jsme tleskali kanadským naklikávacím zadávacím dokumentacím a teď tu máme hezký příklad z domácích zásob. Petr Illek vyvěsil na web redakčního systému CSGOV šablonu pro poptávku na obecní web. Kostra poptávky velmi dobře poslouží komukoli, kdo potřebuje web.Mapování firemních procesů se Svěrákem. Jakub rád říká, že při naší designérské práci jen tak mimochodem zásadně ovlivníme podnikání svých zákazníků. Tomáš Svěrák na Linkedin popisuje, jak se svými klienty na začátku spolupráce rozebírá firemní procesy, aby pochopil jejich byznys: „Stane se, že je to ve firmě vůbec poprvé, kdy jsme proces nakreslili. Potom se dějou divy, když lidé ve firmě přijdou na to, jak rozdílně některé věci dělají. K tomu všemu stačí obvykle tabule, fixy a pár postitů.“Změna pořadí předvoleb má vliv na výši spropitného. Dima Melnik na Linkedin píše, že své oblíbené kavárně doporučil na platebním terminálu přehodit pořadí předvoleného spropitného. Namísto původního pořadí 10 %, 15 %, 20 % teď terminál nabízí předvolby v opačném pořadí: 20 %, 15 %, 10 %. Výsledkem je, že zákazníci začali místo 10% spropitného dávat 15%.Život s technologiemiSlash pages – tahle nerdovina je jak z konce devadesátých let, ale trenduje právě teď. Možná to nějak souvisí s návratem obliby newsletterů, RSS, statických webů a s odklonem od sociálních sítí. Postupem času se ustálila praxe pro adresy některých webových stránek – říká se jim slash pages, stránky za lomítkem. S pojmenováním nejspíš přišel Manuel Moreale.I náš web má stránku na adrese /about. Často díky konvenci ani nemusíte používat navigaci na stránce, abyste zjistili, že třeba RSS najdete na adrese /feed, mapu webu na adrese /sitemap a staré články na adrese /archive. A to jsme se o existenci těch stránek nijak nezasloužili; generuje je přímo Substack, odkud rozesíláme náš newsletter.Jak si lidé zase začali hýčkat osobní weby a rozrůstá se indie web, rozrůstá se také seznam stránek za lomítkem. Kromě už zmíněných se objevují nové. Třeba /now, /blogroll, /bookmarks, /colophon, /coffee nebo /chipotle. Krásnou ukázkou slash pages je například web Michaela Sasse ShellSharks.com.Na čem právě pracujemeMartin oznámkoval poslední opozdilce ze svých designerských předmětů na VŠE, dopsal oponenturu k bakalářce a začaly mu prázdniny. 🎉Na Médiu vyšel rozhovor Matyáše Bureše s Jakubem: „Jedno z rizik, které vidím je, že AI přeskakuje juniorní pozice. Už teď, když vyzkoušíš ChatGPT, tak vyhodí spoustu blbostí, od kterých už se ale může člověk odpíchnout. Pokud se to ještě více zlepší, tak juniorní pozice začnou být zbytečně drahé.“Tip z naší knihyPosuzujte web podle toho, jak funguje, ne podle toho, jak vypadá.Divili byste se, kolik úspěšných a navštěvovaných webů vypadá nemoderně – třeba inzertní portál Craigslist a u nás například Bazoš. Nezaměřujte se jen na vzhled. Obchodní výkon je to hlavní.Nevyhnete se sdílení pracovních návrhů s kolegy. Pro ně bude mnohem těžší než pro vás nezaměřovat se na vzhled, ale na logické uspořádání. Pokud vám i koncept návrháři dodávají vizuálně propracovaný, vymyslete společně, jak nejlépe vysvětlit, že se ještě nejedná o finální design. Například přepnout do černobílé škály.A to je z druhého červnového zpravodaje Řekni si o web roku 2024 všechno. Před šedesáti lety byl na doživotí odsouzen muž, podle kterého se jmenuje Mandelův efekt. Díky všem za feedback. Pokud pro nás máte nějaký tip, co příště vylepšit nebo udělat jinak, těšíme se.Hezký týden,Jakub Goldmann a Martin Kopta.Líbí se vám newsletter Řekni si o web? Přihlaste se k pravidelnému odběru do e-mailu nebo přes Substack. This is a public episode. If you would like to discuss this with other subscribers or get access to bonus episodes, visit www.reknisioweb.cz

(00:00) Řekni si o web #23(00:14) Telegraficky(00:50) Linkodrom(03:58) Život s technologiemi(05:06) Na čem právě pracujeme(05:32) Tip z naší knížky(06:06) ZávěrTelegraficky * <a target="_blank" href="https://www.paperstreet.com/blog/google-universal-analytics-sunset-data-deletion/">Google Universal Analytics definitivně končí – 1. července</a> Google smaže vaše data. * Cenu <a target="_blank" href="https://www.zlatyerb.cz/celostatni%2Dkolo/d-1813/p1=1755">Zlatý erb pro nejlepší obecní web získaly Plzeň a Poděšín</a>. * Uživatelé <a target="_blank" href="https://uxpsychology.substack.com/p/do-users-prefer-chatbots-over-humans">preferují chatbota s AI</a> tam, kde se před živými lidmi stydí. * Udržíte tajemství? Ex-šéf Avastu Ondřej Vlček <a target="_blank" href="https://www.linkedin.com/feed/update/urn:li:activity:7204735396499312640/">založil utajený startup</a>. * <a target="_blank" href="https://web.dev/blog/screen-wake-lock-supported-in-all-browsers?hl=en">Screen Wake Lock API</a> zabrání zhasnutí a uzamčení displeje při prohlížení webu. * <a target="_blank" href="https://www.lupa.cz/clanky/ondrej-krisica-seznam-cz-behem-letosniho-roku-prijdeme-s-radou-placenych-produktu/">Seznam letos uvede další placené služby.</a> * Apple v pondělí <a target="_blank" href="https://www.youtube.com/live/RXeOiIDNNek">představil novinky</a>. Jak se na <a target="_blank" href="https://applenovinky.cz/">Apple novinky</a> dívají <a target="_blank" href="https://x.com/SarahPerezTC/status/1800297707623387204">teenageři</a>?LinkodromKodéři je chtěli, ale využívají je? Řeč je o vlastnosti kaskádových stylů <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries">Container Queries</a>. Je to vlastnost podobná <a target="_blank" href="https://www.vzhurudolu.cz/prirucka/css3-media-queries">media query</a>, která se nejčastěji používá, aby se webová stránka přizpůsobila šířce okna prohlížeče. Container queries zjišťují kontext přímo pro konkrétní prvek a podle toho aplikují další vlastnosti. Jedna komponenta, například karta s profilem uživatele, tak může vypadat jinak na profilové stránce a jinak v postranním vysouvacím menu nebo v tooltipu, který se zobrazí po najetí na jméno uživatele.Podle webu <a target="_blank" href="https://caniuse.com/css-container-queries">Can I Use</a> má prohlížeč s podporou téhle vlastnosti 92 % uživatelů internetu. <a target="_blank" href="https://www.vzhurudolu.cz/prirucka/container-queries">Martin Michálek o nich psal</a> už před rokem: „Je to věc, kterou ve webdesignu opravdu hodně chci. A věřte mi, že vy taky.“ Utekl rok a Chris Coyier si všímá, že se s container queries na webu ještě moc často nesetkáváme. Nabízí <a target="_blank" href="https://frontendmasters.com/blog/weve-got-container-queries-now-but-are-we-actually-using-them/">několik ukázek z vlastních prací</a>, kde se komponenty proměňují podle kontextu použití.Kolekce předloh pro Apple ve Figmě. Zatímco má <a target="_blank" href="https://www.figma.com/@materialdesign">Material Design pro Figmu</a> oficiální podporu už dlouho, Apple má svoje oficiální šablony ve Figmě teprve pár týdnů. Jejich počet ale rychle roste a dnes už designérům <a target="_blank" href="https://www.figma.com/@apple">nabízejí třináct zdrojových souborů</a> nejen s komponentami pro Human Interface operačních systémů pro <a target="_blank" href="https://www.figma.com/community/file/1248375255495415511/ios-17-and-ipados-17">iPhony, iPady</a>, <a target="_blank" href="https://www.figma.com/community/file/1251588934545918753/apple-design-resources-macos">Mac</a> a <a target="_blank" href="https://www.figma.com/community/file/1253443272911187215/apple-design-resources-visionos">brýle</a>, ale také pro <a target="_blank" href="https://www.figma.com/community/file/1367915141082663884/apple-pay">Apple Pay</a>, <a target="_blank" href="https://www.figma.com/community/file/1367916685468040146/sign-in-with-apple">přihlašování přes Apple ID</a>, <a target="_blank" href="https://www.figma.com/community/file/1367916269438172112/imessage-apps-and-stickers">iMessage</a> a další.CX v české e⁠-⁠commerce: 400 hodin výzkumu se zákazníky. Klára Brožovičová, Lucie Sikorová, Jana Hanfová a Anna Jančaříková z Proof&Reason za podpory Jana Junka sestavily stostránkovou studii použitelnosti e-shopů s 82 problémy rozdělené do třinácti částí. Studie si vyžádala přes čtyři sta hodin práce a je to na ní poznat. Jan Junek <a target="_blank" href="https://slideslive.com/39021034/customer-tales-400-hours-of-purchase-experience-research?ref=folder-143061">prezentoval studii na WebExpu</a> a <a target="_blank" href="https://cx-studie.proofreason.com/">stáhnout si ji můžete</a> výměnou za kontakty.Přestože to nebylo předmětem testování, některé <a target="_blank" href="https://www.linkedin.com/feed/update/urn:li:activity:7204477390658355200/">nákupy skončily už při hledání produktu</a> v daném e-shopu. Další problémy přineslo nedostatečné či dokonce žádné informování o přidání produktu do košíku, stejně jako nešťastné umístění tlačítka „Do košíku“.— Jan Junek & aliæ, CX v české e⁠-⁠commerceŠablona pro poptávku na web. <a target="_blank" href="https://www.reknisioweb.cz/i/144883878/linkodrom">Minule jsme tleskali</a> kanadským naklikávacím zadávacím dokumentacím a teď tu máme hezký příklad z domácích zásob. Petr Illek vyvěsil na web redakčního systému CSGOV <a target="_blank" href="https://www.csgov.cz/aktuality/poptavka-obecniho-webu">šablonu pro poptávku na obecní web</a>. Kostra poptávky velmi dobře poslouží komukoli, kdo potřebuje web.Mapování firemních procesů se Svěrákem. Jakub rád říká, že při naší designérské práci jen tak mimochodem zásadně ovlivníme podnikání svých zákazníků. Tomáš Svěrák na Linkedin popisuje, jak se svými klienty na začátku spolupráce <a target="_blank" href="https://www.linkedin.com/feed/update/urn:li:activity:7204462674426884096/">rozebírá firemní procesy</a>, aby pochopil jejich byznys: „Stane se, že je to ve firmě vůbec poprvé, kdy jsme proces nakreslili. Potom se dějou divy, když lidé ve firmě přijdou na to, jak rozdílně některé věci dělají. K tomu všemu stačí obvykle tabule, fixy a pár postitů.“Změna pořadí předvoleb má vliv na výši spropitného. Dima Melnik na Linkedin píše, že své oblíbené kavárně doporučil na platebním terminálu přehodit <a target="_blank" href="https://www.linkedin.com/feed/update/urn:li:activity:7203369154035208192/">pořadí předvoleného spropitného</a>. Namísto původního pořadí 10 %, 15 %, 20 % teď terminál nabízí předvolby v opačném pořadí: 20 %, 15 %, 10 %. Výsledkem je, že zákazníci začali místo 10% spropitného dávat 15%.Život s technologiemiSlash pages – tahle nerdovina je jak z konce devadesátých let, ale trenduje právě teď. Možná to nějak souvisí <a target="_blank" href="https://www.niemanlab.org/2022/12/this-is-the-year-of-the-rss-reader-really/">s návratem obliby newsletterů, RSS</a>, <a target="_blank" href="https://www.netguru.com/blog/what-are-static-site-generators">statických webů</a> a <a target="_blank" href="https://www.mightybytes.com/blog/leave-social-media/">s odklonem</a> od <a target="_blank" href="https://www.buzzfeed.com/meganeliscomb/why-people-quit-social-media">sociálních sítí</a>. Postupem času se ustálila praxe pro adresy některých webových stránek – říká se jim <a target="_blank" href="https://slashpages.net/">slash pages, stránky za lomítkem</a>. <a target="_blank" href="https://manuelmoreale.com/slashes">S pojmenováním </a>nejspíš přišel Manuel Moreale.I náš web má stránku na adrese <a target="_blank" href="https://reknisioweb.cz/about">/about</a>. Často díky konvenci ani nemusíte používat navigaci na stránce, abyste zjistili, že třeba RSS najdete na adrese <a target="_blank" href="https://reknisioweb.cz/feed">/feed</a>, mapu webu na adrese <a target="_blank" href="https://reknisioweb.cz/sitemap">/sitemap</a> a staré články na adrese <a target="_blank" href="https://reknisioweb.cz/archive">/archive</a>. A to jsme se o existenci těch stránek nijak nezasloužili; generuje je přímo Substack, odkud rozesíláme náš newsletter.Jak si lidé zase začali hýčkat osobní weby a rozrůstá se indie web, rozrůstá se také seznam stránek za lomítkem. Kromě už zmíněných se objevují nové. Třeba /now, /blogroll, /bookmarks, /colophon, /coffee nebo /chipotle. Krásnou ukázkou slash pages je například web Michaela Sasse <a target="_blank" href="https://shellsharks.com/slashes">ShellSharks.com</a>.Na čem právě pracujemeMartin oznámkoval poslední opozdilce ze svých designerských předmětů na VŠE, dopsal oponenturu k bakalářce a začaly mu prázdniny. 🎉<a target="_blank" href="https://medium.com/design-kisk/jedno-z-rizik-ai-kter%C3%A9-vid%C3%ADm-je-%C5%BEe-p%C5%99eskakuje-juniorn%C3%AD-pozice-jakub-goldmann-9fd20fd6b254">Na Médiu vyšel rozhovor</a> Matyáše Bureše s Jakubem: „Jedno z rizik, které vidím je, že AI přeskakuje juniorní pozice. Už teď, když vyzkoušíš ChatGPT, tak vyhodí spoustu blbostí, od kterých už se ale může člověk odpíchnout. Pokud se to ještě více zlepší, tak juniorní pozice začnou být zbytečně drahé.“Tip z naší knihyPosuzujte web podle toho, jak funguje, ne podle toho, jak vypadá.Divili byste se, kolik úspěšných a navštěvovaných webů vypadá nemoderně – třeba inzertní portál <a target="_blank" href="https://craigslist.org/">Craigslist</a> a u nás například <a target="_blank" href="https://www.bazos.cz/">Bazoš</a>. Nezaměřujte se jen na vzhled. Obchodní výkon je to hlavní.Nevyhnete se sdílení pracovních návrhů s kolegy. Pro ně bude mnohem těžší než pro vás nezaměřovat se na vzhled, ale na logické uspořádání. Pokud vám i koncept návrháři dodávají vizuálně propracovaný, vymyslete společně, jak nejlépe vysvětlit, že se ještě nejedná o finální design. Například přepnout do černobílé škály.A to je z druhého červnového zpravodaje <a target="_blank" href="https://reknisioweb.cz/">Řekni si o web</a> roku 2024 všechno. Před šedesáti lety byl na doživotí odsouzen muž, podle kterého se jmenuje <a target="_blank" href="https://www.youtube.com/watch?v=IRJR2psTGFg">Mandelův efekt</a>. Díky všem za feedback. Pokud pro nás máte nějaký tip, co příště vylepšit nebo udělat jinak, těšíme se.Hezký týden,Jakub Goldmann a Martin Kopta.Líbí se vám newsletter Řekni si o web? Přihlaste se k pravidelnému odběru do e-mailu nebo přes Substack. This is a public episode. If you would like to discuss this with other subscribers or get access to bonus episodes, visit <a href="https://www.reknisioweb.cz?utm_medium=podcast&utm_campaign=CTA_1">www.reknisioweb.cz</a>

Aplikace Youradio Talk

Návrat ke kořenům indie webu. Řekni si o web #23

Poslechněte si podcast