CSS és la millor manera de construir dissenys de pàgines web
Aprendre a escriure dissenys CSS pot ser complicat, especialment si esteu familiaritzat amb l'ús de taules per crear dissenys de pàgines web de luxe. Però mentre HTML5 permet taules per al disseny, no és una bona idea.
Les taules no són accessibles
Igual que els cercadors, la majoria de lectors de pantalla llegeixen pàgines web en l'ordre que es mostren en HTML. I les taules poden ser molt difícils per a que els lectors de pantalla analitzin. Això és degut a que el contingut en un disseny de la taula, mentre que lineal, no sempre té sentit quan es llegeix d'esquerra a dreta i de dalt a baix. A més, amb taules niuades i diversos espais sobre les cel·les de la taula poden fer que la pàgina sigui molt difícil d'esbrinar.
Aquesta és la raó per la qual l'especificació HTML5 recomana contra taules per a la disposició i per què l'HTML 4.01 no ho permet. Les pàgines web accessibles permeten que més persones les utilitzin i que siguin la marca d'un dissenyador professional.
Amb CSS, podeu definir una secció com a pertanyent al costat esquerre de la pàgina però col·loqueu la darrera a l'HTML. A continuació, els lectors de pantalla i els motors de cerca llegiran les parts importants (el contingut) primer i les parts menys importants (navegació).
Les taules són complicades
Fins i tot si creeu una taula amb un editor web, les vostres pàgines web seran molt complicades i difícils de mantenir. A excepció dels dissenys de pàgines web més simples, la majoria de les taules de disseny requereixen l'ús de molts atributs i taules anidades.
La construcció de la taula pot semblar fàcil mentre ho feu, però necessiteu mantenir-lo. Sis mesos per sota de la línia pot ser que no sigui tan fàcil de recordar per què aniuu les taules o quantes cel·les estaven seguides i així successivament. A més, si manteniu pàgines web com a membre de l'equip, heu d'explicar a totes les persones com funcionen les taules o esperar que tinguin més temps quan hagin de fer canvis.
CSS també pot ser complicat, però manté la presentació separada de l'HTML i fa que sigui molt més fàcil de mantenir a la llarga. A més, amb el disseny CSS, podeu escriure un fitxer CSS i dissenyar totes les vostres pàgines. I quan vulgueu canviar el disseny del vostre lloc, simplement canvieu un fitxer CSS, i tot el lloc s'introdueix, ja no passa més per totes les pàgines, per tal d'actualitzar les taules per actualitzar el disseny.
Les taules són inflexibles
Tot i que és possible crear dissenys de taules amb amplades de percentatge, sovint són més lentes de càrrega i poden canviar dramàticament la forma en què es visualitza el disseny. Però si utilitzeu amplades especificades per a les vostres taules, acabeu tenint un disseny molt rígid que no es veurà bé en els monitors que tinguin un tamany diferent al vostre.
La creació de dissenys flexibles que es veuen bé en molts monitors, navegadors i resolucions és relativament fàcil. De fet, amb consultes de mitjans CSS, podeu crear dissenys independents per a diferents pantalles de mida.
Les taules anades carreguen més lentament que CSS per al mateix disseny
La forma més comú de crear dissenys fantàstics amb taules és "tabular" les taules. Això significa que una (o més) taula es col·loca dins d'una altra. Com més taules estiguin niades, més temps prendrà que el navegador web representi la pàgina.
En la majoria dels casos, un disseny de la taula utilitza més caràcters per crear que un disseny CSS. I menys caràcters significa menys per descarregar.
Les taules poden fer malbé l'optimització del motor de cerca
El disseny de la taula més comú té una barra de navegació a la part esquerra de la pàgina i el contingut principal de la dreta. Quan s'utilitzen taules, aquest (en general) requereix que el primer contingut que es mostri en HTML sigui la barra de navegació de l'esquerra. Els motors de cerca classifiquen pàgines basades en el contingut i molts motors determinen que el contingut que es mostra a la part superior de la pàgina és més important que un altre contingut. Així doncs, una pàgina amb navegació de l'esquerra apareixerà per primera vegada amb contingut que és menys important que la navegació.
Mitjançant CSS, podeu col·locar el contingut important primer en el vostre codi HTML i, a continuació, fer servir CSS per determinar on s'ha de col·locar en el disseny. Això significa que els motors de cerca veuran primer el contingut important, fins i tot si el disseny el situa més avall a la pàgina.
Les taules no sempre imprimeixen bé
Molts dissenys de taules no s'imprimeixen bé perquè són massa grans per a la impressora. Perquè, perquè siguin aptes, els navegadors retallaran les taules i imprimiran les seccions a continuació, resultant en pàgines molt desxiblades. De vegades, acabes amb pàgines que es veuen bé, però falta tot el costat dret. Altres pàgines imprimiran seccions en diversos fulls.
Amb CSS podeu crear un full d'estil separat només per imprimir la pàgina.
Les taules de disseny no són vàlides en HTML 4.01
L'especificació de l'HTML 4 estableix: "Les taules no s'han de fer servir purament com a mitjà per a distribuir el contingut del document, ja que això pot presentar problemes quan es fa als mitjans no visuals".
Per tant, si voleu escriure HTML 4.01 vàlid, no podeu utilitzar taules per al disseny. Només s'haurien d'utilitzar taules per a dades tabulars. Les dades tabulars generalment es veuen com quelcom que podeu mostrar en un full de càlcul o possiblement una base de dades.
Però HTML5 ha canviat les regles i ara les taules per al disseny, encara que no es recomana, ara són HTML vàlids. L'especificació HTML5 estableix: "Les taules no s'han d'utilitzar com a ajudes de disseny".
Com que les taules per al disseny són difícils per diferenciar els lectors de pantalla, com menciono anteriorment.
L'ús de CSS per col · locar i dissenyar les vostres pàgines és l'única forma d'HTML 4.01 vàlida per obtenir els dissenys que heu utilitzat per crear taules. I HTML5 també recomana aquest mètode.
Les taules de disseny poden impactar les vostres perspectives laborals
A mesura que més i més nous dissenyadors aprenen HTML i CSS, les vostres habilitats per crear dissenys de taules seran cada vegada amb menys demanda. Sí, és cert que els clients no solen dir-vos la tecnologia exacta que hauria d'utilitzar per construir les seves pàgines web. Però sí que us demanen coses com:
- Pàgines web accessibles: els dissenys que poden veure els lectors de pantalla estan sent obligats per molts països i les empreses troben l'accessibilitat cada dia més important.
- Pàgines web mantingudes: dissenys que poden portar amb ells, fins i tot si no els mantindreu en el futur.
- Dissenys flexibles: dissenys que funcionen en molts navegadors, resolucions i dispositius.
- Pàgines de descàrrega ràpida: la velocitat cada vegada és més important, fins i tot a SEO.
- Dissenys imprimibles: pàgines que imprimeixen sense scripts especials o pàgines addicionals.
Si no podeu lliurar el que demanen els clients, deixaran d'arribar a vostè per als dissenys, potser no avui, però potser l'any que ve o l'any següent. Realment es pot permetre que deixeu que la vostra empresa pateixi perquè no esteu disposat a començar a aprendre una tècnica que ha estat en ús des de finals de la dècada de 1990?
The Moral: Apreneu a utilitzar CSS
El CSS pot ser difícil d'aprendre, però val la pena l'esforç. No mantingueu les vostres habilitats d'estancament. Conegueu CSS i compileu les vostres pàgines web de la forma en què es volia construir, amb CSS per al disseny.