> Manuales > Manual de Responsive Web Design

Cuando diseñamos una web debemos fijarnos en tres cosas fundamentales, diseño para todos los navegadores y sistemas, todas las resoluciones de pantalla y todas las velocidades de conexión.

Anteriormente explicamos que "diseño responsive" es diseño web, así que en líneas generales todo lo que vamos a comentar sirve también para el diseño web en general. Pues bien, cuando diseñamos una web, queremos que sea fácilmente usable y consumible y por ello debemos optimizarla en varios sentidos. El objetivo es el de siempre, que las personas aprovechen la página, tengan una experiencia de usuario grata y accedan a los contenidos que nosotros queremos.

Diseño responsive no es solamente hacer que una web se adapte tanto a las pantallas de ordenadores como a las de los móviles, que también lo es. En realidad hay mucho más por detrás y lo vamos a ver en forma de tres pilares fundamentales que describiremos a lo largo de este artículo. Los enumeramos a continuación:

Las técnicas responsive se focalizan en diseñar para:

Todos los navegadores y sistemas operativos

Los navegadores con los que se accede a Internet tienen diferencias los unos con los otros y debemos ser conscientes de ellas para que las páginas web se vean correctamente siempre. Hay multitud aspectos que deben ser tenidos en cuenta, pero en general nos debemos de asegurar que el contenido sea accesible en todos los browsers.

Pero las diferencias no solo están relacionadas con los navegadores, también con los sistemas operativos. Hubo un tiempo en el que las personas tenían mayoritariamente Windows y podíamos estar seguros que si nuestro sistema estaba optimizado para el SO de Microsoft estábamos alcanzando el noventa y tantos por ciento de los posibles usuarios o clientes. Sin embargo ese panorama ha cambiado mucho en la actualidad, ya que hoy el sistema Mac OSX es bastante popular, así como el sistema Linux.

Pero la cosa no acaba ahí, puesto que los teléfonos móviles o tabletas se usan para navegar y el uso de Internet desde dispositivos de movilidad representa ya la mayoría del tráfico en algunos países. Estos dispositivos tienen sus propios sistemas operativos, que también debemos tener en cuenta.

Todas las dimensiones / resoluciones de pantalla

Quizás sea éste el apartado que todos pensamos cuando nos hablan de "Responsive", diseñar una web que se adapta a la pantalla de ordenadores y dispositivos. No hace falta hablar mucho de ello, porque es la imagen mental que todos tenemos: Usar las media queries para que todos los ordenadores y móviles vean la web con los elementos dispuestos de manera que se facilite la lectura.

No queremos decir que este punto no tenga importancia, pero hay bastante más detrás. No obstante, la mayor parte de las técnicas que se aprenden en relación al lenguaje CSS van orientadas a este punto y es el que veremos con más detalle a lo largo del Manual de Responsive. Por todo ello, sobran las palabras de momento para describir este punto.

Todas las velocidades de conexión

Cuando pensamos en diseño móvil no debemos pensar solo en lo limitado del tamaño de la pantalla del dispositivo. No nos podemos olvidar que mucha gente navega en el móvil con conexiones de limitado ancho de banda, o incluso, aunque tengan ancho de banda amplio en muchos casos, casi siempre existen planos de datos que tienen limitada la cantidad de megas o gigas que se pueden consumir al mes.

Por tanto, hoy volvemos a encontrarnos en la necesidad de optimizar la web para que tenga menos peso y sea rápida de transferir, como en la época del acceso a Internet en las líneas telefónicas con los módems de antaño. Debemos optimizar el código, HTML, CSS y Javascript, así como las imágenes y cualquier otro elemento que forme parte de la página. Pero no solo eso, también tenemos que "optimizar" el contenido. Aquí la palabra "optimizar" no estaría tan bien utilizada y aunque no deja de ser una optimización, se trata más que nada de elegir bien el contenido que se desea mostrar en cada momento.

Es más, sabiendo que las personas esperan de media tan solo 5 segundos para desistir en el acceso a una web, con mayor motivo debemos mantener acotada la cantidad de contenido a mostrar.

En este punto habría que señalar que la selección de un contenido correcto, conciso, claro, breve para que sea fácil de descargar, pero lo suficientemente extenso para que ayude correctamente a vender un producto, una marca o una persona, es una disciplina completa. Existen personas que se han especializado en estudiar el contenido y asegurarse que siempre sea el correcto e incluso hay personas que saben optimizarlo de cara a la venta, otras de cara a la comunicación corporativa, etc.

Además, cuando se trata de optimización de contenido muchas veces hay que tirar mano de programación informática. Existen técnicas puramente ligadas a la comunicación escrita, así como al aspecto estético, como la optimización de gráficos. Pero además hay técnicas de programación, como Ajax, que pueden ayudar a tener un contenido optimizado para una descarga de la página más breve.

También es importante la minimización del código Javascript o CSS. En resumen, existen muchos puntos interesantes, que veremos más adelante en otro artículo, para mejorar la carga de una web en términos de ajustar el contenido correctamente.

Conclusión

El diseño web necesita adaptarse a todas las condiciones donde puede ser consumido. No estamos hablando solamente de las pantallas, también del navegador o del sistema operativo del ordenador o dispositivo. Pero también el contenido debe ser pensado de manera que no se ofrezca información innecesaria que no agrega valor en la estrategia de comunicación. El contenido es el rey, pero también tiene peso, y no solo eso: mucho contenido puede despistar de lo realmente importante. En el caso de un comercio electrónico puede acabar provocando que el usuario se sature con muchas opciones ello derive en la pérdida de una venta.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual