¿Dónde hay que introducir la moneda para que me de un café?

A simple vista es fácil. ¿no? No es más que una máquina de café, de esas que hay en muchos sitios. Nada nuevo. Nada diferente. No tiene por qué ser ni más fácil ni más complicado que otra.

Cierto. Sólo hay un pequeño pero. La localización de la ranura que carga las monedas. ¿Por qué está ahí abajo? Probablemente, quien diseñó la máquina no vio mayor problema, y no lo tiene.

Tan sólo un par de minutos…

Sólo eso fue lo que esperé. Y me fijé en cómo sacaban las personas el café. En cómo buscaban la ranura. Y tras unos instantes se daban cuenta de la localización inferior.

Y esto… ¿por qué?

Intentamos agrupar elementos. Y la manera en la que nos enfrentamos a un elemento de interacción suele ser de la misma manera. Inspeccionamos los elementos. Y miramos alrededor. Cerca. Total sólo quiero mirar que café tomarme y poner el dinero. Ya me preocuparé después de buscar donde sale el café.

Agrupadas las tareas, intuimos que las herramientas y el flujo de interacción estará relacionado. Así pues una vez seleccionada la bebida que vamos a tomar… no encontramos la ranura.

… tampoco es para tanto… ¿no?

Aquí quizás no. Queremos un café a toda costa y, si nos enfrentamos a una máquina como esta, es que no podemos tomar un café de verdad en otro sitio. Por lo que pondremos todo el interés en realizar la acción.

Pero yo hablo de internet. De una web. De un interfaz digital. Si, como pasa en internet, que hay otra máquina de café a pocos centímetros. Entonces te aseguro que o tu café es muy bueno o se lo pedirán a otro.

Enfoca el diseño de tu interfaz en pequeñas tareas a realizar. Pon lo que es necesario… Y, luego, deja sólo lo que hace falta. Trabaja en pequeñas tareas. Agrupa las acciones. Y después mira cómo lo usan tus usuarios. Seguro que si el que diseñó esta máquina viese cómo la usan los usuarios no volvería hacer algo así.

En el campo del diseño de interacción, un icono es un pequeño gráfico en pantalla que identifica y representa a algún objeto. Bien sea un programa, comando, documento o archivo, usualmente con algún simbolismo gráfico para establecer una asociación.

un poco de historia…

Los iconos se utilizan desde la primera interfaz gráfica: Xerox Star. La llamada estación de trabajo Xerox Star, fue introducida por Xerox Corporation en 1981. Fue el primer sistema comercial en incorporar varias tecnologías que han llegado a ser hoy en día corrientes. Pero sobre todo una interface gráfica de usuario basada en ventanas, iconos y carpetas.

Se hicieron pruebas para seleccionar los iconos más apropiados. Se invertía el color para distinguir el icono seleccionado del resto. Introducir iconos en la interface fue un paso muy importante ya que las personas reaccionan instintivamente a las imágenes y son pequeños, lo cual es importante para el espacio limitado de la pantalla de ordenador. Los iconos además podían representar objetos y funciones.

modelos mentales

Para que todo funcione correctamente, los iconos deben tener un aspecto acorde a su función. Y, por supuesto, funcionar de acuerdo con su aspecto. Sólo entonces, cuando el diseño visual clarifica sus funciones, la interfaz resulta intuitiva para los usuarios.

El modelo mental que usamos los usuarios determinará el significado de un icono. Para ello hay que prestar atención al contexto, el entorno donde se utiliza el icono. A la función, el tipo de tarea que va a producirse cuando usamos el icono. Y a la forma, usar un objeto concreto, existente en el mundo real, abstracto que es más arriesgado en su uso o bien una combinación de ambos que se traduce en iconos más comprensibles.

¿define el icono de guardar a un objeto concreto ?

A día de hoy el icono del disquete ha ido pasando por varios tipos conceptuales. Hace unos años era representado como un icono similar, representaba el concepto a través de su imagen análoga. Después se convirtió en un icono ejemplar, servía como ejemplo. Ya no se guardaban en disquetes pero se utilizaban por lo que servía como ejemplo.

