Adam Marčan
webdesigner

Pokusím se vám dostat pod kůži základní filozofii dobrého webdesignu! Tkví v jedné otřepané frází, kterou jste již určitě někde slyšeli – Oddělte formu od obsahu!… nic víc se od vás nechce! Co to ale znamená oddělit formu od obsahu?

Podívejte se na SexyPixely bez kaskádových stylů, tady máte odkaz. To co tam vidíte, je čisté HTML, čistý obsah, vše co tam je, má pro vás obsahovou hodnotu, nenutím vám v této verzi žádný vizuální vzhled, který bych sám definoval. Váš prohlížeč má v sobě, zakomponovány své vlastní styly, takzvaně defaultní (základní), pomocí kterých ostyluje HTML kód, nadpisy jsou velké, seznamy mají odrážky, odkazy jsou podtrhnuté a mají nastaveny barvy… dostanete tak syrovou stránku, bez jakéhokoliv zásahu mého grafického patlání.

Při nedodržení této filozofie se na stránce při vypnutých stylech stane, že vidíte najednou celou obrázkovou navigaci, dekorační obrázky a plno dalších kravin, které tam nepatří. Naučte se je proto dávat do kaskádových stylů, přiřaďte použitým HTML tagům třídy či identifikátory a na pozadí jim umístěte tyto dekorační vymazlenosti.

A komu tím prospějete? xD

• Sobě samotnému – pročistí se vám kód, bude přehlednější a budete se lépe orientovat, navíc nebudete muset vytvářet speciální tiskové styly…
• Handicapovaným – používají hlasové čtečky a jiné zařízení usnadňující jim prohlížení, pracují především s HTML a formátují je pomocí svých preferovaných sty­lů…
• Uživatelům – dostane se jim tak skvělá tisková verze stránky, na které budou mít opravdu jen to, o co stojí… navíc se jim zrychlí načítání stránek…
• Vyhledávačům, neboli zase sobě :o) – Vyhledávače vidí stránky, přesně tak jako v naší ukázce, se správně strukturovaným HTML kódem se pak snadno můžete posunout ve výsledcích vyhledávání více nahoru…

Pochopením této základní kodérské filozofie se posunete mnohem blíže k vysněnému profesionálnímu kódu. Jsou to právě tyto back-end záležitosti, které oddělují profesionály od amatérů.

Tak si to zopakujeme ještě jednou! Do HTML zapisujeme pouze obsah, všechno, co slouží k vizuálním orgasmům patří kam? … No přece do kaskádových stylů! Oddělíme tak formu od obsahu! Komu tím pomůžeme? VŠEM! 

CSS, filozofie, HTML, přístupnost, webdesign