Soy césar, aka @inquiettudes, diseñador de interacción freelance trabajando para mejorar la experiencia de usuario de la realción de las personas y los objetos. Puedes saber un poco más de mi en facebook, twitter y linkedin. Me encanta el diseño de interacción, la construcción de sitios web y las redes sociales. Pero lo que realmente me motiva es la solución de problemas y las relaciones entre los usuarios. De la manera mas sencilla. Así de fácil.

Usabilidad, diseño centrado en el usuario, arquitectura de la información & servicios diseño de interacción

El blog de inquiettudes

¿Por qué maquetar con estándares?

Ya hay 11 comentarios

Hace poco me pidieron una presentación para justificar por qué hay que codificar webs mediante XHTML y CSS. “Con lo fácil que es maquetar con tablas...” Este es un resumen de las conclusiones que defendí.

Publicado hace mas o menos 11 años por @inquiettudes.

Mirando al pasado. “En el inicio sólo había tablas…”

Esta frase no es del todo cierta, aunque si lo parezca. Las tablas existían como el resto de etiquetas HTML, pero la introducción de “border=0” hizo posible que los diseñadores de páginas web contáramos con una rejilla para organizar texto e imágenes y maquetar nuestras páginas. Hasta entonces las tablas se habían utilizado para lo que habían nacido: para organizar datos tabulares.

Posteriormente y gracias a las imágenes transparentes se podían fijar tamaños, posicionar celdas, párrafos, imágenes… y una serie de trucos destinados a que la página se “viese bien” en todos los navegadores. La “guerra de navegadores” supuso el alejamiento de los estándares marcados por la W3C, allá por 1999. Lo que complicaba aún mas el código y en ocasiones se acudía a distintas versiones para distintos navegadores, cuando al “optimizado para…”

Pero… ¿qué tienen de malo?

Se puede afrontar desde varios puntos de vista, el primero puede ser el semántico: sencillamente no es lo correcto, no se crearon para eso y no se deben utilizar para eso. Trabajando de esta forma mezclamos presentación y contenido. De esta forma las tablas deben dejarse para lo que sirven: presentación de datos tabulares.

Si queremos fijarnos en objetivos para la empresa: trabajando con estándares un rediseño, un cambio, una modificación a nivel de diseño gráfico es más rápido y por tanto menos costoso. Las páginas serán más accesibles. Los archivos son menos pesados con lo que será menor el tiempo de descarga, menor el consumo de ancho de banda y menor espacio en el servidor.

La solución está clara: CSS y marcado estructural

Pero… ¿Por qué utilizar CSS y HTML?

Porque los navegadores actuales van teniendo soporte para estándares, con diferencias, pero se han acercado al estándar. Una vez te acostumbras a sus peculiaridades se puede trabajar para todos ellos.

Por otro lado, la diversidad de dispositivos actuales y futuros desde los que nos podemos conectar (teléfonos móviles, PDAs. Tablet PC, TV…) hace que sea necesario separar estructura y contenido, siempre y cuando queramos llegar a cubrir todos los ámbitos. De esta forma con simples cambios en las hojas de estilo, podremos visualizar nuestra aplicación web en todos los dispositivos, adaptando su apariencia al dispositivo.

Garantizar la accesibilidad de un sitio es más fácil si cumplimos estándares. Aunque no garantice la accesibilidad de una página web, ya que debemos tener en cuenta otros factores

Pero… sigo sin verlo claro ¿que ventajas?

Accesibilidad. Separar forma y contenido permite hacer llegar la información a diferentes dispositivos, navegadores, lectores de pantalla… Posibilitando en buena medida el acceso a personas con discapacidad.

Ancho de banda. Para sitios con muchas visitas trabajar con estándares puede representar un ahorro muy grande. Reduciendo costes con el envío de información innecesaria al usuario. Páginas construidas con XHTML y CSS pueden llegar a reducir un 50% el tamaño de la página original.

Tiempos de carga. Menos código hace que las páginas tarden menos en cargar mejorando la experiencia de usuario. La cualidad más apreciada por los usuarios en un site es la velocidad de descarga. Un usuario medio tarda 10 segundos en perder la atención en la máquina.

Buscadores. Una página diseñada con estándares aparecerá en mejor posición en los resultados de búsqueda debido a que el código es más limpio, las páginas sólo llevan contenido (no diseño), semánticamente es más correcto. La accesibilidad está ligada al posicionamiento en buscadores, google navega como si fuese “ciego”.

Independencia del dispositivo. El uso de estándares facilita el acceso al contenido de las páginas Web a través de diferentes navegadores y dispositivos. Por lo tanto el mismo sitio Web puede usarse tanto en un teléfono móvil como en el PC, TV, impresora… sólo tocando un archivo (CSS) Utilizar estándares puede significar llegar al 100% de los usuarios que visitan la red.

Mantenimiento. Al separar estructura y presentación se permite realizar cambios en todo el sitio editando un único archivo. Cuando se requiera un cambio de aspecto tiempo y coste serán muy reducidos. No es necesario tocar las páginas desarrolladas ni cambiar contenido del sitio.