Ahora puede definirse como un icono arbitrario, ya no guarda relación. De hecho hace tiempo que dejaron de existir, por lo que se podría decir que ya no guarda ninguna relación y la asociación entre el icono y guardar tiene que aprenderse. Se sigue usando, no porque sea bueno, sino porque la fuerza de la costumbre es tal que nos obliga a continuarla y a no considerar siquiera la posibilidad del cambio.

entonces… ¿que hacemos?

Personalmente no creo que cambie el icono, al menos de momento. Aunque es cierto que ha dejado de ser el icono de un disquete para convertirse en el icono de guardar. Aunque muchos no sepan muy bien que es lo que identifica si queda clara la función que realiza.

el futuro…

El futuro pasará por no tener ícono de guardar. Por abandonar el concepto de archivo, los archivos son un concepto tan arcaico, referido a cómo se guarda la información en el ordenador y, los usuarios, deberían abstraerse de ese concepto y no tener que preocuparse de cómo se guarda la información.

más…

• Xerox Star
• Jef Raskin, fundador del proyecto Macintosh, para Apple

Desde luego que no es una ciencia exacta ni hay un método infalible… Pero sí que mediante una serie de claves nuestro posicionamiento será mejor. Nos vamos a referir a contenidos y técnicas que funcionan. Que están probadas. Y que nos ayudarán a posicionar mejor nuestro sitio web.

Optimiza el título

El título es uno de los elementos mas importantes de nuestra página web. Será lo primero que se vea en los resultados de búsqueda. En los maracadores/favoritos. Desde mi del.icio.us. Piensa en el usuario y te acercarás al posicionamiento en buscadores. Si manejas las técnicas pensando en los usuarios verás como tu posicionamiento mejorará.

Escribe un título descriptivo, olvidate de poner sólo tu dominio, olvídate de escribir barras, puntos, guiones, no intentes decorar la barra de título. No tiene sentido. Ve al grano. Escribe de que va la página. Limítate a escribir un par de frases sobre tu target.

Escribe un título apropiado para cada página, evita utilizar el mismo título para todas las páginas.

Elige unas palabras para las Meta Keywords

Selecciona unas cuantas palabras que sean el objetivo de la web, busca vacíos de mercado donde posicionar tu marca, no luches contra las grandes palabras. Utiliza palabras que aparecen dentro de la página. Mejor si están dentro del título o de los encabezados de sección.

Trabaja bien unas cuantas palabras clave, haz que se repitan dentro del contenido.

Selecciona unas palabras clave y construye tu contenido alrededor de ellas. Intenta no luchar contra las palabra más buscadas.

Utiliza la descripción

Usa esta etiqueta. No te olvides de ella. Recuerda que mejor que aparecer en buscadores, es conseguir que nos visiten desde buscadores. Para tener un mejor click through el texto debe atraer al usuaio. Selecciona un par de frases que describan el contenido de esa página en cuestión. No de todo el sitio. Usa descripciones distintas para cada una de las páginas.

Codifica semánticamente

Cuando maquetes tu página preocupate de la semántica. Utiliza las etiquetas de cabecera (h1, h2, h3, h4…) no te olvides de ellas, mejorarán notablemente el posicionamiento.

Piensa que estas cabeceras están para estructurar tu contenido. Para asignar importancia a los bloques de contenido.

Utiliza un documento en blanco. Un word, por ejemplo. Escribe el texto que tiene que contener cada página. Usa las negritas y tamaños de fuente igual que lo harías para dar importancia a un texto en papel. Luego llevalo a internet. Codifícalo de la misma manera. Pocas palabras pero claves y con sentido. Cuanto más arriba coloques tu h1, mejor.

No te olvides de las imágenes

Completa siempre el atributo alt de tus imágenes. Describe la imagen. Utiliza también, si puedes, las palabras clave. Las palabras que mejor describen la imagen. Si están cerca del contenido más relevante, mejor. Aunque el atributo alt hable de la imagen, si está relacionado con el contenido, que debe de estarlo, ayuda a posicionar la imagen.

El nombre del archivo de la imagen también es importante, incluye las palabras que describen la imagen. Además así te servirán para saber que contiene esa imagen sin verla. La usabilidad también debe de ser para nosotros y nuestros archivos.

Optimiza tu contenido

