Este artículo pretende dar una visión personal, y no solamente mía, sino de la comunidad de DesarrolloWeb.com en general y por supuesto, de Daniel Martínez @Wakkos en particular. Adicionalmente queremos establecer una serie de consejos útiles para el diseño web en general que te servirán para hacer diseños adaptables en particular.

Cuando comenzamos la corriente del "responsive" y gracias a Daniel realizamos los primeros eventos en directo en los que hace tres años ya lo veníamos diciendo.

"El diseño responsive es diseño web"

Ahora todos queremos hacer diseño Responsive y así es como debe de ser. Pero ojo, cuando haces un diseño responsive realmente no estás haciendo nada del otro mundo, sino simplemente lo correcto.

A donde voy es que hablar de responsive queda muy bonito, nos hace parecer más entendidos, pero realmente de lo que estamos hablando es de diseño web y nada más. La web es un medio donde participan todo tipo de terminales, dispositivos, mil tipos de pantallas, etc. Debemos pensar en todos ellos cuando estamos diseñando una web y no solamente en móviles o solamente en ordenadores de escritorio.

Es nuestro trabajo y responsabilidad como diseñadores. Es una manera de hacernos unfavor a nuestros proyectos, a nuestros clientes y por ende a los usuarios que visitan las webs que fabricamos.

Así pues, en adelante, cuando nos refiramos al "diseño responsive" (por nuestra parte a lo largo del Manual de Responsive) entendámoslo como una manera de decir que el layout de la página va a adaptarse a la ventana donde estamos visualizándola. Pero no perdamos la noción que es simplemente la manera de actuar que debería tener cualquier profesional que se dedique al desarrollo de sitios web.

"No se entiende el diseño web si no es responsive"

Consejos para que el diseño web adaptable sea más fácil de producir

Nuestra tarea a lo largo del Manual de Responsive es establecer las guías y explicar las técnicas para que cualquier persona pueda comenzar a implementar el responsive de una manera más sencilla, menos traumática.

No vamos a explicarte en este artículo las técnicas esenciales, sería imposible por la longitud del texto, pero sí darte algunos consejos que esperamos puedas seguir en adelante. Repara además que todas estas buenas prácticas son comúnes a cualquier trabajo de diseño web, no solamente a los diseños adaptables, por lo que servirán para cualquier diseñador.

No uses estilos in-line:
Los estilos inline son aquellos que se colocan en el propio HTML, sobre todo en el atributo style de la etiqueta. También por supuesto es inadecuado usar cualquier atributo HTML que sirva para aplicar un formato, como align="center". Esos estilos inline van a ser un corsé que quizás no se adapte a todas las circunstancias. Igual un texto que aparece centrado en cierta resolución y queda bien, resulta horrible en una resolución diferente y si tu etiqueta tiene marcado ese estilo inline no lo podrás cambiar cuando lo necesites, en tus media queries que veremos más adelante.

La web no necesariamente se debe ver igual en todos los dispositivos y navegadores:
El responsive es justamente eso, adaptarse al medio, pero lo que quiero decir ahora es que una web no necesita verse igual en todos los clientes web. Debe poder leerse bien en todos y permitir a los usuarios consumir su contenido, pero no debemos empeñarnos en que se vea igual en Internet Explorer 8 que en Google Chrome. Entendamos que son navegadores diferentes y por tanto la web es normal que se vea diferente. No tratemos de marear la perdiz para conseguir un sin-sentido.

No diseñes para una plataforma:
Cuando haces responsive o cuando haces web en general no se trata de diseñar u optimizar una web en un dispositivo, navegador o sistema operativo dado. Generalmente es una equivocación andar descubriendo si es Internet Explorer o si es Android o si es tal cosa o tal otra el sistema que nos visita. Si basas tu optimización en plataformas ¿Qué pasa cuando aparezca una nueva? o una versión nueva? vuelves a optimizar? Esto no quiere decir que para solucionar un problema puntual no puedas preguntarte si estás en tal sistema, algo que a veces puede salvarnos la vida, sino más bien decimos que no se debe asumir como una estrategia de diseño en general.

Usar el Javascript para lo que es:
A veces tratamos de solucionar problemas con las herramientas que no son adecuadas y Javascript se presta a ello. Por ejemplo, una animación Javascript en vez de una animación CSS. O un diseño de filas en formato cebra, alternando colores. Si se puede hacer con CSS es preferible que apliques CSS, porque serás capaz de modificar esos estilos fácilmente dependiendo de las características del dispositivo que te visita, algo que no es tan rápido o tan sencillo si lo haces con Javascript. Eso no quita que se use Javascript en ciertas situaciones, sobre todo a modo de fallbacks, para facilitar una segunda vía en navegadores que no la soportan. Por ejemplo, hacer una animación con Javascript cuando el navegador del usuario no acepte las animaciones CSS. Aunque quizás antes nos debemos preguntar ¿realmente es necesaria esa animación en aquel sistema que no la soporta?

¿Ya te hemos dicho que no uses tablas para maquetar?:
Creo que a día de hoy ya no es necesario, o no debería serlo, incidir en este tema. Pero por si las moscas, no cuesta nada volver a mencionarlo. No se debe maquetar con tablas. En vez de eso, usa contenedores como DIV, o si encajan todavía es mejor usar los semánticos como ARTICLE, SECTION, MAIN, etc. Es verdad que las tablas son muy cómodas para crear una estructura de columnas donde colocar contenido, pero no son nada flexibles para un diseño responsive. Todo lo que tengas en tablas lo vas a tener que cambiar tarde o temprano por otros tipos de contenedores, para luego mediante CSS definir la estructura de columnas, una o varias, según las dimensiones de la pantalla o el navegador. Así que conviene que cuanto antes te acostumbres a desechar las tablas, si es que todavía las usas. Esto no quiere decir que nunca más vas a poder usar la etiqueta TABLE, ni mucho menos. TABLE es ideal para mostrar información tabulada, por ejemplo un listado de registros, una tabla de características de producto, donde sabes seguro que siempre se van a visualizar los contenidos tabulados. En ese caso, hasta TABLE tiene un correcto valor semántico.

Unidades relativas:
Si no lo haces ya, conviene que te vayas acostumbrando a usar unidades de CSS de las relativas, como %, em, rem. Esto te facilitará la asignación de espacios y tamaños más que las unidades absolutas como px, cm, pt… El motivo es porque en un diseño responsive no sabes el tamaño que vas a tener para desplegar un contenido. Por ejemplo, si asignas a una caja una anchura de 600px ¿qué crees que pasará si la ves en un dispositivo que tiene una pantalla de 320px de ancho?. Si en vez de ello hubieses definido esa anchura como 80%, no habrías tenido quizás problemas.

Volveremos seguramente a incidir sobre todos estos puntos en el futuro en el manual de Responsive Web Design.