Los errores más recurrentes al diseñar una web

Un pequeño compendio de errores al diseñar una página web que comúnmente les ocurren a diseñadores web de nivel medio y que quizás si los tenemos en cuenta ayudará a reducir el tiempo y problemas relacionadas a su creación.

1. El tipo de web y el diseño que necesita.
No todas las webs sirven para lo mismo, ni todos necesitan un portal, o todos pueden tener un blog, la realidad es que el tipo de web depende del tipo de contenido, la regularidad con que se actualiza y el equipo que lo conforma, entre más grande un proyecto se requieren soluciones que pueden estar lejos de una persona.

Siempre diseña en base a la información que tengas

2.  Habilidades y colaboraciones... puedo hacerlo solo.
El diseño web no termina en la parte de diseño, el diseño web pasa directamente por el código: ¿qué habilidades tienes?, ¿es un trabajo en equipo?

Si no tienes las habilidades, por ejemplo; sabes diseñar gráficamente, pero no implementar tu diseño, siempre puedes buscar a alguien que maneje el lenguaje que necesites, generalmente los diseñadores gráficos no domina más que CSS y HTML -eso con sus peros- pero no faltará quien sí pueda.

Lo ideal sería conocer al menos un lenguaje de lado del servidor como PHP y conceptos básicos de Javascript, esto no solamente amplia las capacidades de diseño, sino te permite manejar el contenido de forma dinámica.

3. Las plantilla facilitan el trabajo, pero no tanto.
Las plantillas que muchos diseñadores usan para "facilitarse" el trabajo, no siempre son una buena forma de empezar, a la vez tienen demasiados elementos, algunos difíciles de manejar, demasiados vínculos, categorías, que solamente portales grandes necesitan.

Las bonitos e inusables plantillas de Btemplates.com

En Blogger yo empecé usando plantillas, pero al final ninguna me satisfacía o era demasiado compleja o tenía puntos débiles que requerían severas modificaciones y los cambios que luego debes hacer son muy engorrosos.

Al final solamente haciendo la propia es la única manera de tener control de todo el proceso de diseño y sus reglas.

4. No ver en distintos navegadores lo que has hecho.
Si nunca lees lo que escribes, nunca descubrirás tus errores, si no ves en distintos navegadores tu propia web, quizás no veas sus errores, esto incluso le pasa a portales del prestigio como la BBC que al aplicar Slides de Jquery, no se dieron cuenta que algunos no se veían correctamente en Internet Explorer, la avalancha de quejas posteriores podrían incluso costarte el puesto.

5. No comentar la estructura del código, ni dividirla en secciones.
El código que haces, siempre debes dividirlo en secciones, por ejemplo la cabecera es una sección, el cuerpo principal, es otro y así sucesivamente.

Los comentarios te pueden ayudar a identificar que cosa hace cada cual:

• En CSS, puedes comentar con /* comentario */
• En HTML directamente puedes usar <!-- comentario -->
• En PHP, usa //comentarios o #código comentado

y así según el lenguaje.

6. Olvidarse de usar ID o CLASS: Aplicar estilos CSS directamente sobre la etiquetas HTML.
Esto es más problemático si lo usamos en páginas estáticas o en ciertas páginas individuales de un CMS de blog o parecido, que nos permite poner nuestro código de forma independiente al código general, si tienes una páginas quizás esto no sea un problema si cambias el diseño, pero si son algunas decenas o centenas vas a tardar incluso días en auditar tu sitio.

Es cierto que a veces solamente quieres usar style="" sin preocuparte de editar el estilo general, pero el problema viene con los rediseños, o cambios que necesites hacer, si no creas reglas CSS en un archivo o plantilla de tu web -como en páginas dinámicas- siempre hay algo que pasaras por alto en el rediseño y cambiarlo puede tomarte incluso meses hasta que te des cuenta que esta mal diseñado.

7. Usas unidades relativas o porcentajes, pero no utilizas referencias absolutas.
Las unidades como %, em y ex por si mismas no sirven, diferentes navegadores te darán diversos resultados, es necesario, por ejemplo; establecer un tamaño de fuente en body con font-size en una unidad absoluta (pc) y (pt) o una relativa como pixeles (px) -esta solamente relativa respecto a la resolución de pantalla-.

En los DIV para height los porcentajes no sirven a menos su contenedor tenga una medida en altura en px o unidades absolutas -o les des una estructura de tablas con CSS-.

8. Aquellos parámetros CSS que dejas sin indicar, el navegador los llena por su cuenta.
Si por ejemplo no obligas al navegador a tener un padding o margin específico en body, el navegador no lo podrá por defecto en 0, sino que pondrá un espacio que determinará por su cuenta, esto pasa también con las imágenes y el borde que a veces aparece por defecto; o el color de los enlaces. Siempre hay que entender que el navegador llena muchos huecos, pero los mismos pueden afectar tu diseño.

