El futuro de las web se llama “Responsive Web Design”

Según un estudio realizado por IAB Spain y The Cocktail Analysis en septiembre de 2012, 8 de cada 10 usuarios españoles acceden a Internet a través del móvil, a pesar de que 1 de cada 5 reconoce que no es un dispositivo cómodo para acceder a la red. La característica más valorada por los usuarios es que se puede acceder en cualquier momento y lugar. Entre los dispositivos más cómodos para acceder a Internet, según este estudio, es el tablet, con un 45%, seis puntos por encima del ordenador. Es más, su presencia entre la población de entre 18 y 55 años ha crecido del 8% al 23%.

El auge de los dispositivos móviles y tablets para acceder a Internet evidencia la necesidad de adaptar los contenidos de las páginas web, blogs y demás sites al amplio abanico de tamaños de pantalla de los dispositivos que hay en el mercado actualmente.

Fuente: ‘Responsive Web Design» Ethan Marcotte. Pág. 95

Como toda premisa cuando hablamos de marketing y comunicación, el objetivo es que el mensaje llegue de la manera más eficaz posible al público objetivo. Y eso pasa por ponérselo fácil al visitante de nuestra web: facilitar la lectura, el acceso a contenidos relevantes, etc.

Todo ello se traduce en la adaptación del diseño y la estructura de la página web correspondiente al tamaño del dispositivo que está utilizando el usuario. Esto se consigue gracias al Responsive Web Design o diseño web adaptable, término acuñado por el diseñador y autor norteamericano Ethan Marcotte. Mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, esta técnica de diseño y desarrollo web  permite crear sites que se adapten al ancho de todos los dispositivos. Su esencia es facilitar el acceso a la información, independientemente del dispositivo que se use y, por tanto, mejorar la experiencia final del usuario con nuestra web. Así, solamente será necesario disponer de una única versión de la web que se podrá visualizar en el ordenador, el móvil, las tablets o cualquier otro dispositivo.

Ventajas del Responsive Web Design

• La principal ventaja es que se logra que la experiencia del usuario sea más positiva, ya que contribuye a que la información esté más accesible y visible, lo que impacta de forma muy positiva en la marca al asociarse esta experiencia con conceptos como la creatividad y la innovación.  Y es que una buena experiencia de usuario se traduce muchas veces en un mayor número de visitas, una mejor valoración por parte de los usuarios y una reputación más consolidada en redes sociales, entre otros aspectos.

• Asimismo, mejora la usabilidad y la conversión, ya que según algunos estudios, cuando se aprovecha toda la pantalla del dispositivo que utiliza el visitante, aumenta la conversión de usuario a cliente. En este sentido, el Responsive Web Design ofrece la posibilidad de controlar mejor la presentación de la información a los usuarios. Podemos jerarquizar la información de nuestra web según el dispositivo al que nos dirijamos, jugando con la posición y el tamaño de los elementos, para llegar de una manera más eficiente a nuestro público objetivo. Por ejemplo, podemos agrandar el tamaño de botones de llamada a la acción y así hacerlos más accesibles en dispositivos táctiles.

• Por otro lado, el beneficio más relevante de cara al administrador de una web es la reducción de costos. Ya no será necesario tener una versión para PC y otra distinta para móvil. Con una única versión conseguimos que los contenidos se visualicen en todos los dispositivos, lo que supone un ahorro tanto en tiempo de gestión de contenidos como en recursos económicos, ya que no se requerirá de una segunda versión para otro dispositivo. Eso sí, la inversión inicial para desarrollar una web con Responsive Web Design será superior porque requiere de una mayor elaboración, si bien a largo plazo resulta más rentable.

• Otra de las ventajas destacables es que mejora el SEO de la página. Hasta ahora, la versión móvil de una web se alojaba habitualmente en un subdominio, mientras que las páginas con Responsive Web Design pueden ser visibles en cualquier dispositivo con un único dominio. El hecho de tener una única URL es un factor muy valorado por Google porque puede encontrar de forma más eficiente los contenidos y porque es más fácil para el usuario interactuar con la página, compartir y enlazar contenidos.

No obstante, a pesar de todas las ventajas descritas, como en toda decisión, deben considerarse las desventajas de esta nueva forma de diseño y desarrollo web. En este caso, conviene reflexionar sobre el objetivo principal de la web de cara al usuario. Se debe valorar si su experiencia en relación a ese objetivo será igualmente satisfactoria a través de dispositivos como el móvil. La pregunta es, ¿la información que demanda el usuario cuando accede desde un ordenador es igual a la que demanda cuando accede desde un móvil?

Es el caso, por ejemplo, de una web con múltiples elementos (un comercio electrónico complejo o una página de noticias con numerosas secciones y subsecciones). Es posible que en estos casos sea más conveniente prescindir de algunos elementos de la web y desarrollar una versión móvil más sencilla sólo con los elementos imprescindibles para que la experiencia del usuario sea óptima y cumpla con los objetivos marcados, que es, en definitiva, de lo que se trata.

ENLACES DE INTERÉS

Artículos recomendados:
A List Apart: Responsive Web Design
Responsive Web Design: What It Is and How To Use It
Beginner’s Guide to Responsive Web Design

Website que recoge una colección de sitios que usan Diseño web adaptable:
Media Queries

Frameworks:
Less framework
1140 CSS Grid
Foundation
Skeleton
Twitter Bootstrap

Utilidades para testear:
Extensión que nos permite redimensionar la ventana del navegador para probar la web en diferentes resoluciones: http://codebomber.com/jquery/resizer/

Navegador que permite testear en diferentes resoluciones de móvil tablets y resoluciones personalizadas: http://www.opera.com/developer/tools/mobile/

Una herramienta útil para testear online nuestros diseños responsive en los diferentes dispositivos: http://www.responsinator.com/

Web curiosa donde publican fotos de tests de webs responsive en distintos teléfonos y tablets: http://mobiletestingfordummies.tumblr.com/