A pesar de todo lo que hemos visto, si no tenemos un contenido relevante de poco nos sirve nuestra web. Habla del mismo tema dentro de la página. No mezcles muchos temas. A ser posible, evita el javascript y el flash para mostrar información relevante. Procura que las palabras clave, el título, la descripción de la página y el resto de elementos tengan relación con el contenido.

Escribe para los usuarios. Escribe amenudo. Céntrate en un tema y desarrolla.

Escribe para internet. Utiliza etiquetas para enfatizar palabras, frases. Utiliza la etiqueta strong. Ve al grano.

Trabaja con la URL

Estudia la estructura de directorios y nombres de ficheros. Si puedes, reescribe dinámicamente las URL para evitar el paso de parámetros por la barra de dirección. Si tienes que utilizar mas de una palabra para un fichero o directorio, utiliza guiones para separar las palabras.

Si aún no tienes dominio, piensa que el dominio puede ser clave para un buen posicionamiento.

Cuida los enlaces

Utiliza enlaces dentro del propio sitio, para ello usa frases, en lugar de palabras sueltas. Usa frases que describan el contenido al que va el enlace. Piensa en el usuario. Da un motivo para pulsar el enlace. No uses el click aquí.

A ser posible consigue enlaces desde otras páginas con la misma temática. Mejor menos enlaces pero de más calidad.

¿Y que significa todo esto exactamente?

Sencillamente que gracias a este trocito de código podremos aplicar todas las pseudo clases y pseudo elementos para dar formato a nuestras páginas. Así conseguimos que Internet Explorer sea capaz de adoptar e interpretar todo lo necesario para acercarse un poco a un navegador que cumple los estándares.

¿En qué nos beneficia?

Pues sencillamente en que nuestros HTML serán más sencillos, por ejemplo: podremos olvidarnos de aquellas clases que indican cual es el último elemento de la lista, podremos añadir contenido directamente desde la hoja de estilos a nuestro HTML, modificar estilos según el atributo de un elemento… En definitiva todo lo que marca la W3C.

• Lista del soporte que da a MSIE

¿Y la accesibilidad?

Y, como llego tarde, ya he leído comentarios en blogs sobre la utilización de javascript y su accesibilidad. Para el número pequeño de usuarios que navegan con JavaScript desactivado, aproximadamente entre un 8% y un 6%, la página es completamente visible y funcional, no se verá de la misma manera, pero el contenido es accesible para todos los usuarios.

Ya pero… no valida

Sobre esto mejor que yo lo explica Alberto Fortes en su post: Validadores automáticos del w3c si, pero no. No podemos hablar de usabilidad, accesibilidad, diseño centrado en el usuario, personas… y luego dejar todo del lado de un validador automático que no olvidemos que es una máquina. Es decir una maquina va a evaluar si el sitio está indicado para personas. Ojo con los validadores, ojo con las herramientas automáticas de validación de la accesibilidad.

¿Quieres saber más?

• Los selectores de CSS son ya posibles en internet explorer, gracias Alberto
• JavaScript library, IE7
• Validadores automáticos del w3c si, pero no
• Accesibilidad y herramientas automáticas

En muchas ocasiones las limitaciones en el uso y opciones tipográficas de la Web hacen que por motivos de diseño necesitemos sustituir un título por una imagen. A partir de aquí siempre surge la duda de si esa imagen es presentación o contenido. Si lo consideramos contenido, la discusión está terminada. Ponemos la imagen directamente en el código mediante la etiqueta <img />.

¿Dónde está el problema?

El problema lo encontramos si lo consideramos como presentación. En este caso necesitamos de alguna técnica. Descartando, por motivos de accesibilidad, las que utilicen JavaScript o Flash.

Técnicas

La que siempre he utilizado es la conocida FIR. Esta técnica consiste en ocultar mediante CSS un elemento span contenido dentro del bloque y colocar una imagen de fondo para bloque.

Veamos un ejemplo

<!-- XHTML -->
<h1><a href=”#”><span> ¿Por qué maquetar con CSS?</span></a></h1>

