Juan Ortega

Consultor en marketing digital & comercio electrónico

RSS

Errores de CSS que no deberías de cometer

El otro día pasando por el sitio de NetTus (lo cual recomiendo que la visiten), me encontré con un artículo que me llamó mucho la atención,  este se titula Are You Making These 10 CSS Mistakes? en el cual listan una serie errores básicos que cometemos muchos diseñadores a la hora de maquetear con CSS, ya sea por falta de conocimientos o simplemente por estar de boludos xD.

A continuación les dejo la lista publicada en ese sitio, con una explicación de mi parte, y por último añadiré algunos errores que he cometido y que he visto que cometen muchos por acá.

Ignorar a los Navegadores (Incompatibilidad)

A como todos saben estamos en las vísperas de una 2 guerra de navegadores (IE, Firefox, Google Chrome, Safari, Opera),  y todos estos renderizan a su propia manera, bueno en algunos la diferencia es casi mínima y a los ojos de un simple mortal es nula, pero en el caso particular del IE (Internet Explorer) son otros 100 pesos, este navegador es el peor que he visto, cada versión de IE renderiza a su manera, y diseñar exclusivamente para él es ponerse la soga al cuello.

El pecado que comenten muchos de aquí, es diseñar exclusivamente para IE,  dejando desamparados a la mayoría de usuarios que utilizan otros navegadores,y para no hacerles tan largo el cuento, tu sitio no será accesible  y perderás muchos visitantes ya que la experiencia al visitar tu sitio será un pain in the ass!!.

Para evitar esto, te aconsejo que verifiques durante toda la etapa del desarrollo la compatibilidad del sitio en diferentes Navegadores , puedes utilizar el servicio de Browsershots para darte una imagen de tu sitio en los diferentes navegadores, de igual forma Firefox tiene una extensión llamada IE tab donde emula la renderización del IE matando 2 pájaros de un tiro, o como casi siempre el problema de todos diseñador es el maldito IE, te podes instalar el IE Tester donde emula las versiones de IE 5.5, 6, 7 y 8 BETA.

No tomar en cuenta las resoluciones pequeñas

El autor del articulo original lo considera como un error garrafal no tomar en consideración las resoluciones mínimas ej: 800×600. Yo no estoy totalmente de acuerdo, ya que esta resolución esta prácticamente muerta,  pero si lo mas aconsejable es que consultes las estadísticas de tus visitantes, y verifiques todas las resoluciones de pantalla que tienen ellos, y si tienes una gran cantidad de visitantes cuya resolución sea de 800×600 es probable que tengas que adaptar un poco tu sitio. Existen varias soluciones de Javascript que te permiten identificar la resolución del navegador y  cargar diferentes archivos css de acuerdo a estos.

No utilizar los Frameworks de CSS

Otro punto que puedo diferir con el autor del artículo, pa los que no saben que son los Frameworks de CSS, son archivos de CSS ya hechos, en otras palabras son pequeños templates, listo para ser utilizados. Entre los fanáticos de los frameworks aclaman que utilizarlos tiene sus ventajas, ya que evitan programar el código de CSS desde cero, te ahorras tiempo, y son reutilizables. Es cierto estas ventajas son factores importantes que te pueden sacar del clavo, pero por ejemplo a mi me gusta estar en control de todo el layout del sitio, y sobre todo aprendo mucho cada vez que programo el css desde cero.

No utilizar nombres de clases genéricas

Les tengo que ser sincero, este es el error #1 que cometía muchas veces y que ahora trato de no cometerlo, hay veces que por el tiempo comenzas a nombrar las clases o ids de los elementos, y colocas unos nombres bien extraños o bien pajistas, que a la larga después de un cierto tiempo andas perdido en el espacio preguntándote donde jodidos ocupaste esa clase.

Lo mejor es nombrar los elementos de css según su funcionalidad en el sitio y no por su diseño, no es lo mismo tener una clase llamada “rojo” que una llamada “enlacesExternos”. Por lo general utilizo algunos nombres genéricos como: menu, sidebar, header, menusec, wrapper, footer.

No validar el código HTML

Antes me quebraba el coco, tratando de que los divs se me acomodaran, y utilizaba una cierta cantidad de propiedades del css para componerlos, y nada!, cual era el problema?? una etiqueta mal cerrada, PUFF!! (Al estilo condorito). Ahora utilizo el plug in de Firefox para debug el css y ver si es el código HTML es el que me  esta dando el problema- Por eso adoro Firefox!!.

No validar el código CSS

