Diseño mobile-friendly vs Responsive Design

viewport

Actualmente existen más dispositivos móviles en el mundo que incluso personas. A diario, utilizamos Smartphones y tablets en nuestro día a día para consultar todo tipo de páginas web. Sabiendo esto, todo aquel que tenga una página web debe saber escoger en cómo mostrarse al mundo a través de los distintos dispositivos. Es aquí donde llega la gran pregunta: ¿apostar por un diseño mobile friendly o responsive design?

viewportDiseño mobile-friendly

Un diseño mobile-friendly es aquel que está diseñado para trabajar exactamente de la misma forma en dispositivos móviles como a través del ordenador. Esto significa que nada de la estructura cambia ni se adapta a los nuevos tamaños del dispositivo, sino que se ve exactamente con la misma composición que en el ordenador solo que con un tamaño más reducido.

En este caso, algunas de las características como la navegación están limitadas, por lo que a veces puede resultar complicado o incómodo moverse por un determinado portal que cuente con este tipo de diseño web. En definitiva, los sitios web que se basan en un diseño mobile-friendly son literalmente del mismo modo en todos los ámbitos, sin preocupaciones de usabilidad independientemente del dispositivo en el que se está viendo.

Características básicas del diseño mobile-friendly

  • Contenido estático
  • Navegación simple
  • Tamaño reducido
  • Nodependen deun sistemaoperativo móvilpara funcionar correctamente

Responsive design

El diseño web que llamamos responsive design es aquel al que responden las páginas web que tienen la capacidad de adaptarse o cambiar en función de las características del dispositivo en el que se proyectan. En este caso, tanto el texto como las imágenes cambian su forma de una plantilla basada en tres columnas, a otra con un formato de tan sólo una. No es necesario prescindir de las imágenes puesto que no interfieren en la vista del resto de información de la web, pues no se reduce el tamaño.

En el caso de ver una página web a través de nuestro ordenador, podemos saber si cuenta con un responsive design reduciendo el tamaño de la ventana del buscador y ver cómo el contenido se adapta a las nuevas medidas. Si la apariencia del texto, imágenes, menú y demás complementos cambia a medida que vamos haciendo pequeña la ventana, ese sitio es responsive.

Características básicas del diseño responsive design

  • Contenido dinámico que cambia y se adapta
  • Navegación condensada
  • Imágenes optimizadas
  • Márgenes adaptados y correcto espaciamiento
  • Dependen de sistemas operativos móviles que funcionen

¿Cómo elegir el diseño correcto?

La respuesta a esta pregunta dependerá del uso y la finalidad de la página web en cuestión. En el caso del responsive design podemos conseguir una experiencia móvil mucho más personalizada. Sin embargo, requiere de una experiencia previa, una planificación adecuada y algo más de presupuesto. En este caso, el responsive design es el más adecuado si detectamos que gran parte del tráfico de nuestra web proviene de dispositivos móviles (como mínimo el 35%) o bien si tenemos un sitio web complejo donde el contenido y algunas características son difíciles de utilizar en un dispositivo móvil.

Por otro lado, un diseño mobile-friendly nos permite conseguir una experiencia sencilla en páginas que no disponen de un contenido y unas características funcionales complejas.

A todo esto es importante tener en cuenta que desde hace unos días, Google está penalizando las páginas web que no cuentan con un diseño responsive y les está afectando a su posicionamiento web. Así pues, tal vez vale la pena optar por un modelo de responsive design y seguir teniendo visibilidad en los buscadores.

Share

Deja un comentario