‘Diseño sensible’ y ‘Mejora progresiva’

Poco a poco se me van planteando nuevos retos de diseño para la nueva versión de Encanta. Y mientras volvía a buscar mas información sobre CSS y demás, llegó a mis manos los conceptos de «Diseño sensible» y «Mejora progresiva«.

El primero se basa en la técnica de un espacio extensible. Un navegador siempre ha dependido de varios factores, como son el tamaño de ventana (cada visitante tendrá su resolución de pantalla y su cantidad de colores), por si fuera poco además estaba la posibilidad de diferentes versiones y programas de navegación, cada uno siguiendo el estándar que mas se le antojaba y representando éste como mejor le gustaba al programador. Total que al final siempre tenías la sensación —los que montábamos web’s— de diseñar versiones que se vieran bien en el mayor cantidad de navegadores posibles. Con el «Diseño sensible«, se intenta aunar lo del espacio de la ventana. Si algo no cabe, lo pone en otra parte. O si no es importante lo omite o lo representa de otra forma. Para ello, lógicamente tiene que estar preparado, con una serie de condicionantes: «Si ocurre tal cosa, se verá de ésta forma.»

El concepto de «Mejora progresiva» se basa en el concepto de representar el diseño en el mayor conjunto de navegadores, y después aplicar la «capa» de los estilos. Es decir: Primero hacer el diseño básico, representando todo con las etiquetas (tag’s) básicas de diseño web. Con los elementos básicos que se emplean desde que el HTML existe casi. Después aplicas los estilos CSS a cada elemento, empleando la versión mas básica, y mas tarde añadiendo las versiones mas modernas. De ese modo, si falta un elemento en la cadena. Es decir, si no tienes la versión mas moderna de la tecnología, pasas a la visibilidad anterior, y si tienes lo mas básico, aun puedes acceder a la navegación y leer la web. Es éste el concepto que quizás mas me ha interesado, pero a su vez el que considero que puede llevarme mas tiempo a la hora de montar una web.

Seamos sinceros, de estilos se lo justito. y aderezado con las «pautas de accesibilidad» que se basan en: «Hasta que la tecnología lo permita, solo se deberá usar tal cosa, sino no se usará, o bien se pondrá un aviso de tal limitación para poder usarlo«. Con la «Mejora progresiva«, básicamente estás haciendo un diseño mejor pensado en el tiempo.

Lo que me preocupa de todo esto es a la hora de aplicarlo a Encanta. Las páginas básicas de información no tienen mucho misterio, solo es texto con información y algún dibujito de adorno o alguna captura de pantalla. Los retos principales se basan a la hora de meter el contenido de las revistas. Ahí están los primeros problemas. Cada revista tiene un diseño base, y se ve de una forma diferente de una revista a otra, además de ir cambiando ese diseño base, muchas veces para innovar (en el diseño original de la revista, para impactar de otro modo al lector). Encanta intenta «respetar» cierto diseño original de la revista:

  • Si tiene un fondo de lectura poner éste, siempre de acuerdo con que se pueda leer el texto fácilmente, sin que esta visualización entorpezca la lectura.
  • Si se ven las imágenes de una forma, ponerlas —mas o menos— de la misma forma.
  • Si están en una columna, con pies de foto, y éste tiene un diseño personalizado al artículo, lo mismo.
  • Si hay pequeños comentarios por el texto que hacen alusión al artículo, lo mismo.
  • Si una cosa se representa de una forma, intentar imitar ese diseño.
  • El texto principal del artículo legible, en su mayor parte, respetando cierto «aire» al diseño, pues con los tipos de letra genéricos no puede uno ser muy original, para que sea lo mas compatible con casi todo el mundo.

Todo está pensado para una lectura fácil, pero a la vez que conserve en cierta medida la apariencia de la revista que se lee.

Pero ese diseño está basado en tablas. Es decir. Muchas cosas se representan con el elemento «table«, haciendo juegos con dicho elemento, para poder representar de una forma similar el contenido de la revista y del artículo en sí.

Aqui es cuando el concepto me cambia totalmente al aplicar los CSS y las capas (layer ó div) en lugar de las tablas que «solo se deben usar para representar datos de este tipo«. Sin duda, diseñar con el sistema de «diseño fuera de la página«, es algo cuanto menos interesante, pero a la vez complicado. Pues en cierto sentido ya estas limitando la visibilidad del visitante, haciendole pasar por el aro de: «si no usas un navegador que soporte estilos, no lo veras bien«. El concepto de «Mejora progresiva» elimina esa barrera, pues ya tienes el diseño base, y después aplicas las mejoras añadiéndolas poco a poco. Con el «Diseño sensible» lo adaptas a la visibilidad del visitante que tenga en su dispositivo de navegación:

  • Sea un ordenador.
  • Sea una tableta.
  • Sea un teléfono inteligente.
  • Tenga un monitor pequeño.
  • O un proyector de imagen.

Pero estos dos conceptos son opuestos a la hora de aplicarlos al diseño de «revistas en Encanta«. Están pensados en aplicaciones tipo «mismo diseño para todo» (es decir, una aplicación que va con una base de datos, un CMS por decirlo de alguna manera).

Aquí es cuando tengo mis dudas sobre que pesa mas: ¿seguir el diseño personalizado conservando la esencia de la revista o pasar de ello y aplicar las nuevas mejoras perdiendo esa esencia?

  • Si uno pierde la identidad de donde viene, lo mismo no llegas igual a todos.

pero por contra:

  • Si no llegas a todos, ya estas perdiendo posibles lectores ávidos de información.

En cierto sentido el diseño «tal y como lo estaba haciendo» se ve bien tanto en navegadores antiguos como en navegadores modernos. Pero a esto ya habíamos llegado a la conclusión:

«Si los visitantes no usan dichos navegadores, sino los modernos, ¿para qué seguir haciéndolo como antaño pendiendo las posibilidades que si consideras interesantes? Al final sólo se usará puntualmente ésta posibilidad, y será mas que nada por curiosidad

Los estilos en cierto sentido los veo útiles, pero en otros muy restrictivos. Se pueden hacer personalizados y en cascada de tal forma que puedas aplicar varios anidados dependiendo de donde te encuentres. Lo cual es una mejora sustancial, al menos de una forma uniforme y general. Pero en el momento de personalizar las cosas para cada página, ahí aparecen las limitaciones, provocando que tengas que usar diferentes hojas de estilo para según qué páginas.

Hay determinadas aplicaciones que están regidas por un único diseño. De esa forma consigues el concepto de uniformidad que da sensación de consistencia a toda la web: «Un diseño único para dominarlos a todos«, pero cuando hacer una web que tiene diferentes diseños dentro del armazón de un diseño personalizado, ahí te varían todos los esquemas. Tienes que elegir y claudicar en determinadas ocasiones, el problema es el «hasta dónde»:

¿Debo hacer el diseño pensando en las nuevas tecnologías que aprovechan muchas cosas interesantes, pero por contra están todo el rato cambiando?

No puedo estar condicionado a unas reglas que varían con el tiempo. Tengo que tener unas bases solidas para poder seguir añadiendo contenidos. Cuanto mas aprendido tenga el camino mejor podré andarlo. Pero si me cambian las botas cada 3 pasos, ¿cómo voy a habituarme a dicho paso?

Esos son los problemas con los que me enfrento actualmente. Veo las mejoras posibles paro al aplicarlas me encuentro con que tengo limitaciones precisamente por intentar aunarlas todas. Necesito saber cuales son válidas para lo que pretendo hacer, pues esas serán las que tendré que adoptar para todo el conjunto. No es un trabajito de 2 días. Es un proyecto de varios años. Puedo adaptarme progresivamente (está claro que aunque uno tenga cierta base de algo, según se vaya acostumbrando se le ocurrirán nuevas formas de mejorar en el tiempo, hará las cosas de una forma mas optimizada, pues ya sabrá el camino y podrá recorrerlo con mayor velocidad). Lo que no estoy dispuesto es a estar cambiando cada 2×3 por exigencias de unas pautas que no van con mi forma de vida. Estaría negando todo lo que soy.

Hace unos meses me planteé el reto de 3 revistas. Escogí varios números al azar de varias revistas que podrían representar, mas o menos, una muestra genérica de todo esto que narro aquí. Un diseño muy facilito de una revista en disco (que en cierto sentido tiene poco diseño personalizado). Un diseño intermedio, y uno muy elaborado. Me puse el reto inicial de:

«Si consigues representar esta muestra igual que el diseño que tienes pero con los nuevos conceptos (capas y estilos) entonces adelante con ello».

Ahí empezó mi búsqueda de información. Pues antes de embarcarme al diseño en sí, me gusta aprender que limitaciones tiene la herramienta, y la búsqueda de cosas selectivamente dependiendo de para que diseño y artículo me hacen esquematizarlo todo en la cabeza antes de plasmar una sola línea de código.

