Agencia Interactiva

De todas las opciones que tenemos a la hora de diseñar una web, la menos utilizada con diferencia es la que da título al post y sin embargo, es una de las opciones más accesibles por su adaptabilidad a diferentes resoluciones de pantalla.

Las causas de que este tipo de diseños se vean poco son varias:

• Desconocimiento. Si no se ve a menudo no existe y por lo tanto los desarrolladores no lo tienen en cuenta como una opción a elegir.
• Falta de soporte por versiones antiguas de Internet Explorer.
  La técnica no es en absoluto nueva, pero cuando surgió sólo podía funcionar correctamente en algunos navegadores.
• Dificultad. En este tipo de diseños es necesario usar porcentajes como unidad de medida, que no suelen ser tan exactos como los píxeles.

Hoy en día, con Internet Explorer 8 superando en porcentaje de uso las versiones anteriores de este navegador, es el momento de empezar a usar este tipo de diseño con la seguridad de que será beneficioso para la mayoría de usuarios y por lo menos, no perjudicial para los que todavía usan versiones antiguas de Internet Explorer.

Uso navegadores en España. Fuente StatCounter Global Stats

Explico a continuación los tipos de diseño o layout más utilizados y las ventajas e inconvenientes de cada uno.

Diseño fijo

Son aquellos en los que las medidas de los distintos bloques de la página se definen en píxeles. Son los más fáciles de llevar a cabo y los que obtienen unos resultados más fieles a los diseños.

Las Pautas para la Accesibilidad Web del W3C recomiendan utilizar unidades de medida relativas como los porcentajes o las emes, ya que algunos navegadores como Internet Explorer 6 y versiones antiguas de Firefox o Google Chrome, no pueden escalar los elementos de la página (hacer zoom) cuando se utilizan píxeles. Por otra parte, cuando los tamaños de fuente se definen en píxeles, en Internet Explorer 6 no se puede aumentar o disminuir el tamaño de fuente a voluntad, lo que supone una dificultad para personas con problemas de visión.

A estos inconvenientes hay que sumar que un diseño fijo cuya anchura supere la resolución de pantalla del usuario, no se verá completo en la ventana del navegador y aparecerán barras de scroll horizontales.

Hoy en día se usan mayoritariamente resoluciones de 1024 píxeles o mayores, por lo que el típico dilema de diseñar para 800 x 600 o mayor casi ha pasado a la historia, sin embargo, nunca podemos tener la certeza de que el usuario tenga la ventana maximizada o paneles que limiten la anchura de página.

Navegador con paneles

Diseño elástico

Los diseños elásticos son aquellos en los que las medidas de los bloques se definen en emes, de manera que al aumentar el tamaño de fuente, aumenta también la anchura de estos bloques, es decir, aumentar el tamaño de fuente provoca un efecto zoom sobre toda la página.

Las emes son una unidad relativa, y por lo tanto este tipo de diseños cumple la pauta anteriormente mencionada de no utilizar unidades absolutas, sin embargo en la práctica se comportan exactamente igual que los diseños fijos y tampoco están libres de problemas, aunque son una de las técnicas recomendadas para cumplir con las Pautas para la Accesibilidad Web.

La principal ventaja que tienen frente a los diseños fijos es que sí permiten aumentar el tamaño de texto y hacer zoom de todos los elementos de la página en navegadores antiguos. Los navegadores modernos pueden hacer zoom de página en cualquier tipo de diseño.

Diseño líquido

En los diseños líquidos la anchura de bloques se define en porcentajes, de manera que se adaptan a la resolución de pantalla del usuario ocupando por completo la anchura de la ventana del navegador. Como ejemplo tenemos la Wikipedia.

Los diseños líquidos funcionan bien en pantallas pequeñas, sin embargo en pantallas grandes dan lugar a líneas de texto muy largas que dificultan su lectura. La cantidad máxima recomendada de caracteres por línea es de 80. A mayor longitud, resulta difícil leer en pantalla sin perderse entre líneas.

Longitud excesiva de líneas en pantallas grandes

Diseño híbrido líquido-elástico

Estos diseños tienen las ventajas de los elásticos (anchos de línea óptimos y escalables en navegadores antiguos) y los líquidos (adaptables a resoluciones pequeñas).

La anchura de los bloques de contenido se define en emes y se añade la propiedad max-width de CSS que permite especificar la anchura máxima que podrá tener un bloque.

El resultado es un diseño aparentemente fijo, que se adapta a resoluciones menores y mayores sin que aparezcan barras horizontales de desplazamiento en el navegador.

Como ejemplo tenemos nuestro sitio web.

Diseño aparentemente fijo a una resolución de 1280 x 1024

Tamaño de texto aumentado en una ventana de 1024 píxeles de ancho. La anchura de los bloques se adapta a la ventana del navegador sin que aparezcan barras de scroll horizontal.

Layout adaptado a una ventana de 800 píxeles de ancho

Por supuesto, este tipo de diseño también tiene sus inconvenientes:

• Los porcentajes no proporcionan la exactitud de los píxeles.
• En Internet Explorer 6 la propiedad max-width no funciona y en Internet Explorer 7 lo hace de manera deficiente.

A pesar de estos inconvenientes, Internet Explorer 6 y 7 pueden seguir beneficiándose con los diseños híbridos de las ventajas de los diseños elásticos. Es un ejemplo perfecto de lo que se suele llamar Progressive Enhancement.

Cómo conseguir un diseño híbrido líquido-elástico

La clave de estos layouts consiste en utilizar emes como unidad de medida para los bloques contenedores y añadir la propiedad max-width de CSS para establecer su anchura máxima.

Suponiendo que tenemos un diseño de dos columnas, el bloque contenedor de ambas tendría un max-width del 100% y sus bloques anidados tendrían como ancho máximo el porcentaje relativo a la anchura del bloque que los contiene.

Ejemplo esquemático de un layout de dos columnas

El código que se utilizaría en la imagen del ejemplo podría ser similar a este:

#contenedor{width: 100em; max-width: 100%;}
#navegacion{width: 40em; max-width: 40%;}
#contenido{width: 60em; max-width: 60%;}

Para este sitio web hemos adaptado la CSS del sistema de retícula de 960.gs, reemplazando las unidades de medida en píxeles por emes y añadiendo la propiedad max-width para cada ancho de columna.

Esta técnica aparece explicada con detalle en el libro CSS Mastery: Advanced Web Standards Solutions, publicado en español por Anaya Multimedia como CSS. El capítulo dedicado a los distintos tipos de layouts se puede leer completo online en Web Reference.

La programación en Flash permite crear animaciones y efectos estéticamente muy vistosos, pero cuando el objetivo del sitio web es recibir tráfico o captar clientes, entonces está completamente desaconsejado. Veámoslo con este ejemplo, el sitio web de Rosa Clara.

Un web en Flash no es indexable por los buscadores, por lo que sus páginas interiores (en realidad este concepto no existe en los webs en Flash) nunca podrán aparecer en Google. Por otro lado, los buscadores no tienen acceso a los contenidos reales del Flash para calcular la relevancia semántica de las búsquedas, por lo tanto los resultados con ficheros Flash (SWF) siempre aparecerán mal posicionados con respecto a resultados de otros webs en HTML. Aquí podemos ver las páginas indexadas por Google del web de Rosa Clara.

Vemos que la única página HTML normal que aparece en los resultados es la home. Lo demás son ficheros SWF (Flash) y marcos donde se supone deberían cargar esos ficheros.

Un web en Flash tiene problemas graves de usabilidad, veamos algunos ejemplos. Imaginemos que queremos enviar por email un link correspondiente a un contenido al que hemos accedido desde la home después de varios clicks. Veremos que es imposible porque esa página no tiene una URL propia. Tendríamos que enviar la URL de la home y explicar por donde hay que clickar. Otra pega: imaginemos que logramos llegar al contenido que buscábamos y que queremos volver a la home: si le damos al botón de “Atrás” del navegador, en lugar de saltar a la home saltaremos al sitio web en el que estábamos antes de entrar al web en Flash, a menos que hayamos abierto el web en una pestaña nueva, caso en el que el botón de volver atrás aparecerá desactivado…

Después de 4 clicks desde la home, ni ha cambiado la URL, ni podemos volver atrás.

Los contenidos de los webs Flash son estáticos: No suelen incorporar gestores de contenidos, con lo que si queremos cambiar los contenidos tenemos que recurrir a alguien que tenga el código fuente del web, que lo añada, y que lo recompile todo. En la práctica, suele ser tan engorroso mantener un web en Flash, que además de resultar más caro, provoca que en poco tiempo los contenidos acaben quedando obsoletos.

Algunos dispositivos no soportan Flash. El iPhone por ejemplo, no permite ver Flash, por lo que al entrar en un web en Flash, simplemente se vería una página en blanco.

Un web en Flash no es accesible. Eso quiere decir por ejemplo que una persona con alguna deficiencia tendrá más dificultades, o directamente no podrá navegar por el web, y que no tenemos la garantía de que se puedan visualizar desde otros dispositivos que no sean navegadores clásicos en Mac o PC.

Con estos inconvenientes, en general, usar Flash para construir un web sólo tiene sentido si el objetivo del web no es captar, es decir si no buscamos que nos llegue tráfico de Google, o de otros sitios web que nos podrían enlazar a páginas interiores, si el contenidos del web va a ser básicamente estático, y si buscamos efectos visuales que no sean posibles con HTML, CSS o Javascript.

¿Entonces porqué hay tantos sitios web corporativos en Flash?

Posiblemente sea porque es lo que mejor le entra al cliente por los ojos (y por los oídos), y muy pocos se van a poner a pensar en los inconvenientes que plantea desde el punto de vista del marketing online, a menos que alguien se los explique. Ahora el Flash se usa menos para desarrollar sitios web corporativos, aunque todavía quedan agencias que lo recomiendan, y todavía quedan incautos que pican.

Dicho esto, el Flash puede resultar muy útil, pero para crear juegos, animaciones o banners.