responsive web design

Hoy en día, a la hora de enfrentarse a un desarrollo de aplicación web, es muy común encontrarse con que uno de sus requisitos es poder visualizar la aplicación desde cualquier dispositivo capacitado o desde el mayor número posible de dispositivos. Es por ello, que es lógico plantearse realizar un estudio previo para ver qué técnica se adecúa de mejor manera a nuestro proyecto, y resolver alguno de los conflictos que se pueden presentar, como pueden ser:

  • Diferencias de interacción del usuario con la aplicación desde diferentes dispositivos (táctiles, con teclado, con ratón, etc).
  • Diferentes tamaños de resolución de pantalla.
  • Variaciones de capacidades entre unos dispositivos y otros. Por ejemplo: limitación en los recursos o incompatibilidades para poder visualizar cierto contenido.

 

APLICACIÓN WEB DISTINTA PARA CADA DISPOSITIVO

La solución según esta técnica, es desarrollar una aplicación para cada dispositivo. De manera que al intentar acceder a dicha aplicación, se produzca una detección del dispositivo y en ocasiones, del navegador. En función de ellos se enviará al cliente una versión de la aplicación u otra.

Esta opción presenta ciertas ventajas e inconvenientes:

Ventajas:

o   Optimizar al máximo el rendimiento más fácilmente dado que cada versión de la aplicación está centrada en un dispositivo en particular.

o   No tener que desarrollar un producto pensando en la adaptabilidad para otros dispositivos en términos de compatibilidad y capacidades.

Inconvenientes:

o   Tener que realizar un diseño e implementación de una versión de la aplicación para cada dispositivo o rango de dispositivos, lo cual amplía los costes.

o   En según qué casos, tener un diseño diferente de la interfaz de usuario para cada versión de la aplicación, puede ser una desventaja en cuestión de comodidad para el usuario.

o   El posicionamiento web (SEO) se hace más complicado debido a tener que indexar cada versión de la aplicación con los navegadores.

o   Las actualizaciones de las versiones deben hacerse de forma independiente.

RESPONSIVE WEB DESIGN

El diseño web adaptativo o adaptable (en inglés, Responsive Web Design) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en las hojas de estilo CSS, consigue adaptar el sitio web al entorno del usuario, adaptando, recolocando u ocultando el contenido.

El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en “A List Apart”, una publicación en línea especializada en diseño y desarrollo web.

Con una sola versión en HTML y CSS se cubren todas las resoluciones de pantalla, es decir, el sitio web creado estará optimizado para todo tipo de dispositivos: PCs, tabletas, teléfonos móviles, etc. Esto mejora la experiencia de usuario a diferencia de lo que ocurre, por ejemplo, con sitios web de ancho fijo cuando se acceden desde dispositivos móviles.

De esta forma se reducen los costes de creación y mantenimiento, pues se evita tener que desarrollar aplicaciones ad-hoc para versiones móviles, por ejemplo, una aplicación específica para móviles Android, otra para iPhone, etc.

Desde el punto de vista de la optimización de motores de búsqueda, sólo aparecería una URL en los resultados de búsqueda (también, por ejemplo, Google utiliza Googlebot-Mobile para distinguir páginas con diseño adaptativo), con lo cual se ahorran redirecciones y los fallos que se derivan de éstas. También se evitarían errores al acceder al sitio web en concreto desde los llamados “social links”, es decir, desde enlaces que los usuarios comparten en medios sociales tales como Facebook, Twitter, etc y que pueden acabar en error dependiendo de qué enlace se copió (desde qué dispositivo se copió) y desde qué dispositivo se accede.

Beneficios:

  • Reducción de costes. Se reducen los costes ya que solo es necesario desarrollar y mantener una sola versión de la aplicación.
  • Eficiencia en la actualización. La aplicación solo se debe actualizar una vez y se ve reflejada en todas las plataformas.
  • Mejora la usabilidad y conversiónResponsive Web Design aporta a la usabilidad y la conversión. Se han hecho estudios que demuestran que cuando se aprovecha toda la pantalla del visitante aumenta la conversión.
  • Impacto en el visitante. Este concepto, por ser nuevo, genera impacto en las personas que lo ven en acción, lo que permitirá asociar a la marca con creatividad e innovación.
  • Accesibilidad. Gracias a un diseño adaptable, es posible ofrecer una interfaz de usuario accesible a colectivos con disminución visual, por ejemplo, personas con visión reducida o con dificultades para distinguir letras o colores.

Conclusiones

Dadas las caracterísitcas de una técnica y otra, y dependiendo del proyecto que queramos desarrollar, podremos determinar cual de ellas utilizaremos. Cabe destacar que es posible aplicar ciertas características de la opción “aplicación web para cada dispositivo” junto con “Responsive Web Design”, como por ejemplo, mostrar o no algún contenido determinado o alguna funcionalidad de la aplicación según el dispositivo desde el que se visualice.

Más información:

http://www.ernestojimenez.net/art/responsive-web-design/

https://jbravomontero.wordpress.com/2012/01/29/diseno-web-adaptable-o-responsive-web-design-teatron/