En el Manual de Responsive hemos conocido muchas características deseables de los sitios de Internet de hoy en general y de los sitios adaptables en particular. Ahora vamos a comenzar con una aproximación al flujo de trabajo que se podría realizar para la creación de un "layout responsive". Claro que hay muchas técnicas que deberemos conocer para poder producirlos, ya en código, pero no nos vamos a meter todavía con explicaciones demasiado técnicas, sino a estudiar los posibles procesos de diseño.

Con el término "proceso de diseño" de momento nos referimos al procedimiento con el que se puede construir un sitio, desde su concepción hasta su ejecución. Aunque de momento nos quedaremos en las filosofías o estrategias posibles para solucionar los problemas de la web de hoy.

Problemática de la web de hoy

Ya hemos hablado de ella en artículos anteriores, por lo que no vamos a introducirnos de nuevo en las circunstancias de la web actual, solo cabe recordar que hoy al diseñar "páginas web" tenemos que conseguir que éstas sean medianamente inteligentes para poder adaptarse a cualquier tipo de situación.

Debe quedar claro que existen decenas, o cientos, de dispositivos que se conectan con un sitio web y que los desarrollos deben poder verse correctamente en todos ellos. Esa variedad de ordenadores y dispositivos tienen unas características muy distintas y además un número siempre creciente.

Pasos para diseñar un sitio responsive

Deben de existir decenas de aproximaciones o flujos de trabajo para desarrollar un sitio "responsive" que tengan en cuenta la problemática actual descrita anteriormente. Aquí ya depende de cada diseñador y de sus costumbres, preferencias o formación. Vamos a introducir a continuación aproximaciones genéricas que son comúnmente aceptadas y aplicadas a nivel profesional y más adelante en futuros artículos nos dedicaremos a describirlas en detalle y apreciar las ventajas e inconvenientes de cada una.

1) Crear un HTML con el contenido que deseamos mostrar

En cualquiera de los caminos debemos partir de un mismo HTML. Como sabes, el contenido se escribe con HTML y debe ser común para todos los tipos de dispositivos e incluso para los ordenadores con pantallas enormes. El lenguaje CSS es el que nos permite aplicar un formato adecuado para la presentación de ese contenido y allí es donde podremos aplicar nuestras reglas, que permitirán que el diseño se adapte a cada tipo de sistema donde deba ser consumido el contenido.

A ser posible, el HTML tiene que ser bastante semántico, algo que aporta el HTML5. Es algo deseable por diversos motivos como ya hemos hablado en decenas de artículos en DesarrolloWeb.com y programas en directo.

Como resultado de este punto debes tener un HTML sencillo, en el que habrás situado el contenido completo de tu sitio y aquellas interfaces para las funcionalidades necesarias. Me refiero principalmente a los bloques de contenido, puesto que lo más seguro es que hayas colocado textos falsos (los típicos lorem) e imágenes que posiblemente no tienen nada quever, con la intención de ocupar los espacios que vas a usar en tu diseño. Lo que tendrás también son las imágenes de cabecera o pie, como el logo de la empresa, iconos sociales, barras de navegación, etc. En resumen, todo lo que se ha acordado en el prototipo que deberías incluir en la página web a construir.

De momento, si tienes dudas sobre si un contenido debería estar o no en el diseño inicial, es mejor que no lo pongas. O si es un contenido que solo se va a ver en ordenadores de escritorio, tampoco lo pongas, puesto que nos vamos a centrar primero en encajar todo en las pantallas pequeñas.

2) Aplicar CSS

Hacer el HTML es la parte menos divertida. Con el CSS comenzará la fiesta y podrás empezar a disfrutar la mejor parte del diseño web. Como sabes, el CSS sirve para aplicar un formato a la página, tanto en lo que respecta a la posición de los elementos como al estilo o aspecto que deben tener. En este punto debes comenzar a aplicar los estilos necesarios a la página, poco a poco, para que comience a verse como tú querías.

A lo largo del Manual de Responsive de DesarrolloWeb.com iremos explicando cada una de las técnicas y herramientas que te ayudarán a construir un CSS optimizado que nos permita crear un layout adaptable. Existen mucha información que seguramente querrás saber, pero es imposible contarla toda en el mismo artículo. De momento vamos a describir las dificultades que encontrarás, pues no solo debes conocer a fondo el funcionamiento de las CSS sino también cómo los navegadores lo soportan, pues no todos entienden las mismas reglas de estilos.

Cada navegador entiende un conjunto de reglas de estilos y aquellas que no soporta, por desconocerlas, simplemente las ignora. Ahí es donde comienza la parte más compleja del diseño web y donde podremos aplicar principalmente dos flujos de trabajo diferentes. Pero antes de explicarlos queremos analizar los dos tipos de circunstancias en las que debemos encontrar soluciones.

A) Recursos de diseño estéticos

Son aquellos estilos que se agregan para mejorar la estética de un sitio, como fuentes tipográficas especiales, cajas con esquinas redondeadas, sombras en textos o cajas, etc. Este tipo de elementos no requieren una especial adaptabilidad. Son menos preocupantes, porque no van a afectar a la accesibilidad de un contenido. Son interesantes para que un sitio se vea especialmente bonito, pero si un navegador no puede renderizar ese tipo de estilos no representará un problema de gravedad. Por ejemplo, si Internet Explorer 8 no es capaz de mostrar un borde redondeado, no va a pasar absolutamente nada, puesto que los usuarios serán capaces de ver las cajas, aunque tengan esquinas con ángulos rectos.

B) Diseño de layout

Son aquellos estilos que se encargan de presentar la información con una estructura definida, por columnas, cabecera, pie, etc. El layout, al que nos referimos también como plantilla, nos permite jerarquizar la información y desplegarla de manera que el usuario la pueda entender mejor, pueda apreciar la importancia de cada cosa y centrarse en lo que nosotros preferimos que se aprecie más. Por ejemplo, si una web tiene una barra lateral donde hay banners y otras cosas con menor importancia (lo que conocemos como "aside") en todos los sistemas deberíamos poder remarcar la menor importancia de ese contenido. Si un navegador no es capaz de situar esa barra lateral en su lugar, por lo menos debemos centrarnos en que no aparezca antes que otras informaciones más importantes. O incluso más importante sería que, si un navegador no consigue respetar el diseño de layout, que por lo menos no aparezcan unos elementos encima de otros, dificultando la lectura del contenido.

En resumen y Como sabes, en el mundo de la web, a todos los niveles, lo importante es el contenido. Si la estética de una web no es igual en todos los navegadores podemos seguir viviendo tranquilos. Sin embargo, si hay diferencias de layout éstas pueden provocar que el contenido no sea accesible, o entendible, y eso sí representaría un problema mayor que deberíamos corregir.

Aproximaciones para resolver los problemas de compatibilidad del CSS

Hemos dicho que nos debemos preocupar más por los problemas de layout derivados de las diferencias de navegadores y su soporte con CSS, aunque estas técnicas también pueden ayudarte a encontrar vías de solución de problemas estéticos.

Ahora deberíamos introducir dos nuevos conceptos que son variaciones diferentes para resolver un mismo problema, las incompatibilidades en el CSS: Progressive Enhancement o Graceful Degradation. Sin embargo, son conceptos y técnicas lo suficientemente importantes para verlos de manera independiente, por lo que lo dejaremos para el próximo artículo. Aunque de momento cabe decir que estas técnicas no son algo específico de Responsive Web Design, sino que las aprendimos cuando estudiamos HTML5 en el diseño web.

Si quieres saber más te recomendamos ver el vídeo sobre HTML5 y compatibilidad con los distintos navegadores.