Control por parte del usuario. El usuario del sitio tiene el control sobre la página, independientemente del dispositivo con el que se conecte. La personalización de su navegador le será útil para visitar el sitio. El usuario puede modificar a su antojo tamaños de letra, colores, botones…

Futuro. Los Navegadores se están adaptando a los estándares, de esta forma se garantiza la viabilidad de los proyectos a largo plazo. CSS 2.0 es compatible con el 99% de los navegadores y, si se usa bien, sirve para cualquier plataforma. Un sitio desarrollado con estándares utiliza una tecnología fácilmente compatible con otros productos.

Gestión. Las partes de la página pueden ser cambiadas de disposición, diseño, tamaño en función del dispositivo, la página… Por lo que ya no hace falta montar páginas para imprimir, para PDA’s…

Resumiendo…
  • Mejora la Accesibilidad
  • Reducción del ancho de banda
  • Menor tiempo de carga
  • Optimización para buscadores
  • Independencia del dispositivo
  • Facilita el mantenimiento (rediseño)
  • Entrega el control al usuario
  • Garantiza el futuro de la aplicación
  • Más fácil de gestionar
Pero… ¿eso sacrificará el diseño?

Rotundamente no, trabajar con estándares no significa renunciar al diseño de nuestro sitio web. Significa cambiar un poco nuestra mentalidad a la hora de diseñar, pero sobre todo, a la hora de maquetar. Cualquier diseño se puede maquetar mediante XHTML y CSS, incluso es mejor para realizar una actualización. ¿Quieres verlo? Entretente un rato en css Zen Garden, the beauty in CSS Design

Publicado hace mas o menos 11 años por @inquiettudes en las categorías Estándares.

Etiquetado cómo , . Si quieres estar al dí de lo que pasa en el post suscríbete a los comentarios.

Ya hay 11 comentarios

Estos son los comentarios para ¿Por qué maquetar con estándares?, ¿quieres dejar un comentario? ¿a qué esperas?

Si Puedo » ¿Por qué maquetar con estándares? lo dijo hace mas o menos 11 años

[...] En la web inquiettudes de Cesar Garcia hay un interesantísimo articulo, muy bien explicado, de por qué se debe maquetar con estándares. [...]

» Etiqueta para limpiar flujo en CSS: Clear vs Overflow » inquiettudes.com | weblog sobre accesibilidad, usabilidad, estándares, diseño de interacción, css, xhtml, internet y algo más lo dijo hace mas o menos 11 años

[...] Esta solución es válida pero contraria a la filosofía del diseño de páginas web mediante estándares, porque utilizamos un elemento de contenido para presentación. [...]

» Saltar hacia los estándares » inquiettudes.com | weblog sobre accesibilidad, usabilidad, estándares, diseño de interacción, css, xhtml, internet y algo más lo dijo hace mas o menos 11 años

[...] Cuando damos el salto de maquetar con tablas a maquetar con CSS, no damos importancia a la estructura de nuestro código. Los documentos creados bajo estándares deben tener un añadido de semática, aportar mas significado. [...]

Prothotype » Blog Archive » Maria maqueta con Tablas!!1!1! lo dijo hace mas o menos 11 años

[...] Porque maquetar con estandares [...]

Curso de diseño Web » ¿Por qué maquetar con estándares? lo dijo hace mas o menos 10 años

[...] Original en: ¿Por qué maquetar con estándares? [...]

chabely lo dijo hace mas o menos 9 años

Hola quisiera saber si se puede tener un .css que funcione para todos los navegadores o se debe hacer uno para explorer , otro para mozilla etc.. gracias.

inquiettudes lo dijo hace mas o menos 9 años

Chabely,

te digo como trabajo yo:

utilizo una css general en la que cargo las propiedades necesarias para todos los navegadores y, si necesito ajustar algo para explorer, creo un documento que sólo cargará explorer para modificar las propiedades de los elementos que necesito ajustar.

mariana lo dijo hace mas o menos 9 años

Hola les queria preguntar si alguien me puede recomendar una pagina de css para poder entender mas sobre el tema

Anonimo lo dijo hace mas o menos 9 años

Yo llevo mas de cuatros años diseñado y las tablas son muy complicadas de diseñar las odio…

Un consejito para vuestro blog…

Juan lo dijo hace mas o menos 9 años

Las capas es lo mejor para diseñar son mas dinamicas…

Marivi lo dijo hace mas o menos 8 años

hola,
navegando, navegando me he topado con este sitio, que aunque básico me parece interesante para iniciarse en el diseño con css, ya que no deja de lado el código. Otra cosa es la estética!
http://www.elportaldelangel.es/boceto/boceto8.html
Un saludo

¿Tienes algo que decir?

Deja tu comentario seguro que es muy interesante. Por favor guarda la temática del post para mantener un debate agradable. No uses este formulario como SPAM. Añade tu comentario a continuación, tambié puedes crear un trackback desde tu sitio. Suscríbete a los comentarios de este post.

Mi último tweet

cosas que están pasado durante este 2016

Hecho con mucho cariño entre ciudad real y madrid