Responsive o adaptive ¿qué es mejor para mi web?

Escrito por Carlos M. Cámara.

Fotografía de un teléfono móvil sobre un teclado

Nuestros sitios deben poder verse sin problemas en un móvil y entre todas las opciones ¿cómo elegir la que mejor se adapta a nuestro contenido?

Últimamente se ha impuesto la tendencia de tener un sitio responsive para que nuestros sitios se vean cómodamente en cualquier dispositivo y aunque a priori parece la mejor opción, merece la pena pararse a pensar si realmente es la mejor opción para nuestro sitio.

¿Qué es un diseño adaptive?

Un diseño adaptive es aquel que se realiza pensando exclusivamente en cómo quedará nuestro diseño en uno o varios dispositivos (por lo general móviles). En este tipo de diseños el servidor detecta el dispositivo que accede a la web y le envía un el contenido adaptado al mismo. Las ventajas de este tipo de diseño son:

  • Al enviar sólo contenido adaptado para el dispositivo, la velocidad de carga de la página mejorará al no enviar contenido innecesario y no obligar al dispositivo a cambiar cómo se muestra ese contenido.
  • Nos obliga a pensar específicamente la experiencia móvil que queremos que tengan nuestros usuarios y eso mejorará la experiencia móvil.
  • Podremos crear experiencias diferentes para distintos dispositivos.
  • Podemos crear tantos diseños como dispositivos queramos diferenciar, permitiéndonos tener en cuenta las limitaciones de cada dispositivo (evitar uso de JavaScript o Flash para modelos antiguos, por ejemplo)

La desventaja mayor de este método es que necesitaremos realizar un diseño extra por cada dispositivo por lo que se duplica el trabajo en el mejor de los casos y esto implica un encarecimiento del desarrollo.

¿Qué es un diseño responsive (RWD)?

Un diseño responsive (o RWD, de Responsive Web Design) es un diseño que es capaz de adaptarse al dispositivo con el que estamos navegando el sitio. En este tipo de diseños se envía el mismo contenido siempre y es el móvil, la tablet o el ordenador el que realiza el trabajo de adaptar la visualización a la pantalla, normalmente ayudados por javascript. Esta adaptación a la pantalla del dispositivo se suele realizar apilando las columnas o módulos que formen nuestro sitio formando una o dos columnas en la pantalla del dispositivo, mostrando primero las columnas más a la izquierda y finalmente las que estén más a la derecha de nuestro diseño. Las ventajas de este tipo de diseño son:

  • Sólo necesitaremos un único diseño para todo el sitio.
  • El diseño será el mismo para cualquier dispositivo por lo que no habrá usuarios que piensen que están en otro sitio si acceden con el móvil.
  • Los diseños responsive utilizan el tamaño de la pantalla del dispositivo para adaptar el contenido, por lo que una mayor número de dispositivos verán correctamente el sitio.
  • En general el coste de desarrollo de un sitio responsive es menor que el de un sitio adaptive.

La desventajas de esta aproximación son

  • no podremos definir una estrategia móvil independiente y en algunos casos tendremos que tomar decisiones de compromiso para que nuestros sitios se vean correctamente en varios sitios.
  • Los dispositivos antiguos no se adaptarán correctamente a estos diseños.
  • En el caso de acceso con móviles, estaremos sobrecargando la red del usuario al enviar muchos más datos de los que necesita el dispositivo para mostrar correctamente el sitio.

Entonces... ¿cuál elegir?

Para realizar la elección adecuada de cómo serán nuestros sitios móviles, lo mejor es pararse un poco a reflexionar sobre la experiencia móvil que queremos ofrecer a nuestros usuarios. En sitios de noticias o en un blog, un diseño responsive tiene mucho sentido ya que muestra en primer lugar el contenido relevante y debajo de éste va mostrando las columnas que adornan el sitio. En Gnumla por ejemplo, tenemos un diseño responsive, por lo que si lo veis con vuestros móviles veréis como los módulos que están en la columna de la derecha en la portada, van situándose debajo de los artículos. En el caso de que en vuestros blogs tengáis publicidad de pago por click sin embargo, de estar situada en esta columna, quedaría muy por debajo del contenido y a buen seguro os haría perder valiosos clicks.

Sin embargo, si consideramos un sitio como el directorio de extensiones de Joomla!, vemos que un diseño responsive puede tener menos sentido ya que por ejemplo, nos podría interesar el número de extensiones destacadas para mostrar tan sólo dos de éstos y hacer más visible la búsqueda  o mejorar el acceso a las categorías del directorio. En este caso tendría más sentido un diseño adaptive que mostrara una experiencia similar a una tienda de aplicaciones. Incluso podríamos evitar los enlaces de descarga de las extensiones ya que no tienen mucho sentido en un dispositivo móvil.

