CSS je najlepší spôsob, ako vytvoriť návrhy webových stránok
Naučiť sa písať rozloženie CSS môže byť zložité, najmä ak ste oboznámení s používaním tabuliek na vytvorenie fantázie rozloženia webových stránok. Ale zatiaľ čo HTML5 umožňuje tabuľky pre usporiadanie, nie je to dobrý nápad.
Tabuľky nie sú prístupné
Rovnako ako vyhľadávacie nástroje, väčšina čítačiek obrazovky číta webové stránky v poradí, v akom sú zobrazené v jazyku HTML. A tabuľky môžu byť pre čitateľov obrazovky veľmi ťažké analyzovať. Je to preto, že obsah v usporiadaní tabuľky, aj keď je lineárny, nie vždy má zmysel pri čítaní zľava doprava a zhora nadol. Plus, so vnorenými tabuľkami a rôznymi rozpätiemi na stôl bunky môže urobiť stránku veľmi ťažké pochopiť.
To je dôvod, prečo špecifikácia HTML5 odporúča proti tabuľkám pre rozloženie a prečo HTML 4.01 to nepovoľuje. Dostupné webové stránky umožňujú viac ľudí, aby ich používali a sú značkou profesionálneho dizajnéra.
Pomocou služby CSS môžete definovať sekciu ako patriacu na ľavej strane stránky, ale umiestniť ju naposledy v HTML. Potom čítače obrazovky a vyhľadávacie nástroje prečítajú najdôležitejšie časti (obsah) prvé a menej dôležité časti (navigácia) naposledy.
Tabuľky sú zložité
Dokonca aj keď vytvoríte stôl s webovým editorom, vaše webové stránky budú stále veľmi zložité a ťažko udržiavané. Okrem najjednoduchších návrhov webových stránok vyžaduje väčšina rozložených tabuliek použitie množstva atribútov a vnorených tabuliek.
Vytváranie tabuľky sa môže zdať ľahké, keď to robíte, ale potom ju musíte udržiavať. Po šiestich mesiacoch na začiatku nemusí byť tak ľahké zapamätať, prečo ste vložili tabuľky alebo koľko buniek bolo v rade a tak ďalej. Okrem toho, ak udržujete webové stránky ako člen tímu, musíte každému vysvetliť, ako fungujú tabuľky, alebo očakávať, že budú potrebovať ďalší čas, keď potrebujú vykonať zmeny.
CSS môže byť tiež komplikované, ale zachováva prezentáciu oddelene od HTML a uľahčuje ju dlhodobú údržbu. Navyše s rozložením CSS môžete napísať jeden súbor CSS a štýlovať všetky vaše stránky tak, aby vyzerali. A keď chcete zmeniť rozloženie vašich stránok, jednoducho zmeníte jeden súbor CSS a celý web chnges - už viac neprechádza každá strana naraz, aby ste aktualizovali tabuľky a aktualizovali rozloženie.
Tabuľky sú nepružné
Aj keď je možné vytvoriť rozloženie tabuľky s percentuálnymi šírkami, často sa načítajú pomalšie a môžu výrazne zmeniť spôsob zobrazenia vášho rozloženia. Ak však použijete špecifikované šírky pre svoje tabuľky, skončíte s veľmi tuhým rozložením, ktoré nebude vyzerať dobre na monitorech, ktoré sú dimenzované odlišne od vašich vlastných.
Vytváranie flexibilných rozložení, ktoré vyzerajú dobre na mnohých monitoroch, prehliadačoch a rozlíšeniach, je pomerne jednoduché. V skutočnosti s dotazy médií CSS môžete vytvoriť samostatné návrhy pre rôzne veľkostné obrazovky.
Vnorené tabuľky sa načítavajú pomalšie ako CSS pre rovnaký návrh
Najbežnejšou cestou k vytvoreniu fantazijných rozvrhov s tabuľkami je "hniezdiť" tabuľky. To znamená, že jedna (alebo viac) tabuľka je umiestnená v inej. Čím viac tabuliek sú vnorené, tým dlhšie bude trvať, kým webový prehliadač vykreslí stránku.
Vo väčšine prípadov rozloženie tabuľky používa viac znakov na vytvorenie ako dizajn CSS. A menej znakov znamená menej na stiahnutie.
Tabuľky môžu poškodiť optimalizáciu pre vyhľadávače
Najčastejšie vytvorené rozloženie tabuľky má na ľavej strane stránky navigačnú lištu a hlavný obsah vpravo. Pri používaní tabuliek toto (všeobecne) vyžaduje, aby prvý obsah, ktorý sa zobrazuje v HTML, bol ľavý navigačný panel. Vyhľadávače kategorizujú stránky na základe obsahu a mnohé motory určujú, že obsah zobrazený v hornej časti stránky je dôležitejší než iný obsah. Zdá sa teda, že stránka s navigáciou vľavo bude mať menej dôležitý obsah než navigácia.
Pomocou CSS môžete najskôr vložiť dôležitý obsah do vášho HTML a potom pomocou CSS určiť, kde sa má umiestniť do dizajnu. To znamená, že vyhľadávacie nástroje najdôležitejší obsah najprv uvidia, aj keď ich dizajn umiestni na stránku nižšie.
Tabuľky nie vždy tlačia dobre
Mnoho návrhov stolov netlačí, pretože sú pre tlačiareň príliš široké. Preto, aby sa stali vhodnými, budú prehliadače rezať tabuľky a tlačiť sekcie nižšie, čo vedie k veľmi rozdielnym stránkam. Niekedy skončíte so stránkami, ktoré vyzerajú dobre, ale chýba celá pravá strana. Ďalšie stránky vytlačia sekcie na rôznych hárkoch.
Pomocou služby CSS môžete vytvoriť samostatný štýl hárkov pre tlač stránky.
Tabuľky pre rozloženie sú neplatné v jazyku HTML 4.01
V špecifikácii HTML 4 sa uvádza: "Tabuľky by sa nemali používať čisto ako prostriedok na usporiadanie obsahu dokumentu, pretože to môže predstavovať problémy pri vykresľovaní na iné ako vizuálne médiá."
Ak chcete napísať platný kód HTML 4.01, nemôžete používať tabuľky na rozloženie. Mali by ste používať iba tabuľky pre tabuľkové údaje. A tabuľkové dáta zvyčajne vyzerajú ako niečo, čo by ste mohli zobraziť v tabuľke alebo prípadne v databáze.
Ale HTML5 zmenil pravidlá a teraz tabuľky pre rozloženie, zatiaľ čo neodporúčané, sú teraz platné HTML. V špecifikácii HTML5 sa uvádza: "Tabuľky by sa nemali používať ako pomôcky na usporiadanie."
Pretože tabuľky pre usporiadanie sú pre čítačky obrazovky ťažké diferencovať, ako som uviedol vyššie.
Použitie CSS na pozíciu a rozloženie vašich stránok je jedinou platnou cestou HTML 4.01 na získanie návrhov, ktoré ste použili pri vytváraní tabuliek. A HTML5 dôrazne odporúča aj túto metódu.
Tabuľky rozloženia môžu ovplyvniť vaše pracovné vyhliadky
Ako sa čoraz viac nových dizajnérov učia HTML a CSS, vaše zručnosti pri zostavovaní stolových tabuliek budú čoraz menej náročné. Áno, je pravda, že zákazníci zvyčajne neuvádzajú presnú technológiu, ktorú by ste mali použiť na vytvorenie svojich webových stránok. Ale oni vás žiadajú o veci ako:
- Dostupné webové stránky: návrhy, ktoré si môžu prezerať čítačky obrazovky, sú poverené mnohými krajinami a korporácie nájdu dostupnosť stále dôležitejšie každý deň.
- Udržateľné webové stránky: návrhy, ktoré si s sebou môžu vziať, aj keď ich nebudete v budúcnosti udržiavať.
- Flexibilné vzory: návrhy, ktoré fungujú v mnohých prehliadačoch, rozlíšeniach a zariadeniach.
- Rýchle sťahovanie stránok: rýchlosť je čoraz dôležitejšia, dokonca aj pre SEO.
- Tlačené vzory: stránky, ktoré tlačia bez špeciálnych skriptov alebo navyše.
Ak nemôžete doručiť to, čo klienti požadujú, prestane prichádzať k vám na návrhy, možno nie dnes, ale možno budúci rok alebo rok neskôr. Môžete si skutočne dovoliť nechať svoje podnikanie trpieť, pretože nie ste ochotní začať učiť sa technika, ktorá sa používa od konca 90. rokov?
Morál: Naučte sa používať CSS
CSS môže byť ťažké sa naučiť, ale všetko stojí za to. Nenechávajte svoje zručnosti stagnovať. Naučte sa CSS a vytvorte si webové stránky tak, ako boli určené na vytvorenie - pomocou CSS pre usporiadanie.