CSS je nejlepší způsob, jak vytvořit návrhy webových stránek
Naučit se psát rozvržení CSS může být obtížné, zvláště pokud jste obeznámeni s použitím tabulek, abyste vytvořili rozvržení webových stránek. Ale zatímco HTML5 umožňuje tabulky pro rozložení, není to dobrý nápad.
Tabulky nejsou přístupné
Stejně jako vyhledávače většina čteček obrazovky čte webové stránky v pořadí, v jakém jsou zobrazeny v HTML. A tabulky mohou být pro čtečky obrazovky velmi těžké analyzovat. Je to proto, že obsah v tabulkovém uspořádání, ačkoli lineární, nemá vždy smysl, když se čte zleva doprava a zhora dolů. Navíc se vnořenými tabulkami a různými rozpětím na stole mohou buňky velmi těžko zjistit.
To je důvod, proč specifikace HTML5 doporučuje proti rozložení tabulek a proč to HTML 4.01 nepovoluje. Dostupné webové stránky umožňují více lidí, aby je používaly, a jsou známkou profesionálního designéra.
Se službou CSS můžete definovat část jako součást levé strany stránky, ale poslední místo ji umístit do HTML. Potom budou čtenáři obrazovky a vyhledávací stroje číst nejdůležitější části (obsah) nejdříve a méně důležité části (navigace) naposledy.
Tabulky jsou obtížné
Dokonce i když vytvoříte tabulku s webovým editorem, vaše webové stránky budou stále velmi komplikované a obtížně udržitelné. Kromě nejjednodušších návrhů webových stránek vyžaduje většina rozložení tabulek použití mnoha atributů a vnořených tabulek.
Vytvoření stolu se může zdát snadné, když to děláte, ale pak ho musíte zachovat. O šest měsíců po řadě nemusí být tak snadné si vzpomenout, proč jste vnořili tabulky nebo kolik buněk bylo v řadě a tak dále. Kromě toho, pokud udržujete webové stránky jako člen týmu, musíte každému vysvětlit, jak fungují tabulky, nebo očekávat, že budou potřebovat další čas, když budou muset provést změny.
CSS může být také komplikované, ale udržuje prezentaci odděleně od HTML a usnadňuje její údržbu v dlouhodobém horizontu. Navíc pomocí rozvržení CSS můžete napsat jeden soubor CSS a stylovat všechny vaše stránky tak, aby vypadaly takto. A když chcete změnit rozvržení svých stránek, jednoduše změníte jeden soubor CSS a celý web chnges - už nebudete procházet každou stránku po jedné, abyste aktualizovali tabulky a aktualizovali rozvržení.
Tabulky jsou nepružné
I když je možné vytvářet rozvržení tabulky s procento šířky, jsou často pomalejší k načtení a mohou dramaticky změnit způsob, jak vypadá vaše rozložení. Ale pokud použijete specifické šířky pro vaše tabulky, skončíte s velmi tuhým rozložením, které nebude vypadat dobře na monitorech, které jsou dimenzovány jinak než vaše vlastní.
Vytváření flexibilních rozvržení, které vypadají dobře na mnoha monitorech, prohlížečích a rozlišeních, je relativně snadné. Ve skutečnosti, s dotazy médií CSS, můžete vytvořit samostatné návrhy pro různé obrazovky velikosti.
Vnořené tabulky se načítají pomaleji než CSS pro stejný návrh
Nejčastějším způsobem, jak vytvořit fantazii s tabulkami, je tabulka "hnízdo". To znamená, že jedna (nebo více) tabulka je umístěna uvnitř jiného. Čím více tabulek jsou vnořeny, tím déle trvá, než webový prohlížeč vykreslí stránku.
Ve většině případů rozložení tabulky používá více znaků než návrh CSS. A méně znaků znamená méně stahování.
Stoly mohou ublížit Search Engine Optimization
Nejčastějším uspořádáním tabulky je navigační lišta na levé straně stránky a hlavní obsah vpravo. Při použití tabulek toto (obecně) vyžaduje, aby první obsah, který se v HTML zobrazuje, byl levý navigační panel. Vyhledávače kategorizují stránky na základě obsahu a mnoho motorů určuje, že obsah zobrazený v horní části stránky je důležitější než jiný obsah. Takže stránka s levou navigací nejprve bude mít obsah, který je méně důležitý než navigace.
Pomocí CSS můžete nejdříve vkládat důležitý obsah do vašeho HTML a pak pomocí CSS určit, kde by měl být umístěn v návrhu. To znamená, že vyhledávače uvidí nejdůležitější obsah, a to i v případě, že návrh umístí dolů na stránku.
Tabulky ne vždy tisknout dobře
Mnoho návrhů stolů nevytiskne dobře, protože jsou pro tiskárnu příliš široké. Aby se tak stalo, prohlížeče budou tabulky vypínat a tisknout níže, což vede k velmi nesourodým stránkám. Někdy skončíte se stránkami, které vypadají dobře, ale chybí celá pravá strana. Jiné stránky budou tisknout oddíly na různých listech.
Pomocí služby CSS můžete vytvořit samostatný stylový list pouze pro tisk stránky.
Tabulky pro rozložení jsou neplatné v HTML 4.01
Specifikace HTML 4 uvádí: "Tabulky by neměly být používány čistě jako prostředek k rozvržení obsahu dokumentu, protože to může představovat problémy při vykreslování na neviditelná média."
Takže pokud chcete napsat platný HTML 4.01, nemůžete použít tabulky pro rozložení. Měli byste používat tabulky pouze pro tabulková data. Tabulkové údaje obecně vypadají jako něco, co byste mohli zobrazit v tabulce nebo případně v databázi.
Ale HTML5 změnil pravidla a nyní tabulky pro rozvržení, zatím co se nedoporučuje, jsou nyní platné HTML. Specifikace HTML5 uvádí: "Tabulky by se neměly používat jako pomůcky pro rozvržení."
Protože tabulky pro rozložení jsou pro čtečky obrazovky obtížné rozlišovat, jak jsem zmínil výše.
Použití CSS k umístění a rozvržení vašich stránek je jediným platným způsobem HTML 4.01, jak získat návrhy, které jste použili k vytvoření tabulek. A HTML5 také důrazně doporučuje tuto metodu.
Tabulky pro rozvržení mohou ovlivnit vaše pracovní vyhlídky
Jak se stále více nových návrhářů naučí HTML a CSS, vaše dovednosti při sestavování tabulek budou stále méně a méně náročné. Ano, je pravda, že zákazníci obvykle neříkají přesnou technologii, kterou byste měli použít k vytváření svých webových stránek. Ale oni vás žádají o věci jako:
- Dostupné webové stránky: návrhy, které lze prohlížet čtenáři obrazovky, jsou pověřovány mnoha zeměmi a podniky vyhledávají přístup každým dnem stále důležitější.
- Údržné webové stránky: návrhy, které mohou s sebou vzít, i když nebudete v budoucnu zachovávat.
- Flexibilní návrhy: návrhy, které fungují v mnoha prohlížečích, rozlišeních a zařízeních.
- Rychlé stahování stránek: rychlost je čím dál důležitější, dokonce i pro SEO.
- Tiskové návrhy: stránky, které tisknou bez zvláštních skriptů nebo stran.
Nemůžete-li doručit to, co zákazníci požadují, přestanou se k vám prodávat, možná ne dnes, ale možná příští rok nebo rok později. Můžete opravdu dovolit nechat své podnikání trpět, protože nejste ochotni začít učit se technika, která byla používána od pozdních devadesátých lét?
The Moral: Naučte se používat CSS
CSS může být obtížné se učit, nicméně stojí za to úsilí. Nesnažte se stagnovat. Přečtěte si CSS a vytvořte své webové stránky tak, jak byly navrženy tak, aby byly vytvořeny - s rozložením CSS.