¿Cómo debo diseñar un elemento determinado? está construido en una tabla que aprovecha el espacio de determinadas celdas, unas son extensibles dependiendo de la visibilidad, pero otras son limitadas. Unas contienen un elemento concreto, pero otras contienen el resto que se acopla. Unas tienen un tipo de letras, otras un párrafo en concreto. De pronto te encuentras con una ristra de fotos con pies de imagen, ahora hay que ponerlo a un lado acoplado al texto, antes lo hacia así, pero ahora hay que hacerlo asá. Todo esto en la cabeza. No es sencillo, pues todo lo que habías aprendido ahora tienes que traducirlo a un nuevo lenguaje, que aunque parece que no, tiene sus limitaciones.

¿Cómo traducir un diseño de tablas dentro de capas? Aquí siempre tengo problemas. Con una tabla tenía mis limitaciones, pero anidando varias tablas conseguía varios trucos dependiendo de lo que me plantease. El problema es aplicar a las capas: éstas pueden variar de tamaño, de altura. Puedes limitarlo, pero si metes algo dentro, éste te puede variar y después no te casa con lo otro. Si eso ocurre, pues no puedes delimitarlo aunque te varíe.

Está claro que si quitase «la esencia del contenido que intento montar«, me ahorraría muchos problemas. Y quizás muchos diseñadores lo hacen así precisamente para ahorrarse muchos quebraderos de cabeza. Quizás se plantean:

«Bueno, vale, esto es una navegador, no es una página en papel delimitada por unas reglas. En vez de trabajar mas de la cuenta, aprovecho lo mejor que tiene el diseño web, el formato no me interesa, solo quiero representarlo rápido.»

Pero si no le interesa el formato… ¿Entonces para que emplear estilos? es contradictorio…

3 comentarios

  1. Buscando información de la web el amiga me encanta he llegado hasta aqui y queria preguntarte como esta el tema de la actualización de la web que lleva parada desde el 2013 no asi su foro, fantastico por cierto.
    Si me lo puedes comentar por email al locomosxca.world@gmail.com te lo agradezco.
    Saludos.

  2. La página web de El Amiga me Encanta lleva paralizada sin una actualización seria desde diciembre de 2011 momento en el cual decidí replantearme varios asuntos:

    – Asuntos privados relacionados con mi persona.
    – Problemas con la forma de actualizar el proyecto. El actual sistema tenia el problema de sobrecargar el servidor Apache, y este empezó a tener problemas de estabilidad en cualquier alojamiento donde se pusiera, por lo que me vi obligado a mirarme con mas atención los proyectos tipo aplicación/base de datos.
    – Problemas estéticos y de diseño antiguo frente al diseño actual (que ya habrás leído en ocasiones, tanto por Encanta, por su foro, como por este blog -lugar donde puedes leer mas sobre el asunto además de otras cosas que se me pasan por la cabeza-).
    – Planificación de todo lo que eso conlleva incluso antes de empezar a plasmar una linea de código (me lo estoy tomando con calma, pues no es algo pasajero para mi, pero tampoco me va la vida en ello).
    – Elección de las herramientas y lo recursos esenciales para empezar que me sirve para dicho propósito de forma seria y continuada.

    No te tienes que preocupar porque desaparezca el proyecto. Mientras mis recursos me lo permitan seguiré poniendolo en línea. Llevo mas de 14 años con él (parones incluidos) y no planeo desaparecer de la noche a la mañana. En el caso de no poder ponerlo en línea, pediría ayuda a otros que si tienen espacio web para seguir estando visible, ya se ha hecho en antaño. En el caso de que no pudiera ponerse en linea, el proyecto seria guardado, pero con vista a ponerlo otra vez en línea en el menor tiempo posible.

    Me han ofrecido incluso hacerme la web, pero en esto peco quizás de «especialito» o cabezón. Aunque sea para toda la comunidad de usuarios de Amiga de habla hispana, es un trabajo mio y me gusta controlar la concepción y el diseño en toda su extensión. Saber cómo funciona, cómo actualizarlo, cómo arreglarlo, y cómo ampliarlo. Si sabes todo eso, en cualquier eventualidad puedes seguir adelante y al mismo tiempo evolucionar.

  3. Vaya, despues de enviarte un mensaje he encontrado la pregunta que te hice, Ups lo siento el haberme repetido, a la espera quedamos entonces del Encanta 2.0 🙂

ATENCIÓN: Puedes opinar sin meter Correo electrónico o Web.


Deja un comentario

Tu dirección de correo electrónico no será publicada.

*

code

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.