Štorm o efektivitě řemeslníka postavené proti komplexnosti agentury

František Štorm v Esejích o typografii píše:

„Když jsem se ucházel o zakázku na tzv. corporate identity jisté firmy, byl jsem pozván na jednání s konkurenční agenturou, které argumentovala docela správně, že jako jednotlivec nemůžu obsáhnout všechny náležitosti design manuálu, imageové kampaně, řídit inzerci, mediaplán a podobné velkolepé strategické kroky. … Já jsem ale přišel s tím, že nepotřebujeme vůbec žádný vyčerpávající manuál (…), potřebujeme vyřadit konkurenci rychlými kroky, pomocí jednoduchého, efektivního designu, který hravě obslouží každá sekretářka podle přednastavených digitálních předloh, a namísto statického loga potřebujeme rozdat funkční originální font do všech poboček a spustit elektronický obchod. Vyšlo to.”

Platí samozřejmě v typografii, designu, webdesignu a jakémkoliv oboru zabývajícím se komunikací.

První pohled na Baseline CSS

Potěší všechny, kdo od CSS frameworku očekávají hlavně dobrou typografickou vrstvu a nehledají nástroj pro prototypování nebo layoutování webů. Mezi takové patřím, pojďme jej rozbalit.

Jiný rytmus

Baseline se od ostatních (mně známých) liší hlavně principem vertikálního gridu. Blueprint a další jsou založeny na „přilepování prvků” k opakující se výšce řádku (line-height). Baseline jako jednotku vertikálního rytmu volí baseline, nebo-li česky účaří.

Typografové by k tomu asi mohli říct více po řemeslné stránce. Osobně můžu mluvit spíše o příjemnějším pocitu zejména v hezké provázanosti nadpisu první až třetí úrovně s následným textem.

A když necháme emoce stranou, můžeme říci, že v případě zarovnání na účaří bude pro kodéry jednodušší nalezení nechtěných odchylek.

Nalevo opět Blueprint, napravo Baseline:

Když se podíváme na celou vyrenderovanou stránku, vidíme že Baseline ztrácí svou eleganci u nadpisu 5. a 6. úrovně (ale kdo z vás je naposledy skutečně použil?), pak v případě použití divu uprostřed textového bloku (to taky není příliš častá situace).

Baseline se ve srovnání tváří ošklivě na formulářové prvky. On je hezké umí, ale musíte mu dodat zvláštní HTML kód. Ano, srovnání v případě formulářů ztrácí trochu smysl, ale pokud třeba prototypujete a nechcete upravovat HTML, hodí se to vědět.

HTML5 ano, IE6 ne

S Baseline sice dostanete i nějaký horizontální grid pro tvorbu layoutu, nicméně nemám pocit, že by na něj byl kladen důraz. Každopádně v balíku dostanete PSD s mřížkou a podporu nových prvků HTML5. Autor (Stéphane Curzi) se naopak rozhodl, že nebude trávit noci s laděním frameworku pro MSIE 6.

Baseline CSS je pro mě svou lehkostí jako základ pro stavbu uživatelského rozhraní webu velkou konkurencí Blueprintu. Budu si ale dávat pozor na možné rozdíly v prohlížečích, na které autor upozorňuje. Naopak bych ho nedoporučil pro prototypování. Tam raději sáhnu po Blueprintu, Bluetripu nebo Tripoli.

Na ose designér — kodér — programátor najde Baseline využití někde mezi designérem a kodérem.

sIFR ratios: proti “poskakování” obsahu stránky

Stránka při načítání flashových souborů sIFRu může “poskakovat”. Je to nepříjemné, zejména v případě kdy obsahuje sIFR nadpisů více.

Můžeme tomu pomoci co nejpodobnější specifikací velikosti písma pro HTML verzi a pro sIFR verzi. Lepších výsledků pak dosáhneme použitím sIFR ratios - převodníků mezi velikostí HTML a sIFR verze textu.

sIFR v debugovacím módu vypočte ratios sám, návod je na sIFR wiki.

Použití je pak v sifr-config.js například takové:

sIFR.replace(nazev_fontu, {
  selector: '#content h1',
  ratios: [7, 1.58, 8, 1.48, 10, 1.5, 14, 1.45, 17, 1.43, 20, 1.41, 23, 1.4, 29, 1.39, 38, 1.38, 40, 1.37, 43, 1.38, 58, 1.37, 66, 1.36, 67, 1.37, 95, 1.36, 96, 1.35, 98, 1.36, 99, 1.35, 103, 1.36, 104, 1.35, 105, 1.36, 107, 1.35, 108, 1.36, 110, 1.35, 111, 1.36, 1.35], 
  css: [
    '.sIFR-root {background-color: #ffffff; color: #333333; }',
  ],
});