/* css */
h1 a { width: 300px; height: 174px; background: url(maquetar-con-css.gif) no-repeat; display: block; color: #033D6E; }
h1 a span { display: none; }

En este caso estamos utilizando la técnica FIR, mira el ejemplo.

Inconvenientes

Accesibilidad. El texto no es leído por los lectores de pantalla, por estar oculto. Esto se podría solucionar mediante el uso de hojas de estilo independientes para cada dispositivo. Así, si se navega mediante lectores de pantalla, cargamos otra hoja de estilos y solucionado.

El problema que realmente tiene es…

¿Y si navegamos con las imágenes desactivadas?

En este caso el navegador no muestra nada, desactiva las imágenes de tu navegador y mira el ejemplo ahora.

Entonces… ¿Qué hacemos?

Bueno pues después de compartir con mis compañeros, de buscar y de leer, llegamos a la conclusión de que la mejor manera era jugar a posicionar los elementos uno sobre otro

/* css */
h1 { width: 300px; position: relative; z-index: 1; }
h1 a { width: 300px; height: 174px; background: url(maquetar-con-css.gif) no-repeat; display: block; color: #033D6E; }
h1 a span { position: absolute; z-index: -1; }

¿Que tal ahora? ¿Mejor?, mira este ejemplo ahora

Lo que estamos haciendo con esta técnica es ocultar bajo la imagen el texto del titular, siempre que la imagen no sea transparente, así para un usuario que navegue con imágenes activadas no apreciará que bajo la imagen hay texto. Sin embargo un usuario que tenga desactivadas las imágenes podrá ver el texto. Y si, además, damos formato a este texto podrá hasta verlo de una manera similar.

Ya se ha hablado de esto…

Estas y otras técnicas las encontrareis mejor explicadas en estos sitios

• Revised Image Replacement, de Dave Shea
• En limalimon.com.es, reemplazo de texto con imágenes ¿si? ¿no? ¿qué técnica usar?
• Marco Giacomuzzi de seraccesible.net, Image Replacement Accesible
• Reemplazo accesible de textos por imágenes

Y, más…

• Replacing Text By An Image, en WellStyled.com
• Desde sitepoint Accessible Header Images With CSS And XHTML

La nota de prensa habla sobre el uso inapropiado que se hace de las herramientas automáticas y la preocupación que esto está generando en la Oficina Española del W3C, destaca principalmente los informes que se realizan teniendo en cuenta únicamente los resultados de unos test automáticos generados por aplicaciones que revisan sólo la utilización correcta del código.

Los resultados que ofrecen estos validadores automáticos son útiles si se complementan con una revisión manual del sitio, una revisión humana que determine si el sitio es o no accesible.

El uso de validadores ayudan a determinar sobre todo si un determinado sitio cumple los estándares haciendo el trabajo de evaluación más sencillo pero, como dice la nota: es imprescindible realizar un uso cauteloso y apropiado de estas herramientas ya que no dejan de ser técnicas de asistencia.

Accesibilidad sin personas

La conclusión es que una aplicación no puede determinar la accesibilidad de un sitio, para hacerlo es necesario una revisión humana, que a través de su experiencia y ayudado de los resultados de estos validadores automáticos, puedan determinar el nivel de accesibilidad de un sitio.

A menudo no encontramos con sitios que validando correctamente no son lo suficientemente accesibles, aunque si pasen las pruebas automáticas.

Pensar en el usuario y no en el validador

El problema se encuentra en que se enorgullecen de la accesibilidad que ha sido conseguida nada más que siguiendo unas pautas en la codificación que hacen de ese sitio correcto a nivel de código y que para pasar correctamente la validación se llena de trucos para hacer que el código pase el validador sin preocuparnos de la accesibilidad sino del validador.

Así nos encontramos en el código atributos alt vacíos para las imágenes con el único fin de pasar el dichoso validador automático, codificamos con tablas o insertamos divs y divs para que todo cuadre, olvidándonos de la semántica, del contraste de colores en el sitio web… en definitiva olvidándonos del usuario que visitará el sitio.

Todos debemos conocer las pautas

Por lo tanto para crear una página accesible todos y cada uno de los participantes del desarrollo del sitio debemos conocer las pautas de accesibilidad antes de ponernos a trabajar en él. Desde el desarrollo de la arquitectura, al diseño gráfico, la maquetación, la programación… cada uno de ellos será el responsable de las pautas que le correspondan para que, al final del desarrollo, se pueda decir si el sitio es accesible o no.

Más información

• W3C España advierte sobre la falta de rigor en los informes de accesibilidad web
• Por qué son insuficientes los estándares y la revisión automática
• Informes, accesibilidades y ganas de hablar de algo
• Accesibilidad y fases de desarrollo

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.

En el nacimiento de la web, HTML fue creado como un lenguaje de marcado comprensible semánticamente. Con la llegada de la web mas gráfica, mas “de presentación” este código, antes comprensible, pasó a ser algo imposible de entender. Un cúmulo de etiquetas sin sentido. Seguro que hemos visto infinidad de veces, y lamentablemente seguimos viendo cosas como:

<table width="780" cellspacing="0" cellpadding="0" border="0"><tr><td><img src="/images/0.gif" width="1" height="1" border="0"/></td></tr><tr><td background="/images/01.gif"><img src="/images/0.gif" width="1" height="1"border="0"/></td></tr></table></code>

Vuelta a los inicios

Ahora, más que desde el nacimiento de las CSS (que ha llovido) desde la utilización mas mayoritaria de ellas, podemos volver al significado semántico de nuestro código (X)HTML, posibilitando así la separación del contenido y de su presentación en pantalla o cualquier otro dispositivo.

Si además añadimos significado a nuestros documentos (X)HTML, mediante la utilización de etiquetas del lenguaje, obtendremos beneficios en accesibilidad, en posicionamiento en buscadores, en futuras actualizaciones… y para la multitud de dispositivos futuros que puedan llegar a aparecer.

(X)HTML nos da multitud de elementos con su porpio significado:

• Cabeceras, h1, h2…
• Listas, ul, ol, dl
• fieldset, legend, label
• abbr, acronym
• cite
• caption, thead, tbody
• strong y em

Al igual que en un procesador de textos, aumentamos significado mediante listas, tablas, títulos, subtítulos… Si utilizamos los mismos elementos con significado semántico, no sólo mejorará el entendimiento de nuestro documentos (X)HTML, sino que además ahorraremos código en muchas ocasiones con las ventajas que conlleva de cara al ancho de banda, buscadores, actualizaciones…

Mas elementos: id y class

Para completar el significado disponemos de elementos que nos ayudan a incluir información estructural a nuestros documentos añadiendo atributos como id o class

Un id identifica a un elemento único en el documento y class define propiedades que pueden ser aplicadas a varios elementos. Este segundo elemento es utilizado para para identificar contenido de similares características.

Nombrar ids y class

Un error semántico a la hora de dar nombre a estos elementos es aplicar nombres relacionados con la presentación. Si nombramos a una clase cajaRoja o menuArriba estamos cometiendo un error de concepto. Estamos asociando la presentación con el contenido. Y además no estamos aportando nada a la estructura.

A la hora de seleccionar nombres para nuestras clases, lo mejor es añadir un poco de contenido semántico, utilizando nombres como menuPrincipal, utilidades, mensajeError, contenidoPrincipal…

Trabaja con las herencias

Cuando empezamos a maquetar con CSS, lo primero que hacemos en nuestros (X)HTML es añadir clases e ids para todos los elementos. Una forma de limpiar nuestro código es agrupar elementos dependientes, utilizar la herencia entre clases… de esta forma bajo un mismo contenedor podemos dar estilo a todo lo que contiene.

Div y span

Son dos elementos que nos ayudan a estructurar nuestro código, pero como herencia de nuestro trabajo con tablas (los que hemos maquetado con ellas) tenemos la costumbre de añadir div y span para casi todos los grupos de elementos de nuestro documento.

Muchos elementos ya tienen información semántica suficiente para que no tengamos que incluirlos dentro de una capa contenedora, elementos como las tablas, las listas…

Si añadimos el atributo id con valor menuPrincipal a nuestra lista de opciones de menu no es necesario, además ensuciaría nuestro código, incluir esta lista dentro de un contenedor div con el id menuPrincipal.

Da un paso más

Si ya has dejado a un lado las tablas y trabajas con (X)HTML y CSS da un paso más y trabaja de una manera más semántica:

• Estructura tu código
• Utiliza correctamente las etiquetas que nos proporciona el sistema
• Evita el uso de divs innecesarios
• No nombres a las clases ni a los identificadores pensando en la presentación
• Agrupa elementos en tu CSS

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