Principio de degradación: Aplicación en Tractis

Pocas veces habrán escuchado esta frase: principio de degradación. Es un término que se empezó a utilizar relativamente hace poco en discusiones de desarrolladores de aplicaciones web. En diseño web, este principio muestra cómo un sitio web se va «degradando» de la forma más ecológica posible frente a navegadores antiguos. La idea básica de este principio es que todo el material que se produzca para un sitio no afecte la lectura mínima cuando se utilice un navegador especial, que no cumpla con los estándares. A medida que bajamos de versión de un navegador observaremos la cantidad de soporte técnico.

Lo cierto es que un sitio bien degradado permite a cualquier usuario con un navegador antiguo seguir utilizando las cosas de un sitio de forma vertical, sin estilos de por medio, sin efectos, o con los disponibles para ese navegador en concreto. Un usuario con un dispositivo móvil que no soporta CSS podría aprovechar mejor la información si está bien degradada. Las imágenes –relacionadas con contenido– seguirán viéndose, mientras que las imágenes «decorativas» pasarán a un segundo o tercer plano.

El planteo

Desde un principio en Tractis tratamos que esto se vaya cumpliendo. Diseñando sólo para un grupo de estándares y no para una empresa en concreto. Aunque ponemos esfuerzo en dar soporte a navegadores obsoletos, nos damos cuenta que es un sobretrabajo gigante y la calidad no es la que queremos dar. Por ello, desarrollar algo para un navegador en concreto sólo hace que el sitio se observe horriblemente en otros. Es mejor sujetarse a este tipo de principios por la igualdad de beneficios que ofrece en todas las gamas de utilización.

Cómo se soluciona

El proceso a nivel código para llevar este principio no es simple del todo. Primero programamos en varias capas lógicas: XHTML para estructurar datos, CSS para la disposición y aspecto de cada estructura, JS para controlar eventos. La página debería verse incluso, sin soporte de CSS, esa es la meta. Un usuario debe al menos poder leer con lo que tiene a mano en ese momento. Si esta regla no se cumple, la degradación no es satisfactoria, lo que impide que un usuario quede limitado. A medida que el usuario vaya comprendiendo esto, utilizando versión más actualizadas de navegadores, éste irá recibiendo premios: el sitio comenzará a visualizarse a la idea más general, lleno de detalles los cuales llamamos regalos. Por ejemplo, al entrar al sitio con navegadores que soportan la propiedad estándar text-shadow podrán disfrutar de los detalles y sombreados que la aplicación permite.

El efecto obtenido

Si quieren ver el principio de degradación en acción, entren a Tractis utilizando Firefox, Safari y Internet Explorer 7. A simple vista, la barra principal del programa es casi igual en las 3 versiones, pero aquellos usuarios que utilicen navegadores con mayor soporte de estándares podrán disfrutar de los detalles. Los usuarios de Safari, verán la barra como fue en un principio, intencionalmente diseñada, mientras que en Firefox, al no tener todavía soporte de sombras ésta no mostrará la propiedad y dará otro aspecto, degradando correctamente. La barra seguirá siendo la misma sólo que, ésta responde a las propiedades mínimas que pueda soportar el navegador.

Algunas capturas de la barra principal en todos sus grados de degradación:

Otro excelente ejemplo de principio de degradación son los botones de acciones. Dependiendo la versión y la marca de navegador que utilicéis observaréis cambios notables. De nuevo: el tope lo ofrecen aquellos navegadores que soporten las propiedades estándares border-radius y text-shadow mientras que el resto lo mostrará como pueda, degradando hasta donde les sea posible. En Safari, los botones tienen esquinas redondeadas y sombreados en los textos, resaltando las formas de un botón, mientras que en IE7 y Firefox la cosa cambia debido a su nivel de programación: en IE7 los bordes redondeados no existen, dejando los botones de forma cuadrada y en Firefox hasta depende que versión, los bordes no son tan redondos como deberían ser por el mismo nivel que tiene la funcionalidad como está programada.

Ventajas para Tractis y para nuestros usuarios

Este principio nos deja beneficios tanto a nosotros, como desarrolladores como a nuestros usuarios. Nosotros no trabajamos para Microsoft o la Fundación Mozilla, sino, que trabajamos para un set de estándares, y consideramos más importante tener un nivel de soporte alto de estándares que un nivel alto de soporte de navegadores obsoletos. Nuestro código es resumido, justo y rápido. La escalabilidad es gigante, en comparación con otros proyectos y podemos tomar cartas en el asunto en cualquier situación. Para nuestros usuarios, todos los beneficios de un código que sigue los estándares: velocidad de carga, soporte, degradación, aprovechamiento de recursos de forma correcta y más.

Cuando entréis a una aplicación y no la podáis usar porque no está bien degradada os acordaréis de los estándares y de este post en donde hablamos del principio de degradación.

Por Diego Lafuente
Guardado en: Diseño, Tractis | 2 comentarios » | 21 de Enero de 2008