Zadejte hledaný výraz...
Jakub Glos
Webtrh.cz
Vývoj webových stránek na WordPressu a proklientský přístup pro freelancery
Třídenní infromacemi nabitý prezenční + online kurz v Praze od Webtrhu pouze za 2 871 Kč
Více informací

Vertical rhythm – jak řešíte na webech?

mpph
verified
rating uzivatele
3. 4. 2017 23:13:03
Řešíte někdo VERTICAL RHYTHM v typografii a elementech webu? Používáte nějaké nástroje. Snažíme se vylepšit nástroj https://www.golden-egg.cz/resite-webech-vertical-rhythm/ a hledáme nápady...
3. 4. 2017 23:13:03
https://webtrh.cz/diskuse/vertical-rhythm-jak-resite-na-webech/#reply1271430
Petr Široký
verified
rating uzivatele
(26 hodnocení)
28. 4. 2017 23:53:45
Nepochopil jsem, kde se vzalo oněch 24 pixelů - když už, tak bych nikdy neřešil hodnotu v absolutních jednotkách, je to nesmysl, co když budeš mít takový rozměr fontu, u kterého řádkování 24 pixelů nebude vhodných? Přijde mi to jako nepochopení podstaty daného principu.
Používám line-height 1.4 či 1.5 a to považuji za optimální. Jinak o určitý rytmus v toku obsahu u designů by měl podvědomně usilovat snad každý designér, ale čím víc různých elementů na stránce, tím méně reálné je použití jednoho jednoduchého pravidla. Proto se tohle asi daleko víc využívá u tiskovin, protože je snadnější to definovat jako praktiku. Obecně používání vhodného prázdného prostoru mezi obsahem a elementy webu je věc, kterou se každý designér učí sám a různí lidé ji zvládají na různé úrovni.
// Na webu https://www.golden-egg.cz/ je tahle praktika hodně nezvládnutá. Od pohledu špatné odsazení, řádkování a příliš různých nahodilých stylů - designér či spíše kodér to nemá moc v oku :)
28. 4. 2017 23:53:45
https://webtrh.cz/diskuse/vertical-rhythm-jak-resite-na-webech/#reply1271429
mpph
verified
rating uzivatele
30. 4. 2017 20:51:23
A jak budes resit u elementu kde je vice grafickych elementu pohromade bez textu? Podle me je vhodnejsi vyuzit 24px a texty prizpusobit (velikost). Web golden-egg.cz neni odladeny na vertical rhythm, je 2 roky stary, ale to co pises nejak na svem webu mas zcela jinak :). Ale i tak diky za nazor. https://ibb.co/g8wTJ5
30. 4. 2017 20:51:23
https://webtrh.cz/diskuse/vertical-rhythm-jak-resite-na-webech/#reply1271428
Petr Široký
verified
rating uzivatele
(26 hodnocení)
30. 4. 2017 22:24:59
Já jsem o tom nenapsal pidičlánek (či spíše zmínku v novinkách) a můj web tohle neprezentuje, pokud se bavíme o mém portfoliu, které je mimo jiné mnohem starší než 2 roky. Ty na svém webu propaguješ jistou věc jako součást systému, ten web to tedy také prodává, nebo v tomto případě naopak - přišel jsi s tím ty, nabízíš to lidem, tak je snad logické očekávat, že daný web to bude dobře reprezentovat, což nedělá.
Přizpůsobovat velikost textu fixní výšce řádku je úplně opačně, než by to mělo logicky být, pokud jsem to tedy správně pochopil. Nikdo to takto nedělá a ani by nedělal. A znovu se zeptám, odkud přichází těch magických 24 pixelů, nenacházím rozumný důvod.
A jak budes resit u elementu kde je vice grafickych elementu pohromade bez textu?
Ne fixně, ale budu respektovat rozměry těch elementů a podle toho jim přiřadím odpovídající odsazení do určité míry. Jak jsem psal, nevidím velký smysl ve vertikálním rytmu mimo velké bloky textu a ještě jsem neslyšel argument, proč by to bylo rozumné.
Přijde mi, že jsi někde na webu narazil na termín a pokusil ses ho špatně aplikovat - našel jsem si pár článků a všechny se týkají čistě typografie, ty to chceš aplikovat na řazení obsahových prvků, což je dle mě od základu špatné uvažování, protože pak děláš vlastně takový vertikální grid, což u webů a speciálně dnes (a ne před 15 lety, kdy byly mobilní weby v kolébce) není rozumná technika.
Takže to asi není názor, co bys raději slyšel, ale já za sebe v pozici člověka, který se navrhování webů věnuje a troufám si tvrdit, že do toho trochu vidím, tohle prostě považuji za blbost.
// Kdyby někoho zajímalo, velmi dobrý článek o vertikálním rytmu a jak ho používat v praxi.
30. 4. 2017 22:24:59
https://webtrh.cz/diskuse/vertical-rhythm-jak-resite-na-webech/#reply1271427
mpph
verified
rating uzivatele
1. 5. 2017 00:35:24
vždy se přesvědčím "s kým mám tu čest". Nerad se dohaduji s lidmi, kteří vědí vše nejlépe, ale jen na diskuzních fórech :). Tak jsem se podíval na tvůj web na mobilu (nebyl jsem u PC) https://ibb.co/g8wTJ5 a rytmus žádný :).
Tvůj problém je, že nad tím přemýšlíš pouze v typografii, ale web není jen typografie, ale i fotografie a symboly. Je nutné, aby vertical rhythm dodržoval každý element webu. Proto je lepší využívat grid s 24px a vše přizpůsobit, nikde jsem nepsal fixní výšce řádku, ale je to o umísťování do určitého rytmu, kde vodítkem jsou linie po 24px viz článek https://zellwk.com/blog/why-vertical-rhythms/ ... takže si umisťuje každý jednotlivé elementy dle pravidel vertical rhytm, ale golden ratio. Je to ještě v plenkách, to uznávám, ale když vidím ty šílenosti co vznikají, tak tato funkce, alespoň pomůže dát určitý řád.
1. 5. 2017 00:35:24
https://webtrh.cz/diskuse/vertical-rhythm-jak-resite-na-webech/#reply1271426
Opakuji, můj web je starý X let (což je spíše řečeno co se typografie týče, ta pokulhává podobně jako tvůj web) a já na rozdíl od tebe v tohle nevěřím jako reálnou, použitelnou techniku. Takže je mi jedno, jestli ti rozdělení obsahu nevychází na vertikální grid, protože ten grid ničemu nepomáhá.
Je nutné, aby vertical rhythm dodržoval každý element webu.
Nesmysl. To si myslíš ty a nikdo jiný, a stále jsi nevysvětlil, proč k tomu je důvod. Prošel jsem si zkusmo 10 článků z googlu a všude se věnují typografii. To nejsem já, to jsou všichni, co o tom mluví :) Ty jsi jediný, kdo to zkouší aplikovat úplně jinak.
Proto je lepší využívat grid s 24px a vše přizpůsobit, nikde jsem nepsal fixní výšce řádku, ale je to o umísťování do určitého rytmu, kde vodítkem jsou linie po 24px viz článek https://zellwk.com/blog/why-vertical-rhythms/
A četl jsi ten článek? Uvádí to číslo jako příklad, nikde neříká, že je to z nějakého důvodu důležité. Ty s tím operuješ jako s konkrétním údajem, podle kterého zřejmě ladíš vše ostatní, měl bys pro to mít velmi dobrý důvod. Teď do toho začínáš plést i zlatý řez, takže já raději končím, tohle nemá cenu, protože jsem se stále nedozvěděl ani základní důvod, proč by se tohle mělo aplikovat na celý web a ne na typografii.
// Nezlob se na mě, že jsem se do tebe pustil, ale nemám rád tenhle typ dohadování, kdy někdo představí hodně odvážné pojetí věci, která se obecně používá jinak, nedokáže to obhájit a poukazuje na jiné, když on sám s tím přišel.
Nerad se dohaduji s lidmi, kteří vědí vše nejlépe, ale jen na diskuzních fórech :)
To jsme na tom stejně. Akorát já jsem se snažil poskytnout čistě věcné argumenty, ty jsi se zmohl jen na to mi říct, že můj web tyto "požadavky" nesplňuje.
1. 5. 2017 00:56:31
https://webtrh.cz/diskuse/vertical-rhythm-jak-resite-na-webech/#reply1271425
mpph
verified
rating uzivatele
1. 5. 2017 01:21:16
proč na celý web? Protože vše se vším souvisí a na texty navazují buttony, fotky, ikony jako např. zde https://cdn-images-1.medium.com/max/1600/1*Re5otU7zVm6c3Q0NX3srYw.png i zde je nutné mít vertikální rytmus, aby celek byl vnímám lépe. Zde je článek https://medium.com/@steida/css-in-js-the-argument-refined-471c7eb83955 a snažíme se připravit systém tak, aby co nejvíce pomohl při sestavování konceptu.
Ano zlatý řez je potřeba také zapojit :), to že ti to uniká je zase tvůj problém, protože je důležité kde v jakém místě je umístěn bod zájmu. V jakým poměru bude fotka a k ní text box. No a to znovu souvisí s celým konceptem webu, umístění H1 atd.
1. 5. 2017 01:21:16
https://webtrh.cz/diskuse/vertical-rhythm-jak-resite-na-webech/#reply1271424
Pro odpověď se přihlašte.
Přihlásit