Si vamos a validar el código HTML es necesario también validar todo el código del CSS, en el podemos encontrar pequeños errores e inconsistencias en nuestro código. Para validar el css, chequense el validador CSS de la W3C. Este validador es bien riguroso, y hay veces donde los errores que muestra son un poco confuso, bueno al menos para mi :(.

Utilizar imágenes exageradamente grandes como fondo (Sindrome BN)

Existen ocasiones donde los diseñadores ocupan unas imágenes de fondo bien grandes como parte del layout del sitio, tampoco es pecado usarlos, existen buenos ejemplos por la web. No obstante Existen ocasiones donde el fondo son imágenes degrados, y colocan la gran imagen de fondo, causandola que sea mas pesada, donde se puede perfectamente tener 1px ya sea de widht o height  y darle la propiedad de background: repeat-x o repeat-y dependiendo el caso y listo.

En WebdsignerWall existe un interesante artículo sobre como manipular las css con imágenes de fondo de gran tamaño.

Usar inline CSS

Inline css es cuando insertamos código dentro del código html, ej:

<a href=“holamundo.html” style=“float: right; color: rgb(51, 51, 51);”>Hola Mundo</a>

El chiste de utilizar las CSS, es que separemos el código (XHTML) del diseño (CSS), por lo que utilizar Inline CSS no vamos por buen camino, y se nos haría difícil al momento de querer modificarlo.

El único caso donde recomiendo utilizar CSS es a la hora de enviar boletines de noticias a los correos de los usuarios- Esto tema lo cubriré en un prox. post.

Utilizar muchos archivos CSS

Es de ciencia cierta que la mejor manera de administrar el diseño de un sitio bien grande, es utilizar varios archivos CSS  lo cuales son importados desde un archivo CSS Master. Esta es una forma de optimizar la administración del CSS haciéndolo más manejable. No obstante algunos diseñadores, ocupan esta técnica muy exageradamente, donde importan un archivo de CSS para cada cosa, provocando que el navegador haga demasiados request al servidor, por lo que hace más lento el sitio.

Si vas utilizar esta técnica divide tus archivos CSS, con un orden funcional ej: un css para la tipografia, otro para los hacks, otro para el layout, entre otros. pero ojo!!  no abuses mucho.

Errores que he cometido

Tal y como manifesté al inicio de este post, existen algunos errores que he cometido a lo largo de mi ilustre carrera :), y que he observado que se cometen muchos. Aquí les va mi lista

No utilizar los CSS Resets

Para quien no lo sabe, casi prácticamente todas las etiquetas (ej: las etiquetas h), traen valores por defectos en algunas de sus propiedades, causando hay veces que nuestro diseño no se vea deacorde al wireframe que hayamos creado, por tal razón existen reseteadores de CSS que restauran a cero todas las propiedades de las etiquetas.  Es una técnica muy utilizada y útil.

Recomiendo el Eric Meyers CSS Reset, aunque existen algunos otros en la web

No utilizar los Shorthands

Shorthands son como los shortcuts del css, existen algunas propiedades en CSS donde se pueden reducir la forma de declaración de cada una de ellas.

Por ejemplo tenemos la propiedad padding, la podemos declarar en 2 formas diferentes:

margin-top: 1em; margin-right:0; margin-bottom: 2em; margin-left:0;(Notación estándar)

margin: 1em 0 2em 0 (Notación Shorthand)

Ambos ejemplos cumplen con la misma función, lo único que varía, es la forma de declararlas, los shorthands sin duda alguna son de mucha utilidad ya que te ayudan a reducir considerablemente el tamaño del archivo CSS.

Entre las propiedades del css que se puede utilizar shorhands tenemos : background, border, border-color, border-style, border sides (border-top, border-right, border-bottom, border-left), border-width, font, list-style, margin, outline, and padding

No utilizar los comentarios

No muchos podrán coincidir con esta, ya que obviamente dependiendo de la frecuencia con que comentas una propiedad puede causar que tu css crezca de tamaño. No obstante por lo menos en mi caso lo utilizo para hacer algunos comentarios que son de gran importancia y que tienden a incidir considerablemente en el diseño del sitio, de igual forma ocupo los comentarios para realizar la estructura de todos los bloques de css que voy agrupando, algo así como un mapa del sitio para el CSS ej:

ESTRUCTURA
-------------------------------------------------
1. =GLOBAL                5. =FORMS
2. =DIVSLAYOUT 	          6. =TABLES
3. =HEADERS
4. =MENUS
   ----------------------------------------------------*/

No utilizar a Firefox como herramienta de debug

Al momento que tocaba debug grandes cantidades de código, me era imposible hacerlo rápidamente y para que, le soy sincero, hasta canas verdes me sacaron!!. Pero gracias a los maravillosos plug ins de la comu de Mozilla firefox,  se me ha hecho el trabajo más fácil. Los plug ins a los que me estoy refiriendo son:Firebug, y Web Developer con estos babies puedo  ver, analizar y testear todo tu código tanto css como xhtml de forma rápida y eficiente, asi que es un MUST para todos los diseñadores y desarrolladores.

Bueno eso sería todo por el momento, se que para algunos son errores de novatos otros no relevantes, pero venga!!, que en este pais no todos son duchos en esta materia.





  • Excelente post,, cierto firebug y web developer son la bestia