En cualquier caso, un diseño adaptive, como bien hemos apuntado antes, requiere un diseño para cada tipo de dispositivo, por lo que puede ser una opción demasiado costosa.

Mi opción preferida es tener un buen diseño responsive, que se vea correctamente en todos los dispositivos, junto con un diseño adaptive que permita que podamos personalizar la experiencia para algunos dispositivos concretos que sean muy usados por nuestros usuarios objetivo.

¿Qué opción créeis que es la mejor para vuestros diseños móviles?

Referencias

La imagen de cabecera del artículo es obra de Zwanzig en deviantArt

Sobre el autor
Carlos M. Cámara
Author: Carlos M. Cámara

Me apasiona el desarrollo web y trabajar para conseguir una web que cumpla con sus visitantes y sus propietarios y siempre estoy dispuesto a trabajar en proyectos interesantes. Mi especialidad es resolver problemas ;o).

Trabajo con Joomla! desde sus inicios y desde 2010 colaboro activamente con JEvents ayudando a otros usuarios a poder comunicar sus eventos y desarrollando partes del componente.

Contactar


Comentarios  

 
+1 #11 Enrique Flores 24-09-2013 21:29
RWD ha evolucionado en estos dos ultimos anos. Actualmente se dice y se practica la mejor manera de disenar un RWD, donde se incluye por ejemplo que tipo, tamano y resolucion dependiendo del dispositivo sera descargado. Asi como las fuentes y minizacion del codigo para desarrollar un RWD mas eficiente. El diseno adaptado ya no es tan efficiente y parte de esta maner de trabajar inteligentement e RWD lo a adoptado.
En general RWD a evolicionado en su manera de desarrollar la pagina basado en la optimizacion. Consequentement e considero que la comparacion ya no es aplicable en estos tiempos donde la tecnoligia evoluciona rapidamente y podemos ver que RWD es la tendencia.
Citar
 
 
0 #12 Enrique Flores 24-09-2013 21:37
Como dije en un comentario anterior. RWD a evolucionado rapidamente. Ahora se optimiza las imagines dependiendo del dispositivo. Es no solo "adaptar" la paginas dependiendo del target. Es planificar y hacer un poco mas de trabajo optimizando los elementos que influyen en las descargas.
Si una pagina es leida en un iPhone por ejemplo, la logica es imagenes con una resolucion y tamano diferentes al que se le envia a una computadora de escritorio, considerando el ancho de banda. Vivo en USA y en Lima Peru y entiendo igual que tu nuestras pobres velocidades a altos precios. RWD evolicionado es a mi juicio la tendencia
Citar
 
 
0 #13 Jose Liron 25-09-2013 01:20
Muy buena explicacion. Prefiero el Adaptive pero entiendo que el Responsive es suficiente y mas economico.

Saludos
Citar
 
 
0 #14 Carlos M. Cámara 30-09-2013 18:22
Hola Enrique, aunque es cierto que la tendencia es RWD y prácitamente se puede considerar que hoy día casi nadie opta por adaptive, lo cierto es que aun queda mucho para que RWD sea completamente óptimo y la detección de dispositivo sigue sin ser la mejor opción puesto que esta detección no siempre es eficaz y realmente es el tamaño de la pantalla quien marcará cómo se ven las imágenes en tu dispositivo.

En cualquier caso un esquema RWD con detección de dispositivo no deja de ser un desarrollo híbrido de RWD y adaptive que intenta aunar lo mejor de ambas aproximaciones ;).
Citar
 
 
0 #15 fotografiabogota 20-01-2014 21:59
Bueno en lo personal yo escogí para mi página web un diseño responsive, por qué? sencillo es una plantilla el tema se llama avada y realmente me pareció muy cómodo todos los días la reviso desde la table y me parece genial te dejo el link para que la revises y los demás la puedan ver.

http://www.fotografiabogota.com

Un saludo desde Bogotá - Colombia.
Citar
 
 
0 #16 Argentine Translator 09-04-2014 01:16
Gracias, Carlos por explicar este tema con tanta claridad. Hoy la tecnologia se encamina hacia los moviles. Es necesario que un sitio web pueda visualizarse en celulares.
Citar
 

Escribir un comentario

REGLAS APLICABLES A LOS MENSAJES
  • Los comentarios serán publicados una vez que hayan sido comprobados y aprobados por un administrador del sitio.
  • No están permitidos comentarios injuriosos o amenazadores.
  • No está permitido hacer spam.
  • Los enlaces que no vayan a sitios oficiales Joomla! o que no estén relacionados con el mensaje serán editados.