Un problema de divs que se empujan por un padding no declarado.

9. No optimices los sitios pensando en un navegador, ni premies el diseño del sitio sobre la usabilidad.
Lo importante es como presentas el contenido, que también jerarquizado o estructurado está, si quieres usar ese efecto de sombra super-duper o esos bordes redondeado, y no tiene soporte para todos los navegadores, no lo uses pensando que todos deben usar un navegador para apreciarlo, si necesitas poner imágenes para falsear el efecto en todos los navegadores, hazlo, pero no esperes que la gente cambie de navegador, eso ya no es real actualmente, las visitas vienen de diversas fuentes, no solamente de PC o Mac, también celulares y tablets, incluso televisiones.

Un diseño compatible es posible, mientras te informes de los problemas de los diferentes atributos CSS.

10. No uses tablas para el diseño de tu Web.
Ya vimos un cual es el principio básico del diseño con divs, es sencillo y si haces cambios no tienes de preocuparte de los errores que cometas, siempre puede arreglarse, el uso de tablas por el contrario, tiene demasiados problemas, en un principio si quieres hacer cambios tienes que mover el contenido de su celdas, y cualquier cambio al mismo, implicara trabajar directamente sobre la tabla, no sobre el CSS, como es correcto.

11. Usar position, z-index y div para diseñar "siempre así", no es recomendable "siempre".
Estas dos propiedades te permiten diseñar saltándote la estructura de contenedores que requieren los DIV, pero son imprecisos, ni absolute, ni fixed te servirán a menos que diseñes páginas para que estén pegadas a la izquierda. Se pueden ver posiciones distintas dependiendo de la resolución de pantalla o las dimensiones del navegador bajo esta premisa.

Generalmente se usan para posicionar un degradado o imagen con cierta transparencia PNG sobre otra imagen o video, o poner un menú flotante como el que uso en CGnauta, y hay condiciones que permiten el uso dentro de un formato centrado, como sea, no es la forma idónea de diseñar todo tu sitio.

12. El nombre del dominio y sus dos caras.
Muchos posicionan dominios mediante el uso de palabras claves como moviles-recarga.com.mx, viaje-aviones-gratis.es, etcétera; si bien en cierto que el nombre del dominio (por ejemplo Barcel o Bimbo) va en segundo término en cuanto a visitas cuyo origen son de búsquedas orgánicas y quizás el uso de palabras claves en los dominios -como papas-fritas.com- ayuden a posicionar la temática de un sitio, lo cierto es, que muchos sitios que no se dediquen a los servicios o juegos, deberían pensar en una marca o nombre indistinguible que sus usuarios puedan recordar.

Además, actualmente Google puede penalizar a quien usa un nombre de dominio http://palabraclave1_palabraclave2_etcétera.com con muchas palabras claves por cuestiones de SPAM y SCAM.

13. El hosting, siempre puedes encontrar una oferta mejor en otros países... pero no siempre
En México todo es caro, todo cuesta un ojo de la cara, pero si no tienes tarjeta de crédito, prácticamente no eres nadie, un dominio, un hosting, todo cuesta lo tripe o cuádruple de lo que costaría en EU, pero nadie dijo que no puedes comprar en nuestro vecino del norte, por ejemplo; con una tarjeta de débito virtual (prepago) como IUPICARD de Banco azteca permite que compres por ejemplo: un dominio a Google checkout o Godaddy o cualquier cosa en cualquier sitio que permita Master Card.

Pero ten cuidado especialmente de servidores en países remotos o revendedores de poca confianza, pues pueden usar IPs previamente penalizadas por los buscadores. Otros intentan forzarte a un servidor dedicado, aunque ello no se justifique.

14. Contenido mal estructurano: Esto y esto, y aquello otro.
 No es necesario que pongas todo el contenido en una sola página, jerarquiza el contenido según el lugar más lógico que debe ocupar, el alto del contenido principal no debería ser mayor a 3 veces el ancho del sitio, si existe una sección pie de página con un color de fondo diferente esta no contaría como espacio de lectura, ningun artículo de texto debería sobrepasar ese espacio, pero a menos que tenga imágenes, puedes aburrir y confundir al lector:

15. Evita los menús y secciones vacías
Las secciones vacías son lo menos profesional de un sitio y puede crear desconfianza, lo mismo que enlaces activos con "#" como destino. Quita menúes y elimina secciones que no sirvan, e incluso es mejor no remover la información, incluso aunque ya no esté disponible lo que ofreces.

Estos son algunos consejos de momento. Que integraré a un artículo más grande. Los errores y correcciones especialmente de ortografía serán posteriores.