Pruebas en responsive web design

Desde hace bastantes años venimos escuchando cosas como, por ejemplo, que las páginas se auto adaptan a los dispositivos o que realizando una sola versión es portable a cualquier móvil o Tablet. Esto es gracias al responsive web design o diseño adaptable.

Esta filosofía de diseño y desarrollo se basa en la idea de “web for all” que, en resumidas cuentas es adaptar la apariencia de las páginas web a los diferentes dispositivos del mercado donde se visualice la misma. En principio, debería de tener una visualización adecuada en cualquiera de estos, proporcionando una lectura clara, sencilla y cómoda para los usuarios.

La primera vez que se utilizó la definición de responsive design fue en A List Apart y tras fue ampliamente descrito en la W3C en julio de 2008 con el nombre de “One Web”.

La idea principal del responsive web design se ha visto truncada en los últimos años, por la gran cantidad de dispositivos en el mercado, que hace muy complicado que la respuesta en todos sea buena y provoque una navegación tortuosa y costosa, sobre todo en los que son de gama baja o “clones”.

Habitualmente, para realizar este tipo de diseños, se utiliza CSS3 que “selecciona” la versión más optimizada para ese dispositivo y reorganiza los elementos o discrimina los que no funcionarian correctamente. Además HTML5 permite que la experiencia para los usuarios sea excelente.

La gran ventaja de este tipo de diseños es el ahorro de costes, a largo plazo, ya que el desarrollo se centra únicamente en una sola web y no hace falta desarrollar varias, para los diferentes SO que hay en el mercado (mínimo serían tres: iOS, Android y Windows Phone). Además, permite no duplicar contenido, mejorando el SEO de la misma, mejora gratamente que tus contenidos sean repartidos por redes sociales de una manera rápida y el mantenimiento es más sencillo.

En algunas páginas podemos encontrar ejemplos, artículos, recursos o patrones, como en: https://responsivedesign.is/

Aquí os dejo un manual bastante completo sobre HTML5: http://www.w3schools.com/html/html5_intro.asp

Es realmente importante conocer bastante este tipo de tendencias, ya que en la mayoría de los casos, y actualmente cada vez más, nuestras pruebas se centrarán en probar productos así, donde tendremos que adaptar nuestros casos de prueba, revisar más versiones, comprobar que los requisitos cumplen todas las posibilidades y sobre todo, realizar una gama de pruebas más compleja.

Personalmente, cuando realizo baterías de prueba para este tipo de productos, realizo diferentes casos de prueba por dispositivo o sistema operativo, ya que no en todos, aparecerán los mismos elementos, la funcionalidad no será la misma y quizá un módulo funciona correctamente en un dispositivo de gama alta pero no en uno de gama baja y viceversa (puede que aún no esté preparado para una versión tan moderna de sistema operativo).

Hace un tiempo escribí un artículo para la realización de pruebas en dispositivos móviles y que aplicaciones nos ayudan a realizarlas: Pruebas en dispositivos móviles. Este artículo nos resultará muy útil para realizar pruebas en bloque con  dispositivos y no tenerlos físicamente si no lo creemos conveniente. Además escribí otro artículo sobre pruebas de compatibilidad en diferentes navegadores, que nos aportará algo de luz sobre como realizar pruebas en responsive web design, ya que al fin y al cabo, estamos probando la “compatibilidad” del producto en diferentes dispositivos.