En plena "Era de la Información y las Telecomunicaciones", uno de los objetivos primordiales de nuestra sociedad debe ser el de facilitar el acceso a dicha información a cualquier individuo que la compone, independientemente de su estatus social. Sin entrar a valorar si verdaderamente esto se ha conseguido o no, la realidad es que en estos momentos estamos dando otro pasito más: ahora, además, esta información debe ser accesible en cualquier momento y desde cualquier lugar. Esto ya es posible gracias al avance de las nuevas tecnologías wireless de transmisión de datos y a dispositivos móviles como los smatphones o tablets .
Una nueva forma de mirar al mundo
Estos nuevos terminales, que ya visitan nuestras páginas web, tienen una sola limitación (insalvable a corto plazo): el menor tamaño de sus pantallas. Esto significa que ya hay, al menos, cuatro tipos de pantallas que no podemos ignorar si queremos que nuestra página web y/o comercio electrónico tenga pleno éxito en la actualidad, e incluso que sea viable en un futuro casi inmediato.
Tipologías de pantallas
de mayor a menor tamaño/resolución (2013)
* Estos datos son sólo orientativos ya que se han extraído de métricas propias de varios de nuestros sites corporativos o de comercio electrónico.
Este cambio de escenario no sólo trae bajo el brazo la oportunidad evidente de llegar más fácilmente y en cualquier momento a nuestro público objetivo. Como en cualquier proceso evolutivo, la adaptación se impone como condición capital para la supervivencia. Y en este caso, adaptarse es convertirse en responsive.
¿Qué es una página Web responsive?
El diseño web responsive o adaptativo se trata de una técnica de desarrollo web que genera una estructura a través de la cual el contenido fluye adaptándose al tamaño de la pantalla específica donde se está visualizando en cada momento. No se trata de realizar un diseño a medida y exclusivo para, por ejemplo, los móviles. Esta última opción también es perfectamente válida e incluso aconsejable para grandes proyectos (en modo de sitio web o incluso de app). Sin embargo, creo que con el tiempo se impondrá la filosofía responsive a la hora de diseñar páginas web o cualquier aplicación (como ejemplo de esta tendencia tenemos el diseño del nuevo Windows 8).
Para facilitarnos el trabajo existen proyectos de código abierto como Bootstrap, framework desarrollado y liberado por Twitter que, entre otras cosas, nos permite diseñar nuestra web sobre una estructura de 12 columnas que se adaptarán al tamaño de la pantalla de cada dispositivo. Basadas en este framework concretamente o en esta filosofía en general, cada vez encontraremos más plantillas de diseño responsive para Drupal, Magento, Prestashop...
¿Qué debo tener en cuenta con respecto a mi web actual?
En España, en 2011 las visitas desde dispositivos móviles suponían el ≈5%. En 2012 eran algo más del 10%. En 2013 es más del 30% y parece que el ritmo de crecimiento todavía aumentará. Estos datos necesitan poco análisis: nuestra web debería ser ya responsive. Y si sigue sin serlo, de aquí a muy poco tiempo (¿meses?) será una página inútil para la mayoría de los visitantes y cuyo fracaso será inevitable e inminente.
Es hora de hacerse una serie de preguntas:
- ¿Utilizan sus visitantes potenciales dispositivos móviles cuando solicitan la información que ofrece su página web?
- ¿Se ve correctamente su página web en dispositivos móviles?
- ¿Las funcionalidades de su web (alta, formularios de contacto, venta de productos...) se pueden ejecutar fácilmente desde un móvil?
A partir de las diferentes respuestas, puede cambiar el carácter de urgencia de la toma de la decisión, pero no la decisión en sí: más temprano que tarde su página web deberá ser responsive.
[Actualización 2018]
Las previsiones se cumplieron. A partir de 2015 más de la mitad de las visitas ya provenían desde móviles y tablets. En 2018 ¡más del 70%! Obviamente el "Be responsive!" se ha quedao corto y ahora debemos centrarnos en "Mobile first". Esto significa que, a la hora de plantear la estructura de una web (a nivel diseño, funcional, SEO...), la prioridad debe ser el móvil.
Ejemplos de páginas web responsive
